Hoe een mobiele app te prototeren met Adobe XD

Deze tutorial, die je laat zien hoe je een mobiel app prototype maakt in Adobe XD, is samengebruikt Adobe XD CC (2017 Beta) in 2016. De Nieuw gelanceerd Adobe XD CC heeft een paar tweaks gehad, waardoor het nog eenvoudiger te gebruiken is.

• Krijg hier 15% korting op Adobe Creative Cloud hier

Als u een ontwerper bent die gebruikerservaringen maakt voor mobiele apps of websites, kunt u worden gebruikt voor het gebruik van meerdere hulpmiddelen voor verschillende taken wanneer prototyping ​

Je begint met onderzoek. Dan schet je ideeën op pen en papier en breng je je gedachten later naar een ontwerptool over. Om met de beste stroom te komen, exporteert u al uw activa en brengt ze naar een andere tool om een ​​prototype te bouwen. Vanaf daar deelt of test u uw prototype, verzamel feedback en keert u terug naar het midden van de cyclus naar het herspecteren, overstappen van het gereedschap naar Tool terwijl u uw ontwerp verfijnt.

Verschillende ontwerptools takken elk een ander deel van het probleem aan. Maar in plaats van je leven als ontwerper gemakkelijker te maken, verlaagt het schakelen tussen al deze hulpmiddelen alleen je tempo.

Wat als er een enkele tool was die betekende dat je zou kunnen genieten van een volledig aangesloten workflow? Waar je je ervaringen in minuten kon ontwerpen en prototyperen, deel ze op het web om feedback te maken en maak dan gemakkelijk bewerkingen zonder je stride te breken? Het doel met Adobe Experience Design CC - of, zoals we het noemen, Adobe XD - was om precies dat te doen.

In deze tutorial tonen we u de belangrijkste gebieden van Adobe XD door te ontwerpen, prototyping en het delen van een eenvoudige 'Meet the Team' mobiele app.

We maken een inhoudspagina met de leden van het product, dan kunnen gebruikers op de individuele vermeldingen op een meer diepgaande biog-pagina klikken. Je leert hoe je high-fidelity ontwerpen, prototype kunt maken en delen om feedback te verzamelen.

Bekijk de video hierboven en volg de onderstaande schriftelijke stappen om te leren hoe te prototypen met Adobe XD. Niet alleen laten we je laten zien hoe je het kunt maken, we zullen ook laten zien hoe je het moet testen, een voorbeeldvideo van het in actie opnemen en hoe het te delen en te exporteren.

Merk op dat sommige processen misschien enigszins zijn gewijzigd in de nieuwere versie van Adobe XD.

01. Installeer Adobe XD en start een nieuw ontwerp

Zorg ervoor dat Adobe XD is geïnstalleerd op uw computer ​Lanceer het, kijk op het welkomstscherm en start een nieuw ontwerp met een iPhone-artboardsjabloon.

02. Maak een tweede artboard

Gebruik de Artboard-tool ( EEN ) Om een ​​tweede artboard te maken, verander dan hun titels (door erop te dubbelklikken) naar 'iPhone - Team Pagina' en 'iPhone - Detail Page'. Wijzig beide achtergrondkleuren van de kunstboarding naar zwart met behulp van de eigenschapsinspecteur aan uw rechterhand. Met het gereedschap Select ( V ) Selecteer geselecteerd, u kunt op elk gewenst moment op de spatiebalk drukken om aan de slag te gaan over uw ontwerp.

03. Download tutorial Activa

Ik heb een map van activa samengesteld die ik in deze tutorial gebruik zal gebruiken. Je kunt ze downloaden hier ​Van Finder, sleep 'iPhone-Status-Bar.Svg' naar de top van Artboard 1 ( x: 8, y: 5 ​Kopieer en plak het vervolgens in Artboard 2, dus beide artboards hebben de statusbalk bovenaan. Raken cmd + l Om deze statusbalken in beide artboards te vergrendelen, zodat hun eigenschappen niet kunnen worden gewijzigd. Om ze te ontgrendelen, kunt u de snelkoppeling opnieuw gebruiken of klikken op het pictogram 'Lock'.

04. Teken een rechthoekige en ingestelde dimensies

Laten we ons concentreren op artboard 1 (de teampagina). Het gebruik van de rechthoekige tool ( R ), Teken een roze rechthoek (# FF2BC2 zonder rand) in Artboard 1 en stel de dimensies in op 375 x 230 met behulp van het eigenschapsinspectiepaneel aan de rechterkant.

05. Objecten opnieuw ordenen

Om de rand te draaien of in en uit te vullen, klikt u op het pictogram 'Eye' aan de rechterkant. Raken SHIFT + CMD + [ om het helemaal naar achteren te sturen of naar toe te gaan Object & GT; Regelen en gt; Stuur naar achteren ​Als u de kleuren wilt wijzigen met behulp van hexadecimale waarden, klikt u op het kleurenpictogram en wanneer de inheemse kleurkiezer verschijnt, selecteert u het tabblad op de tweede plaats bovenaan en wijzigt u de vervolgkeuzelijst naar 'RGB Sliders'.

06. Maak een koptekst

Gebruik van de Text Tool ( T ), klik om een ​​koptekst voor uw teampagina te maken. De mijne is Helvetica Bold, 20, #FFFFFFF, X: 18, Y: 123. Laten we onze lijst met teamleden samenstellen. Teken een grijs vierkant waar de foto van het teamlid zal zitten (100 x 100, x: 8, y: 238, # D0D0D0 zonder rand).

07. Voeg een andere rechthoek toe

Rechts hiervan hebben we een witte rechthoek nodig (260 x 100, x: 108, y: 238, #FFFFFFF zonder rand) waarop we de naam van het teamlid als een kop- en functie als onderdoek nemen. Gebruik voorlopige aanduidingstekst voor nu en sty je op zoals je wilt.

08. Voeg een pijlpictogram toe

Om dit vak weer te geven, is een tappable-gebied, we nemen een pijlpictogram op. Sleep 'Path.Svg' van Finder naar het XD-canvas naar een punt van het artboard. Verplaats het vervolgens naar x: 330, y: 279.

09. Plaats je headshot

Sleep van Finder, sleep een headshot op zijn plaats op het grijze plein.

10. Maak de lijst

Nu kunnen we onze lijst maken. Op dit punt zou u normaal gesproken het bovenste item kopiëren en plakken, de gekopieerde versie naar beneden verplaatsen en de marge aanpassen. Je zou hetzelfde doen voor nieuwe items, en als je de marges wilde veranderen, zou je het handmatig moeten doen, één voor één.

Nou, niet met Adobe XD - je kunt de herhaalnet-functie gebruiken. Selecteer de items die u wilt herhalen, klik op de knop 'Repeat Grid' op de eigenschapsinspecteur aan uw rechterhand ( cmd + r ) en gebruik de groene handgrepen om de items verticaal te herhalen. Je kunt ze ook horizontaal herhalen voor een tabletversie.

11. Pas de marge aan

Pas de marge van uw herhaalde raster aan door te zweven aan de rand van uw items, klikken en slepen. Laten we de marge instellen op 7. Sleep het herhaalrooster naar de onderkant van uw artboard. We hebben nu vier rijen om mee te spelen.

12. Bewerk de tekstvelden

Hoewel eigenschappen (kleuren, x en y-posities, enzovoort) wereldwijd zijn, kan de inhoud van elk item uniek zijn. Bewerk de tekstvelden naar de naam en de functie van elke persoon. U kunt dubbelklikken om het raster en de groep in te voeren, of CMD + klik om een ​​element in een groep of herhaald raster te selecteren. Nu moeten we gewoon alle headshots tegelijk pakken en ze op het raster slepen en we zijn klaar met dit scherm.

13. Maak een verduisterd effect

Laten we naar Artboard 2 (de detailpagina) springen. Nogmaals, we beginnen met een placeholder-rechthoek (375 x 444, x: 0, y: 0, #ffffff zonder rand) en sleep een headshot om het te vullen. We zullen een verduisterd effect creëren door de dekking van het beeld te veranderen tot 60 procent en het sturen naar de achterkant ( SHIFT + CMD + [ ​

14. Voeg een andere pijl toe

Vergrendel vervolgens het headshot-item ( cmd + l ) en voeg een andere pijl toe ('back-arrow.svg') om aan te geven dat de gebruiker terugkeert naar de teamlijst. Dit moet op x: 20, y: 40 zitten. Het is belangrijk om eerst de afbeelding te vergrendelen, omdat anders de SVG de headshot zal vervangen.

15. Contactinformatiebalk toevoegen

We willen op elke pagina een roze balk opnemen, die de contactgegevens van het teamlid (375 x 45, x: 0, y: 400) vermelden. Gebruik het teksttool ( T ) Om een ​​tekstelement te maken dat 'Placeholder Link' is, centreer het, stijl het op en plaats deze op x: 169, y: 416.

16. Maak meer instanties van het tekstelement

Laten we het REPEAT-rasterhulpmiddel gebruiken om nog twee voorbeelden van dit tekstelement te maken. Converteer eerst de tekst naar een herhaalraster ( cmd + r ) Houd de optie-toets ingedrukt terwijl u uw raster horizontaal uitbreidt. Mooi, is het niet? Direct-Selecteer de tekst ( CMD + klik ) en verander de inhoud om 'E-mail', 'Twitter' en 'LinkedIn' te lezen.

17. Maak naam en bio-box

Om het ontwerp af te maken, maakt u een witte doos (360 x 214, x: 8, y: 445) die de naam en het biog van de teamlid bevatten. Voeg eerst een tekstelement toe met behulp van de Placeholder 'Person Name'. Voor het tekstelement dat het BIOG vasthoudt, willen we de teksttekst gebruiken. Om dit te doen, selecteert u het Tekst Tool ( T ) en klik en sleep om het gebied voor uw exemplaar te definiëren. Typ nogmaals wat tijdelijke aanduidingstekst voor nu en pas de styling-eigenschappen aan.

18. Maak artboards voor andere teamleden

Laten we nu nieuwe artboards maken voor andere teamleden. Ontgrendel eerst de hoofdafbeelding ( cmd + l ), klik vervolgens op de titel van Artboard 2 om het te selecteren en druk op cmd + c om het te kopiëren. Uitzoomen ( cmd + - Of gebruik het trackpad op knuppel-naar-zoom), vervolgens op cmd + v om drie nieuwe artboards te plakken. Voeg een aantal biog-info toe aan elke pagina. Werk de namen en headshot-afbeeldingen bij en rangschik de artboards op het canvas. Stoer! Ons ontwerp is klaar voor nu.

19. Stel de stroom op

Het is tijd om de stroom van de app te definiëren. Een prototype kan duizend vergaderingen waard zijn, dus we zullen er een maken om onze ontwerpintentie te communiceren. Spring gewoon naar de prototype-modus (linksboven), selecteer het item dat door de gebruiker wordt getikt (HOLD cmd om te direct kiezen) en sleep een draad naar het juiste artboard. Wanneer de muis wordt vrijgegeven, kunnen we de Segue, versoepelen en duur instellen. Gemakkelijk.

20. Verbind op

Laten we gaan hoewel elk van de items op onze lijst op Artboard 1 en ze naar hun respectieve detailpagina worden ingediend. Voor elk van deze willen we de Segue instellen om naar links te schuiven en de versoepeling om uit te lossen. Vervolgens kunnen we de back-pijlen op elk van de detailpagina's terugbrengen naar Artboard 1 - Vergeet niet om de Segue in te stellen om deze keer rechts te schuiven. Boom - ons prototype is klaar.

21. Test het prototype

Om het prototype te testen, klikt u op de knop Afspelen in de rechterbovenhoek (voorbeeld). U hoeft het voorbeeldvenster niet te sluiten om uw ontwerp of uw draden bij te werken. Begin gewoon wijzigingen aan te brengen en ze worden automatisch weerspiegeld in het voorbeeldvenster.

22. Maak een video

Het is gemakkelijk om een ​​video van uw interacties op te nemen bij het testen van het prototype. Met het voorbeeldvenster Openen, klik op de knop Opnemen om te starten en stoppen met opnemen. Sla het '.mov'-bestand op en deel met uw stakeholders.

23. Deel uw werk

Om de prototypen op het web te delen, klikt u op de laatste knop in de rechterbovenhoek (online delen). Klik op de knop CREATE LINK. Alle activa worden geüpload naar Creative Cloud en er wordt een link gemaakt. Als er wijzigingen nodig zijn, kunt u teruggaan naar de ontwerpmodus, de wijzigingen aanbrengen en opnieuw delen. De hele stroom werkt gewoon.

24. Bestanden exporteren

Van XD kunt u PNGS exporteren voor Web, iOS en Android in verschillende maten, evenals zeer geoptimaliseerde SVG-bestanden.

25. Geniet van de resultaten

Gefeliciteerd! Je hebt de basis van Adobe Experience Design CC (Preview) onder de knie. Voel je vrij om je prototypen op het web en sociale media te delen - Toevoegen #adobexd Dus we kunnen je werk zien.

Dit artikel verscheen oorspronkelijk in netto tijdschrift uitgave 280. Abonneren op net hier ​

Gerelateerde artikelen

• Hoe prototyping valkuilen te voorkomen
• Hoe animatie in mobiele apps te gebruiken
• 10 tips voor beter mobiel UX-ontwerp