Android VS. iOS: confronta 20 componenti e pattern dell'interfaccia utente (parte 1)

20 differenze tra Android e iOS che dovresti conoscere durante la progettazione di app multipiattaforma

中文 版 Versione cinese originale pubblicata il 10 dicembre 2016

Android VS. iOS: confronta 20 componenti e pattern dell'interfaccia utente (parte 2)

Ci sono sempre più app lanciate per Android e iOS. Ma possiamo trovare che la progettazione di app potrebbe non affrontare o notare le differenze tra Android e iOS sui componenti dell'interfaccia utente o sui modelli di comportamento. A volte potremmo scoprire che i componenti iOS vengono utilizzati nelle app Android o che i modelli Android vengono applicati nelle app iOS. I componenti / i modelli utilizzati in modo improprio possono confondere gli utenti.

Per consentire agli sviluppatori o ai designer di comprendere più facilmente la differenza di base tra Android e iOS. Vorrei introdurre e confrontare i modelli / componenti dell'interfaccia utente, che a volte hanno nomi diversi sulle due piattaforme, con alcuni screenshot come esempi:

1. Cassetto di navigazione, schede e navigazione inferiore VS. Tab Bar

Vorremmo prima parlare della progettazione della navigazione perché è una questione essenziale sulla struttura delle informazioni che i progettisti devono affrontare quando progettano le app all'inizio.

Il cassetto di navigazione è stato il più rappresentativo del design Android nel 2013. Gli elementi della categoria nel livello superiore della struttura delle informazioni sono inseriti in un cassetto che può essere nascosto per rendere le interfacce utente semplici e pulite. Ma più tardi, con molte ricerche che rivelano i problemi di usabilità del cassetto di navigazione, Google stava iniziando a spostare importanti funzionalità / elementi della categoria dai cassetti di navigazione alle schede nelle loro app; Youtube ne è stato un esempio. Nel 2016, la navigazione in basso è apparsa nelle Linee guida per la progettazione dei materiali e mostra che alcuni componenti dell'interfaccia utente in Android si stanno avvicinando a quelli iOS.

Evoluzione della struttura di Youtube: le funzioni importanti, I miei abbonamenti, Cronologia ed Elenco di riproduzione vengono inseriti in un cassetto -> La struttura dell'app viene riorganizzata, il cassetto viene rimosso e le funzioni principali vengono spostate in schede -> Le tendenze vengono aggiunte in schede.Evoluzione della struttura di Google Foto: le funzioni principali vengono messe nel cassetto -> Le funzioni principali vengono spostate nella navigazione dei pulsanti -> Il pulsante di azione mobile Cerca, che può interrompere la navigazione delle foto, viene trasformato in una barra di ricerca.

Si noti che, ci sono ancora alcune differenze tra le schede Android e la navigazione in basso :

  1. Le schede possono essere utilizzate a livelli più alti o più bassi nella gerarchia delle informazioni, ma la Navigazione inferiore viene utilizzata solo al livello superiore.
  2. Le schede supportano non solo toccando, ma facendo scorrere il gesto per cambiare vista, ma Navigazione inferiore supporta solo il tocco.
  3. L'importo dell'articolo in Schede è flessibile. Puoi inserire 2-5 elementi in schede fisse o più elementi in schede scorrevoli. Ma solo 3-5 articoli possono essere inseriti nella navigazione inferiore. 2 o più di 5 articoli vietati。

In alcune app con strutture di navigazione complesse e profonde, è possibile che vengano visualizzati contemporaneamente riquadro di navigazione, navigazione inferiore e schede. Non consiglio che il cassetto di navigazione e la navigazione inferiore vengano utilizzati contemporaneamente nelle app perché è difficile distinguere le strutture gerarchiche tra di loro. Il livello del riquadro di navigazione è superiore o inferiore rispetto alla navigazione inferiore? O sono nel livello parallelo? Le strutture ambigue confonderebbero gli utenti. Google Plus è un esempio negativo per me. Mi sento davvero confuso dopo aver aggiornato Google Plus e aver visto il riquadro di navigazione e la navigazione in basso allo stesso tempo all'inizio.

Analizzando le attuali app di Google, siamo riusciti a trovare il riquadro di navigazione e la navigazione in basso sono a livello parallelo. Prendi Google Foto e Google Plus come esempi, dopo aver rivelato il riquadro di navigazione nella schermata principale, non c'è nessun elemento saliente su nessun elemento della categoria. Android sembra mettere categorie come account, impostazioni e altre funzioni secondarie in un cassetto e individuare le funzioni principali / utilizzate di frequente nella navigazione in basso.

Google Plus

iOS ha usato per molto tempo le "barre delle schede" inferiori come navigazione predefinita e non è mai cambiato. Le barre delle schede, proprio come la navigazione inferiore di Android, hanno da 3 a 5 elementi della categoria e puoi cambiare la visualizzazione della categoria toccando gli elementi.

Vale la pena notare che le barre delle schede di solito esistono anche se inserisci i livelli successivi o più profondi da quello in alto. Toccando l'elemento evidenziato sulla barra delle schede si tornerà al livello superiore. Le barre delle schede scompaiono quando ci si trova nella vista modale o si accede alle viste di dettaglio con le barre degli strumenti in basso. Tuttavia, nelle app Android, entrambe le schede e la navigazione in basso scompaiono quando si accede alla pagina successiva a livelli più profondi.

2. App Bars (Action Bars) VS. Barre di navigazione

Le barre nella parte superiore delle schermate delle app Android sono denominate barre delle app, barre delle azioni e barre degli strumenti, ad esempio utilizzate principalmente per inserire il nome della schermata corrente o i nomi delle app e i pulsanti di azione. I nomi sono posizionati nella parte sinistra delle barre delle azioni e i pulsanti delle azioni, che di solito non sono più di 3, nella parte destra. Se le azioni sono più di 3, utilizzeremo l'icona di overflow e inseriremo le azioni meno importanti nel menu di overflow.

Sia Android che iOS hanno i loro stili di icone posteriori. Ma iOS di solito mette una stringa, indietro o il nome della pagina precedente accanto all'icona indietro, che consente agli utenti di sapere dove torneranno in modo più preciso.

Diverse barre delle app e barre di navigazione comuni

3. Barre degli strumenti

I pulsanti di azione possono essere posizionati non solo su barre di azione / barre di navigazione, ma anche su "barre degli strumenti" inferiori su Android e iOS.

Anche se le barre degli strumenti inferiori non sono menzionate nelle Linee guida per la progettazione dei materiali (parlano solo come barre delle applicazioni), possiamo comunque trovare le barre degli strumenti inferiori utilizzate in Google Keep e Google Foto.

Le barre degli strumenti inferiori sono uno dei componenti comuni dell'interfaccia utente di iOS e sono disponibili in molte app. Sia le icone che il testo come pulsanti di azione e descrizioni di stato possono essere inseriti nelle barre degli strumenti.

4. Schede VS. Controlli segmentati

Le pagine di livello gerarchico secondario o inferiore possono utilizzare "schede" su Android e "controlli segmentati" su app iOS.

Sia le schede Android che i controlli segmentati iOS possono essere posizionati nella barra delle azioni / barra di navigazione.

Le schede Android possono essere solo con testo, solo con icone o con entrambe le icone e il testo, che si trovano raramente nelle app correnti. Sia le icone che il testo possono essere inseriti in controlli segmentati iOS. Evitare di mescolare testo e icone in un controllo segmentato.

Tutto il testo toccabile in Android è MAIUSCOLO, quindi il testo sulle schede è maiuscolo. I controlli segmentati iOS utilizzano Title Case.

Circa la quantità di elementi nelle schede Android, sarà 2-5 in una barra delle schede fissa. Una barra a schede scorrevole può essere utilizzata quando sono presenti stringhe lunghe o più di 5 elementi. Un controllo segmentato dovrebbe avere cinque o meno segmenti su iPhone per garantire spazio sufficiente per toccarlo facilmente.

5. Pulsanti

Fondamentalmente, l'unica differenza tra i pulsanti Android e iOS è la capitalizzazione delle stringhe e lo stile di aspetto.

I pulsanti Android hanno principalmente 2 stili, pulsanti "piatti" e "rialzati", che vengono utilizzati in situazioni diverse. Ad esempio, non è utile utilizzare i pulsanti in rilievo nelle UI in stile scheda perché i pulsanti in rilievo appaiono in modo troppo evidente nelle carte e le ombre ridondanti rendono anche le UI non semplici e pulite. Si consiglia l'uso di pulsanti piatti non solo su schede, ma anche su finestre di dialogo e piè di pagina. Android ha anche pulsanti di azione mobili, che saranno introdotti nella prossima sezione.

Sebbene le Linee guida per la progettazione dei materiali definiscano solo gli stili di visualizzazione dei pulsanti piatti e in rilievo, in Google Play è possibile trovare anche i pulsanti fantasma, che sono forme piatte senza riempimento e un contorno semplice, e quelli simili a pulsanti in rilievo senza ombre. I pulsanti fantasma possono essere confrontati con il pulsante normale iOS; pulsanti simili a pulsanti rialzati a pulsante premuto.

Il testo nei pulsanti Android è MAIUSCOLO; I pulsanti iOS utilizzano principalmente Title Case. A volte i pulsanti fantasma usano MAIUSCOLO, come i pulsanti OPEN e UPDATE nell'App Store, ma a volte usano Title Case, come "Book a Table" e "Directions" in Map iOS 10. La regola di capitalizzazione in iOS sembra essere incoerente.

6. Pulsanti galleggianti VS. Pulsanti di invito all'azione

Pulsanti di azione mobile, FAB è apparso per la prima volta con Material Design in Android 5.0. I FAB, situati nell'angolo in basso a destra degli schermi, vengono utilizzati per risolvere il problema di usabilità del funzionamento con una sola mano. È difficile raggiungere i pulsanti sulle barre delle azioni mentre si usano i telefoni con una sola mano. I FAB a volte si trovano anche all'incrocio di due aree e questo rende i FAB più accattivanti.

Un pulsante di azione mobile rappresenta l'azione principale in un'applicazione. Ad esempio, il pulsante di composizione nell'app di posta e il nuovo pulsante di post nell'app di social network sono adatti per l'uso di FAB.

Il design simile per l'azione principale nelle app iOS è il pulsante di invito all'azione che si trova al centro delle barre delle schede. I pulsanti CTA, in precedenza, utilizzavano colori o design diversi per distinguerli dalle altre schede. Ma ora, poiché gli utenti hanno sempre più familiarità con il modello, lo stile del pulsante CTA è lo stesso delle schede in molte app. I pulsanti per i nuovi post in Medium e pubblicare una nuova foto su Instagram sono gli esempi.

7. Fogli inferiori VS. Fogli di azione e visualizzazioni attività

I fogli inferiori di Android appaiono dal 2015, ma iOS ha questo design simile da molto tempo. Android ha questo tipo di design perché vuole risolvere il problema dell'operazione con una sola mano.

Il foglio inferiore di Android ha 2 forme: fogli inferiori modali e fogli inferiori persistenti.

I fogli inferiori modali Android hanno due contenuti: 1) I fogli inferiori modali con azioni diverse e 2) Elenco delle app che appare dopo che gli utenti toccano l'icona "Condividi". Il primo è proprio come i fogli di azione iOS; il secondo è come le visualizzazioni delle attività iOS dopo aver toccato l'icona "Azioni". Il layout del contenuto dei fogli inferiori modali di Android può essere elenco o griglia.

I fogli inferiori persistenti vengono utilizzati quando i fogli inferiori hanno la stessa importanza del contenuto principale sopra e gli utenti potrebbero dover visualizzare entrambe le informazioni contemporaneamente. Prendendo ad esempio l'app Mappa, l'area superiore mostra una mappa e il foglio inferiore mostra i dettagli della posizione. In un'app musicale, l'area superiore mostrerà la copertina dell'album e l'area inferiore potrebbe avere controlli per la riproduzione di musica.

Anche se non riesco a trovare i componenti come Fogli inferiori persistenti di Android definiti nelle Linee guida per l'interfaccia umana di iOS, è ancora possibile vedere il design simile nelle app integrate native di iOS, Mappa e Musica.

Credito d'immagine: linee guida per la progettazione di materiali Google e design per Facebook

8. Dialogs VS. avvisi

Le finestre di dialogo Android hanno principalmente 3 funzioni: 1) Modifica: interrompe ciò che gli utenti stanno cercando di fare e informa l'utente di una situazione. 2) Menu: fornire agli utenti la possibilità di selezionare un'opzione o modificare semplici impostazioni. 3) Conferma: come poka-yoke, confermare la scelta degli utenti prima di impegnarsi per evitare errori.

Le finestre di dialogo Android sono costituite da titoli, contenuti e pulsanti. A volte i titoli possono essere omessi. I contenuti non possono avere solo testo puro ma anche altri componenti come l'elenco delle opzioni o campi di testo. L'avviso iOS ha anche titoli, contenuti e pulsanti, simili alla finestra di dialogo Android. L'unica differenza è che il contenuto può essere omesso ma un titolo dovrebbe essere mantenuto.

Le finestre di dialogo Android hanno 3 forme: 1) Finestre di dialogo semplici, proprio come un menu: non ci sono pulsanti OK e Annulla nella finestra di dialogo. È possibile toccare un'opzione nella finestra di dialogo per selezionare e quindi la finestra di dialogo scompare. È possibile toccare al di fuori della finestra di dialogo o il tasto Indietro per chiudere le finestre di dialogo. 2) Finestre di conferma, le più comuni: ci sono pulsanti che gli utenti possono toccare per confermare la loro azione. 3) Finestre a schermo intero, utilizzate solo sui telefoni: le finestre di dialogo a schermo intero non devono essere a schermo intero sui tablet. Le finestre di dialogo a schermo intero Android sono proprio come la vista modale iOS, che verrà introdotta in seguito.

testi

Il titolo e il testo del contenuto nelle finestre di dialogo Android si allineano a sinistra; Il testo del titolo e della descrizione nel centro di allineamento degli avvisi iOS. Android utilizza "Frase caso" per i titoli; iOS utilizza "Title Case". Sia Android che iOS usano "maiuscole / minuscole" per il testo del contenuto.

Il titolo della finestra di dialogo Android e dell'avviso iOS dovrebbe essere breve e chiaro. Evita domande con alcune indicazioni, come "Sei sicuro di voler eliminare il file?" La frase dovrebbe essere semplice, neutra e diretta, come "Elimina il file?".

pulsanti

Per quanto riguarda il numero di pulsanti, Android e iOS possono avere 1-2 pulsanti. Le linee guida iOS suggeriscono di evitare 3 o più pulsanti in generale perché più pulsanti creano complessità e possono richiedere lo scorrimento. Se hai bisogno di più di due scelte, considera invece l'uso di un foglio di azione. Ma quando iOS chiede agli utenti se vogliono aggiornare la loro versione di iOS, mostra tre pulsanti, Installa ora, Più tardi e Dettagli nell'avviso.

Quando ci sono due pulsanti, annulla e il pulsante di azione principale, Android e iOS mettono il pulsante di annullamento sul lato sinistro e il pulsante di azione principale sul lato destro (puoi controllare questo articolo per sapere il motivo per cui hanno questa regola). Quando la copia sui pulsanti è più lunga, è possibile posizionare due pulsanti in verticale. Il pulsante di azione principale sarà nella parte superiore del pulsante Annulla.

La copia sui pulsanti dovrebbe evitare di usare Sì e No, le azioni di scrittura sui pulsanti sarebbero più chiare e dirette, come Annulla e Salva, Annulla e Rimuovi.

iOS usa il testo del pulsante rosso per avvertire se l'azione è irrecuperabile, come eliminare. Android non utilizza colori specifici sul testo del pulsante. Per quanto riguarda il testo del pulsante, Android utilizza MAIUSCOLO, ma iOS utilizza Title Case. Il testo del pulsante si allinea direttamente in Android, ma allinea il centro in iOS.

Quando il contesto è molto, le finestre di dialogo Android possono correggere il titolo e il piè di pagina della finestra di dialogo, ma il contenuto è scorrevole. Le finestre di dialogo dei contenuti scorrevoli vengono spesso visualizzate quando vengono inserite molte opzioni nelle finestre di dialogo. Le linee guida iOS suggeriscono che il contenuto dovrebbe essere breve per evitare lo scorrimento degli avvisi.

9. Finestre a schermo intero VS. Viste modali e popover

Le finestre di dialogo a schermo intero Android possono essere trovate solo in piccoli dispositivi mobili come gli smartphone, che possono essere confrontati con le viste modali iOS. Le viste modali iOS hanno 4 stili, schermo intero, foglio di pagina, foglio di modulo e altri come vista divisa e popover. A proposito della transizione delle viste modali sui telefoni, una vista modale scorrerà verso l'alto quando entri e scivolerà verso il basso quando esci.

I popovers sono usati solo per tablet

10. Snackbar e toast VS. avvisi

Oltre alle finestre di dialogo, Android utilizza anche snackbar o toast come messaggi di suggerimento con interferenze di basso livello. snackbar o brindisi in quanto il feedback di solito viene visualizzato per circa 3 secondi dopo che gli utenti hanno intrapreso un'azione e poi sono scivolati o sbiaditi automaticamente.

Gli snack bar possono avere un pulsante di azione che consente all'utente di ripetere o intraprendere altre azioni. I toast vengono utilizzati principalmente per mostrare i messaggi di sistema. Non puoi mettere icone su snackbar o toast.

Le Linee guida per iOS non hanno quel tipo di componenti. A volte possiamo trovare alcune app che usano gli avvisi come feedback, ma gli avvisi interrompono gli utenti e potrebbero avere interferenze maggiori. I componenti simili in iOS sarebbero un piccolo pop-up che si presenta quando si regola il volume del suono e scompare dopo pochi secondi. Alcune app personalizzano il pop-up che viene visualizzato per pochi secondi come toast Android come feedback.

Alcune app possono personalizzare i propri avvisi in modo che vengano visualizzati per secondi come i toast Android.

11. Elenchi VS. tabelle

Gli elenchi, il componente più comune e di base, sono disponibili in ogni app (puoi trovarlo almeno nelle Impostazioni delle app). In Android, gli elenchi sono costituiti da una colonna continua di righe. In iOS, chiamiamo Liste come compresse, costituite da molte celle, ovvero righe.

Lo stile dell'elenco Android ha un elenco a riga singola, elenco a due righe (composto da un testo principale e un testo secondario) e un elenco a più righe (composto da un testo primario e 2 o più testo secondario). Icone, miniature e controlli elenco, come caselle di controllo, pulsanti di opzione e pulsanti di commutazione, possono essere aggiunti agli elenchi. Normalmente, le azioni principali vengono inserite nella parte sinistra dell'elenco e le azioni secondarie nella parte destra dell'elenco.

Le tabelle iOS sono simili agli elenchi Android, ma ci sono ancora alcuni punti che dovresti notare:

1) Al telefono, quando la riga Android ha un titolo principale e un testo secondario, vengono posizionati verticalmente. Il testo secondario può essere descrizione o valore. In iOS, oltre allo stile a due righe, ha anche uno stile a riga singola. Il testo principale, etichetta, viene posizionato sul lato sinistro della cella e il valore viene inserito sul lato destro della cella. Sul tablet, a causa dello spazio più ampio, la riga di Android a volte è proprio come iOS, mettendo un titolo principale e un testo secondario orizzontalmente come una singola riga.

2) La riga iOS ha una fruibilità migliore di Android. Se c'è una schermata per bambini, iOS mostrerebbe un indicatore a freccia su una cella nella schermata principale, in modo che gli utenti possano sapere che la cella è toccabile e porterà a un'altra schermata. Ma in Android, non possiamo sapere se gli elenchi sono solo per la visualizzazione di informazioni o l'ingresso per un'altra schermata. Hanno tutti lo stesso aspetto.

3) Le tabelle iOS hanno 2 forme: semplice e raggruppata. Un tavolo semplice ha un intero schermo bianco con divisori. Anche se solo poche celle hanno contenuto, l'area di sosta ha ancora dei divisori. Le tabelle raggruppate hanno uno sfondo grigio. La prima tabella raggruppata ha dello spazio con una barra di navigazione e la seconda tabella raggruppata di seguito. Android ha solo uno stile e usa solo un divisore per separare due diversi elenchi.

12. Sottotitoli VS. Intestazioni di tabella raggruppate e intestazioni di sezione

I sottotitoli Android e i titoli iOS vengono utilizzati per separare e raggruppare elenchi o elenchi di griglie con contenuti diversi. iOS ha 2 stili diversi per separare gli elenchi: 1) Tabelle raggruppate, utilizzate per raggruppare informazioni totalmente diverse; 2) Le intestazioni di sezione, possono essere visualizzate nelle tabelle normali, utilizzate per ordinare il formato di dati simile, ad esempio foto con date di presa diverse o contatti con nomi diversi.

I sottotitoli Android utilizzano la frase maiuscola. Le intestazioni di tabella raggruppate iOS utilizzano "MAIUSCOLO" e le intestazioni di tabella semplici utilizzano "Case del titolo".

Al momento dello scorrimento, i sottotitoli Android rimangono bloccati nella parte superiore dello schermo fino a quando non vengono spinti fuori dallo schermo dai sottotitoli successivi, il cui comportamento è proprio come le intestazioni di sezione iOS. Le intestazioni di tabella raggruppate non hanno questo tipo di comportamento.

13. Controlli elenco

I controlli dell'elenco sono anche componenti essenziali per le app. In questo capitolo verranno introdotti i controlli elenco, come sezione multipla, selezione singola, interruttori, riordino pinze, trascinatori e pulsanti di espansione / compressione.

13-1 Selezione multipla: caselle di controllo VS. Segno di spunta con Cerchio

Android utilizza le caselle di controllo per la selezione multipla. Una casella con un segno di spunta rappresenta lo stato dell'elemento selezionato; una casella senza segno di spunta indica che l'elemento non è selezionato. Le caselle di controllo, disponibili nel sito Web o nel sistema operativo desktop, sono generalmente componenti utilizzati per la selezione multipla, ma iOS non ha questo componente. In iOS, un cerchio con un segno di spunta viene utilizzato per la selezione multipla, ma la sua forma può far confondere gli utenti con un pulsante di opzione.

Le caselle di controllo Android possono essere posizionate sul lato sinistro o destro, ma iOS di solito mette più controlli di selezione sul lato destro.

È degno di nota che a volte Android utilizza le caselle di controllo come interruttori per abilitare / disabilitare le funzioni, ma iOS utilizza i pulsanti di commutazione per farlo anziché i suoi controlli di cerchio

13–2 Selezione singola: pulsanti di opzione / segni di spunta VS. segni di spunta

Android ha pulsanti di opzione, che possono anche essere trovati su pagine Web o sistemi operativi desktop, come un singolo controllo di selezione. Un pulsante di opzione ha un cerchio con un punto all'interno se l'elemento è selezionato. I pulsanti di opzione vengono utilizzati per gli elenchi di due o più elementi reciprocamente esclusivi.

iOS non ha pulsanti di opzione, ma ha invece segni di spunta come controlli di selezione della selezione.

Android era solito posizionare i pulsanti di opzione sul lato destro degli elenchi, ma ora puoi trovare i pulsanti di opzione posizionati sul lato sinistro gradualmente. iOS mette i segni di spunta sul lato destro, ma i segni di spunta possono essere messi sul lato sinistro se il lato destro ha altri elementi, come ad esempio un indicatore della pagina successiva.

Anche se le Linee guida per la progettazione dei materiali non introducono segni di spunta, che appaiono gradualmente dal 2016, ma puoi trovare l'esempio nel menu di Google Calendar.

Selezione singola Android: pulsanti di opzione e segni di spunta. Ma quello di sinistra è un cattivo esempio come una semplice finestra di dialogo, NON dovrebbe avere un pulsante CENCEL secondo le Linee guida di Google. Oppure potrebbe essere una finestra di dialogo di conferma aggiungendo un pulsante OK, ma porterà a più passaggi.

13-3. Interruttori

Un interruttore è un interruttore tra due stati reciprocamente esclusivi, acceso e spento. In passato, Android non aveva switch e utilizzava caselle di controllo per abilitare / disabilitare alcune funzioni, ma ora Android usa sempre più switch. iOS usa sempre gli interruttori per abilitare / disabilitare le funzioni. Gli interruttori sono posizionati sul lato destro degli elenchi sia in Android che iOS.

Attivazione e disattivazione delle impostazioni Android: Gmail utilizza caselle di controllo ma Foto utilizza pulsanti di commutazione

13-4. Riordina / Gripper

Android utilizza un'icona che consiste di 4 linee orizzontali parallele come controllo di riordino, per evitare di confondere le persone con l'icona di hamburger che consiste di 3 linee, utilizzate per espandere e comprimere il cassetto di navigazione. L'icona del registratore di solito appare in modalità modifica.

L'icona della pinza iOS è apparsa prima di Android. Puoi anche vederlo in modalità modifica. Ma la pinza iOS è composta da 3 linee solo perché iOS non utilizza un cassetto come navigazione predefinita come Android.

13-5. Lasciati indietro (azioni di scorrimento)

Dopo aver fatto scorrere verso sinistra o verso destra, è possibile trovare alcune azioni nascoste dietro un elenco. È molto comune trovarlo in iOS. Normalmente in passato, è possibile trovare un'azione di eliminazione durante lo scorrimento, ora sono presenti ulteriori azioni oltre all'eliminazione. In un'app di posta, puoi trovare archivio, flag e altro dopo aver fatto scorrere il dito verso sinistra; contrassegna come letto o non letto scorrendo verso destra.

Dopo Android 5.0, le azioni di scorrimento, i cosiddetti Leave-Behinds, sono mostrate nelle linee guida. È degno di nota che Leave-Behinds non dovrebbe essere utilizzato in una schermata con schede a causa del conflitto di gesti ed è per questo che Android non aveva questo componente prima.

Dopo aver fatto scorrere un elenco per una distanza e poi essersi fermati, è possibile vedere 1–3 azioni dietro, quindi toccare una di esse per agire. Ma se scorri per una distanza maggiore, verranno eseguite le azioni predefinite. Android ha solo un'azione dietro di sé e agisce scorrendo rapidamente.

Fonte immagine: Linee guida per la progettazione dei materiali di Google e Design per Facebook

13-6. Espandi / Riduci

I controlli di espansione / compressione possono aiutare ad adattare la gerarchia perché gli utenti non devono accedere alla schermata successiva per visualizzare le informazioni, le informazioni verranno visualizzate nella stessa schermata. Questo controllo si trova spesso negli elenchi FAQ. Dopo aver toccato una domanda, verrà visualizzata la risposta. Sono necessari meno passaggi se si tenta di sfogliare questi QA.

Oltre a inserire gli elenchi di espansione / compressione, puoi anche inserire questo controllo nelle intestazioni che consente agli utenti di comprimere il gruppo che non usano frequentemente.

Fonte immagine: Linee guida per la progettazione di materiali di Google

L'espansione / compressione non è disponibile nelle Linee guida per l'interfaccia umana iOS e si trova raramente nelle app iOS. I controlli simili potrebbero essere visualizzati nella schermata Esplora dell'App Store, in iOS 8. Ma è più simile a un percorso piuttosto che al controllo di espansione / compressione perché non è possibile vedere altri elementi raggruppati in intestazioni diverse nella stessa schermata.

App Store per iOS 8
Per favore dai 10 battiti se hai letto questo articolo.
Per favore, dai 20 battiti se pensi che sia utile.
Per favore, dai 50 battiti di mani, se pensi che sia fantastico!
Grazie :)

Continua su Android VS. iOS: confronta 20 componenti e pattern dell'interfaccia utente (parte 2)

Riferimento