Bouw prototypen met Adobe XD

In het hedendaagse web en app-ontwerp zijn er vaak tijden dat de interactie geen geheel nieuwe pagina of scherm opent. De moderne benadering van het maken van interactieve inhoud vereist overgangen tussen ontwerpinterface-elementen, zodat de gebruiker verrast en wauweld is door de ervaring van het veranderen van inhoud. Dit gebeurt allemaal op hetzelfde scherm of een pagina, zonder een vernieuwing. Het ontwerpen van dit soort interacties en het verfijnen van ze om goed te werken kan tijd kosten, maar het is de moeite waard om te doen voordat je je code schrijft.

Dit is wat Adobe XD de laatste paar maanden van ontwikkeling heeft besteed. Maak inhoud in één toestand op één scherm, verplaats deze inhoud naar de nieuwe status op het nieuwe scherm en kies gewoon de optie 'Auto-animate' om te overgaan. Alle inhoud die hetzelfde is op beide schermen wordt automatisch van de ene positie naar de andere. Als u niet wilt dat alle inhoud zichtbaar is op beide schermen, maakt u de inhoud onzichtbaar op de eerste en het zal overgaan op zijn plaats.

Ontdek meer over andere Adobe-software zoals Adobe Dimension ​

• 8 Essentiële prototyping en bouwgereedschap

Hier laten we u zien hoe u een app-prototype kunt maken die alleen dit (voor meer Hoe maak je een app tutorials, bekijk onze rundown van de beste). En verder gaan dan dat, een nieuwe functie van XD stelt de gebruiker in staat om interacties met hun stem te besturen. We zullen dit als een ontwerpfunctie verkennen en hoe de app ook naar de gebruiker kan praten, die enkele interessante ontwerpmogelijkheden kan bieden.

Download de projectbestanden voor deze tutorial.

01. Het project starten

Als u Adobe XD niet hebt, kunt u het downloaden en installeren hier ​Zodra de installatie is voltooid, opent u de software en het welkomstscherm kan u een schermgrootte kiezen om voor te downloaden. Kies in dit geval de iPhone 6/7/8, want dat is de juiste maat voor dit project, maar u zult zien dat er een verscheidenheid aan maten beschikbaar zijn.

02. Importeer het eerste beeld

Er zijn verschillende manieren om afbeeldingen te importeren, maar ga in dit eerste geval naar File & GT; Importeren. Kies de map 'Activa' uit de projectbestanden en de eerste afbeelding om te importeren is 'Sky.png'. Plaats het op de bovenkant van het scherm en verplaats het een paar paar pixels naar beneden.

03. Plaats de hut

De volgende afbeelding voor het ontwerp is de 'cabine.png'. Importeer dit op dezelfde manier op dezelfde manier in de vorige stap en plaats deze vervolgens om het scherm te vullen. Eindelijk, importeer het beeld 'bomen.png' en plaats het op de bodem van het scherm met de bomen over het meer.

04. Breng het logo in

De reden dat die afbeeldingen afzonderlijke lagen zijn, is zo dat wanneer een overgang wordt gemaakt tussen schermen die ze afzonderlijk kunnen bewegen. Ga naar het menu Bestand en kies Importeren. Selecteer dit keer 'logo.ai', dat een vectorafbeelding is. Plaats deze afbeelding in het bovenste midden van het scherm.

05. Voeg een cirkel toe

Selecteer de cirkelgereedschap en teken een cirkel net iets groter dan het logo. Verwijder in het paneel Eigenschappen aan de rechterkant de slag en maak de achtergrond zwart. Selecteer de achtergrond Blur en verminder de helderheid tot -30 zodat de cirkel nog steeds zwart is.

06. Herstel de grafische weergave

Nu moet de cirkel achter het logo bewegen. Selecteer Object & GT; Regelen en achteruit sturen. Zoals in andere Adobe-producten, is het ook CMD / CTRL + [ om elke grafische weergaande in de laagvolgorde te verplaatsen. Met behulp van de juiste vierkante beugel, ondertussen, brengt een object naar voren in de volgorde.

07. Laat de microfoon vallen

Importeer nu het beeld 'Mic.ai' en de grootte van het formaat om relatief klein te zijn. Plaats dit onderaan het scherm. Teken hier een cirkel rond en schakel de vulling uit zodat het wordt verwijderd. Maak dan de slag wit en twee pixels breed. Positie die rond het beeld 'Mic'.

08. SMSBERICHT

Gebruik het Tekst Tool om de woorden 'te geven' om te zoeken 'onder de microfoon toe te voegen. Maak de tekst wit en verander het naar Helvetica Neue gecondenseerd zwart. Klik linksonder op het scherm op het pictogram van het activa-paneel om het te openen. Met de tekst die op het scherm is geselecteerd, klikt u op het pictogram '+' naast 'tekenstijlen' om dit formaat op te slaan voor de tekst.

09. Word lid van een groep

Selecteer het pictogram van het laagpaneel linksonder in het scherm. Selecteer op het scherm de tekst 'Zoeken' en Klikken Om de cirkel en het microfoonpictogram toe te voegen. Ga naar Object en kies Groep. In het laagpaneel hernoemen deze groep 'Search'. Het is handig om groepen te noemen, vooral bij het animeren van deze.

10. Groepeer het logo

Net zoals in de laatste stap, selecteer het logo en de wazig cirkel eromheen, groepeer ze dan samen. Hernoem in het lagenpaneel het hele groep 'logo' zodat het gemakkelijk is identificeerbaar als u dit later opnieuw moet bewerken. Voorlopig is het ontwerp voor het eerste scherm voltooid.

11. Extra elementen

Hoewel het eerste scherm is voltooid, zijn er nog meer ontwerpelementen die moeten worden toegevoegd. Dit is hoe animatie wordt gecreëerd door de positionering van de elementen tussen schermen te veranderen. Ga naar het gereedschap Rechthoek en houd vast Verschuiving om een ​​vierkant op het scherm toe te voegen, de grens wit maken.

12. Verschillende import

Open nu de map voor de activa via uw besturingssysteem. Selecteer de afbeelding 'Cabin1.png' en sleep dit rechtstreeks naar het vierkant dat u in de vorige stap hebt gemaakt. Het wordt hier automatisch in gemaskeerd. Dubbelklik om de positie van de afbeelding te bewerken en zorg ervoor dat de cabine zichtbaar is op het plein.

13. Voeg een label toe

Voeg het label 'Forest Cabin' onder de tekst toe en gebruik het deelvenster Activa om de tekst in de opgeslagen stijl uit stap 8. Selecteer de afbeelding en het label en groepeer ze samen. Noem de groep 'linkerhut' in het paneel Lagen.

14. Dupliceer de groep

Normaal gesproken is het herhalen van een interfacemelement de perfecte taak voor het gereedschap 'Repeat Grid'. Dit zal echter specifieke animatie nodig hebben, wat niet werkt met het herhaalrooster. Selecteer de afbeelding en tekstgroep en kopieer en plak het zodat het naast het origineel zit en in plaats daarvan de afbeelding 'Cabin2.png' toevoegen.

15. Naam wijzigen en vervolgens opnieuw kopiëren

Wijzig de tekst in 'Snow Cabin' en in het paneel van de lagen deze 'rechter hut'. Selecteer zowel de linker- als de rechterhut en dupliceer ze, plaats de duplicaten hieronder en werk hun tekst en afbeeldingen bij met 'Cabin3.png' en 'Cabin4.png'. Groep allebei bij elkaar en noem de groep 'Neder-cabine'.

16. Teksttitel

Voeg tekst toe aan de pagina met de tekst 'Zoekresultaten voor hutten'. Geef dit het rockwell-lettertype en sla dit op de tekenstijlen in het deelvenster Activa. Plaats nu de groep 'Neder-cabine' aan de onderkant van het scherm en neem het uiterlijk naar beneden naar nul zodat deze onzichtbaar is op dit scherm.

17. Opaciteit veranderen

Selecteer nu de linker- en rechter hutten, verplaats ze naar de onderkant van het scherm en neem de verschijningsschuif naar nul. Herhaal opnieuw voor de zoektekst. Wanneer we naar een ander scherm gaan, zullen deze allemaal animeren naar hun nieuwe posities. Verplaats in het laagpaneel de 'linkerhut' boven alle andere cabinegroepen.

18. Dupliceer het scherm

Selecteer het Artboard door op de naam te klikken en dubbelklik vervolgens op het artboard en verander de naam naar 'Home'. Kopieer en plak het artboard en hernoem het 'Search'. Selecteer nu het logo en verplaats het tot bijna van het scherm en verminder het uiterlijk op nul.

19. Beweeg de achtergronden

Selecteer de sky-afbeelding en duw het enigszins op het scherm. Selecteer de cabineafbeelding en verplaats het totdat de cabine bovenaan het scherm staat. Klik vervolgens op de bomenafbeelding en verplaats het over de hut. Selecteer ten slotte de 'Search'-groep en verminder het uiterlijk tot nul.

20. Nieuwe elementen verschijnen

Selecteer de zoekresultaten in het laagpaneel en breng het uiterlijk tot 100. Verplaats het op het scherm. Herhaal dit voor de linkerkut, de rechterhut en de onderste cabine. Gebruik de pentool om een ​​eenvoudige back-knop te tekenen en er een cirkel eromheen toe te voegen. Maak de achtergrond wazig en neem de helderheid van dat tot -30.

21. Vul de back-knop in

Selecteer de achterpijl en de cirkel, groepeer ze samen en noem ze 'back-knop' in het laagpaneel. Schakel over naar de modus 'Prototype' door op 'Prototype' in de linkerkant van de XD-interface te drukken. Selecteer het startscherm, sleep de blauwe pijl naar het zoekscherm en een pop-uppaneel verschijnt.

22. Spraakopdracht

Wijzig de trigger naar voice en typ het woord 'Zoeken' als de spraakopdracht om dit te besturen. Wijzig de actie om automatisch te animeren en te versoepelen. Maak de duur 1,5s. Klik in het zoekscherm op de knop Back en sleep de blauwe pijl terug naar het scherm 'Home'. Verander gewoon de trigger om te tikken.

23. Test het prototype

In de rechterbovenhoek van de XD-interface is een afspeelknop. Klik hier op en een werkend prototype verschijnt nu op het scherm. Op de startpagina moet je de spatiebalk ingedrukt houden terwijl je de spraakopdracht 'Search' spreekt. Wanneer u de spatiebalk loslaat, brengt u u naar het volgende scherm en animeert u de grafische interface in positie.

24. Teruggaan

Zodra de overgang heeft uitgevoerd, kunt u op de knop Terug drukken om terug te gaan naar het startscherm. Sluit het prototype en klik op het zoekscherm en klik vervolgens op de blauwe pijl naar rechts (niet slepen). Verander de trigger tot tijd, maak de vertraging 0s en stel de actie in op spraakweergave. Maak de spraak 'Zoekresultaten voor beschikbare hutten'.

25. Spraakbevestiging

Test dit nu met de knop PLAY om een ​​spraakbevestiging van de zoekopdracht te horen. Sluit het prototype als je dit hebt geprobeerd. Een ander scherm wordt gemaakt, dus laten we weer op de weergave 'Design' op de linkerkant van de XD-interface klikken. Klik op het zoekscherm door op de naam te klikken en kopieer en plak het.

26. Schalen van de afbeelding

Hernoem het nieuwe scherm 'Cabin'. Dubbelklik op de afbeelding voor de laag 'linkerhut'. Grootte de grootte van de hoekgrepen zodat deze het scherm vult en vervolgens de afbeelding binnen verplaatst, zodat deze het scherm bestrijkt. Klik op de tekst van de zoekresultaten en neem het uiterlijk naar beneden naar nul om het van weergave te verwijderen.

27. Nieuwe schermelementen

Dubbelklik op de tekst 'Forest Cabin' omdat het deel uitmaakt van de groep. Vergroot de tekstgrootte tot 26 pixels en verplaats het enigszins op het scherm. Voeg tekst toe aan het scherm in Helvetica Neue Medium bij 14 pixels grootte en zet het in wit om op te vallen tegen de achtergrond. Voeg een witte lijn toe met het lijntool onder de kop.

28. Maak een knop

Gebruik het gereedschap Rechthoek om een ​​rechthoek op het scherm aan de onderkant van het ontwerp te tekenen. Sleep in de hoekgrepen om deze vorm ronde hoeken te geven. Voeg hierbij het woord 'Reserve' toe, met behulp van de opgeslagen tekenstijl in het deelvenster Activa voor Helvetica Neue in gecondenseerd vet.

29. Verplaats naar de prototype-modus

Alle ontwerpelementen zijn nu op zijn plaats voor het hele ontwerp van de app. Ga naar de modus 'Prototype' door op het woord 'Prototype' te klikken in de linkerbovenhoek. Klik in het zoekscherm op de groep 'Forest Cabin' van de afbeelding en tekst. Sleep de blauwe hendel hierheen naar het scherm 'Cabin'.

30. Animatie-instellingen

Kies in het POP-UP-paneel voor de overgang tussen schermen, kiest u Tik als de trigger en maak vervolgens Action Auto-Animate. Blijf versoepelen als snap maar verminder de duur van deze tot 0,6's. Dit zorgt ervoor dat de animatie niet sleept - de beweging van het eerste scherm naar het tweede scherm had veel beweging die een langere overgang vereist.

31. Link de back-knop

Selecteer nu de knop Terug in het finale scherm en sleep de blauwe pijl van dit terug naar het scherm 'Zoeken'. Alle instellingen van de vorige overgang moeten worden onthouden. U bent nu klaar om door te gaan en dit te testen door op de knop Afspelen te klikken.

32. Auto-animate

Wat u nu zult zien met de Auto-Animate is dat het beeld zich uitbreidt om het scherm te vullen en de elementen die niet langer nodig zijn, zullen vervagen terwijl de nieuwe tekst zal vervagen. Het tegenovergestelde gebeurt bij het teruggaan. Dit biedt een goede manier om de auto-animate op drie schermen te zien werken.

33. Sla het project op

Standaard moet uw project automatisch opslaan in de Creative Cloud, maar het is een goed idee om een ​​kopie op te slaan op uw eigen harde schijf in het geval dat er problemen zijn. Klik op Bestand & GT; Bewaar, wijzig de locatie op uw eigen computer en benoem het project met een geschikte naam.

34. Het project delen

Het hele punt van prototyping is om het project op andere mensen te testen. Gelukkig is er een aandelenknop in de rechterbovenhoek van de XD-interface die dit een briesje maakt. Klik op de knop Delen en in het vervolgkeuzemenu dat verschijnt Selecteer het optie Delen voor beoordeling.

35. Publiceer prototype

In het volgende scherm wordt u verteld dat Auto-Animate-ondersteuning nog niet beschikbaar is voor het web, maar het komt binnenkort. Klik op Publieke link maken en klik vervolgens op de link in het rechtsboven om de openbare link in een webbrowser te bezoeken. U moet de spatiebalk ingedrukt houden om het spraakopdracht te gebruiken met het prototype.

36. Video-versie

Een ander prototype kan worden gedeeld door het opnemen van de interface in actie. Klik op de knop Share en kies Video opnemen. Hiermee wordt een venster geopend en wanneer u dit sluit, wordt u gevraagd om een ​​opname van het scherm op te slaan als een MP4-bestand, dat ook een handige manier is om uw prototype te delen.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 285 van Creative Web Design Magazine Webdesigner ​ Koop hier nummer 285 of Abonneer u hier op Web Designer ​

Gerelateerde artikelen:

• Mobiel app ontwerp: een beginnersgids
• Hoe maak je een app met vue.js
• Krijg grip met mobiele app aan boord