App di shopping
Nel manuale di idee per app di shopping viene descritta un'app fittizia per Windows 8.1. Esaminando gli scenari presentati in questo argomento, puoi trovare ispirazione per la progettazione di un'app di shopping e scoprire come viene usato il linguaggio di progettazione Microsoft nell'app.
Codice di esempio disponibile: Tallan Inc. ha creato un'app di esempio molto interessante sulla base del manuale di idee per app di shopping. Puoi scaricare la loro app di esempio per esaminare un'implementazione reale delle funzionalità descritte in questo libro di idee e molto altro. Puoi scaricare l'app di shopping di esempio di Tallan qui.
Scenari per l'app di shopping
L'app di shopping descritta in questo argomento usa le funzionalità di design Microsoft per creare un'esperienza di shopping coinvolgente per gli utenti.
| Riquadri animati ed esplorazione | Ricerca e ridimensionamento delle finestre | Condivisione |
.png "immagine di riquadri animati ed esplorazione") |
.png "immagine di ricerca") |
.png "immagine di condivisione") |
Attirar l'attenzione degli utenti sul contenuto dell'app
Puoi usare il linguaggio di design Microsoft per creare un'esperienza di esplorazione occasionale divertente, semplice ed efficace. Puoi anche usare i riquadri animati per attirare l'attenzione degli utenti sulla tua app. Segui le indicazioni di questo scenario per scoprire come rendere coinvolgente la tua app di shopping.
.png "immagine di riquadri animati ed esplorazione")
Matt Berg usa il suo tablet Windows 8.1 sull'autobus nel tragitto tra casa e ufficio.
|
Un riquadro animato avverte Matt della disponibilità di nuovi capi di abbigliamento della collezione autunnale. Matt è interessato, quindi fa clic sul riquadro per accedere all'app.
|
Matt ha bisogno di una nuova giacca, quindi fa clic sulla categoria appropriata.
|
La visualizzazione della categoria viene disposta in orizzontale, con i dettagli di tutte le opzioni mostrati nello stesso pannello Canvas. Matt può esplorare il contenuto senza la necessità di accedere a una particolare gerarchia.
|
Matt avvicina le dita per attivare lo zoom semantico, che gli consente di visualizzare rapidamente ed esplorare l'elenco di articoli.
|
Dopo aver fatto clic sulla sezione delle giacche, Matt seleziona un modello per visualizzarlo o e quindi lo aggiunge al carrello.
|
Matt completa lo shopping acquistando la giacca insieme a una camicia che aveva aggiunto al carrello in precedenza.
|
.png "immagine di riquadri animati ed esplorazione")
.png "immagine di riquadri animati ed esplorazione")
.png "immagine di riquadri animati ed esplorazione")
.png "immagine di riquadri animati ed esplorazione")
.png "immagine di riquadri animati ed esplorazione")
.png "immagine di riquadri animati ed esplorazione")
.png "immagine di riquadri animati ed esplorazione")
Riepilogo dello scenario con riquadri animati ed esplorazione
In questo scenario usiamo casi che sfruttano gli elementi di progettazione seguenti:
- I riquadri animati attirano gli utenti nell'app visualizzando informazioni pertinenti.
- Il contenuto è evidenziato nell'app senza riquadri e immerge l'utente nell'esperienza che gli interessa.
Per informazioni sui riquadri animati e lo zoom semantico, vedi gli argomenti seguenti:
- Indicazioni sui riquadri animati
- Esempio di riquadro animato
- Indicazioni sullo zoom semantico
- Esempio di zoom semantico (C#/VB/C++)
- Esempio di zoom semantico (JavaScript)
Per informazioni su come scegliere il miglior modello di esplorazione per la tua app, vedi Modelli di esplorazione.
Per una dimostrazione pratica, vedi l'argomento Modello di esplorazione semplice incluso nella serie Funzionalità delle app dall'inizio alla fine.
Stimolare il coinvolgimento dell'utente
Puoi usare il linguaggio del design Microsoft per coinvolgere gli utenti quando sono pronti all'acquisto aggiungendo una casella di ricerca, implementando il contratto Ricerca e consentendo il multitasking, nonché progettando app che funzionano bene anche se ridimensionate su larghezze ridotte.
.png "immagine di riquadri animati ed esplorazione")
Jon Rodman usa il suo tablet Windows 8.1 per esplorare un blog sullo stile.
|
Da Internet Explorer o da qualsiasi altra app Jon può usare il pulsante di accesso rapido Cerca situato a destra e ricercare una giacca simile.
|
|
Jon seleziona l'app "Head to Toe", che visualizza i risultati della ricerca per il termine immesso.
|
Jon usa un filtro per restringere i risultati della ricerca in base al prezzo. Quindi seleziona un articolo.
|
Jon ridimensiona l'app a sinistra in modo da confrontare l'articolo con la giacca del blog. Soddisfatto della scelta, Jon aggiunge la giacca al carrello.
|
Mentre l'app è ancora a larghezza ridotta, Jon decide di completare l'acquisto.
|
.png "immagine di riquadri animati ed esplorazione")
.png "immagine di riquadri animati ed esplorazione")
.png "immagine di riquadri animati ed esplorazione")
.png "immagine di riquadri animati ed esplorazione")
.png "immagine di riquadri animati ed esplorazione")
.png "immagine di riquadri animati ed esplorazione")
.png "immagine di riquadri animati ed esplorazione")
Riepilogo su come stimolare il coinvolgimento dell'utente
In questo scenario usiamo casi che sfruttano gli elementi di progettazione seguenti:
- Il contratto Search inserisce la tua app nell'elenco di potenziali clienti target quando un utente intende dedicarsi allo shopping.
- Un'app che funziona bene a larghezze ridotte consente ai clienti di esplorare e confrontare il contenuto con altre app e siti Web.
Per informazioni sulla ricerca e sulle dimensioni delle finestre, vedi gli argomenti seguenti:
- Indicazioni sulla ricerca
- Esempio di ricerca
- Indicazioni sulle dimensioni delle finestre
- Indicazioni sul layout stretto
Connettere gli utenti con la condivisione
Puoi usare il linguaggio di design Microsoft per connettere gli utenti ad altre app, contratti o social network.
.png "immagine di riquadri animati ed esplorazione")
David Hamilton ha appena acquistato una nuova giacca. Dopo aver inoltrato l'ordine, viene invitato a condividere la notizia.
|
David usa il contratto Condivisione per condividere il codice promozionale con i suoi amici.
|
.png "immagine di riquadri animati ed esplorazione")
.png "immagine di riquadri animati ed esplorazione")
Riepilogo su come connettere gli utenti con la condivisione
In questo scenario usiamo casi che sfruttano gli elementi di progettazione seguenti:
- Puoi inserire il contenuto in un'origine di condivisione e Windows 8.1 lo connetterà ad altre app, e-mail e social network.
- Puoi inserire la tua app in una destinazione di condivisione e ricevere contenuto, link o qualsiasi altro tipo di dati strutturati.
Per informazioni sulla condivisione, vedi gli argomenti seguenti:
- Indicazioni sulla condivisione
- Esempio di origine di condivisione
- Esempio di destinazione di condivisione
Presentazione delle app di Windows Store
Linee guida per l'esperienza utente delle app di Windows Store
Indicazioni sui riquadri animati
Esempio di zoom semantico (C#/VB/C++)
Esempio di zoom semantico (JavaScript)
Indicazioni sullo zoom semantico
Indicazioni sulle dimensioni delle finestre
Indicazioni sul layout stretto
Esempio di origine di condivisione