10 passaggi per Android

Questa guida ti aiuta a iniziare a progettare per Android traducendo i design per dispositivi mobili iOS esistenti in Android utilizzando i pattern UX di base di Android e Material Design.

I pattern sono descritti per garantire la parità di design e ordinati per efficienza. Se segui un sistema di design di base condiviso, puoi tradurre i design con il tuo sistema anziché con Material 3. Sia Android sia iOS si basano sull'idea che i contenuti vengono prima di tutto.

Dopodiché, il branding può essere espresso tramite colore, tipo e forma. In questo modo, non solo i contenuti sono più leggibili, ma è anche più facile creare coesione.

Inizia con i design per iOS

Prima di iniziare, crea una copia della tua app per iOS. Le app per iOS sono suddivise in tre aree: barre, visualizzazioni e controlli. Puoi utilizzare questa struttura per eseguire la traduzione, con lo stile per ultimo.

Dai un'occhiata alle parti di un'app per Android.

1. Elimina l'interfaccia utente di sistema di iOS

Elimina la barra di stato e l'indicatore Home. È più semplice farlo ora.

2. Ridimensiona i frame

Puoi utilizzare le dimensioni compatte di Android, 412 dp. Tuttavia, prendi in considerazione una serie di dispositivi anche all'interno di una dimensione della classe di finestre. Ad esempio, esegui il test a 360 dp per adattarti agli schermi più piccoli e adatta le dimensioni a tutte le classi di finestre.

3. Sostituisci con le barre di sistema di Android

L'interfaccia utente di sistema di Android può variare a seconda del dispositivo e delle impostazioni dell'utente, ma la visualizzazione di un'interfaccia utente di sistema standard può aiutarti a dare più contesto ai tuoi design. Posiziona la barra delle notifiche in alto e una barra di navigazione tramite gesti o con tre pulsanti in basso.

Per saperne di più, consulta Barre di sistema di Android.

4. A seconda della navigazione

Sostituisci la barra delle schede (navigazione in basso) con la barra di navigazione.

Dai un'occhiata alla mappa del flusso. La tua app per iOS utilizza un menu Altro? (Le best practice dell'HIG suggeriscono di non utilizzare questo pattern). Utilizza al massimo cinque elementi, mantieni la barra di navigazione in basso per la navigazione principale, valuta se è possibile spostare elementi secondari, come il profilo o le impostazioni, nella barra dell'app in alto o se hai un'azione principale che può essere tradotta in un pulsante Azione mobile.

La navigazione principale deve essere sempre presente nelle visualizzazioni principali (il livello superiore di una sezione nella mappa del flusso). Le visualizzazioni secondarie (tutto ciò che si trova sotto la vista genitore) possono includere la navigazione principale se si trovano più in alto nella gerarchia di navigazione e non sono modali.

Aggiorna la barra di navigazione in basso con le icone e le etichette appropriate. Entrambe le piattaforme evitano il movimento laterale tra le destinazioni di navigazione.

5. Barre di navigazione in barre dell'app in alto

Suddividi queste barre sezione per sezione: prima le visualizzazioni principali, poi le visualizzazioni secondarie. La barra dell'app è composta dal lato sinistro: navigazione e titolo, e dal lato destro: elementi di azione.

Se la tua app utilizza un menu del riquadro a scomparsa anziché una barra di navigazione in basso, in tutte le visualizzazioni principali verrà visualizzata un'icona del riquadro a scomparsa.

Se la tua app non ha una barra laterale o un riquadro a scomparsa, le visualizzazioni principali non mostrano un'icona di navigazione principale.

Per impostazione predefinita, il titolo è allineato a sinistra nella barra dell'app per Android.

Le visualizzazioni secondarie contengono una freccia verso l'alto nello spazio dell'icona di navigazione. Da non confondere con il pulsante Indietro. La freccia verso l'alto sposta l'utente di un livello nella gerarchia di navigazione di un'app in un flusso utente, mentre il pulsante Indietro o lo swipe dal bordo si trova nella navigazione di sistema, spostando l'utente indietro e persino fuori dall'app.

Che dire delle visualizzazioni modali? Per le modali a schermo intero (come i video player e le immagini), il funzionamento è simile alla barra dell'app della vista bambino, tranne per il fatto che l'icona di navigazione deve cambiare in Chiudi, che chiude la modale.

6. Un po' più di modalità

Inizia con le visualizzazioni modali grandi, ideali per concentrare l'attenzione dell'utente su un'attività. Su iOS, queste vengono spesso visualizzate come schede, che l'utente può scorrere verso il basso.

Completa la sostituzione delle barre dell'app. Per le modali a schede di iOS, sostituisci la parte superiore della scheda e l'anteprima dello sfondo con una barra dell'app di dialogo a schermo intero.

Bonus: verifica se alcune delle tue schede modali di iOS possono essere tradotte in schede inferiori.

Schede Azione e Attività in schede inferiori. (Ora è possibile tradurre anche le schede di condivisione).

Per gli avvisi, utilizza le finestre di dialogo di sistema. Se le utilizzi per informazioni importanti che richiedono un riconoscimento da parte dell'utente, sostituiscile con finestre di dialogo di sistema. Ricorda di sostituire anche gli input e i selettori a questo punto.

7. Contenuti correlati

Schede o visualizzatori di pagine o schede scorrevoli. Se utilizzi controlli segmentati su iOS, questi vengono tradotti in schede su Android. Entrambi fungono da filtro tra le visualizzazioni di informazioni simili, ma non uguali. Le schede di Android sono in genere collegate alla barra dell'app e offrono il vantaggio aggiuntivo di poter scorrere tra i contenuti.

8. Contenuti e controlli

A seconda della configurazione dei vincoli o del comportamento di ridimensionamento, la maggior parte dei contenuti potrebbe essere già stata ridimensionata. Tuttavia, prenditi del tempo per esaminare e impostare i margini. 16 dp è un buon standard sugli schermi piccoli.

La griglia di base si basa su una griglia di 8 dp per i componenti e di 4 dp per il tipo e le icone. Una griglia di 8 punti funziona bene su iOS, quindi potresti prenderla in considerazione come punto di partenza per entrambe le piattaforme.

Controlli. Sostituisci gli interruttori con gli interruttori di Android. Utilizza le caselle di controllo e i pulsanti di opzione di Android. Android include tutti questi elementi.

Se hai moduli, sostituisci i campi di testo di iOS con quelli di Android. Material offre opzioni come contorno o riempimento, quindi scegli quella più adatta al tuo branding.

Le liste di Material presentano alcune differenze rispetto alle celle delle tabelle di iOS:

• Le linee di divisione vengono utilizzate con parsimonia.
• Gli indicatori non vengono utilizzati nelle liste per ridurre al minimo il rumore visivo.
• Le dimensioni rispettano la griglia di 8 dp.

9. Stile

Colore: il colore dell'interfaccia utente è costituito da colori di accento, semantici e di superficie assemblati in una combinazione di colori. Questi colori vengono applicati all'interfaccia utente in base ai loro ruoli.

Tipo: se utilizzi un carattere di sistema, sostituisci San Francisco. Roboto è il carattere di sistema predefinito per Android. Detto questo, ti invitiamo a esprimere lo stile unico del tuo brand con i temi e i caratteri Google scaricabili.

Icone: stesso discorso. Se utilizzi i simboli SF, controlla che siano stati tutti convertiti in icone o simboli Material. Scegli la variante più adatta al tuo brand. Sapevi che puoi utilizzare le icone Material su qualsiasi piattaforma?

Movimento: Android e iOS hanno un design di movimento distinto, che deve essere rispettato per ogni piattaforma. Il movimento di Material è informativo, mirato e espresso. L'effetto Ripple è un evidenziatore distinto utilizzato nei componenti per fornire un feedback al tocco. Il sistema di movimento è un insieme di pattern di transizione per sfruttare le animazioni di trasformazione del contenitore, asse condiviso, dissolvenza e dissolvenza. Valuta se gli elementi del tuo design hanno contenitori persistenti, la relazione tra gli elementi e il modo in cui devono entrare o uscire.

10. Riordina

Se stai traducendo un prototipo, questo è un buon momento per ricollegare gli elementi. Ripercorri la navigazione principale. Poi le barre dell'app, ricordando la differenza tra verso l'alto e indietro e assicurandoti di selezionare le transizioni di pagina appropriate per Android (indicate nel passaggio 9).

Dovresti avere un prototipo completamente funzionante pronto e, poiché l'hai ridimensionato, è pronto per la consegna.

Guida di stile e dei componenti

Se hai un sistema di design o una guida di stile esistenti, potresti avere i tuoi stili di base (colore, tipo, icone, forma) che possono essere utilizzati insieme a Material Design, proprio come li utilizzeresti insieme alle indicazioni di iOS. Utilizzando i temi di Material, puoi personalizzare i componenti Material con lo stile unico del tuo brand utilizzando colore, tipo e forma.

Avere linee guida specifiche per la piattaforma non è raro tra i prodotti multipiattaforma e può rendere il tuo sistema di design più incentrato sull'utente.

Infine, se non ne hai uno, tieni presente che non tutte le app o i prodotti hanno bisogno di un sistema di design completamente personalizzato. Valuta la possibilità di creare una guida di stile di una pagina. Una guida di stile è un documento che delinea le specifiche di base per i design. Le linee guida per il branding spesso contengono una guida di stile.

Può essere copiata per Android e utilizzata come origine per l'aggiornamento di stili (o simboli, componenti o una libreria).