Share
Nella prima parte di questa serie in due parti, ti ho mostrato come prendere un'idea iniziale per un'app Android e come svilupparla in un piano dettagliato, fino alla mappatura delle singole schermate che costituiscono l'app completata.
Utilizzando l'esempio di un'app di viaggio che aiuterà gli utenti a pianificare e prenotare un'avventura estiva piena di divertimento con tutti i loro amici, abbiamo identificato il nostro pubblico di destinazione creando un utente utente (ricorda il nostro amico Sasha?) E quindi creato un elenco di funzionalità sarebbe perfetto per la versione 1.0 della nostra app (e perfetta per Sasha). Finalmente, abbiamo creato una lista di schermate e una mappa che mostra Esattamente come tutti questi schermi si adatteranno insieme.
Abbiamo coperto un sacco di argomenti nella prima parte, ma fino ad ora tutta la nostra pianificazione è stata un po 'di alto livello e astratta. Nella seconda parte ci avvicineremo e ci occuperemo di wireframing e prototipazione dei singoli schermi che compongono la nostra app.
Alla fine di questo tutorial avrai creato un prototipo digitale che potrai installare e testare sul tuo smartphone o tablet Android.
Immergiti subito e inizia a creare dei wireframe!
Wireframe è il punto in cui si tracciano tutti i principali componenti dell'interfaccia utente che si desidera posizionare su un particolare schermo. Lo scopo del wireframing è quello di delineare la struttura di uno schermo: non si tratta dei dettagli più fini di come appare uno schermo, quindi cerca di non essere risucchiato dalle specifiche del design grafico. Per ora, è sufficiente sapere che stai per posizionare un menu sullo schermo A; non devi preoccuparti di quale colore sarà il menu, o di come andrai a modificare il testo del menu.
Per ulteriori informazioni su wireframing, consulta le seguenti risorse:
I wireframe sono piuttosto ingannevoli: possono sembrare schizzi veloci e ruvidi, ma in realtà sono un potente strumento per esplorare, definire e perfezionare l'interfaccia utente della tua app. Possono anche aiutarti a identificare eventuali difetti con i tuoi progetti iniziali, prima di investire troppo tempo nel perfezionamento di questi progetti.
È molto più facile mettere una croce grande attraverso un wireframe, girare la pagina sul tuo notebook e ricominciare da capo piuttosto che riscrivere completamente il codice che hai già speso ore lavorandoci.
Quindi, ho cantato le lodi del wireframing abbastanza a lungo! Come si fa a creare un wireframe?
Hai alcune opzioni:
Un wireframe di carta della schermata di Google Apps a Hotel della nostra app.Creare wireframe digitali utilizzando software di editing delle immagini professionali come Adobe Photoshop o un programma wireframing dedicato come Pidoco, Axure, InDesign, Sketch, Omnigraffle o Balsamiq Mockups.
Un wireframe della Homescreen, creato usando Balsamiq.Ma perché limitarti a uno strumento, quando puoi sfruttare i benefici di entrambi? I wireframe cartacei e digitali hanno ciascuno un proprio insieme unico di punti di forza e di debolezza. Il wireframing digitale è perfetto per creare wireframe lucidi e precisi, ma navigare tra più menu non è sempre il modo migliore per far fluire quelle idee, e non è certo l'ideale quando vuoi testare rapidamente più idee diverse! D'altra parte, i wireframes di carta sono perfetti per una sessione di brainstorming a fuoco rapido, ma potreste avere difficoltà a creare wireframe di carta che siano sufficientemente accurati e dettagliati da servire come blueprint per il tipo di schermi che state per creare.
Ti consiglio di creare le tue prime bozze usando penna e matita (che è l'ideale per far scorrere quei succhi creativi) e poi, una volta che hai una serie di wireframe di carta di cui sei soddisfatto, puoi dedicare del tempo a rifinire queste bozze usando il software di wireframing digitale.
Questo è l'approccio che userò in questo tutorial, ma tieni presente che il wireframing è un esercizio creativo, quindi non ci sono regole dure e veloci qui. Usa il metodo che funziona meglio per te.
Per darti la migliore panoramica possibile del processo di wireframing e di prototipazione, selezionerò una schermata dalla mia app di viaggio e lavorerò su di essa per il resto di questo articolo. Lo schermo che selezionerò come la mia cavia è la checklist, perché penso che questa particolare schermata contenga alcuni elementi dell'interfaccia utente stimolanti che faranno un esempio interessante.
Solo per rinfrescare la memoria, nella prima parte ho scritto la seguente descrizione di come immaginavo la schermata della checklist finita:
Nel suo stato predefinito questa schermata visualizza una lista di controllo di tutte le attività che l'utente deve completare, al fine di pianificare un viaggio di successo. Toccando qualsiasi attività porterà l'utente a una schermata in cui è possibile completare questa attività. Ogni volta che l'utente completa un'attività, questo elemento viene spuntato dalla loro lista di controllo.
Per creare una prima bozza di wireframe, prendi carta e il tuo strumento di scrittura di tua scelta, quindi disegna il contorno rettangolare di un tipico smartphone o tablet.
Inizierò aggiungendo tutti gli elementi di navigazione al mio wireframe. Guardando la mia mappa dello schermo, posso vedere che l'utente deve essere in grado di raggiungere tre schermate dalla checklist:
Queste schermate rappresentano due diversi tipi di navigazione: navigazione all'indietro e navigazione in avanti.
'Select A City' è la schermata precedente nel flusso della mia applicazione, quindi rappresenta l'utente che si sposta indietro nella cronologia dell'applicazione. Android gestisce questo tipo di navigazione all'indietro automaticamente (di solito tramite il softkey "Indietro" dello smartphone o del tablet), quindi non è necessario aggiungere alcuna esplicita navigazione "Seleziona una città" all'interfaccia utente.
Le altre due schermate sono leggermente diverse, in quanto rappresentano l'utente che avanza nella nostra applicazione. Il sistema non gestisce automaticamente la navigazione in avanti, quindi è nostra responsabilità fornire all'utente tutto ciò di cui ha bisogno per poter navigare su questi schermi.
Questi elementi di navigazione assumeranno la forma di due TextViews, che ho intenzione di organizzare nello stile di una lista di controllo (okay, quindi due elementi non è un granché, ma se avessi continuato a lavorare su questo progetto alla fine avrei aggiunto più compiti a questa lista). Nel loro stato predefinito, ciascuno TextView ricorderà all'utente che è necessario completare questa attività, ad esempio "È ancora necessario prenotare un hotel!" Quando l'utente tocca entrambi TextView, li porteranno alla schermata Book Transport o Book a Hotel, in modo che possano completare questo compito.
Quando l'utente completa un'attività, la corrispondente TextView si aggiornerà per visualizzare le informazioni sull'albergo dell'utente o le relative modalità di trasporto (non ho intenzione di aggiungere nessuna di queste informazioni al mio wireframe per ora, ma è qualcosa da tenere a mente).
Per creare un effetto checklist, creerò un corrispondente ImageView per ciascuno TextView. Nel suo stato predefinito, ciascuno ImageView visualizzerà una croce rossa, ma una volta che l'utente completa un compito, questo sarà sostituito da un segno di spunta verde.
Infine, ho intenzione di aggiungere un titolo TextView, che mostrerà tutto ciò che l'utente ha scelto per chiamare questo particolare viaggio.
Mentre crei il tuo wireframe, potresti incontrare elementi dell'interfaccia utente che potrebbero funzionare in numerose posizioni e con dimensioni diverse. La creazione di un wireframe di carta non richiede praticamente molto tempo, quindi se hai altre idee, prendi qualche secondo per wireframe. In effetti, dovresti cercare di delineare alcune alternative per ogni schermo in modo da poter decidere quale idea ha il maggior potenziale.
Risciacqua e ripeti per ogni schermo che compone la tua app, finché non hai un set completo di wireframe di carta. Il prossimo passo è trasformare queste prime bozze in wireframe digitali più levigati.
C'è un sacco di software là fuori che è stato creato appositamente per il wireframing, quindi vale la pena dedicare un po 'di tempo alla ricerca delle opzioni su Google, anche se preferisci puoi usare il tuo software di fotoritocco preferito, come Adobe Photoshop.
Personalmente, sono un fan dei Balsamiq Mockups!
Dedica un po 'di tempo a creare e perfezionare il tuo design nel software di tua scelta, e stai alla ricerca di opportunità per modificare e perfezionare il tuo wireframe. Lavorare con un nuovo strumento può anche lanciare nuove idee, quindi se ti viene improvvisamente colpito da un lampo di ispirazione su come puoi migliorare il tuo design, prendi carta e filtra queste idee. Se resistono all'esame accurato del wireframe cartaceo, prosegui e ripiega queste modifiche nel tuo wireframe digitale.
Ancora una volta, risciacqua e ripeti per il resto dei tuoi schermi.
È ora di mettere alla prova i tuoi progetti creando un prototipo digitale basato sui wireframe.
La prototipazione ti dà la possibilità di acquisire un'esperienza pratica con l'aspetto e le funzioni del tuo progetto su un vero dispositivo Android, ma ti permette anche di testare il modo in cui il tuo progetto si traduce in configurazioni multiple dello schermo, tramite dispositivi Android Android (AVD)..
Quindi come si crea un prototipo digitale?
Il modo più semplice è utilizzare Android Studio, che funge anche da potente strumento di prototipazione digitale grazie all'editor di layout grafico integrato dell'IDE. In questa sezione userò molte delle nuove funzionalità introdotte in Android Studio 2.2, quindi se vuoi seguirlo assicurati di utilizzare Android Studio 2.2 Anteprima 1 o successiva.
Per creare il nostro prototipo, avvia Android Studio e crea un nuovo progetto. Per semplificare le cose, userò il modello 'Empty Activity'. Dal momento che testerai questo prototipo sul tuo dispositivo Android, assicurati di impostare l'SDK minimo del tuo progetto su qualcosa che sia compatibile con il tuo smartphone o tablet Android.
Una volta che Android Studio ha creato il tuo progetto, aprilo activity_main.xml file ed elimina quel fastidioso 'Hello World' TextView che Android Studio aggiunge a questo layout per impostazione predefinita. Assicurati di aver selezionato la scheda "Progettazione" in modo da poter visualizzare la tavolozza e il canvas di Android Studio.
Ora siamo pronti per dare vita al nostro wireframe! Iniziamo in alto, con il titolo dello schermo. È abbastanza ovvio che questo sarà un TextView, ma per quanto riguarda i suoi contenuti? Quando l'utente inizia a pianificare un viaggio, può chiamare quel viaggio come preferisce, quindi come facciamo a sapere quale testo utilizzare nel nostro prototipo?
Gestire il testo variabile è un tema ricorrente in questo prototipo, quindi dedichiamoci alcuni minuti per esplorare questo problema in modo più dettagliato ora.
I prototipi sono uno strumento potente nell'arsenale dello sviluppatore dell'app, ma non lasciamoci prendere dalla mano: quando uno schermo contiene elementi variabili, non è possibile prototipare ogni singola versione di quello schermo. Questo è certamente il caso con la nostra lista di controllo, in quanto l'utente può nominare il proprio viaggio qualsiasi cosa, dalla parte concisa Viaggio 1 al vagante e troppo eccitato Una vacanza estiva da sogno all'insegna del divertimento, e tutto in mezzo.
Mentre è impossibile per testare ogni titolo immaginabile, un prototipo è l'occasione perfetta per mettere il tuo progetto sotto una pressione seria, testando le variabili più strane e meravigliose che puoi immaginare.
Per il mio prototipo di lista di controllo, creerò tre risorse stringa: una che rappresenta il titolo "tipico" che immagino la maggior parte degli utenti sceglierà, una che è insolitamente breve e una che è seriamente prolissa. Testare questi estremi è uno dei modi più efficaci per eliminare tutti i potenziali problemi che potrebbero essere in agguato nei progetti dello schermo.
Dopo aver creato queste risorse stringa, devi dare questo testo da qualche parte per vivere, quindi prendi a TextView dalla tavolozza e rilasciarlo sulla tela.
Android Studio 2.2 ha introdotto i concetti di vincoli, utili per creare rapidamente prototipi digitali (e interfacce utente in generale). Puoi creare manualmente i vincoli, ma perché fare tutto questo quando Android Studio può fare il duro lavoro per te?
Esistono due modi per consentire a Android Studio di creare vincoli per te, quindi esploriamo entrambi. Il primo metodo è usare autoconnect, quindi assicurati di aver abilitato questa modalità passando da Connessione automatica pulsante (dove il cursore è posizionato nello screenshot qui sotto).
Ora trascina il tuo TextView al posto che dovrebbe apparire nel tuo layout. Voglio che il mio titolo sia centrato, quindi ho intenzione di trascinare il TextView al centro della tela e rilasciare. Quando rilasci il TextView, Android Studio risponderà creando tutti i vincoli necessari per mantenerlo TextView a posto.
Nota, quando due vincoli stanno tirando un widget in direzioni opposte, quei vincoli appaiono come linee seghettate, motivo per cui questi vincoli sembrano diversi dai vincoli regolari.
Se non sei sicuro se il tuo TextView è perfettamente centrato, trascinalo leggermente lungo l'asse orizzontale. I tooltip appariranno su entrambi i lati del widget, visualizzando la sua posizione corrente lungo l'asse orizzontale sinistro e destro. Trascina il TextView fino a quando non ottieni uno split pari a 50/50.
Imposta questo TextView per visualizzare una delle risorse di stringa che hai creato per il tuo titolo, non importa quale stringa inizi, dato che li testerai comunque!
Quindi, costruiremo la nostra checklist. Utilizzerò due immagini nella mia lista di controllo: un segno di spunta verde che verrà visualizzato quando l'utente ha completato un'attività e una croce rossa per indicare che questo elemento è ancora saldamente nell'elenco "Da fare" dell'utente. Crea queste immagini e aggiungile ai tuoi progetti drawable cartella.
Quindi, apri il tuo strings.xml file e crea i due messaggi predefiniti:
Trascina due TextViews dalla tavolozza e lascialo cadere sulla tela: non preoccuparti di ottenere tutto perfettamente allineato ancora. Imposta questi TextViews per visualizzare le risorse di stringa predefinite.
Quindi, prendi due ImageViews dalla palette e rilasciarli sulla tela. Mentre li rilasci ImageView, Android Studio ti chiederà di selezionare un disegnabile da visualizzare. Inizieremo con la prototipazione della versione predefinita di questa schermata, quindi selezioniamo l'immagine a croce rossa per entrambi ImageViewS.
A questo punto, abbiamo aggiunto tutti gli elementi dell'interfaccia utente necessari, ma dal momento che li abbiamo rilasciati tutti casualmente nell'area di disegno, è probabile che il tuo prototipo non assomigli molto al tuo wireframe. Ancora una volta sono i vincoli al salvataggio!
Il secondo modo in cui Android Studio può creare automaticamente dei vincoli è tramite il motore di inferenza. Trascorri del tempo trascinando il tuo TextViews e ImageViews nella posizione perfetta sulla tela, e quindi dare Android Studio Inferere i vincoli pulsante un clic (dove il cursore è posizionato nello screenshot qui sotto).
Quando fai clic su questo pulsante, Android Studio creerà automaticamente tutti i vincoli necessari per fornire il layout corrente.
Questa è la versione predefinita di questa schermata ordinata, ma dobbiamo anche testare come questo schermo si adatta quando l'utente inizia a controllare le attività dalla loro lista 'Da fare'. In definitiva, voglio questi TextViews per visualizzare alcune informazioni di base sulle prenotazioni alberghiere dell'utente e le modalità di viaggio. Questo ci contrappone un vecchio nemico: testo variabile.
Questo schermo deve essere abbastanza flessibile da visualizzare informazioni su hotel (e aeroporti, stazioni ferroviarie, ecc.) Con nomi seriamente lunghi, ma allo stesso tempo non dovrebbe sembrare strano se l'utente prenota in un hotel così bello e alla moda che il suo nome è una singola lettera, o il simbolo pi (sì, è quello tipo di hotel).
Ancora una volta, la soluzione è creare stringhe multiple che rappresentino il testo più scomodo che il layout potrebbe dover gestire. Se non sei sicuro di quanto estremo dovresti ottenere con le tue risorse stringa, puoi sempre rivolgerti al tuo amico Internet per ottenere indicazioni. In questo scenario, passerei un po 'di tempo a cercare hotel e aeroporti, cercando in particolare quelli lunghi, corti o addirittura giusti strano nomi e quindi utilizzare i migliori esempi nelle mie risorse stringa.
Una volta create tutte le risorse, puoi eseguire un po 'di test preliminari passando tra le diverse risorse di stringa e i drawable e quindi controllando l'output nell'editor di layout incorporato di Android Studio.
Mentre questo non ti dà lo stesso livello di intuizione come testare la tua app su un vero dispositivo Android o AVD, lo è tanto più veloce, rendendolo il modo perfetto per identificare eventuali problemi immediati e abbaglianti con il tuo layout.
Probabilmente avrai bisogno di mescolare il tuo TextViews e ImageViews un po 'per trovare quel perfetto equilibrio tra un layout che può visualizzare una grande quantità di testo e un layout che non sembra strano quando deve solo mostrare alcune lettere.
Se hai bisogno di fare qualche ritocco (so che dovevo farlo!), Basta semplicemente afferrare i widget nella tela e trascinarli in una nuova posizione. Una volta che sei soddisfatto dei risultati, basta dare il Inferere i vincoli fai clic su un altro clic e Android Studio creerà per te una serie di vincoli completamente nuova.
Ecco il mio prototipo finito.
Non male, ma il vero test è quanto bene questo layout si traduce su smartphone, tablet e AVD Android con diverse configurazioni dello schermo, quindi questo è esattamente ciò che faremo dopo.
Non c'è niente di meglio che provare un'esperienza pratica con l'aspetto e le funzioni del tuo prototipo su un dispositivo reale, quindi inizia installando il tuo progetto sul tuo smartphone o tablet Android e trascorrendo del tempo a interagire con esso, solo per avere un'idea del esperienza utente complessiva. Non dimenticare di testare il tuo prototipo in modalità orizzontale e verticale!
Se si individuano problemi o opportunità per migliorare la progettazione dello schermo, prendere nota di questi, in modo da sapere esattamente quali modifiche è necessario applicare una volta terminato il test del prototipo.
Se la tua app fornirà la migliore esperienza per tutti i tuoi utenti, allora dovrà essere abbastanza flessibile da adattarsi a una gamma di configurazioni dello schermo. Dopo aver testato a fondo il tuo prototipo sul tuo dispositivo Android, dovresti creare più AVD con dimensioni e densità dello schermo diverse e quindi testare il tuo prototipo su tutti. Di nuovo, se noti qualcosa di "off" sul tuo prototipo, o hai un'idea di come potresti migliorare il design, prendi nota di questi cambiamenti per non dimenticarli.
Dopo aver testato a fondo la versione predefinita del layout, è necessario testare il modo in cui il prototipo si adatterà una volta che l'utente inizia a spuntare le attività dalla loro checklist.
Aggiorna entrambi ImageViews per visualizzare il segno di spunta verde, e cambiare il testo predefinito per due delle risorse stringa alternative - di nuovo, dato che testeremo tutte le nostre risorse di stringa, non importa in realtà quale dei due inizi con.
Metti questa nuova versione del tuo prototipo attraverso lo stesso vigoroso processo di test, che significa installarlo sul tuo dispositivo Android per un'esperienza pratica, e poi testarlo su AVD con diverse configurazioni dello schermo. Come sempre, prendi nota delle tue scoperte. Quindi, risciacqua e ripeti per tutte le risorse di stringa create per la checklist e il titolo TextViewS.
Una volta terminato il test, è necessario rivedere le note. Se hai solo bisogno di apportare piccole modifiche, potresti essere in grado di farla franca applicando queste modifiche direttamente al tuo prototipo e ai wireframe digitali. Tuttavia, se queste modifiche sono più drammatiche o equivalgono a una riprogettazione completa, è necessario dedicare un po 'di tempo prima di esplorarle in modo più dettagliato. Idealmente, dovresti mettere le tue nuove idee attraverso lo stesso processo di wireframe, prototipazione e test come le tue idee iniziali, poiché questo è ancora il modo più efficace per stirare qualsiasi problema con i tuoi progetti.
Certo, è frustrante ritrovarsi nella fase di wireframe quando sembrava che avessi quasi finito l'intero processo di progettazione, ma il tempo trascorso ad esplorare nuove idee è sempre tempo ben speso.
Anche se finisci per scartare queste idee a favore del tuo design originale, almeno saprai che stai davvero lavorando con i migliori progetti di schermo che potresti realizzare. Non c'è niente di peggio che investire un sacco di tempo e fatica in un progetto, quando per tutto il tempo hai un fastidioso dubbio in fondo alla tua mente che forse, solo forse, avresti dovuto seguire una strada diversa.
Fondamentalmente, se la prototipazione ha suscitato nuove idee, ora è il momento di esplorarle!
Una volta che hai testato tutte le versioni del tuo prototipo su una vasta gamma di AVD, c'è solo una cosa da fare: creare un prototipo di ogni altro schermo nella tua mappa dello schermo, e sottoporre ogni ultimo allo stesso livello di controllo.
In questa serie in due parti, abbiamo esaminato come prendere un'idea iniziale e svilupparla in un progetto dettagliato.
Questo può sembrare un sacco di lavoro (perché, siamo onesti, è così è molto lavoro) ma ogni fase di questo processo ti aiuterà a eliminare qualsiasi problema con il tuo design e a sfruttare le opportunità per migliorare la tua app.
Pianificazione, wireframing e prototipazione possono effettivamente farti risparmiare tempo a lungo termine riducendo le tue possibilità di dover affrontare i problemi più importanti in futuro. Non appena inizi a scrivere il codice, i problemi di progettazione vengono risolti tanto più difficile.
Ma alla fine, investire così tanto tempo ed energie per perfezionare il design sottostante della tua app ti aiuterà a offrire un'esperienza migliore ai tuoi utenti. Ciò significa più download, recensioni più positive e più persone che raccomandano la tua app ai loro amici e familiari e chi non vorrebbe questo?
Accentsconagua