Share
In deel een van deze tweedelige serie heb ik je laten zien hoe je een eerste idee voor een Android-app kunt maken en het kunt ontwikkelen tot een gedetailleerd plan - tot en met het in kaart brengen van de afzonderlijke schermen die je voltooide app vormen.
Met behulp van het voorbeeld van een reis-app die gebruikers helpt bij het plannen en boeken van een leuk zomeravontuur met al hun vrienden, hebben we onze doelgroep geïdentificeerd door een gebruikerspersonage te maken (onthoud onze vriend Sasha?) En vervolgens een lijst met functies te maken dat zou perfect zijn voor versie 1.0 van onze app (en perfect voor Sasha). Ten slotte hebben we een schermlijst en een kaartweergave gemaakt precies hoe al deze schermen bij elkaar passen.
In deel één hebben we heel wat terrein afgedekt, maar tot nu toe was al onze planning een beetje hoog en abstract. In deel twee komen we van dichtbij en persoonlijk door wireframing en prototyping van de afzonderlijke schermen die deel uitmaken van onze app.
Aan het einde van deze zelfstudie hebt u een digitaal prototype gemaakt dat u kunt installeren en testen op uw eigen Android-smartphone of -tablet.
Laten we meteen naar binnen duiken en beginnen met het maken van wireframes!
Met wireframing schetst u alle belangrijke UI-componenten die u op een bepaald scherm wilt plaatsen. Het doel van wireframing is om de structuur van een scherm te schetsen - het gaat niet om de fijnere details van hoe een scherm eruit ziet, dus probeer niet te worden opgezogen in de details van grafisch ontwerp. Voor nu is het voldoende om te weten dat je een menu op scherm A zult plaatsen; u hoeft zich geen zorgen te maken over welke kleur dit menu zal zijn, of hoe u de tekst van het menu gaat stylen.
Raadpleeg de volgende bronnen voor meer informatie over wireframing:
Wireframes zijn behoorlijk misleidend - ze kunnen eruit zien als snelle, ruwe en kant-en-klare schetsen, maar ze zijn in feite een krachtige tool voor het verkennen, definiëren en verfijnen van de gebruikersinterface van je app. Ze kunnen u ook helpen bij het identificeren van eventuele onvolkomenheden in uw initiële schermontwerpen, voordat u te veel tijd investeert in het perfectioneren van deze ontwerpen.
Het is veel gemakkelijker om een groot kruis door een draadframe te steken, de pagina in je notitieboekje om te zetten en opnieuw te beginnen dan het volledig opnieuw schrijven van code die je al hebt uitgegeven uur werken aan.
Dus, ik heb de lof van wireframing lang genoeg gezongen! Hoe ga je om met het maken van een draadframe?
Je hebt een paar opties:
Een papieren draadframe van het scherm Boek een hotel van onze app.Maak digitale wireframes met behulp van professionele software voor beeldbewerking, zoals Adobe Photoshop, of een speciaal wireframingprogramma zoals Pidoco, Axure, InDesign, Sketch, Omnigraffle of Balsamiq Mockups.
Een draadframe van het Home-venster, gemaakt met Balsamiq.Maar waarom zou u zich beperken tot één tool, wanneer u de vruchten van beide kunt plukken? Papier en digitale wireframes hebben elk hun eigen unieke reeks sterke en zwakke punten. Digitale wireframing is perfect voor het maken van gepolijste en precieze wireframes, maar navigeren door meerdere menu's is niet altijd de beste manier om die ideeën te laten vloeien - en het is zeker niet ideaal als u snel meerdere verschillende ideeën wilt testen! Aan de andere kant zijn papieren wireframes geweldig voor een brainstormsessie met snelle vuren, maar het kan zijn dat je moeite hebt om papieren wireframes te maken die nauwkeurig en gedetailleerd genoeg zijn om als blauwdrukken te dienen voor het soort schermen dat je gaat maken.
Ik raad aan om je eerste concepten te maken met pen en potlood (wat ideaal is om die creatieve sappen te laten vloeien) en dan, als je eenmaal een set papieren draadframes hebt waar je blij mee bent, kun je wat tijd besteden aan het verfijnen van deze concepten met behulp van digitale wireframing-software.
Dit is de aanpak die ik in deze tutorial zal gebruiken, maar houd in gedachten dat wireframing een creatieve oefening is, dus hier zijn geen harde en snelle regels. Gebruik de methode die voor u het beste werkt.
Om je een zo goed mogelijk overzicht te geven van het wireframing- en prototypingproces, ga ik één scherm uit mijn reis-app kiezen en werk ik eraan in de rest van dit artikel. Het scherm dat ik ga selecteren als mijn cavia is de checklist, omdat ik denk dat dit scherm enkele uitdagende gebruikersinterface-elementen bevat die een interessant voorbeeld zullen zijn.
Gewoon om je geheugen op te frissen, in deel een schreef ik de volgende beschrijving van hoe ik me het voltooide controlelijstscherm voorstelde:
In de standaardstatus toont dit scherm een checklist met alle taken die de gebruiker moet uitvoeren om een succesvolle reis te plannen. Als u op een taak tikt, gaat de gebruiker naar een scherm waar deze taak kan worden voltooid. Telkens wanneer de gebruiker een taak voltooit, wordt dit item aangevinkt.
Als u een eerste draadframe voor ontwerpen wilt maken, pakt u wat papier en uw schrijfgereedschap naar keuze en tekent u de rechthoekige omtrek van een typische smartphone of tablet.
Ik begin met het toevoegen van alle navigatie-elementen aan mijn wireframe. Als ik naar mijn schermkaart kijk, zie ik dat de gebruiker drie schermen uit de controlelijst moet kunnen bereiken:
Deze schermen vertegenwoordigen twee verschillende soorten navigatie: achteruit navigeren en vooruit navigeren.
'Selecteer een stad' is het vorige scherm in de stroom van mijn toepassing, dus het geeft de gebruiker weer die achteruitgaat door de geschiedenis van de toepassing. Android verwerkt dit soort achteruit-navigatie automatisch (meestal via de softkey 'Terug' van de smartphone of tablet), zodat u geen expliciete 'Selecteer een stad'-navigatie hoeft toe te voegen aan uw gebruikersinterface.
De andere twee schermen zijn een beetje anders, omdat ze de gebruiker voorstellen die vooruitgaat in onze applicatie. Het systeem verwerkt de navigatie niet automatisch, dus het is onze verantwoordelijkheid om de gebruiker alles te bieden wat hij nodig heeft om naar deze schermen te kunnen navigeren..
Deze navigatie-elementen krijgen de vorm van twee Tekstweergaves, die ik ga regelen in de stijl van een checklist (oke, dus twee items is niet zo'n lijst, maar als ik aan dit project zou blijven werken, zou ik uiteindelijk meer taken aan deze lijst toevoegen). In hun standaardstatus, elk Tekstweergave zal de gebruiker eraan herinneren dat ze deze taak moeten voltooien, bijvoorbeeld: "U moet nog steeds een hotel boeken!" Wanneer de gebruiker op Tekstweergave, het brengt ze naar het scherm Boektransport of Boek een hotel, zodat ze deze taak kunnen voltooien.
Wanneer de gebruiker een taak voltooit, wordt het overeenkomstige Tekstweergave wordt bijgewerkt om informatie weer te geven over het hotel van de gebruiker of zijn transportarrangementen (ik ga deze informatie voorlopig niet toevoegen aan mijn wireframe, maar het is iets om in gedachten te houden).
Om een checklist-effect te creëren, ga ik een overeenkomend maken Figuurweergave voor elk Tekstweergave. In de standaardstatus, elk Figuurweergave geeft een rood kruis weer, maar zodra de gebruiker een taak heeft voltooid, wordt deze vervangen door een groen vinkje.
Eindelijk ga ik een titel toevoegen Tekstweergave, die zal weergeven wat de gebruiker heeft gekozen om deze specifieke reis te noemen.
Terwijl u uw draadframe bouwt, kunt u UI-elementen tegenkomen die op verschillende posities en in verschillende grootten zouden kunnen werken. Het maken van een papieren draadframe neemt vrijwel geen tijd in beslag, dus als je nog andere ideeën hebt, neem dan even de tijd om ze in een frame te plaatsen. In feite zou je moeten proberen om een paar alternatieven voor te schetsen elk scherm, zodat u kunt beslissen welk idee het meeste potentieel heeft.
Spoel en herhaal voor elk scherm dat deel uitmaakt van je app, totdat je een complete set papieren wireframes hebt. De volgende stap is het omzetten van deze eerste concepten in meer gepolijste digitale wireframes.
Er is veel software beschikbaar die speciaal is gemaakt voor wireframing, dus het is de moeite waard om wat tijd te besteden aan het onderzoeken van je opties op Google, hoewel je in plaats daarvan je favoriete software voor het bewerken van afbeeldingen kunt gebruiken, zoals Adobe Photoshop.
Persoonlijk ben ik een fan van Balsamiq Mockups!
Besteed wat tijd aan het maken en perfectioneren van uw ontwerp in de software van uw keuze en wees op uw hoede voor eventuele mogelijkheden om uw draadframe te verfijnen en te verfijnen. Werken met een nieuwe tool kan ook nieuwe ideeën opleveren, dus als je plotseling wordt getroffen door een flits van inspiratie over hoe je je ontwerp kunt verbeteren, pak dan wat papier en wireframe deze ideeën. Als ze bestand zijn tegen het onderzoek van wireframing, ga dan verder en vouw deze wijzigingen op in je digitale draadframe.
Nogmaals, spoel en herhaal voor de rest van uw schermen.
Tijd om uw ontwerpen op de proef te stellen door een digitaal prototype te maken op basis van uw wireframes.
Prototyping biedt u de kans om praktische ervaring op te doen met hoe uw ontwerp eruit ziet en functioneert op een echt Android-apparaat, maar u kunt ook testen hoe uw ontwerp zich vertaalt in configuraties met meerdere schermen, via Android Virtual Devices (AVD's).
Dus hoe creëer je een digitaal prototype?
De gemakkelijkste manier is om Android Studio te gebruiken, dat tevens fungeert als een krachtige tool voor digitale prototyping dankzij de ingebouwde grafische editor voor de lay-out. In dit gedeelte zal ik veel van de nieuwe functies gebruiken die in Android Studio 2.2 zijn geïntroduceerd, dus als je mee wilt doen, controleer dan of je Android Studio 2.2 Preview 1 of hoger gebruikt.
Als u ons prototype wilt maken, start u Android Studio op en maakt u een nieuw project. Om de dingen eenvoudig te houden, ga ik de sjabloon 'Lege activiteit' gebruiken. Aangezien je dit prototype op je eigen Android-apparaat gaat testen, moet je de minimale SDK van je project instellen op iets dat compatibel is met je Android-smartphone of -tablet.
Nadat Android Studio uw project heeft gemaakt, opent u het activity_main.xml bestand en verwijder die irritante 'Hello World' Tekstweergave dat Android Studio standaard aan deze lay-out toevoegt. Zorg ervoor dat het tabblad 'Ontwerp' is geselecteerd, zodat u het palet en canvas van Android Studio kunt zien.
Nu zijn we klaar om ons draadframe tot leven te brengen! Laten we beginnen bovenaan, met de titel van het scherm. Het is vrij duidelijk dat dit een gaat zijn Tekstweergave, maar hoe zit het met de inhoud ervan? Wanneer de gebruiker begint met het plannen van een reis, kunnen ze de reis bellen zoals ze willen, dus hoe weten we welke tekst we moeten gebruiken in ons prototype?
Omgaan met variabele tekst is een terugkerend thema in dit prototype, dus laten we een paar momenten nemen om dit probleem nu gedetailleerder te verkennen.
Prototypes zijn een krachtig hulpmiddel in het arsenaal van de app-ontwikkelaar, maar laten we ons niet laten meeslepen: als een scherm variabele elementen bevat, is het onmogelijk om elke afzonderlijke versie van dat scherm te prototypen. Dit is zeker het geval met onze checklist, omdat de gebruiker zijn reis alles kan noemen, van het pittige Reis 1 naar het wandelen en overdreven opgewonden Leuke ultieme zomervakantie van dromen, en alles daartussenin.
Hoewel het is onmogelijk om elke denkbare titel te testen, is een prototype de perfecte gelegenheid om je ontwerp onder zware druk te zetten door de meest rare en prachtige variabelen te testen die je maar kunt bedenken.
Voor mijn checklist-prototype ga ik drie stringbronnen maken: een die de "typische" titel vertegenwoordigt waarvan ik veronderstel dat de meeste gebruikers zullen kiezen, een die ongewoon kort is en een die serieus langdradig is. Het testen van deze uitersten is een van de meest effectieve manieren om mogelijke problemen die zich op uw schermontwerpen kunnen voordoen, weg te spoelen.
Zodra u deze tekenreeksbronnen hebt gemaakt, moet u deze tekst ergens geven om te leven, dus pak een Tekstweergave uit het palet en laat het op het canvas vallen.
Android Studio 2.2 introduceerde de concepten van beperkingen, die handig zijn voor het snel bouwen van digitale prototypen (en gebruikersinterfaces in het algemeen). U kunt beperkingen handmatig creëren, maar waarom zou u al die moeite doen wanneer Android Studio het zware werk voor u kan doen?
Er zijn twee manieren om Android Studio beperkingen voor u te laten creëren, dus laten we beide verkennen. De eerste methode is om autoconnect te gebruiken. Zorg er dus voor dat deze modus is ingeschakeld door de Automatisch verbinden knop (waar de cursor in de onderstaande schermafbeelding staat).
Sleep nu je Tekstweergave naar de plaats waar het in uw lay-out zou moeten verschijnen. Ik wil dat mijn titel gecentreerd is, dus ik ga de slepen Tekstweergave naar het midden van het canvas en laat los. Wanneer u de Tekstweergave, Android Studio reageert door alle beperkingen te creëren die vereist zijn om dit vast te houden Tekstweergave op zijn plaats.
Let op, wanneer twee beperkingen een widget in tegenovergestelde richtingen trekken, verschijnen die beperkingen als gekartelde lijnen, wat de reden is dat deze beperkingen er anders uitzien dan reguliere beperkingen.
Als u niet zeker weet of uw Tekstweergave is perfect gecentreerd, sleep het iets langs de horizontale as. Tooltips verschijnen aan beide zijden van de widget en geven de huidige positie weer langs de horizontale linker- en rechteras. Sleept de Tekstweergave totdat je een gelijkmatige 50/50 verdeling krijgt.
Stel dit in Tekstweergave om een van de reeks bronnen weer te geven die je hebt gemaakt voor je titel - het maakt niet echt uit met welke reeks je begint, omdat je ze toch allemaal gaat testen!
Vervolgens gaan we onze checklist bouwen. Ik ga twee afbeeldingen in mijn controlelijst gebruiken: een groen vinkje dat verschijnt als de gebruiker een taak heeft voltooid, en een rood kruis om aan te geven dat dit item nog steeds stevig in de lijst 'Taken' van de gebruiker staat. Maak deze afbeeldingen en voeg ze toe aan uw project tekenbaar map.
Open vervolgens je strings.xml bestand en maak de twee standaardberichten aan:
Sleep er twee Tekstweergaves uit het palet en laat ze op het canvas vallen - maak je geen zorgen om alles perfect uitgelijnd te krijgen. Stel deze in Tekstweergaves om uw standaard stringbronnen weer te geven.
Grijp vervolgens twee Figuurweergaves uit het palet en laat ze op het canvas vallen. Terwijl je elk loslaat Figuurweergave, Android Studio vraagt u om een tekening te selecteren om weer te geven. We beginnen met het prototypen van de standaardversie van dit scherm, dus selecteer het rode kruisbeeld voor beide Figuurweergaves.
Op dit punt hebben we alle benodigde UI-elementen toegevoegd, maar omdat we ze allemaal willekeurig op het canvas hebben neergezet, is de kans groot dat je prototype niet veel overeenkomst vertoont met je draadframe. Nogmaals, het zijn beperkingen om te redden!
De tweede manier waarop Android Studio automatisch beperkingen kan creëren, is via de relatiemotor. Besteed wat tijd aan het slepen van je Tekstweergaves en Figuurweergaves in de perfecte positie op het canvas en geef vervolgens Android Studio's Infererende beperkingen druk op een klik (de cursor staat in de onderstaande schermafbeelding).
Wanneer u op deze knop klikt, maakt Android Studio automatisch alle beperkingen die nodig zijn om uw huidige lay-out te leveren.
Dat is de standaardversie van dit scherm, maar we moeten ook testen hoe dit scherm zich aanpast zodra de gebruiker begint met het controleren van taken uit de lijst 'Te doen'. Uiteindelijk wil ik deze Tekstweergaves om basisinformatie weer te geven over de hotelreserveringen en reisarrangementen van de gebruiker. Dit plaatst ons tegen een oude vijand: variabele tekst.
Dit scherm moet flexibel genoeg zijn om informatie over hotels (en luchthavens, treinstations, enz.) Met serieus lange namen weer te geven, maar tegelijkertijd mag het niet vreemd lijken als de gebruiker boekt in een hotel dat zo cool en trendy is dat de naam een enkele letter is, of het pi-symbool (ja, dat is het dat soort hotel).
Nogmaals, de oplossing is om meerdere strings te maken die de meest lastige tekst vertegenwoordigen die je lay-out mogelijk zou moeten hebben. Als u niet zeker weet hoe extreem u met uw tekenreeksbronnen moet zijn, kunt u altijd een beroep doen op uw vriend op internet voor hulp. In dit scenario zou ik wat tijd spenderen aan het onderzoeken van hotels en luchthavens, met name op zoek naar degenen met lang, kort of gewoon ronduit vreemd namen en gebruik vervolgens de beste voorbeelden in mijn reeksbronnen.
Nadat u al uw bronnen hebt gemaakt, kunt u een beetje inleidende tests uitvoeren door tussen de tekenreeksen en tekenreeksen om te schakelen en vervolgens de uitvoer te controleren in de ingebouwde lay-outeditor van Android Studio.
Hoewel dit je niet hetzelfde inzicht geeft als het testen van je app op een echt Android-apparaat of AVD, is het dat wel veel sneller, waardoor het de perfecte manier is om eventuele directe, flagrante problemen met uw lay-out te identificeren.
De kans bestaat dat je je moet schudden Tekstweergaves en Figuurweergaves rond een beetje om die perfecte balans te vinden tussen een lay-out die een grote hoeveelheid tekst kan weergeven en een lay-out die er niet vreemd uitziet als het maar een paar letters hoeft weer te geven.
Als je toch een paar aanpassingen moet doen (ik weet dat het moet!) Pak je de widgets gewoon in het canvas en sleep je ze naar een nieuwe positie. Als u tevreden bent met de resultaten, geeft u gewoon de Infererende beperkingen druk op een andere klik en Android Studio maakt een geheel nieuwe reeks beperkingen voor u.
Dit is mijn afgewerkte prototype.
Niet slecht, maar de echte test is hoe goed deze lay-out zich vertaalt op Android-smartphones, tablets en AVD's met verschillende schermconfiguraties, dus dit is precies wat we nu gaan doen.
Er is geen alternatief voor praktische ervaring met hoe uw prototype eruit ziet en functioneert op een echt apparaat, dus begin met het installeren van uw project op uw eigen Android-smartphone of -tablet en besteed enige tijd aan interactie om het gevoel te krijgen voor de algemene gebruikerservaring. Vergeet niet om uw prototype zowel in de liggende als de portretmodus te testen!
Als u problemen of kansen ontdekt om uw schermontwerp te verbeteren, maak er dan een notitie van, zodat u precies weet welke wijzigingen u moet aanbrengen nadat u klaar bent met het testen van uw prototype..
Als uw app de beste ervaring biedt voor al uw gebruikers, moet deze flexibel genoeg zijn om zich aan te passen aan een reeks schermconfiguraties. Zodra u uw prototype grondig hebt getest op uw eigen Android-apparaat, moet u meerdere AVD's maken met verschillende schermformaten en -dichtheden en vervolgens uw prototype testen voor al deze apparaten. Nogmaals, als je iets 'uit' ziet over je prototype, of een idee hebt over hoe je het ontwerp zou kunnen verbeteren, noteer dan deze veranderingen zodat je ze niet vergeet.
Nadat u de standaardversie van uw lay-out grondig hebt getest, moet u testen hoe uw prototype zal worden aangepast zodra de gebruiker taken begint af te tikken van zijn checklist.
Werk beide bij Figuurweergaves om de groene teek aantrekbaar weer te geven en de standaardtekst voor twee van de alternatieve tekenreeksbronnen opnieuw in te schakelen, omdat we al onze tekenreeksen zullen testen, het maakt niet echt uit met welke twee u begint..
Zet deze nieuwe versie van uw prototype door hetzelfde krachtige testproces, wat betekent dat u het op uw Android-apparaat installeert voor wat praktische ervaring en het vervolgens test op AVD's met verschillende schermconfiguraties. Maak zoals altijd een notitie van uw bevindingen. Spoel en herhaal voor alle tekenreeksen die u hebt gemaakt voor uw checklist en titel Tekstweergaves.
Als u klaar bent met testen, moet u uw aantekeningen nakijken. Als u alleen kleine aanpassingen hoeft aan te brengen, kunt u mogelijk wegkomen door deze wijzigingen rechtstreeks toe te passen op uw prototype en digitale wireframes. Als deze wijzigingen echter dramatischer zijn of een compleet herontwerp opleveren, moet u eerst wat meer tijd besteden aan het verkennen ervan. In het ideale geval moet u uw nieuwe ideeën in hetzelfde wireframing-, prototyping- en testproces plaatsen als uw oorspronkelijke ideeën, omdat dit nog steeds de meest effectieve manier is om problemen met uw ontwerpen op te lossen..
Natuurlijk, het is frustrerend om jezelf terug te vinden in het wireframing-stadium, toen het leek alsof je bijna klaar was met het hele ontwerpproces, maar de tijd besteed aan het verkennen van nieuwe ideeën is altijd tijd goed besteed.
Zelfs als je deze ideeën uiteindelijk afdankt ten gunste van je originele ontwerp, weet je tenminste dat je echt werkt met de beste schermontwerpen die je zou kunnen bedenken. Er is niets erger dan heel veel tijd en moeite in een project te investeren, terwijl je de hele tijd in je achterhoofd een zeurderige twijfel hebt dat misschien, heel misschien, je had een andere route moeten afleggen.
Kortom, als prototyping nieuwe ideeën heeft opgewekt, dan is dit het moment om ze te verkennen!
Nadat u alle versies van uw prototype voor een reeks AVD's hebt getest, hoeft u nog maar één ding te doen: een prototype van elk ander scherm in uw schermkaart maken en elk laatste onderwerp op hetzelfde niveau controleren.
In deze tweedelige serie hebben we gekeken hoe we een eerste idee konden nemen en het tot een gedetailleerd ontwerp kunnen ontwikkelen.
Dit klinkt misschien als een hoop werk (omdat, laten we eerlijk zijn, het is veel werk) maar elke stap in dit proces helpt je om eventuele problemen met je ontwerp weg te spoelen en niets te doen aan mogelijkheden om je app te verbeteren.
Planning, wireframing en prototyping kunnen u op de lange termijn zelfs tijd besparen door uw kansen op grote problemen verderop in de reeks te verkleinen. Zodra u begint met het schrijven van code, wordt het oplossen van ontwerpproblemen veel moeilijker.
Maar uiteindelijk, door zoveel tijd en energie te investeren in het perfectioneren van het onderliggende ontwerp van uw app, kunt u uw gebruikers een betere ervaring bieden. Dat betekent meer downloads, positievere beoordelingen en meer mensen die uw app aanbevelen aan hun vrienden en familie en die dat niet willen?
Accentsconagua