Best practice per la progettazione di app

Ottimizzare per i layout verticali

Semplifica il design dell'app utilizzando layout verticali, che consentono agli utenti di scorrere in una sola direzione per spostarsi tra i contenuti.

Esegui questa azione

Lo scopo di questa app è portare l'utente dal punto A al punto B.

Non farlo

Utilizzare sia lo scorrimento verticale sia quello orizzontale, in quanto ciò può rendere confusa l'esperienza con l'app.

Mostrare l'ora

Mostra l'ora (overlay) in alto, in quanto offre all'utente un punto di riferimento costante per visualizzarla.

Esegui questa azione

Mostra l'ora nella parte superiore dell'overlay, in quanto rappresenta un punto di riferimento costante per l'utente.

Non farlo

Mostrare l'ora in una finestra di dialogo temporanea, in un overlay di conferma o in un selettore, ad esempio, un utente è probabile che veda una schermata di conferma solo per poco tempo.

Punti di contatto in linea accessibili

Assicurati che tutte le azioni vengano visualizzate in linea, utilizzando un'iconografia e etichette chiare per l'accessibilità. Sono inclusi i punti di accesso alle impostazioni e alle preferenze.

Esegui questa azione

Se possibile, utilizza sia le icone sia le etichette.

Non farlo

Non fare affidamento solo sulle icone per chiedere all'utente di intervenire.

Utilizzare le etichette per orientare gli utenti

Per le finestre di dialogo più lunghe, aiuta l'utente a orientarsi con le etichette mentre scorre i contenuti.

Esegui questa azione

Utilizza interruzioni di sezione, etichette e altri indicatori per organizzare i contenuti e aiutare gli utenti a orientarsi mentre scorrono visualizzazioni più lunghe con contenuti misti.

Non farlo

Aggiungi un'etichetta per le finestre di dialogo che contengono un singolo tipo di contenuti.

Eseguire l'elevazione delle azioni principali

Consenti agli utenti di intraprendere facilmente azioni nella tua app spostando le azioni principali nella parte superiore dell'overlay.

Esegui questa azione

Metti in primo piano le azioni principali non ambigue.

Non farlo

Inserisci l'azione principale in fondo a una pagina molto lunga.

Mostrare la barra di scorrimento nelle schermate con scorrimento

Utilizza l'indicatore di scorrimento solo nelle schermate con scorrimento per evitare aspettative di interazione errate. Analogamente, ricordati di aggiungere l'indicatore di scorrimento nelle schermate con scorrimento per indicare in quale punto della schermata ti trovi.

Esegui questa azione

Mostra l'indicatore di scorrimento se l'intera visualizzazione scorre.

Non farlo

Mostrare l'indicatore di scorrimento nelle visualizzazioni non scorrevoli o non mostrare la barra di scorrimento nelle visualizzazioni scorrevoli.

Progettare in modo adattabile per schermi più grandi

Assicurati che i componenti utilizzati riempiano la larghezza disponibile e prendi in considerazione l'altezza nei layout non scorrevoli.

Tutti i componenti di Compose vengono costruiti in modo reattivo, ma è incoraggiata qualsiasi personalizzazione per migliorare il design e aggiungere ulteriore valore su schermi più grandi.

Esegui questa azione

Assicurati che i contenuti riempiano la larghezza e l'altezza disponibili e che gli elementi a schermo intero (ProgressIndicators, TimeText e così via) si adattino in modo reattivo ai layout non scorrevoli.

Non farlo

Utilizzare componenti con una larghezza fissa che non riempiono lo schermo in modo dinamico o non regolano il comportamento dei contenuti per riempire lo spazio disponibile.

Utilizza i margini adattabili (in percentuale)

Ti consigliamo di utilizzare i margini percentuali in modo che le dimensioni dei margini si adattino alla curva crescente del display.

Esegui questa azione

Utilizza margini percentuali aggiuntivi per assicurarti che i contenuti non vengano tagliati in alto e in basso.

Non farlo

I componenti non devono solo ridimensionarsi per riempire lo spazio disponibile senza margini aggiuntivi.