App di Windows
Comprimi il sommario
Espandi il sommario

Personalizzazione dell'app

Esaminiamo alcune delle numerose possibilità a disposizione di progettisti e sviluppatori di app per personalizzare in modo creativo le app di Windows Store.

Perché inserire il tuo marchio nell'app?

Un marchio definisce le qualità per cui un'azienda vuole essere conosciuta. Quando progetti le app di Windows Store, è importante fare in modo che esse esprimano l'essenza del tuo marchio. Proprio come un marchio identifica un'azienda, il tuo marchio inserito nell'app di Windows Store può renderla diversa da tutte le altre app. Vediamo un esempio.

Ecco un esempio di app di Windows Store prima della personalizzazione:

Esempio di app di Windows Store per Contoso Bakery, prima della personalizzazione.
L'esempio di Contoso Bakery illustra quale può essere l'aspetto di un'app di una pasticceria che usi i principi di progettazione Microsoft. In questo esempio, la scelta di posizionare il contenuto in primo piano è valida, ma il marchio della pasticceria non viene comunicato in modo efficace.

 

Ecco la stessa app di esempio dopo la personalizzazione:

Esempio di app di Windows Store per Contoso Bakery, dopo la personalizzazione.
In questa versione dell'app Contoso Bakery alcune modifiche evidenti rendono l'app più interessante. Incorporando altri elementi oltre al marchio della pasticceria, il contenuto dell'app risulta più convincente e, in generale, esprime l'essenza di questo tipo di azienda.

 

Come incorporare il marchio

Una serie di elementi visivi mette il marchio in evidenza. Una tavolozza dei colori esclusiva, la grafica, il layout e lo stile della fotografia, ad esempio, contribuiscono a creare un marchio ripetibile e riconoscibile in svariati elementi multimediali, come app di Windows Store, Web, stampa e broadcast.

Immagina che questi elementi visivi siano dispositivi di regolazione e indicatori da modificare tramite il codice per creare un'app di Windows Store dall'aspetto unico.

Elemento visivoDescrizione
Colori

Il colore è un attributo chiave per esprimere l'identità del marchio. Applica il colore principale associato al marchio in modo da comunicare ai clienti che questa app è prodotta dalla tua azienda.

Grafica

Usa la grafica per rafforzare il marchio caratterizzando la presentazione del contenuto della tua app. Se usata in modo eccessivo, però, la grafica può interferire con il flusso del contenuto e fungere da semplice decorazione o da elemento di distrazione.

Immagini

Anche le illustrazioni e le fotografie devono riflettere il tuo marchio. Usa le stesse immagini e lo stesso stile di altre comunicazioni o siti Web dell'azienda.

Griglia

Il sistema della griglia delle app di Windows Store consente di unificare gli elementi visivi nella presentazione dell'app. La griglia allinea l'interfaccia utente dell'app con marchio con quella del resto di Windows.

Layout

La disposizione degli elementi visivi per tutte le pagine deve essere appropriata al tuo marchio. Devi inoltre impegnarti a mantenere la coerenza tra diversi tipi di pagina e contenuto.

Logo

Usa il logo per permettere una rapida identificazione della tua app e il riconoscimento del marchio.

Tipografia

I caratteri tipografici sono un elemento essenziale delle app di Windows Store. La scelta giusta in tal senso può rivelarsi efficace per il marchio quanto il colore, il logo o il layout, quindi valuta con attenzione quali caratteri usare.

 

Esempio di app line-of-business

La personalizzazione delle app line-of-business (LOB) è importante sia dal punto di vista commerciale che aziendale. Questo esempio dimostra come è possibile inserire elementi di personalizzazione in un'app commerciale e aziendale per una società di servizi espressi.

Elementi del marchio aziendale

Fabrikam Worldwide Logistics offre tre livelli di servizi espressi in ambito internazionale. I clienti target sono piccole imprese con l'esigenza di preparare e gestire facilmente le spedizioni. I messaggi chiave per i clienti sono spedizioni globali affidabili e transazioni senza intoppi.

Elemento del marchioDescrizione

Marchio principale per l'esempio di app di Windows Store Fabrikam Worldwide Logistics

Il marchio principale comunica l'impegno nel fornire servizi globali affidabili tramite gli elementi grafici, ovvero la mappa e la striscia.

Loghi per l'esempio di app di Windows Store Fabrikam Worldwide Logistics

Preceduto dal marchio principale, il logo di ogni servizio rappresenta i tre livelli di servizi offerti.

Elementi del marchio per l'esempio di app di Windows Store Fabrikam Worldwide Logistics

Gli elementi del marchio, come la linea punteggiata e la mappa, usati negli imballaggi vengono riutilizzati nella progettazione dell'app per creare un progetto grafico di personalizzazione coerente.

 

Creazione di una spedizione

Una piccola impresa cliente accede al suo account per rinnovare una spedizione.

Marchio della pagina di accesso completa di intestazione per l'esempio di app di Windows Store Fabrikam Worldwide Logistics
I colori, la grafica e il logo vengono riportati nelle intestazioni e nelle pagine come elementi del marchio.

 

Nella pagina dell'account, i colori, la grafica (la striscia e la linea punteggiata) e i caratteri tipografici richiamano il marchio principale. L'identità del cliente compare in co-branding nell'intestazione.

Pagina di Coho Craftsman con co-branding dell'esempio di app di Windows Store Fabrikam Worldwide Logistics.
Il co-branding del cliente è ispirato dalle scelte tipografiche nel marchio principale e usa il tipo di carattere Serif Constantia per il titolo e il tipo di carattere Sans-Serif Corbel nel resto dell'app.

 

La pagina delle transazioni usa un modello di esplorazione semplice. L'utente può eseguire una panoramica immediata su ogni sezione e modificare le informazioni.

Modello di esplorazione semplice dell'esempio di app di Windows Store Fabrikam Worldwide Logistics che mostra una panoramica orizzontale della pagina

Modello di esplorazione semplice dell'esempio di app di Windows Store Fabrikam Worldwide Logistics che mostra una panoramica orizzontale del lato sinistro della pagina

Modello di esplorazione semplice dell'esempio di app di Windows Store Fabrikam Worldwide Logistics che mostra una panoramica orizzontale della parte centrale della pagina

Modello di esplorazione semplice dell'esempio di app di Windows Store Fabrikam Worldwide Logistics che mostra una panoramica orizzontale del lato destro della pagina

L'utente può anche passare velocemente alla visualizzazione dello zoom semantico dalla pagina delle transazioni per accedere a una cronologia di tutte le transazioni con informazioni di riepilogo.

Modello di esplorazione semplice dell'esempio di app di Windows Store Fabrikam Worldwide Logistics che mostra lo zoom semantico in visualizzazione ridotta

Modello di esplorazione semplice dell'esempio di app di Windows Store Fabrikam Worldwide Logistics che mostra una panoramica dello zoom semantico in visualizzazione ridotta
Gli elementi del marchio, come colori, grafica, logo dei servizi e caratteri tipografici, vengono usati con coerenza per comunicare l'immagine del business.

 

L'utente può spostarsi su altre categorie tramite la barra di spostamento.

Barra di spostamento dell'esempio di app di Windows Store Fabrikam Worldwide Logistics

Consegna di una spedizione

Un autista usa l'app per la consegna delle spedizioni ai clienti. Grazie alla progettazione su due colonne che mostra l'inventario a sinistra e il contenuto a destra, l'autista può facilmente accedere alle informazioni dettagliate su una spedizione. Gli elementi del marchio, come la striscia e i controlli comuni, sono utilizzati con coerenza in tutta l'app.

Pagina a due colonne dell'esempio di app di Windows Store Fabrikam Worldwide Logistics contenente inventario e mappa

All'arrivo a destinazione, la colonna a destra mostra i dettagli in un elenco scorrevole verticale. Sia l'elenco dell'inventario che quello del contenuto dettagliato scorrono nella stessa direzione.

Pagina a due colonne dell'esempio di app di Windows Store Fabrikam Worldwide Logistics contenente elenco dell'inventario e contenuto dettagliato
Per la grafica informativa che permette all'autista di individuare la spedizione all'interno del camion viene usato lo stesso colore del marchio delle altre parti dell'app.

 

Quando l'autista richiede la firma del cliente, l'app mostra la pagina della firma in una visualizzazione verticale ed espone la barra di spostamento con il marchio. L'autista può passare facilmente il dispositivo al cliente nella visualizzazione verticale.

Pagina della firma dell'esempio di app di Windows Store Fabrikam Worldwide Logistics con orientamento verticale
La richiesta della firma è un momento cruciale per gli scopi della personalizzazione. L'utente si interfaccia infatti con l'app aziendale e il marchio.

 

Dopo la raccolta della firma, l'app mostra le spedizioni rimanenti e una rappresentazione grafica dello stato di avanzamento.

Pagina dell'elenco dell'inventario dell'esempio di app di Windows Store Fabrikam Worldwide Logistics con orientamento verticale

Co-branding dell'app

L'uso congiunto di due o più marchi viene definito co-branding. Tieni presenti le domande seguenti durante la progettazione di un'app destinata ad accogliere più marchi:

  • Qual è il marchio leader per le comunicazioni?
  • Quale ruolo svolge il marchio di supporto nelle comunicazioni?

Un'app di Windows Store che non offre risposte chiare a queste domande corre il rischio di creare confusione nei clienti e diluire, o affievolire, la forza del marchio.

Co-branding nell'esempio di app di Windows Store Fabrikam Worldwide Logistics

L'esempio di Fabrikam affronta il co-branding rinforzando il marchio tramite un'implementazione coerente degli elementi visivi. Ad esempio, i colori, la grafica, il layout e i caratteri tipografici del marchio Fabrikam compaiono in tutta l'app e rispettano un set limitato di variazioni stilistiche. Ogni pagina dell'app comunica chiaramente che l'app è fornita da Fabrikam.

Per comunicare che il marchio di Coho Craftsman è secondario rispetto a quello principale, il logo, i caratteri tipografici e l'immagine di Coho Craftsman si integrano nel layout di Fabrikam. Puoi immaginare, ad esempio, come un altra piccola impresa partner di Fabrikam potrebbe integrarsi nell'area attualmente occupata da Coho Craftsman.

Co-branding nell'esempio di app di Windows Store Fabrikam Worldwide Logistics

In questo esempio compaiono anche altri marchi. Le società di carte di credito a sinistra della pagina compaiono come marchi di livello inferiore, in parte a causa delle piccole dimensioni, del posizionamento specifico del contenuto e di un uso limitato del colore. Sul lato destro della pagina, il marchio del produttore di articoli di abbigliamento viene visualizzato con un logo monocromatico ridotto di dimensioni e adattato alle caratteristiche stilistiche del marchio principale. In tutti i campi, gli elementi visivi sono stati modificati in modo da rappresentare con chiarezza i marchi di supporto, anche se non in modo pronunciato come il marchio principale.

Esempi che richiamano marchi unici.

Ecco alcuni esempi che mostrano come ogni elemento visivo aiuti a suscitare emozioni e sensazioni diverse. Le descrizioni di ogni elemento visivo forniscono dettagli specifici su come è stato creato il layout e perché è importante.

Contoso Downtown Café

Esempio di app di Windows Store per Contoso Downtown Café, che mostra come usare il colore, la griglia, il layout e la tipografia per rappresentare il marchio.
Contoso Downtown Café è un marchio noto per la sua autenticità. La sua specialità sono i piatti preparati a mano e le bevande fatte in casa. In questo esempio, colore, griglia, layout e tipografia sono i principali elementi visivi usati per richiamare il marchio.

 

Tavolozza dei colori di esempio per personalizzare un'app di Windows Store.Colori   Colori caldi nelle tonalità del grigio scuro, bianco sporco e rame conferiscono a questo design un aspetto forte. La tavolozza di colori caldi richiama gli stessi colori del pane, di una minestra o di un pasticcino fatti in casa.
Griglia di esempio per personalizzare un'app di Windows Store.Griglia   In questo esempio, il contenuto spezza volutamente la griglia. Poiché il contenuto del menu è l'elemento principale per questo marchio, il margine superiore è stato ridotto in modo da lasciare più spazio al menu. Il margine sinistro è stato adattato in modo che il nome della società, il testo introduttivo e le informazioni sull'ubicazione risultino più centrate e lascino maggiore spazio al contenuto. Tutte queste deviazioni sono state applicate in modo coerente anche in tutte le altre pagine dell'app.
Layout di esempio per personalizzare un'app di Windows Store.Layout   Il design è concepito come quello di un menu, perché è proprio il menu che spinge le persone a frequentare questo ristorante. Come i panini e gli altri piatti del menu, anche il layout evoca la genuinità del locale. Il colore biancastro dello sfondo richiama la carta, la tonalità è invitante e il contenuto è ordinato, con righe di separazione verticali e un deciso allineamento a sinistra del testo.
Tipografia di esempio per personalizzare un'app di Windows Store.Tipografia   Il carattere tipografico principale usato in questo design è Copperplate Gothic Bold, che conferisce al nome della società un aspetto unico e ricorda un intaglio a mano su legno. Gli altri caratteri tipografici usati sono Script MT Bold e Segoe UI. Il tipo di carattere script è usato in modo limitato nell'intestazione del menu e richiama la scrittura a mano. Segoe UI è usato nel testo del corpo per facilitare la leggibilità delle voci del menu.

 

Marchio Contoso French Bakery

Esempio di app di Windows Store per Contoso French Bakery, che mostra come usare il colore, il layout e la fotografia per rappresentare il marchio.
Contoso French Bakery è un marchio noto per la sua capacità di soddisfare i clienti. Per molti, infatti, è la meta preferita per appagare la propria golosità di dolci e commettere piccoli peccati di gola. In questo esempio, colori, immagini e layout sono gli elementi visivi usati per richiamare il marchio.

 

Tavolozza dei colori di esempio per personalizzare un'app di Windows Store.Colori   Una tavolozza di due soli colori, marrone e rosa, è sufficiente per far pensare ai clienti a una pasticceria. Il marrone è il colore primario, che fa pensare al cioccolato, e il rosa è un colore principale che richiama le torte e i biscotti glassati. Indipendentemente dai sapori che i due colori evocano, sono entrambi significativi per il marchio. Il tono neutro del marrone costituisce uno sfondo intenso su cui far risaltare la fotografia a colori e la luminosità del rosa evidenzia parti specifiche del contenuto.
Immagine di esempio per personalizzare un'app di Windows Store.Immagini   La fotografia è l'elemento principale di questo design. È evidente che sono stati necessari tempo ed esperienza perché ogni immagine suscitasse il desiderio di cibo. Di conseguenza, le immagini dei prodotti di pasticceria rendono chiaro quale sia il settore del marchio. Le immagini sono anche usate per definire le categorie di contenuto.
Layout di esempio per personalizzare un'app di Windows Store.Layout   Rispetto ai design delle app di Windows Store standard, questo esempio ha un aspetto diverso. La differenza più evidente è l'assenza di riquadri quadrati. I riquadri e la griglia esistono ancora, ma le immagini sono state stilizzate in modo da imitare gli oggetti normalmente presenti in una pasticceria, ad esempio le forme rotonde e ondulate di un una scatola di dolci.

 

Marchio Contoso Sandwich Truck

Esempio di app di Windows Store per Contoso Sandwich Truck, che mostra come usare la grafica, la griglia e il logo per rappresentare il marchio.
Contoso Sandwich Truck è un marchio noto per la sua cortesia, informalità e ampia distribuzione. La forza di questo marchio è un gruppo di eccellenti cuochi e una flotta di camioncini pronti a soddisfare chi è in movimento. In questo esempio, grafica, griglia e logo sono gli elementi visivi usati per richiamare il marchio.

 

Grafica di esempio per personalizzare un'app di Windows Store.Grafica   Le voci del menu continuano a essere l'elemento principale e non sono soverchiate da un uso eccessivo della grafica che, tuttavia, ricopre un ruolo importante a sostegno del marchio. Le stelle, ad esempio, implicano un sistema di valutazione da parte dei clienti, il colore e le forme ricordano la segnaletica stradale cittadina e le informazioni relative alle ubicazioni risaltano su una casella scura in cui è incorporata l'immagine di una strada asfaltata.
Griglia di esempio per personalizzare un'app di Windows Store.Griglia   La griglia standard comprende tutti gli aspetti di questo design e imita una struttura simile a quella di una vista dall'alto di un carta stradale cittadina. L'esempio si distingue per il contenuto e la grafica a pagina intera e sovrapposti che mettono alla prova questa presentazione ordinata. La presentazione generale del contenuto è in grassetto e diretta perché l'obiettivo è quello di attirare l'attenzione di persone in movimento e che devono decidere rapidamente.
Logo di esempio per personalizzare un'app di Windows Store.Logo   In questo esempio non viene usato un logo aziendale. Il nome della società appare nel testo al posto del logo. In questo esempio vediamo per la prima volta il nome della società incorporato nella composizione generale. Il logo o il nome non è semplicemente allineato in alto a sinistra.
Tavolozza dei colori di esempio per personalizzare un'app di Windows Store.Colori   Il nero e il giallo sono usati come colori principali. Dal punto di vista della personalità, il nero e il giallo sono colori molto presenti nelle città, ad esempio per la segnaletica e i cartelli stradali.

 

Esempio che rafforza il marchio in tutte le pagine dell'app

Personalizzare con il marchio tutte le pagine dell'app, anche quelle secondarie e ricche di contenuti, è importante quanto inserire il marchio nella pagina di destinazione. In questo esempio abbiamo utilizzato l'app di una squadra di calcio inesistente per dimostrare come inserire il marchio in tutte le pagine dell'app.

Squadra di calcio professionistico Fabrikam FC

I sostenitori della squadra di calcio professionistico Fabrikam FC vogliono poter leggere tutte le notizie e i retroscena sulla loro squadra del cuore, conoscere tutti i dettagli sui loro beniamini e visualizzare le ultimissime informazioni ovunque si trovino. Il design della pagina di destinazione riflette il carattere deciso e il dinamismo del marchio.

Pagina di destinazione dell'esempio di app di Windows Store del Fabrikam FC

I colori, lo stile tipografico e la grafica sottolineano il carattere deciso e il dinamismo del marchio.

 

Quest'app usa un modello di esplorazione semplice. Per passare ad altre visualizzazioni dell'app agli utenti basta scorrere rapidamente la barra di spostamento.

Barra di spostamento dell'esempio di app di Windows Store del Fabrikam FC

I colori e il logo vengono riportati nella barra di spostamento dell'app come elementi del marchio. I colori saturi della divisa si stagliano contro lo sfondo scuro, creando un forte contrasto che suggerisce una personalità decisa, mentre nell'intera app il colore giallo sta a indicare l'interattività.

 

Usando la barra di spostamento, gli utenti possono visualizzare i giocatori.

Pagina di un giocatore nell'esempio di app di Windows Store del Fabrikam FC

I tipi di carattere utilizzati sono gli stessi in tutte le visualizzazioni dell'app. I caratteri tipografici sans serif si abbinano perfettamente all'energia e alla personalità espresse dalla squadra. Infine, grazie all'uso delle sole lettere maiuscole, determinate etichette di testo hanno più l'aspetto di elementi grafici.

 

Per spostarti rapidamente su un determinato giocatore, riduci la visualizzazione con zoom semantico di questa pagina.

Zoom semantico nell'esempio di app di Windows Store del Fabrikam FC

Le foto dei giocatori in azione spezzano la griglia, creando un layout molto dinamico e movimentato. Sono utilizzate nella pagina della squadra e in quella di destinazione.

 

Esempio di app di Windows Store del Fabrikam FC con icone e grafica per rafforzare il marchio.

L'uso di semplici icone e grafica migliora l'aspetto e l'accessibilità dei contenuti, stimolando gli utenti a interagire e a spostarsi all'interno dell'app.

 

Scopri le app di Windows Store
Linee guida per l'esperienza utente
Modelli d'uso dei comandi
Modelli di esplorazione
Definizione del layout di una pagina dell'app
Linee guida per le dimensioni delle finestre e il ridimensionamento in base allo schermo
Linee guida per i tipi di carattere
Come personalizzare ListView
Raccolta

 

 

Mostra:
© 2017 Microsoft