Share
În prima parte a acestei serii în două părți, ți-am arătat cum să iei o idee inițială pentru o aplicație Android și să o dezvolți într-un plan detaliat - chiar în jos pentru a cartografia ecranele individuale care vor alcătui aplicația finită.
Folosind exemplul unei aplicații de călătorie care îi va ajuta pe utilizatori să planifice și să rezerve o aventură de vară plină de distracție cu toți prietenii lor, am identificat publicul țintă creând un personaj de utilizator (amintiți-vă pe prietenul nostru Sasha?) Și apoi creat o listă de caracteristici care ar fi perfect pentru versiunea 1.0 a aplicației noastre (și perfectă pentru Sasha). În cele din urmă, am creat o listă de ecran și o hartă care arată exact modul în care toate aceste ecrane se vor potrivi împreună.
Am acoperit o mulțime de teren în prima parte, dar până acum toate planificările noastre au fost puțin superioare și abstracte. În partea a doua vom ajunge să ne apropiem de noi și să fim personali prin interceptarea și prototiparea ecranelor individuale care vor alcătui aplicația noastră.
Până la sfârșitul acestui tutorial, ați creat un prototip digital pe care îl puteți instala și testa pe propriul smartphone sau tabletă Android.
Hai să ne aruncăm în apă și să începem să creăm niște cadre!
Wireframing este locul în care schițați toate componentele UI majore pe care doriți să le plasați pe un anumit ecran. Scopul sincronizării este să contureze structura unui ecran - nu este vorba despre detaliile mai fine ale modului în care arată un ecran, așa că încercați să nu vă sugeți în specificul designului grafic. Deocamdată, este suficient să știți că veți plasa un meniu pe ecranul A; nu trebuie să vă faceți griji cu privire la ce culoare va fi acest meniu sau cum veți stilul textului meniului.
Pentru mai multe informații despre structura de tip wireframe, consultați următoarele resurse:
Filerele sunt destul de înșelătoare - ele ar putea să arate schițe rapide, dificile și gata, dar ele sunt de fapt un instrument puternic pentru explorarea, definirea și perfecționarea interfeței de utilizare a aplicației. Ele vă pot ajuta, de asemenea, să identificați orice defecte cu designul inițial al ecranului, înainte de a investi prea mult timp în perfecționarea acestor modele.
Este mult mai ușor să puneți o cruce mare printr-o carcasă, să întoarceți pagina în notebook și să începeți din nou, decât să rescrieți complet codul pe care l-ați cheltuit deja ore lucrul la.
Deci, am cântat laudele de sârmă destul de lungă! Cum faceți să creați o rețea de sârmă?
Aveți câteva opțiuni:
O schemă de hârtie din ecranul de rezervare al aplicației noastre.Creați cadre digitale utilizând programe profesionale de editare a imaginilor, cum ar fi Adobe Photoshop, sau un program special dedicat de modelare a firului, cum ar fi Pidoco, Axure, InDesign, Sketch, Omnigraffle sau Balsamiq Mockups.
O schemă a casei de ecran, creată folosind Balsamiq.Dar de ce să vă limitați la un singur instrument, când puteți profita de avantajele ambelor? Hârtia și firele digitale au fiecare un set unic de puncte forte și puncte slabe. Scanarea digitală este perfectă pentru crearea de cadre de sârmă lustruite și precise, dar navigarea în mai multe meniuri nu este întotdeauna cea mai bună modalitate de a obține acele idei care curg - și cu siguranță nu este ideal atunci când doriți să testați rapid mai multe idei diferite! Pe de altă parte, firele de hârtie sunt excelente pentru o sesiune de brainstorming cu foc rapid, dar puteți încerca să creați fire de hârtie care să fie exacte și detaliate pentru a servi drept planuri pentru felul de ecrane pe care le veți crea.
Vă recomandăm să vă creați primele curente folosind stilou și creion (care este ideal pentru a obține acele sucuri creative care curg) și apoi, odată ce aveți un set de fire de hârtie cu care sunteți mulțumit, puteți petrece ceva timp pentru a rafina aceste curente folosind software digitalframing.
Aceasta este abordarea pe care o voi folosi în acest tutorial, dar trebuie avut în vedere faptul că sincronizarea este un exercițiu creativ, deci nu există reguli dure și rapide aici. Utilizați oricare dintre metodele care funcționează cel mai bine pentru dvs..
Pentru a vă oferi cea mai bună prezentare posibilă a procesului de scanare și prototipuri, voi alege un ecran din aplicația mea de călătorie și voi lucra la acesta în tot restul acestui articol. Ecranul pe care o voi selecta pentru că porcul meu de cobai este lista de verificare, deoarece consider că acest ecran conține câteva elemente de interfață uimitoare care vor face un exemplu interesant.
Doar pentru a vă reîmprospăta memoria, în prima parte am scris următoarea descriere a modului în care mi-am imaginat ecranul de verificare finalizat:
În starea implicită, acest ecran afișează o listă de verificare a tuturor sarcinilor pe care utilizatorul trebuie să le finalizeze pentru a planifica o călătorie reușită. Dacă atingeți orice sarcină, utilizatorul va ajunge la un ecran unde poate îndeplini această sarcină. Ori de câte ori utilizatorul finalizează o activitate, acest element este bifat de pe lista lor de verificare.
Pentru a crea o primă schemă de fir, luați o hârtie și un dispozitiv de scriere preferat, apoi trageți conturul dreptunghiular al unui smartphone sau tabletă tipic.
Voi începe prin a adăuga toate elementele de navigație la firul meu. Privind harta mea de ecran, văd că utilizatorul trebuie să poată ajunge la trei ecrane din lista de verificare:
Aceste ecrane reprezintă două tipuri diferite de navigație: navigare înapoi și navigare înainte.
"Selectați un oraș" este ecranul anterior din fluxul aplicației mele, deci reprezintă utilizatorul care se deplasează înapoi prin istoricul aplicației. Android gestionează automat acest tip de navigare înapoi (de obicei, prin tasta soft "Spate" a smartphone-ului sau a tabletei), astfel încât să nu mai fie nevoie să adăugați navigare explicită "Selectați un oraș".
Celelalte două ecrane sunt puțin diferite, deoarece reprezintă utilizatorul care avansează în aplicația noastră. Sistemul nu se ocupă în mod automat de navigarea înainte, deci este responsabilitatea noastră să oferim utilizatorului tot ceea ce este necesar pentru a putea naviga către aceste ecrane.
Aceste elemente de navigație vor lua forma a două TextViews, pe care o voi aranja în stilul unei liste de verificare (bine, deci două elemente nu sunt de mult o listă, dar dacă am continua să lucrez la acest proiect, în cele din urmă aș adăuga mai multe sarcini în această listă). În starea lor implicită, fiecare TextView va reaminti utilizatorului că trebuie să-și îndeplinească această sarcină, de exemplu "Aveți nevoie să rezervați un hotel!" Când utilizatorul întrerupe fie TextView, le va duce la ecranul Book Transport sau Book a Hotel, astfel încât să poată îndeplini această sarcină.
Când utilizatorul completează o sarcină, respectivul TextView se va actualiza pentru a afișa informații despre hotelul utilizatorului sau despre modalitățile de transport ale acestuia (nu voi adăuga niciunul din aceste informații la firul meu wireframe pentru moment, dar trebuie luat în considerare ceva).
Pentru a crea un efect de listă de verificare, voi crea o corespondență ImageView pentru fiecare TextView. În starea implicită, fiecare ImageView va afișa o cruce roșie, dar odată ce utilizatorul finalizează o activitate, acest lucru va fi înlocuit cu un marcaj verde.
În sfârșit, voi adăuga un titlu TextView, care va afișa orice a ales utilizatorul pentru a apela această călătorie specială.
Pe măsură ce vă construiți scheletul, puteți întâlni elemente ale UI care ar putea funcționa în numeroase poziții și la diferite mărimi. Crearea unei carcase de hârtie nu necesită deloc timp, deci, dacă aveți alte idei, luați câteva momente pentru a le instala. De fapt, ar trebui să încercați să schițați câteva alternative pentru fiecare astfel încât să puteți decide care idee are cel mai mare potențial.
Clătiți și repetați pentru fiecare ecran care alcătuiește aplicația dvs., până când aveți un set complet de fire de hârtie. Următorul pas este transformarea acestor prime schițe într-o rețea de fire digitale mai polizate.
Există o mulțime de software acolo care a fost creat special pentru sincronizare, deci merită să petreceți timp cercetând opțiunile dvs. pe Google, deși dacă preferați, puteți utiliza în schimb software-ul dvs. preferat de editare a imaginilor, cum ar fi Adobe Photoshop.
Personal, eu sunt un fan al lui Balsamiq Mockups!
Petreceți ceva timp creând și perfecționându-vă designul în software-ul ales de dvs. și fiți în căutarea oricăror oportunități de a vă îmbunătăți și perfecționa schema. Lucrul cu un nou instrument poate, de asemenea, să arunce niște idei noi, așa că dacă sunteți brusc surprins de o inspirație rapidă despre cum vă puteți îmbunătăți designul, luați câteva hârtii și trăiați aceste idei. Dacă se ridică la controlul de scanare a hârtiei, mergeți mai departe și împăturiți aceste modificări în cadrul dvs. digital.
Încă o dată, clătiți și repetați pentru restul ecranelor.
Este timpul să vă puneți la încercare proiectele făcând un prototip digital bazat pe firele dumneavoastră.
Prototyping vă oferă șansa de a obține o experiență reală cu privire la modul în care designul dvs. arată și funcționează pe un dispozitiv Android real, dar vă permite de asemenea să testați modul în care designul dvs. se traduce prin mai multe configurații de ecran, prin dispozitivele Android Virtual Devices (AVD).
Deci, cum creați un prototip digital?
Cea mai ușoară modalitate este să utilizați aplicația Android Studio, care se dublează ca un instrument puternic de prototip digital, datorită editorului de grafică construit în IDE. Pe parcursul acestei secțiuni, voi folosi multe dintre noile caracteristici introduse în Android Studio 2.2, deci dacă doriți să urmați, asigurați-vă că rulați Android Studio 2.2 Preview 1 sau mai recent.
Pentru a crea prototipul nostru, porniți Android Studio și creați un nou proiect. Pentru a păstra lucrurile simple, voi folosi șablonul "Empty Activity". Din moment ce veți testa acest prototip pe propriul dispozitiv Android, asigurați-vă că setați SDK-ul minim al proiectului dvs. la ceva compatibil cu telefonul smartphone sau tabletă Android.
Odată ce aplicația Android Studio a creat proiectul, deschideți-l activity_main.xml fișier și ștergeți că enervant "Hello World" TextView că Android Studio adaugă la acest aspect în mod implicit. Asigurați-vă că ați selectat fila "Design" pentru a vedea paleta și panza Android Studio.
Acum suntem gata să aducem la viață viața noastră! Să începem în partea de sus, cu titlul ecranului. Este destul de evident că acest lucru va fi a TextView, dar cum rămâne cu conținutul său? Atunci când utilizatorul începe să planifice o excursie, poate apela călătoria pe care o dorește, așa cum știm ce text să folosim în prototipul nostru?
Confruntarea cu textul variabil este o temă recurentă în acest prototip, deci hai să luăm câteva momente pentru a explora această problemă în detaliu acum.
Prototipurile sunt un instrument puternic în arsenalul dezvoltatorului de aplicații, dar să nu fim deranjați - atunci când un ecran conține elemente variabile, nu există nici un fel de prototip pentru fiecare versiune a acestui ecran. Acest lucru este cu siguranță în cazul listei noastre de verificare, deoarece utilizatorul putea să-și numească orice excursie, de la mizerie Călătoria 1 la râsul și exagerat Fun-completat vacanță de vară final de vise, și totul între ele.
În timp ce e imposibil pentru a testa toate titlurile imaginabile, un prototip este ocazia perfectă de a vă pune designul sub o anumită presiune gravă prin testarea celor mai ciudate și minunate variabile pe care le puteți gândi.
Pentru prototipul listei mele de verificare, voi crea trei resurse de șir: una reprezentând titlul "tipic" pe care îmi imaginez că majoritatea utilizatorilor o vor alege, unul neobișnuit de scurt și unul serios lung. Testarea acestor extreme este una dintre cele mai eficiente modalități de eliminare a oricăror probleme potențiale care ar putea fi ascunse în desenele dvs. de ecran.
Odată ce ați creat aceste resurse șir, trebuie să dați acest text undeva unde să trăiască, prindeți astfel TextView din paletă și plasați-o pe panza.
Android Studio 2.2 a introdus conceptele de constrângeri, care sunt utile pentru construirea rapidă a prototipurilor digitale (și a interfețelor utilizatorilor în general). Puteți să creați constrângeri manual, dar de ce să faceți tot efortul atunci când aplicația Android Studio poate face munca grea pentru dvs.?
Există două moduri de a obține Android Studio pentru a crea constrângeri pentru dvs., așa că hai să explorăm ambele. Prima metodă este să utilizați conexiunea automată, deci asigurați-vă că ați activat acest mod prin comutarea întrerupătorului Conectare automata (unde cursorul este poziționat în imaginea de mai jos).
Acum, glisați-vă TextView la locul în care ar trebui să apară în aspectul dvs. Vreau ca titlul meu să fie centrat, așa că o să trag TextView la mijlocul pânzei și eliberarea. Când eliberați TextView, Android Studio va răspunde creând toate constrângerile necesare pentru a ține acest lucru TextView la loc.
Rețineți că, atunci când două constrângeri trag un widget în direcții opuse, acele constrângeri apar ca niște linii zimțate, motiv pentru care aceste constrângeri par diferite față de constrângerile obișnuite.
Dacă nu sunteți sigur dacă dvs. TextView este perfect centrat, trageți-l ușor de-a lungul axei orizontale. Setul de instrumente va apărea pe fiecare parte a widget-ului, afișând poziția sa actuală de-a lungul axei orizontale stânga și dreaptă. Trageți TextView până când veți obține o împărțire parțială 50/50.
Setați asta TextView pentru a afișa una dintre resursele de șir pe care le-ați creat pentru titlul dvs. - nu contează cu adevărat în ce șir ați începe, așa cum oricum le veți testa!
Apoi, vom construi lista noastră de verificare. Voi folosi două imagini în lista mea de verificare: o bifă verde care va apărea atunci când utilizatorul a finalizat o sarcină și o cruce roșie pentru a indica că acest element este în continuare ferm în lista utilizatorului "A face". Creați aceste imagini și adăugați-le la proiectul dvs. drawable pliant.
Apoi, deschide-ți strings.xml fișier și creați cele două mesaje implicite:
Trageți doi TextViewdin paletă și le aruncați pe panza - nu vă faceți griji că totul a fost perfect aliniat. Stabiliți-le TextViews pentru a afișa resursele de șir implicite.
Apoi, apucați doi ImageViews din paleta și le aruncați pe panza. Când eliberați fiecare ImageView, Android Studio vă va solicita să selectați o extensie care să poată fi afișată. Vom începe prin prototiparea versiunii implicite a acestui ecran, deci selectați imaginea de cruce roșie pentru ambele ImageViews.
În acest moment, am adăugat toate elementele UI necesare, dar din moment ce le-am lăsat pe panza pe toate, șansele sunt că prototipul dvs. nu seamănă mult cu scheletul dvs. Încă o dată sunt constrângeri pentru salvare!
Cea de-a doua modalitate prin care Android Studio poate crea automat constrângeri este prin intermediul motorului de inferență. Petreceți ceva timp târându-vă TextViewși ImageViews în poziția perfectă pe pânză, apoi dați Android Studio Constrângeri de inferior click un clic (unde cursorul este poziționat în imaginea de mai jos).
Când faceți clic pe acest buton, Android Studio va crea automat toate constrângerile necesare pentru a livra aspectul actual.
Această versiune prestabilită a acestui ecran este sortată, dar trebuie de asemenea să testați modul în care acest ecran se adaptează odată ce utilizatorul începe să verifice sarcinile din lista lor "Pentru a face". În cele din urmă, vreau asta TextViewpentru a afișa câteva informații de bază despre rezervările hotelului și modalitățile de călătorie ale utilizatorului. Acest lucru ne pune în fața unui vechi dușman: textul variabil.
Acest ecran trebuie să fie suficient de flexibil pentru a afișa informații despre hoteluri (și aeroporturi, gări, etc.) cu nume foarte lungi, dar în același timp nu ar trebui să pară ciudat dacă utilizatorii fac cărți într-un hotel care este atât de cool și la modă că numele său este o singură literă sau simbolul pi (da, este acea tipul de hotel).
Încă o dată, soluția este de a crea mai multe șiruri care reprezintă cel mai ciudat text pe care aspectul dvs. ar putea să-l poată trata. Dacă nu sunteți sigur despre cât de extremă ar trebui să obțineți cu resursele dvs. de șir, atunci puteți întotdeauna să vă adresați prietenului dvs. pe Internet pentru îndrumare. În acest scenariu, aș petrece ceva timp în cercetarea hotelurilor și a aeroporturilor, în special în căutarea unor persoane cu durată lungă, scurtă sau chiar dreaptă ciudat nume, apoi utilizați cele mai bune exemple din resursele mele de șir.
Odată ce ați creat toate resursele dvs., puteți efectua un anumit număr de teste preliminare prin comutarea între diferitele resurse de șir și de exportabile, apoi verificând ieșirea din editorul de layout built-in Android Studio.
În timp ce acest lucru nu vă oferă același nivel de înțelegere ca și testarea aplicației pe un dispozitiv Android real sau AVD, este mult mai repede, făcând-o perfectă pentru a identifica orice problemă imediată, evidentă, cu aspectul dvs..
Probabil că va trebui să vă amestecați TextViewși ImageViewe în jurul unui pic pentru a găsi acel echilibru perfect între un aspect care poate afișa o cantitate mare de text și un aspect care nu pare ciudat atunci când trebuie să afișeze doar câteva litere.
Dacă aveți nevoie să faceți unele tweaks (știu că am avut de a!), Atunci pur și simplu apuca widget-uri în panza și glisați-le într-o nouă poziție. Odată ce sunteți mulțumit de rezultate, dați doar Constrângeri de inferior buton un alt clic și Android Studio va crea un set complet nou de constrângeri pentru tine.
Iată prototipul meu finit.
Nu este rău, dar adevăratul test este cât de bine acest aspect se traduce între smartphone-urile Android, tablete și AVD-uri cu configurații diferite ale ecranului, deci exact ceea ce vom face în continuare.
Nu există nici un substitut pentru a obține experiențe practice cu privire la modul în care prototipul dvs. arată și funcționează pe un dispozitiv real, așa că începeți prin instalarea proiectului pe propriul smartphone sau tabletă Android și petrecând ceva timp în interacțiune cu acesta, doar pentru a obține o simț pentru experiența generală a utilizatorului. Nu uitați să vă testați prototipul atât în modul peisaj, cât și în modul portret!
Dacă identificați probleme sau oportunități de îmbunătățire a designului ecranului, faceți o notă de ele, astfel încât să știți exact ce modificări trebuie să aplicați după ce ați terminat de testat prototipul.
Dacă aplicația dvs. va oferi cea mai bună experiență pentru toți utilizatorii, atunci trebuie să fie suficient de flexibilă pentru a se adapta la o serie de configurații de ecran. Odată ce ați testat temeinic prototipul propriului dispozitiv Android, ar trebui să creați mai multe AVD-uri care au diferite dimensiuni și densități ale ecranului și apoi să vă testați prototipul în toate acestea. Din nou, dacă observați ceva "în afara" despre prototipul dvs. sau aveți o idee despre cum ați putea îmbunătăți designul, faceți o notă despre aceste modificări, astfel încât să nu le uitați.
Odată ce ați testat temeinic versiunea implicită a aspectului dvs., trebuie să testați modul în care prototipul se va adapta odată ce utilizatorul începe să bifeze sarcinile din lista de verificare.
Actualizați ambele ImageViews pentru a afișa semnul verde trasabil și pentru a comuta textul implicit pentru două dintre resursele de șir alternativ - din nou, din moment ce vom testa toate resursele de șir, nu contează cu adevărat care dintre ele încep cu.
Puneți această nouă versiune a prototipului dvs. prin același proces viguros de testare, ceea ce înseamnă că îl instalați pe dispozitivul Android pentru o experiență hands-on și apoi îl testați pe AVD-uri cu diferite configurații de ecran. Ca întotdeauna, notează-ți constatările. Apoi, clătiți și repetați pentru toate resursele de șir pe care le-ați creat pentru lista dvs. de verificare și titlu TextViews.
Odată ce ați terminat de testat, ar trebui să vă revizuiți notele. Dacă trebuie doar să faceți mici modificări, atunci este posibil să reușiți să scăpați cu aplicarea acestor modificări direct la prototipul dvs. și la firmele digitale. Cu toate acestea, în cazul în care aceste modificări sunt mai drastice sau se ridică la o reproiectare completă, atunci ar trebui să petreceți un timp explorându-le în detaliu mai întâi. În mod ideal, ar trebui să vă puneți ideile noi prin același proces de sincronizare, prototip și testare ca și ideile inițiale, deoarece acesta este în continuare cel mai eficient mod de a elimina orice problemă cu desenele.
Sigur, este frustrant să te regăsești la faza de sârmă atunci când părea că ai fost aproape făcută cu întregul proces de proiectare, dar timpul petrecut în explorarea ideilor noi este mereu timpul petrecut bine.
Chiar dacă veți sfârși prin a renunța la aceste idei în favoarea designului dvs. original, cel puțin veți ști că chiar lucrați cu cele mai bune modele de ecran pe care le puteți găsi. Nu este nimic mai rău decât să investești o grămadă de timp și efort într-un proiect, când tot timpul ai o îndoială ciudată în spatele minții tale, că poate, doar poate, ar fi trebuit să mergeți pe un alt traseu.
Practic, dacă prototipul a stârnit idei noi, atunci este momentul să le explorăm!
Odată ce ați testat toate versiunile prototipului dvs. într-o serie de AVD-uri, există doar un lucru de făcut: creați un prototip al oricărui alt ecran pe harta ecranului dvs. și supuneți fiecărui ultimul la același nivel de control.
În această serie de două părți, ne-am uitat la modul de a lua o idee inițială și ao dezvolta într-un design detaliat.
Acest lucru poate părea o mulțime de muncă (deoarece, hai să fim cinstiți este o mulțime de lucruri), dar fiecare pas în acest proces vă va ajuta să eliminați orice probleme cu designul dvs. și nu veți avea oportunități de îmbunătățire a aplicației dvs..
De planificare, wireframing și prototipuri de fapt, puteți economisi timp pe termen lung, prin reducerea șanselor de a avea de a face cu probleme majore în continuare pe linie. De îndată ce începeți să scrieți cod, rezolvarea problemelor de proiectare devine mult mai dificil.
Dar, în cele din urmă, investind atât de mult timp și energie în perfecționarea designului de bază al aplicației, vă va ajuta să oferiți o experiență mai bună utilizatorilor dvs. Aceasta înseamnă mai multe descărcări, recenzii mai pozitive și mai multe persoane care recomandă aplicația dvs. prietenilor și familiei dvs. și care nu ar dori acest lucru?
Accentsconagua