Share
Sia che tu stia lavorando in-house, in appalto o per un'agenzia, le aziende hanno bisogno di app per diversi motivi. Le aziende affermate in particolare devono soddisfare i loro clienti esistenti e i dispositivi che utilizzano. Spesso significa una nuova app per Android e iPhone.
In un mondo ideale, trascorrevamo mesi a progettare due app. Ma in realtà, molti progetti non consentono così tanto tempo. Per tutte le app a cui ho lavorato, la scadenza è stata abbastanza stretta per progettare un'app, per non parlare della suddivisione del progetto in due.
Molto spesso stai progettando un'app, con modifiche apportate prima di affidarla a due team di sviluppo. Se stai progettando un'applicazione in questo modo, è importante capire la differenza tra le due piattaforme nella fase iniziale e i modi rapidi in cui puoi rendere l'esperienza originale per ogni.
È probabile che tu abbia una preferenza personale per un sistema. Ho sempre usato gli iPhone, quindi ho una comprensione più naturale dei pattern dell'interfaccia utente su iOS. La prima cosa da fare è fare i conti con l'altra piattaforma, e il modo migliore per farlo è comprare un altro dispositivo, un Android nel mio caso. Potrebbe anche essere una buona idea usare questo come dispositivo principale per la durata del progetto, per avere un'idea della piattaforma.
Se lavori in casa, chiedi loro di comprarti un dispositivo di prova. Se ci sono problemi, comunica con il management il valore che la comprensione della piattaforma alternativa aggiungerà al tuo lavoro di progettazione (il costo è costoso per due dispositivi fuori dalla tua tasca, ma per un business è una spesa bassa rispetto alla spesa sul progettazione e sviluppo di una nuova app). Se lavori come freelance, dovresti essere in grado di scriverlo contro la tua ricevuta fiscale.
Poiché stiamo progettando contemporaneamente per entrambe le piattaforme, mentre affrontiamo il mondo reale in cui il tempo è limitato, dovrai accettare la realtà di dare la priorità a una piattaforma all'inizio. Prendi questa decisione non in base alle tue preferenze personali, ma in base al mercato della tua app. Più persone nel tuo mercato usano telefoni Android? È un'app a pagamento? Qual è il pubblico di destinazione? Chiedere queste domande ti aiuterà a decidere su quale sia preferibile.
Leggi le linee guida sull'interfaccia utente per Android e iOS. In passato, Apple era nota per essere più severa con le sue linee guida. Per ottenere un'app nell'app store, esiste un processo di approvazione che richiede circa due settimane. Non esiste un processo di approvazione per il Play Store. Tuttavia, a causa di questa barriera inferiore all'ingresso su Android, la qualità del design è stata tradizionalmente peggiorata. Google sta cercando di cambiare questo con le loro linee guida sulla progettazione dei materiali.
L'estetica del material design è diventata molto familiare ai web designerCi sono molti buoni e gratuiti kit di interfaccia utente che puoi usare per i tuoi progetti (ne troverai alcuni elencati alla fine di questo articolo). L'utilizzo di questi componenti darà naturalmente all'app un tocco nativo. Ma anche quando ottieni i kit dell'interfaccia utente, può essere difficile sapere dove differire e dove stare lo stesso tra le piattaforme, quindi è lì che voglio aiutare.
Segui questi semplici passaggi e la tua app sarà sulla strada giusta per adattarsi a dispositivi Android e iOS.
Da quando iOS7, Apple ha spostato verso uno stile di progettazione più piatto, e abbandonato le ombre skeuomorphic, le trame e gli effetti che hanno definito i primi anni di iPhone. Android, essendo stato più sistematico nello stile all'inizio, è andato leggermente nell'altro senso. Le nuove linee guida sul design dei materiali di Google creano riferimenti più sottili al mondo reale, con un approccio a "carta" a più livelli che fornisce più gerarchia.
I telefoni Android hanno un pulsante indietro, che può essere utilizzato per tornare alle schermate precedenti nell'app.
RiprendereGli iPhone non hanno questo pulsante, quindi è necessario un modo per tornare alla schermata precedente. Questo di solito è fatto da un "retro" chevron nella parte in alto a sinistra dello schermo, ma deve essere preso in considerazione durante i vari viaggi nella tua app.
Ci sono elementi globali (come una barra di stato e un'intestazione) che appaiono su tutte le pagine del tuo disegno. Non dovresti modificare l'altezza o lo stile di queste barre se vuoi che l'app si senta nativa, quindi ti consiglio di definirle una volta nella progettazione della prima pagina per ogni piattaforma. Successivamente, puoi utilizzare un segnaposto (o lo stato e la barra superiore del tuo sistema operativo principale) su ognuno dei tuoi prototipi, ma indicare agli sviluppatori che dovrebbe essere lo stesso su tutta la linea.
Ci sono lievi differenze tra le barre di navigazione su ogni piattaforma. Su Android il testo è allineato a sinistra, mentre per iOS è centrato. Su iOS, molte aziende sostituiscono il titolo della pagina principale con il loro logo aziendale, ma questa non è la migliore pratica su Android. La barra di stato (con informazioni sulla rete, sulla batteria e sull'ora) è un componente nativo e non è necessario prendere in considerazione la progettazione. Assicurati solo di presentare mockup per utilizzare quello corretto per evitare confusione o distrazione.
Forse il più grande punto di differenza tra le piattaforme iOS e Android è la navigazione. Il modello di navigazione principale su Android è un menu di selezione. Gli utenti Android vanno naturalmente a questo per le voci di menu, e tende ad essere onnipresente per tutta l'esperienza. Le linee guida di Apple sono più a favore di una barra delle schede, che si trova nella parte inferiore dello schermo, e consente un facile accesso alle aree di livello superiore dell'app. Quando decidi l'architettura di livello superiore della tua app, puoi pianificare due menu separati per le due piattaforme.
Pensare all'architettura dell'app è probabilmente più importante del layout dei menu, un punto che ho fatto in un altro articolo su alcuni di questi problemi. Se la tua struttura è sana, la navigazione seguirà.
Come vedi qui, ci sono due schemi di navigazione: un menu di cassetto per Android e una barra di schede per iOS. A volte è più semplice nascondere semplicemente il livello di navigazione mentre lavori su singole viste.
Le carte stanno diventando il modello di interfaccia utente principale nel design digitale. Sono versatili e consentono agli utenti di consumare rapidi morsi di contenuti in modo adeguato ai comportamenti mobili. Visivamente, le carte si adattano molto bene al design dei materiali di Android (ispirandosi alla carta). L'utilizzo di ombreggiature e grondaie ragionevoli tra le carte creerà un aspetto naturale e si sentirà naturalmente.
Su iOS, l'uso delle carte richiede più attenzione e considerazione. Anche le grandi app come Facebook e Pinterest usano le carte in un modo leggermente in disaccordo con le linee guida di iOS. Le linee guida per iOS suggeriscono di utilizzare la profondità nei lucidi e negli overlay, ma la vista di base è solitamente più piatta. Instagram usa uno stile di design completamente piatto, sebbene ogni post possa essere considerato una carta da un punto di vista architettonico. Vale la pena guardare come Instagram ottiene la stessa sensazione di componente all'interno di uno stile iOS. Se stai andando con le carte su iOS, sii molto gentile con qualsiasi uso dell'ombra e cerca di mantenerle il più sottili possibile.
Schede per Android e iOS, alcune dimensioni danno un po 'di convenienzaLa famiglia di font di sistema su iOS è Helvetica Neue. Su Android è Roboto. Sebbene lo stile dei caratteri tipografici sia notevolmente diverso, le metriche dei caratteri sono abbastanza simili. Se stai risparmiando tempo sarai abbastanza sicuro da lavorare con uno solo, ma comunichi agli sviluppatori di implementare il font giusto per il sistema. Quando si lavora con layout e estremi importanti nelle dimensioni dei caratteri, è consigliabile testare almeno il layout con entrambi i tipi di carattere.
Se vuoi fare il miglio supplementare, dovrai prestare maggiore attenzione alle convenzioni tipografiche e di layout su ciascuna piattaforma, facendo sempre riferimento alle linee guida sopra riportate. Alcune generalizzazioni:
Questo è un esempio molto semplice, per sottolineare come anche in modo semplice la tipografia possa immediatamente dirti se hai a che fare con un'app Android o iOS.
iOS (44px @ 1x) e Android (48dp - 48px al rapporto 1: 1) hanno linee guida leggermente diverse per i touch target. Le linee guida sulla progettazione dei materiali suggeriscono anche di allineare tutti gli elementi a una griglia di base quadrata di 8 dpi.
Nell'ultimo progetto a cui ho lavorato, abbiamo trovato più sicuro seguire queste linee guida Android perché (a) il target touch più ampio di 48px è sicuro per entrambe le piattaforme e (b) il layout per Material design è più definito e aggiornato. Ad ogni modo, avrai bisogno di una griglia con cui lavorare, ma con Android definito in modo più rigoroso abbiamo trovato 8dp per funzionare bene. Ciò significa impostare il documento con incrementi di 8 dpi in entrambi i piani orizzontali e verticali per creare un layout griglia affiancato.
Esistono diversi stili di pulsante definiti in Material Design:
Rispetto al Material Design, le app iOS sono in genere piatte nell'aspetto, non facendo uso di profondità o ombre. I pulsanti principali hanno un colore di riempimento, mentre i pulsanti secondari vengono invertiti, usando un tratto dello stesso colore. Questa metafora può essere alquanto limitata, soprattutto se confrontata con le schede e altri elementi da seguire. Per ottenere questo stile molto piatto, è importante avere metafore chiare e coerenti per ciò che i colori significano nella tua app.
iOS ha anche un pulsante di stile semplice, ma non condivide lo stile maiuscolo di Android, ed è più leggero nel peso del carattere.
I fogli di azione consentono agli utenti di scegliere tra una moltitudine di azioni da un elemento dell'interfaccia utente. Ad esempio, quando tocco (o premo a lungo) su un'immagine, potrei voler condividere, caricare, copiare o eliminare l'immagine.
iOS e Android affrontano questo aspetto in modi leggermente diversi. In primo luogo, ci sono fogli di azione simili che vengono visualizzati dalla parte inferiore dello schermo, come una sovrapposizione sulla vista corrente.
Con i fogli di azione, gli overlay e gli avvisi, iOS e Android utilizzano diversi dettagli per indicare la profondità nei livelli:
Esistenti solo su Android, sono un metodo rapido per effettuare una selezione. Tieni presente, tuttavia, che non esiste un equivalente iOS nativo. Nell'esempio seguente, l'utente preme su "profilo" nel passaggio 1 e viene presentato con un menu semplice in quella posizione per scegliere uno dei profili disponibili. Questi menu sono anche usati frequentemente dal pulsante di sovrapposizione nella barra delle azioni, indicato da tre punti verticali.
Per input particolari come data e ora, Android ora è dotato di dialoghi integrati. Sembrano popup di avviso, ma con l'interfaccia utente adatta specificamente a inserire questo tipo di dati. Viene mostrato un esempio di un input del calendario. Android ha una sovrapposizione ottimizzata fornita per l'inserimento di una data. iOS si occupa di questo in modo molto diverso, apparendo come una ruota che si presenta come un foglio di sotto. Prestare attenzione nella pianificazione di questi e comunicare tempestivamente con gli sviluppatori i componenti di input.
I controlli segmentati vengono utilizzati per passare da contenuti diversi all'interno di una singola vista. Il loro uso è più o meno lo stesso, ma sono molto distintivi visivamente su ogni piattaforma, quindi è importante usare lo stile giusto. Su iOS ci sono tre schede, in stile simile ai pulsanti di linea discussi in precedenza. Su Android, sono contraddistinti da una semplice sottolineatura e ricevono molto più spazio bianco per indicare la loro interazione.
È importante ottenere lo stile giusto perché potrebbero controllare azioni importanti come iscriversi, accettare termini o persino confermare il pagamento. Vogliamo che si sentano affidabili e nativi.
Gli avvisi Android utilizzano gli stili di pulsanti piatti mostrati in precedenza, le cui dimensioni possono essere trovate nelle linee guida sulla progettazione dei materiali. Le azioni si trovano in basso a destra dell'avviso. I "pulsanti" sono in realtà interamente basati sul testo. Usano tutte le protezioni per dare loro più struttura e portano il colore dell'azione principale della tua app.
Su iOS, le azioni sono separate da divisori. Di solito si trovano in una frase o in un titolo perché ottengono la loro struttura da blocchi separati. Sono centrati nel campo e di nuovo erediteranno il tuo colore attivo.
Il design delle icone è piuttosto l'area specialistica nella progettazione dell'interfaccia utente. Sia che tu stia utilizzando icone gratuite, commissionando un designer di icone o progettando tu stesso le icone, c'è uno stile distinto in ogni piattaforma. Icone a linea popolarizzata iOS, con tratti molto sottili. Le icone del sistema Android hanno tratti più spessi o icone completamente solide. In passato, le icone di Android utilizzavano la prospettiva o una torsione tridimensionale, ma ora le loro linee guida specificano due icone dimensionali visualizzate direttamente. Ecco un rapido esempio con diverse icone per il confronto, oppure usa i collegamenti diretti alle linee guida dell'icona per Android o iOS
Sfortunato 13. Ci sono alcuni dettagli dell'interfaccia utente che possono scivolare attraverso le fessure. Quelli comuni come gli avvisi e le icone di caricamento sono spesso lasciati agli sviluppatori. Potresti aver sperimentato filatori rogue e strani avvisi che si sono sentiti in sintonia con il resto dell'app. Ci sono soluzioni native per queste, ma possono essere adattate allo stile della tua app. Questa è sicuramente un'area in cui la collaborazione con gli sviluppatori è il modo migliore per decidere in che modo il tuo dovrebbe funzionare.
I pulsanti di opzione, le caselle di controllo, i campi e gli interruttori sono componenti funzionali che dovrebbero avere un aspetto nativo. Come per gli avvisi e i dialoghi, questi controlli e input sono un'area di fiducia e familiarità per l'utente. Usa i componenti nativi il più possibile per questi, in modo che le persone (a) sappiano come usarli e (b) si fidi della tua app con i loro dati sensibili o i dettagli di pagamento.
Nell'esempio seguente vediamo gli equivalenti di pulsante e radio per Android e iOS. Ancora una volta, le differenze sono abbastanza piccole da consentirvi di progredire con un progetto, e modificare l'altro più tardi, ma le sottili differenze sono essenziali per un aspetto nativo. Usa il tuo kit UI il più possibile per questi componenti e comunica nuovamente con gli sviluppatori nelle prime fasi del processo.
Android (a sinistra) e iOS (a destra)Non è un compito impossibile creare un aspetto nativo per la tua app su iOS e Android con un solo design. Prova a tenere il passo con queste modifiche sin dall'inizio, tieni d'occhio componenti che non sono sincronizzati su un'unica piattaforma e lavora sempre il più vicino possibile con gli sviluppatori.
Speriamo che questo articolo ti fornisca risposte rapide su dove divergere il design per due app, ma avrai anche bisogno di alcuni strumenti e modelli per eseguire correttamente il tuo progetto. Ci sono molte risorse comunemente disponibili che puoi usare come punto di partenza, eccone alcune delle migliori:
Se vuoi saperne di più, molte delle informazioni che ho fornito possono essere trovate nelle linee guida della piattaforma. Sono abbastanza estesi, quindi ho appena estratto le parti che sono importanti da confrontare. Ma se hai domande più specifiche questo è il miglior punto di partenza:
Questi kit di interfaccia utente ti consentono di ricreare i controlli nativi di base e le dimensioni corrispondenti. Puoi estrarre i pezzi che ti servono e passare da una all'altra per l'uscita Android e iPhone dei tuoi progetti.
Anche se stai creando le tue icone, o commissionandole, sono utili da avere come segnaposto mentre lavori. Il design di icone può essere un lavoro in sé e non vuoi che le icone rallentino mentre ottieni una sensazione generale per la tua app. Recentemente ho trovato che i link in basso su icons8 sembrano piuttosto buoni, oppure flaticon.com è ottimo per icone più generiche.
È sempre utile disporre di modelli di dispositivi per presentare la tua app. Questi vengono in molte categorie. Potresti volere un mockup di dispositivo di base per il contesto, un dispositivo piatto semplificato per far risplendere la tua app o un mockup di stile di vita per presentare un caso d'uso. Ecco alcune risorse che ho trovato utili, ce ne sono molte altre là fuori. Quando si tratta di dispositivi Android, fai attenzione a quale scegli. Mi piacerei indirizzare verso la gamma Nexus, in quanto sono i telefoni di Google e non suggeriranno una preferenza verso altri produttori.
Accentsconagua