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 esplorazioneRicerca e ridimensionamento delle finestreCondivisione
immagine di riquadri animati ed esplorazioneimmagine di ricercaimmagine 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.

immagine di riquadri animati ed esplorazione

Matt Berg usa il suo tablet Windows 8.1 sull'autobus nel tragitto tra casa e ufficio.

immagine di riquadri animati ed esplorazione

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.

immagine di riquadri animati ed esplorazione

Matt ha bisogno di una nuova giacca, quindi fa clic sulla categoria appropriata.

immagine di riquadri animati ed esplorazione

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.

immagine di riquadri animati ed esplorazione

Matt avvicina le dita per attivare lo zoom semantico, che gli consente di visualizzare rapidamente ed esplorare l'elenco di articoli.

immagine di riquadri animati ed esplorazione

Dopo aver fatto clic sulla sezione delle giacche, Matt seleziona un modello per visualizzarlo o e quindi lo aggiunge al carrello.

immagine di riquadri animati ed esplorazione

Matt completa lo shopping acquistando la giacca insieme a una camicia che aveva aggiunto al carrello in precedenza.

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:

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.

immagine di riquadri animati ed esplorazione

Jon Rodman usa il suo tablet Windows 8.1 per esplorare un blog sullo stile.

immagine di riquadri animati ed esplorazione

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.

immagine di riquadri animati ed esplorazione

immagine di riquadri animati ed esplorazione

Jon seleziona l'app "Head to Toe", che visualizza i risultati della ricerca per il termine immesso.

immagine di riquadri animati ed esplorazione

Jon usa un filtro per restringere i risultati della ricerca in base al prezzo. Quindi seleziona un articolo.

immagine di riquadri animati ed esplorazione

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.

immagine di riquadri animati ed esplorazione

Mentre l'app è ancora a larghezza ridotta, Jon decide di completare l'acquisto.

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:

Connettere gli utenti con la condivisione

Puoi usare il linguaggio di design Microsoft per connettere gli utenti ad altre app, contratti o social network.

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.

immagine di riquadri animati ed esplorazione

David usa il contratto Condivisione per condividere il codice promozionale con i suoi amici.

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:

Argomenti correlati

Presentazione delle app di Windows Store
Linee guida per l'esperienza utente delle app di Windows Store
App di shopping di esempio
Esempio di riquadro animato
Indicazioni sui riquadri animati
Esempio di zoom semantico (C#/VB/C++)
Esempio di zoom semantico (JavaScript)
Indicazioni sullo zoom semantico
Esempio di ricerca
Indicazioni sulla ricerca
Indicazioni sulle dimensioni delle finestre
Indicazioni sul layout stretto
Esempio di origine di condivisione
Esempio di destinazione di condivisione
Indicazioni sulla condivisione

 

 

Mostra:
© 2014 Microsoft. Tutti i diritti riservati.