App di Windows
Comprimi il sommario
Espandi il sommario

Creazione di entusiasmanti app di Windows Store

Le app di Windows Store sono il punto focale dell'esperienza utente in Windows 8 e, se ben realizzate, hanno in comune un importante insieme di tratti che garantisce un'esperienza utente uniforme, elegante e accattivante. Di seguito vengono presentate le otto caratteristiche per ottenere app di Windows Store ottimali.

App di Windows Store

Guarda il video

Questo video spiega come applicare i principi dello stile di progettazione Microsoft per creare app entusiasmanti. Dopo aver guardato il video, continua a leggere il riepilogo di ciò che rende eccellente un'app di Windows Store.

|

Usa al meglio gli stili di progettazione Microsoft

I contenuti sono l'essenza delle app di Windows Store e nella progettazione è fondamentale anteporli ai riquadri. Tutti gli altri elementi,—o riquadri—, sono accessori e servono a permettere l'interazione con il contenuto o a presentarlo.

Presentazione dei contenuti

Progetta l'interfaccia utente dell'app per presentare i contenuti e rendila accessibile per gli utenti con esigenze particolari.

Layout pulito e aperto

  • Riduci al minimo gli elementi di distrazione e aiuta gli utenti a immergersi completamente nei contenuti lasciando sullo schermo solo gli elementi indispensabili.
  • Dai un aspetto arioso ai contenuti, eliminando linee, riquadri ed effetti grafici non necessari, come sfocature e sfumature. Usa spazio libero per incorniciare il contenuto.
  • Limita la presenza sullo schermo di riquadri di navigazione permanenti, come le schede. Lascia che gli utenti si concentrino sul contenuto corrente ed evita di distrarli con i riquadri.

Gerarchia di informazioni chiara   Il linguaggio di progettazione Microsoft si basa su una tipografia pulita e attraente, che aiuta gli utenti a capire la gerarchia dei contenuti. Usa la tipografia piuttosto che linee e riquadri per definire strutture e gerarchie.

  • Usa in maniera coerente le dimensioni, lo spessore e il colore del testo per comunicare informazioni sulla rilevanza di un contenuto. La gamma delle variazioni deve essere limitata, in modo che gli utenti vedano facilmente come il contenuto si colloca all'interno della gerarchia complessiva. Vedi le linee guida per testo e tipografia.
  • Nel foglio di stile predefinito trovi la gamma di dimensioni e formati previsti per il testo.

Sagoma in stile Windows   Quando gli utenti si concentrano sul contenuto, è proprio la composizione di quest'ultimo a dare un'identità all'applicazione. Una sagoma familiare aiuta gli utenti a riconoscere istintivamente che hanno di fronte un'applicazione di Windows Store e non, ad esempio, una pagina Web.

  • Allineati alla sagoma in stile Windows per suscitare un senso di familiarità e sicurezza.
  • Per creare il layout puoi partire dai modelli di progetto Applicazione griglia o Applicazione divisa di Visual Studio. Vedi le linee guida relative a Visual Studio e ai Modelli di progetto JavaScript per app di Windows Store.

Interazione con i contenuti

Scegli interazioni che consentano all'utente di avere la situazione sotto controllo e lo facciano sentire sicuro.

Interazioni dirette  L'interazione più naturale con il contenuto è quella diretta, senza la mediazione dei riquadri.

  • Quando è possibile, consenti agli utenti di eseguire azioni manipolando direttamente il contenuto piuttosto che indirettamente, attraverso controlli.

    Ad esempio, fai in modo che l'utente possa toccare un elemento per visualizzarne i dettagli, selezionarlo con lo scorrimento rapido, spostarlo trascinandolo o visualizzarne l'intero contesto con lo zoom indietro— invece di aggiungere pulsanti sullo schermo per eseguire queste azioni.

  • Usa lo zoom semantico, un modo veloce, fluido e pertinente per scorrere lunghi elenchi di contenuti.
  • Tieni in considerazione il modo in cui le utilità per la lettura dello schermo e gli utenti che dipendono dalla tastiera interagiscono con i contenuti.

Sfrutta i bordi   Alcune azioni non possono essere eseguite con la manipolazione diretta. In questi casi scegli la visualizzazione contestuale dei comandi per renderli disponibili solo quando serve, evitando di ingombrare inutilmente la tela. Usa il bordo dello schermo o del dispositivo in modo che gli utenti trovino agevolmente i comandi.

  • Colloca i comandi nella barra dell'app, che viene visualizzata quando occorre mediante scorrimento rapido dal bordo superiore o inferiore e può essere chiusa al completamento dell'operazione.
  • Usa i pulsanti di accesso rapido, che vengono visualizzati quando occorre mediante scorrimento rapido dal bordo destro e rendono disponibili i comandi Cerca, Condividi, Dispositivi o Impostazioni.
  • Evita di posizionare comandi permanenti sullo schermo e di visualizzare punti di ingresso duplicati per i contratti a cui si accede con i pulsanti di accesso rapido.
  • Tieni sempre conto della comodità d'uso durante la progettazione e colloca le superfici di interazione di uso frequente in prossimità dei bordi.

Per altre informazioni, vedi Progettazione dei comandi.

Crea applicazioni veloci e fluide

Fai in modo che l'applicazione risponda alle azioni dell'utente in modo rapido e adeguatamente energico.

Animazioni mirate  

Il movimento è una parte essenziale del linguaggio di progettazione Microsoft. Un'animazione ben concepita dà vita all'applicazione e arricchisce e impreziosisce l'esperienza.

  • Usa animazioni significative per collegare visivamente le esperienze e raccontare una storia. In un'interfaccia fluida ogni elemento ha un'origine e una destinazione.
  • Usa le animazioni disponibili nella libreria delle animazioni, specifiche per diversi scenari e progettate per comunicare informazioni. L'uso di movimenti già familiari rafforza i concetti, consente agli utenti di prevedere l'azione che segue e crea un senso di sicurezza. Vedi le linee guida per le animazioni nella sezione Animazione dell'interfaccia utente.
  • Per i casi in cui vengono usate animazioni per comunicare informazioni importanti, accertati di fornire un'alternativa, un modo accessibile per trasmettere le informazioni.

Progettate per l'uso del tocco  

Le applicazioni di Windows Store sono progettate per l'uso del tocco come opzione preferenziale. Le app di Windows Store sfruttano le abilità naturali delle mani e delle dita secondo criteri di comfort ed ergonomia.

  • Adotta il linguaggio touch di Windows 8 e usa l'insieme di movimenti prescritto per consentire agli utenti di manipolare i contenuti in modo naturale e coerente. Per altre informazioni, vedi Progettazione delle interazioni tramite tocco.
  • Fai in modo che il contenuto segua direttamente le dita. Non limitarti al tocco e usa le interazioni mediante scorrimento, come lo zoom semantico, per consentire agli utenti di navigare e interagire con i contenuti in modo veloce e spontaneo.
  • Fornisci feedback visivo immediato in risposta al tocco, così gli utenti avranno la conferma di aver toccato l'opzione desiderata. Rendi reversibili le interazioni ed esegui il commit solo al rilascio, per lasciare spazio agli errori e incoraggiare l'esplorazione.
  • Non creare interazioni separate mediante tocco e mouse.
  • A fini di accessibilità, assicurati che tutti gli elementi interattivi siano accessibili al livello di codice. Per ulteriori informazioni, vedi gli argomenti relativi a come rendere accessibili gli eventi di tocco e verificare gli scenari principali dell'app tramite l'Assistente vocale.

Controlli incorporati  

Usa i controlli incorporati per ottenere animazioni fluide, attraenti e coerenti e comportamenti ottimizzati per il tocco. Per citare alcuni esempi:

  • La selezione mediante il gesto scorrimento rapido è incorporata nel controllo ListView. Può essere estesa con lo zoom semantico per consentire agli utenti di scorrere un lungo elenco in modo veloce e fluido. Vedi le linee guida per il controllo ListView.
  • Il controllo FlipView consente agli utenti di spostarsi tra gli elementi mediante trascinamento e incorpora animazioni per le transizioni.
  • I controlli pulsante, interruttore, casella di controllo, pulsante di opzione, classificazione e dispositivo di scorrimento forniscono tutti feedback visivo in risposta al tocco, eseguono il commit solo al rilascio e consentono agli utenti di annullare l'azione trascinando il dito fuori dall'area del controllo. Vedi le linee guida per i controlli pulsante, interruttore, casella di controllo, pulsante di opzione, classificazione e dispositivo di scorrimento.

Tieni presente che i controlli incorporati sono accessibili per impostazione predefinita, il che può ridurre i costi di sviluppo di un app accessibile. Per informazioni sui controlli incorporati, vedi le linee guida dettagliate relative all'esperienza utente.

Adattabile per qualsiasi dimensione

Crea un'esperienza straordinaria in tutti i fattori formato e le opzioni di visualizzazione disponibili per gli utenti.

Ridimensionamento per più fattori formato   La tua applicazione potrebbe essere utilizzata in centinaia di milioni di PC che eseguono Windows 8. Questi PC avranno schermi di svariate dimensioni e risoluzioni diverse, dai tablet PC da <10" fino a schermi da >27".

  • Sfrutta in modo ottimale l'area dello schermo usando il supporto del layout fluido incorporato nei controlli della piattaforma. ListView, ad esempio, ridispone automaticamente il contenuto in base allo spazio disponibile.
  • La piattaforma provvede al ridimensionamento automatico in base alla dimensione dello schermo e alla risoluzione del dispositivo. Prevedi asset di tre dimensioni oppure usa la grafica SVG (Scalable Vector Graphics) per garantire alla tua app un aspetto sempre nitido ed elegante. Vedi Linee guida per il ridimensionamento in base allo schermo e Linee guida per il ridimensionamento in base alla densità in pixel.
  • Tieni presente che abilitando Ingrandisci tutti gli elementi dello schermo in Accessibilità, la risoluzione corrente viene ridotta ed è quindi necessario accertarsi che tutta l'interfaccia utente sia visibile e utilizzabile. Per ulteriori informazioni, vedi Verificare l'app con l'opzione "Ingrandisci tutti gli elementi dello schermo".
  • Usa il simulatore disponibile in Microsoft Visual Studio per vedere che aspetto avrà la tua applicazione nei diversi fattori formato.

Progettazione per diverse dimensioni di finestra  Il multitasking è un'opzione naturale per gli utenti, che possono eseguire due applicazioni fianco a fianco ancorandole. Gli utenti possono ridimensionare continuamente le app fino a una larghezza minima. La larghezza minima predefinita è 500 pixel. Se la tua app funziona bene alle dimensioni più piccole e vuoi incoraggiare gli utenti a mantenere l'app sullo schermo, puoi ridurre la larghezza minima fino a 320 pixel. Vedi le linee guida per le dimensioni delle finestre.

  • Progetta la tua app in modo che riadatti il contenuto in modo fluido affinché mantenga l'aspetto e le funzionalità a qualsiasi dimensione, anche alla larghezza minima. Mantieni il contesto degli utenti quando l'app viene ridimensionata.
  • Accertati che i controlli dell'app, ad esempio la barra dell'app, la barra di spostamento, le finestre di dialogo e i riquadri a comparsa vengano ridimensionati fino alla dimensione minima.

Usa i contratti giusti

I contratti sono il collante che lega le applicazioni di Windows Store tra loro e con l'interfaccia utente del sistema. Due app che hanno implementato lo stesso contratto possono lavorare insieme per completare uno scenario ampio o complesso.

  • Per alcuni dei contratti più comuni, ad esempio di tipo ricerca, condivisione e selezione file, puoi iniziare dai modelli di elemento di Visual Studio corrispondenti.
  • Affidati ai pulsanti di accesso rapido per un modello di chiamata su cui gli utenti possano contare. Per non confondere gli utenti, evita di creare elementi di interfaccia utente alternativi sulla tela dell'applicazione per richiamare i contratti.
  • Vedi l'elenco completo dei contratti delle applicazioni.

Condivisione   I contratti di tipo condivisione consentono agli utenti di condividere i dati di un'applicazione con un'altra. L'applicazione di origine è quella che fornisce l'elemento da condividere, mentre l'applicazione di destinazione riceve il contenuto condiviso, con un insieme di formati dati comuni. Vedi le linee guida per la condivisione di contenuti.

  • Ogni applicazione deve essere un'origine di condivisione e implementare il più ampio insieme di formati possibile.
  • Le applicazioni che consentono di pubblicare, archiviare o trasformare i dati condivisi si prestano a diventare destinazioni della condivisione. Rispondono a questi requisiti, ad esempio, le applicazioni per la comunicazione, di social networking e connesse a dispositivi.

Ricerca   I contratti di tipo ricerca e il controllo SearchBox in-app consentono agli utenti di eseguire ricerche nei contenuti di un'applicazione da qualsiasi posizione in Windows. I risultati sono forniti dall'app e vengono visualizzati nella sua interfaccia utente o nel riquadro Ricerca globale. Vedi le linee guida e l'elenco di controllo per la ricerca.

  • Se la ricerca è parte integrante della tua app, usa il nuovo controllo SearchBox. Se la ricerca è importante per la tua app ma non ne rappresenta l'elemento centrale, usa l'accesso alla ricerca e il contratto.
  • Puoi usare il contratto di tipo ricerca con il controllo SearchBox per consentirne l'attivazione dalla ricerca globale.
  • Se gli utenti devono effettuare una ricerca per iniziare a usare la tua app, aggiungi il glifo di ricerca standard nell'elemento Canvas della tua app.
  • Migliora la pagina dei risultati della ricerca della tua app permettendo agli utenti di impostare filtri e ambiti per perfezionare il set di risultati della ricerca.
  • Indica il motivo della corrispondenza di un risultato di ricerca con la query usando la nuova API di evidenziazione delle occorrenze.

Selezione file     I contratti selettore file consentono agli utenti di accedere al contenuto di un'applicazione da un'altra applicazione. Richiamando la selezione file gli utenti possono esplorare e selezionare file nella risorsa di archiviazione locale o in un'altra applicazione che supporti il contratto di selezione file. Vedi le linee guida per la selezione file.

  • Usa questo contratto se la tua applicazione consente di accedere a file utili per gli utenti di un altro contesto o di archiviarli.
  • Usa il controllo ListView per ottenere il layout fluido incorporato e il comportamento di selezione.

Investi in un riquadro straordinario

Il riquadro è la porta principale da cui si accede a un'applicazione. Collocato nella schermata Start, è un'estensione dell'applicazione e può fornire informazioni molto più personali e coinvolgenti di un'icona tradizionale. Progettare un riquadro di qualità eccellente è un investimento che attirerà gli utenti verso la tua applicazione. Vedi le linee guida per i riquadri.

  • Personalizza il contenuto visualizzato nel riquadro in base agli utenti e mantienilo sempre interessante aggiornandolo quando il contenuto dell'applicazione cambia. È disponibile un'ampia gamma di modelli di riquadri predefiniti, tra cui puoi scegliere quello più adatto al tipo di contenuto della tua applicazione.
  • Fai riferimento al contenuto presente nella home page dell'applicazione, in modo che gli utenti possano trovarlo facilmente dopo aver avviato l'applicazione.
  • Usa riquadri secondari per consentire agli utenti di mettere in risalto nella schermata Start sottosezioni di contenuto dell'applicazione particolarmente interessanti e aggiornate di frequente. Vedi le linee guida per i riquadri secondari.

Crea una sensazione di connessione e vitalità

Fornisci contenuti aggiornati mediante riquadri animati e notifiche, in modo che gli utenti si sentano sempre connessi con l'applicazione. Riquadri animati e notifiche usano la stessa infrastruttura e possono essere aggiornati in qualsiasi momento mediante i Servizi notifica Push Windows, localmente mentre l'applicazione è in esecuzione o in un momento pianificato.

Riquadri animati   Coinvolgi costantemente gli utenti offrendo contenuto dinamico, significativo e personalizzato nel riquadro della tua app. L'aggiornamento continuo del contenuto spinge gli utenti a posizionare il riquadro bene in evidenza nella schermata Start e ad avviare ripetutamente l'applicazione.

  • Un riquadro animato può alternare ciclicamente la visualizzazione di un massimo di cinque aggiornamenti. Il riquadro animato di un'applicazione per le news può, ad esempio, visualizzare ciclicamente più storie ogni giorno.
  • Il contenuto visualizzato negli aggiornamenti dinamici deve essere accessibile dalla home page dell'applicazione. Rimuovi le notifiche scadute se non sono più rilevanti o accessibili dalla home page
  • Usa i loghi per visualizzare semplici informazioni numeriche o in forma di glifi.

Notifiche   Le applicazioni possono utilizzare le notifiche per visualizzare brevemente messaggi per cui i tempi sono importanti e che giustificano un'interruzione, generati da qualsiasi posizione in Windows. Vedi le linee guida per le notifiche di tipo avviso popup.

  • La maggior parte delle applicazioni deve essere invisibile all'utente:— gli utenti devono scegliere di abilitare le notifiche.
  • Gli utenti hanno il controllo della funzionalità di notifica dell'applicazione, perciò le notifiche devono essere generate solo se sono effettivamente pertinenti e se il tempo è un fattore realmente importante. Visualizza le notifiche critiche nel riquadro dell'applicazione.
  • Se in un breve intervallo di tempo vengono eseguiti più aggiornamenti puoi combinare le notifiche.
  • Non usare le modifiche per segnalare errori o avvisi. Gli errori devono essere visualizzati in linea o in riquadri a comparsa e finestra di dialogo di messaggio.

Roaming al cloud

Roaming   Crea un'esperienza senza soluzione di continuità tra diversi dispositivi mediante il roaming dei dati, che consente agli utenti di riprendere un'attività esattamente da dove l'avevano interrotta. Vedi le linee guida per il roaming dei dati dell'app.

  • Usa gli account Microsoft e l'archiviazione su cloud per utente per memorizzare ed eseguire il roaming delle impostazioni, dello stato e di una piccola quantità di contenuto utente.
  • Esempi di impostazioni dell'app idonee al roaming:
    • Preferenze relative a città e a gradi Celsius o Fahrenheit in un'app meteo
    • Feed RSS per i quali gli utenti hanno una sottoscrizione in un'app di news
    • Squadre preferite in un'app di sport
  • Esempi di stati dell'app idonei al roaming:
    • L'ultima posizione letta da un'app di lettura
    • L'ultimo checkpoint o l'ultima mossa completata in un gioco
    • L'ultimo brano riprodotto in un'app musicale

Gestione del ciclo di vita dei processi (ciclo di vita dell'applicazione)   Offri agli utenti un'esperienza senza soluzione di continuità, preservando lo stato senza richiedere un salvataggio esplicito. Vedi le linee guida per la sospensione e la ripresa di un'app.

  • In generale, fai in modo che l'applicazione venga ripresa come l'utente l'ha lasciata invece di riavviarsi da capo. Gli utenti devono poter passare a un'altra applicazione e poi tornare a un carrello acquisti, a un messaggio e-mail non terminato o a un gioco sospeso e ritrovarli così come li hanno lasciati.
  • L'applicazione deve essere completamente riavviata solo se è trascorso un lungo periodo di tempo dall'ultimo accesso dell'utente e il contenuto precedente non è più rilevante. In un'applicazione per le news, ad esempio, riporta l'utente alla home page se è trascorso molto tempo dall'ultima volta che ha aperto un articolo che ormai è obsoleto.
  • Non chiudere l'applicazione se viene spostata fuori dallo schermo. Lascia il ciclo di vita dell'applicazione al sistema, per consentire agli utenti di tornare all'applicazione con la massima efficienza possibile. Non offrire agli utenti modi per terminare l'applicazione.

Adotta i principi della progettazione Microsoft

Usa questi principi per orientare la progettazione.

Dimostra la tua abilità con una fattura eccellente

  • Dedica tempo ed energia ai piccoli dettagli che vengono visti spesso e da molte persone.
  • Costruisci l'esperienza utente in modo che sia completa e e curata in tutti i passaggi.

Fai di più con meno risorse

  • Evita elementi di distrazione, ma non a scapito dell'accessibilità. Consenti agli utenti di immergersi nei contenuti a cui sono più interessati e loro esploreranno anche il resto.
  • Crea un'esperienza pulita e significativa lasciando sullo schermo solo gli elementi più rilevanti, in modo che gli utenti possano concentrarsi completamente sui contenuti.

Crea applicazioni veloci e fluide

  • Consenti agli utenti di interagire direttamente con i contenuti e fai in modo che l'applicazione risponda alle loro azioni in modo rapido e adeguatamente energico.
  • Rendi viva l'esperienza, crea un senso di continuità e racconta una storia usando il movimento in maniera espressiva.

Crea un'esperienza autenticamente digitale

  • Sfrutta tutte le potenzialità del mezzo digitale. Rimuovi i limiti fisici per creare esperienze più efficienti e fluide che nella realtà.
  • Abbraccia l'idea che siamo pixel su uno schermo. Usa colori forti, nitidi e vivaci, e immagini che superino i limiti del materiale reale.

Per un risultato vincente

  • Sfrutta l'ecosistema e prevedi l'interazione con altre applicazioni e dispositivi e con il sistema per offrire agli utenti scenari completi.
  • Attieniti al modello di interfaccia utente per ridurre la ridondanza. Usa elementi che gli utenti già conoscono, per creare un senso di familiarità, controllo e fiducia.

 

 

Mostra:
© 2017 Microsoft