Rakenna prototyyppejä Adobe XD: llä

Rakenna prototyyppejä Adobe XD: llä
(Kuvan luotto: Tulevaisuus)

Nykyaikaisessa verkko- ja sovellussuunnittelussa on usein aikoja, jolloin vuorovaikutus ei avaa kokonaan uutta sivua tai näyttöä. Moderni lähestymistapa interaktiivisen sisällön luomiseen vaatii siirtymiä suunnittelurajapinnan elementtien välillä, jotta käyttäjä on yllättynyt ja hämmästynyt sisällön vaihtamisen kokemuksesta. Kaikki tapahtuu samalla näytöllä tai sivulla ilman päivitystä. Tällaisten vuorovaikutusten suunnittelu ja niiden kunnostaminen toimimaan oikein voi viedä aikaa, mutta se kannattaa tehdä ennen koodin kirjoittamista.

Adobe XD on viettänyt muutaman viime kuukauden kehityksen oikein. Luo sisältöä yhdessä tilassa yhdellä näytöllä, siirrä sisältö uuteen tilaan uudella näytöllä ja valitse siirtymiseksi vaihtoehto 'Automaattinen animointi'. Kaikki molemmilla näytöillä sama sisältö animoituu automaattisesti paikasta toiseen. Jos et halua kaiken sisällön näkyvän molemmilla näytöillä, tee sisältö näkymättömäksi ensimmäisellä ja se siirtyy paikoilleen.

Tutustu muihin Adobe-ohjelmistoihin, kuten Adobe Dimension .



  • 8 välttämätöntä prototyyppien muodostus- ja rakennustyökalua

Tässä näytämme sinulle, kuinka luoda sovelluksen prototyyppi, joka tekee juuri tämän (lisää miten luoda sovellus oppaat, tutustu parhaiden luetteloon). Ja tämän lisäksi XD: n uusi ominaisuus antaa käyttäjälle mahdollisuuden hallita vuorovaikutusta äänellä. Tutkimme tätä suunnitteluominaisuutena ja siitä, miten sovellus voi puhua myös käyttäjälle, mikä voi tarjota mielenkiintoisia suunnittelumahdollisuuksia.

Lataa projektitiedostot tähän opetusohjelmaan.

01. Projektin aloittaminen

Prototyyppien luominen Adobe XD: llä: Projektin käynnistäminen

Asenna XD ja aloita uusi projekti(Kuvan luotto: Web-suunnittelija)

Jos sinulla ei ole Adobe XD: tä, voit ladata ja asentaa sen tässä . Kun asennus on valmis, avaa ohjelmisto ja aloitusnäytön avulla voit valita näytön koon ladattavaksi. Valitse tässä tapauksessa iPhone 6/7/8, koska se on oikea koko tälle projektille, mutta näet, että saatavilla on useita kokoja.

02. Tuo ensimmäinen kuva

Prototyyppien luominen Adobe XD: llä: Tuo ensimmäinen kuva

Etsi ensimmäinen kuvasi ja tuo se(Kuvan luotto: Web-suunnittelija)

Kuvia voidaan tuoda eri tavoin, mutta siirry tässä tapauksessa Tiedosto> Tuo. Valitse projektitiedostoista oma-kansio ja ensimmäinen tuotava kuva on sky.png. Aseta se ruudun yläosaan ja siirrä se vain pari pikseliä alaspäin.

03. Aseta ohjaamo

Rakenna prototyyppejä Adobe XD: llä: Aseta ohjaamo

Tuo lisää kuvia(Kuvan luotto: Web-suunnittelija)

Seuraava muotoilun kuva on 'cabin.png'. Tuo vain tämä samalla tavalla kuin edellisessä vaiheessa ja aseta se sitten täyttämään näyttö. Tuo lopuksi kuva 'trees.png' ja aseta se ruudun alaosaan puiden kanssa järven yli.

04. Tuo logo sisään

Syy siihen, että nämä kuvat ovat erillisiä kerroksia, on, että kun siirtyminen näytöistä toiseen tapahtuu, ne voivat liikkua erikseen. Siirry Tiedosto-valikkoon ja valitse Tuo. Valitse tällä kertaa 'logo.ai', joka on vektorikuva. Aseta tämä kuva ruudun yläosaan keskelle.

05. Lisää ympyrä

Prototyyppien luominen Adobe XD: llä: Lisää piiri

Piirrä logon ympärille ympyrätyökalulla(Kuvan luotto: Web-suunnittelija)

Valitse ympyrätyökalu ja piirrä ympyrä vain hieman suurempi kuin logo. Poista oikealla olevasta Ominaisuudet-paneelista viiva ja tee tausta mustaksi. Valitse Taustan sumennus ja pienennä kirkkaus arvoon -30 niin, että ympyrä on edelleen musta.

06. Järjestä grafiikka uudelleen

Prototyyppien luominen Adobe XD: llä: Järjestä grafiikka uudelleen

Lähetä ympyrä logon alle(Kuvan luotto: Web-suunnittelija)

Nyt ympyrän on siirryttävä logon taakse. Valitse Objekti> Järjestä ja lähetä taaksepäin. Kuten muissakin Adobe-tuotteissa, se on myös Cmd / Ctrl + [ siirtää grafiikkaa taaksepäin tasojärjestyksessä. Oikean hakasulkeen käyttö tuo objektin eteenpäin järjestyksessä.

07. Pudota mikrofoni

Prototyyppien luominen Adobe XD: llä: Pudota mikrofoni

Aseta mikrofonikuvan koko ja muuta sen kokoa ja piirrä ympyrä sen ympärille(Kuvan luotto: Web-suunnittelija)

Tuo nyt mic.ai-kuva ja muuta kuvan kokoa suhteellisen pieneksi. Aseta tämä näytön alareunaan. Piirrä ympyrä tämän ympärille ja poista täyttö niin, että se poistetaan. Tee sitten viiva valkoiseksi ja kahden pikselin levyiseksi. Sijoita se mikrofonikuvan ympärille.

08. Tekstiviesti

Lisää tekstityökalulla sanat 'puhu hakuun' mikrofonin alle. Tee tekstistä valkoinen ja vaihda se Helvetica Neue Condensed Black -tekstiksi. Napsauta näytön vasemmassa alakulmassa olevaa resurssipaneelin kuvaketta avataksesi sen. Kun teksti on valittuna näytöllä, napsauta 'Merkkityylit' -kohdan vieressä olevaa + -kuvaketta tallentaaksesi tämän muodon tekstille.

09. Liity ryhmään

Valitse Taso-paneelin kuvake ruudun vasemmassa alakulmassa. Valitse näytöllä hakuteksti ja Vaihto-napsauta lisätäksesi ympyrän ja mikrofonikuvakkeen. Siirry kohtaan Objekti ja valitse Ryhmä. Nimeä tämä ryhmä uudelleen Taso-paneelissa nimellä 'Haku'. On hyödyllistä nimetä ryhmiä, varsinkin kun niitä animoidaan.

Rakenna prototyyppejä Adobe XD: llä: Ryhmittele logo

Ryhmittele logo ja ympyrä yhteen(Kuvan luotto: Web-suunnittelija)

Aivan kuten viimeisessä vaiheessa, valitse logo ja sen ympärillä oleva näön ympyrä ja ryhmitä ne sitten yhteen. Nimeä koko ryhmä uudelleen paneelissa Logo, jotta se on helposti tunnistettavissa, jos haluat muokata sitä myöhemmin uudelleen. Tällä hetkellä ensimmäisen näytön suunnittelu on valmis.

11. Lisäelementit

Rakenna prototyyppejä Adobe XD: llä: Lisäelementit

Tuo lisää muotoiluelementtejä animaatiotarkoituksiin(Kuvan luotto: Web-suunnittelija)

Vaikka ensimmäinen ruutu on valmis, on vielä enemmän suunnitteluelementtejä, jotka on lisättävä. Näin animaatio luodaan muuttamalla elementtien sijaintia näyttöjen välillä. Siirry suorakulmion työkaluun ja pidä sitä painettuna Siirtää lisätä ruutuun ruudun, jolloin reunasta tulee valkoinen.

12. Erilainen tuonti

Rakenna prototyyppejä Adobe XD: llä: Erilainen tuonti

Vedä kuvat vain käyttöjärjestelmän kansioista(Kuvan luotto: Web-suunnittelija)

Avaa nyt omaisuuden kansio käyttöjärjestelmän kautta. Valitse 'cabin1.png' -kuva ja vedä tämä suoraan edellisessä vaiheessa luomallesi neliölle. Se peitetään automaattisesti tämän sisällä. Kaksoisnapsauta muokataksesi kuvan sijaintia ja varmista, että hytti on näkyvissä neliössä.

13. Lisää etiketti

Prototyyppien luominen Adobe XD: llä: Lisää tarra

Käytä tekstityökalua lisätäksesi tunnisteita omaisuuteen(Kuvan luotto: Web-suunnittelija)

Lisää Teksti-työkalun avulla tekstin alle Metsämökki ja käytä Omaisuus-paneelia tyylistäksesi teksti tallennettuun tyyliin vaiheesta 8. Valitse kuva ja tarra ja ryhmittele ne yhteen. Nimeä ryhmä 'vasen mökki' tasopaneelissa.

14. Kopioi ryhmä

Prototyyppien luominen Adobe XD: llä: Kopioi ryhmä

Kopioi ja liitä käyttöliittymän elementit toiston ruudukon käyttämisen sijaan(Kuvan luotto: Web-suunnittelija)

Normaalisti käyttöliittymäelementin toistaminen on täydellinen työ 'Repeat Grid' -työkalulle. Tämä tarvitsee kuitenkin erityisanimaation, joka ei toimi Toista ruudukko. Valitse kuva- ja tekstiryhmä, kopioi ja liitä se siten, että se istuu alkuperäisen viereen, ja lisää sen sijaan kuva 'cabin2.png'.

15. Nimeä uudelleen ja kopioi sitten uudelleen

Rakenna prototyyppejä Adobe XD: llä: Nimeä uudelleen ja kopioi sitten uudelleen

Päivitä kopioitu teksti tarpeen mukaan(Kuvan luotto: Web-suunnittelija)

Vaihda tekstiksi Lumimökki ja nimeä tasot-paneelissa tämä oikea mökki. Valitse sekä vasen että oikea hytti ja kopioi ne, sijoita kaksoiskappaleet alla ja päivitä niiden teksti ja kuvat sanoilla 'cabin3.png' ja 'cabin4.png'. Ryhmittele nämä molemmat yhteen ja nimeä ryhmä alemmalle ohjaamolle.

16. Tekstin otsikko

Rakenna prototyyppejä Adobe XD: llä: Nimeä uudelleen ja kopioi sitten uudelleen

Lisää vielä tekstiä(Kuvan luotto: Web-suunnittelija)

Lisää teksti sivulle tekstillä 'Hakutulokset mökeille'. Anna tälle Rockwell-kirjasinlaji ja tallenna se Ominaisuudet-paneelin merkkityyleihin. Aseta nyt alemman ohjaamon ryhmä suoraan näytön alareunaan ja vie ulkonäkö nollaan niin, että se on näkymätön tässä näytössä.

17. Opasiteetin muuttaminen

Rakenna prototyyppejä Adobe XD: llä: Läpinäkyvyyden muuttaminen

Aseta vasemman ja oikean hytin peittävyys nollaksi(Kuvan luotto: Web-suunnittelija)

Valitse nyt vasen ja oikea mökki, siirrä ne näytön alareunaan ja vie ulkoasun liukusäädin nollaan. Toista uudelleen hakutekstille. Kun siirrymme toiseen näyttöön, nämä kaikki animoivat uudet sijaintinsa. Siirrä Taso-paneelissa 'vasen hytti' kaikkien muiden matkustamoryhmien yläpuolelle.

18. Kopioi näyttö

Prototyyppien luominen Adobe XD: llä: Kopioi näyttö

Kopioi näyttö ja siirrä sitten logo ja tee se näkymättömäksi(Kuvan luotto: Web-suunnittelija)

Valitse piirtoalusta napsauttamalla sen nimeä, kaksoisnapsauta sitten piirilevyä ja vaihda nimeksi 'koti'. Kopioi ja liitä piirtoalusta ja nimeä se uudelleen hakuksi. Valitse nyt logo ja siirrä se melkein pois näytöltä ja vähennä sen ulkonäkö nollaan.

19. Siirrä taustoja

Prototyyppien luominen Adobe XD: llä: Siirrä taustoja

Siirrä tausta ja muut elementit(Kuvan luotto: Web-suunnittelija)

Valitse taivaan kuva ja siirrä sitä hieman näytöllä. Valitse hytin kuva ja siirrä sitä ylöspäin, kunnes hytti on ruudun yläosassa. Napsauta sitten puiden kuvaa ja siirrä se hytin yli. Valitse lopuksi hakuryhmä ja vähennä ulkonäkö nollaksi.

20. Uusia elementtejä tulee näkyviin

Prototyyppien luominen Adobe XD: llä: Uusia elementtejä tulee näkyviin

Tee nyt uusia elementtejä(Kuvan luotto: Web-suunnittelija)

Valitse hakutulokset Taso-paneelista ja nosta sen ulkonäkö 100: een. Siirrä sitä ylöspäin näytöllä. Toista tämä vasemman, oikean ja alemman ohjaamon kohdalla. Piirrä kynätyökalulla yksinkertainen takapainike ja lisää ympyrä sen ympärille. Tee tausta epäteräväksi ja ota sen kirkkaus alas -30.

21. Suorita takaisin-painike

Valitse takanuoli ja ympyrä, ryhmittele ne yhteen ja nimeä heille 'takaisin-painike' Taso-paneelissa. Vaihda Prototyyppi-tilaan painamalla XD-liitännän vasemmassa yläkulmassa olevaa Prototyyppi-painiketta. Valitse aloitusnäyttö, vedä sininen nuoli hakunäyttöön ja ponnahdusikkuna tulee näkyviin.

22. Äänikomento

Rakenna prototyyppejä Adobe XD: äänikomennolla

Äänikomentojen lisääminen on helppoa(Kuvan luotto: Web-suunnittelija)

Vaihda liipaisu ääneksi ja kirjoita sana 'haku' äänikomennoksi tämän hallitsemiseksi. Vaihda Toiminnoksi Automaattinen animointi ja Helppokäyttöiseksi. Tee kesto 1,5 sekuntia. Napsauta hakunäytössä paluupainiketta ja vedä sininen nuoli takaisin aloitusnäyttöön. Vaihda vain liipaisin kohtaan Tap.

23. Testaa prototyyppi

Prototyyppien luominen Adobe XD: llä: Testaa prototyyppi

Testaa prototyyppi painamalla toistopainiketta(Kuvan luotto: Web-suunnittelija)

XD-käyttöliittymän oikeassa yläkulmassa on toistopainike. Napsauta tätä ja toimiva prototyyppi ilmestyy nyt näyttöön. Kotisivulla sinun on pidettävä välilyöntinäppäintä painettuna puhuessasi äänikomentoa 'haku'. Kun päästät välilyönnin irti, se vie sinut seuraavaan näyttöön ja animoi graafisen käyttöliittymän paikalleen.

24. Palataan takaisin

Rakenna prototyyppejä Adobe XD: llä: Palaa takaisin

Palaa aloitusnäyttöön painamalla takaisin-painiketta(Kuvan luotto: Web-suunnittelija)

Kun siirtyminen on suoritettu, voit palata aloitusnäyttöön painamalla Takaisin-painiketta. Sulje prototyyppi ja napsauta hakunäyttöä, napsauta sitten sinistä nuolta oikealla (älä vedä). Vaihda liipaisimeksi aika, tee viive 0s ja aseta Toiminnoksi Puheen toisto. Tee puheesta 'käytettävissä olevien mökkien hakutulokset'.

25. Puheen vahvistus

Rakenna prototyyppejä Adobe XD: llä: Puheen vahvistus

Testaa puheen vahvistus ja palaa sitten Suunnittelu-näkymään(Kuvan luotto: Web-suunnittelija)

Testaa tämä nyt toistopainikkeella kuullaksesi äänivahvistuksen hausta. Sulje prototyyppi, kun olet kokeillut tätä. Toinen näyttö luodaan, joten napsautetaan sitten takaisin XD-käyttöliittymän vasemmassa yläkulmassa olevaan Suunnittelu-näkymään. Napsauta hakunäyttöä napsauttamalla nimeä ja kopioi ja liitä se.

26. Kuvan skaalaus

Prototyyppien luominen Adobe XD: llä: kuvan skaalaus

Nimeä uusi näyttö uudelleen ja muuta ohjaamon kuvan kokoa(Kuvan luotto: Web-suunnittelija)

Nimeä uusi näyttö mökiksi. Kaksoisnapsauta vasemman hytin kerroksen kuvaa. Muuta kulmakahvojen kokoa niin, että ne täyttävät ruudun, ja aseta sitten kuva kuvan sisälle niin, että se peittää kyseisen näytön. Napsauta hakutulosten tekstiä ja poista se näkymästä viemällä se nollaksi.

27. Uudet näytön elementit

Rakenna prototyyppejä Adobe XD: llä: Uudet näyttöelementit

On aika tuoda uusia elementtejä(Kuvan luotto: Web-suunnittelija)

Kaksoisnapsauta Forest Cabin -tekstiä, koska se on osa ryhmää. Suurenna tekstin koko 26 pikseliksi ja siirrä sitä hieman ylöspäin näytöllä. Lisää teksti Helvetica Neue Medium -ruudun näyttöön 14 pikselin koossa ja aseta se valkoiseksi erottumaan taustaa vasten. Lisää valkoinen viiva viivatyökalulla otsikon alle.

28. Luo painike

Prototyyppien luominen Adobe XD: llä: Luo painike

Luo pyöristetty suorakulmio käytettäväksi painikkeena(Kuvan luotto: Web-suunnittelija)

Käytä Suorakulmio-työkalua piirtämään suorakulmio kuvion alaosassa olevalle näytölle. Vedä kulmakahvoista saadaksesi muodolle pyöreät kulmat. Lisää tähän sana 'Varata' käyttämällä Helvetica Neuen omaisuuspaneelin tallennettua merkkityyliä tiivistetyllä lihavoituna.

29. Siirry Prototyyppi-tilaan

Prototyyppien luominen Adobe XD: llä: Siirry Prototyyppi-tilaan

Kun kaikki on paikallaan, vaihda Prototype-tilaan(Kuvan luotto: Web-suunnittelija)

Kaikki ulkoasun elementit ovat nyt paikallaan sovelluksen koko suunnittelussa. Siirry Prototyyppi-tilaan napsauttamalla sanaa Prototyyppi vasemmassa yläkulmassa. Napsauta hakunäytössä kuvan ja tekstin metsämökki-ryhmää. Vedä sininen kahva tästä ohjaamonäytölle.

30. Animaatioasetukset

Rakenna prototyyppejä Adobe XD: Animation -asetuksilla

Säädä animaatioasetuksia pitämään asiat tikitellen(Kuvan luotto: Web-suunnittelija)

Valitse siirtymisnäytön ponnahdusikkunassa Napauta liipaisimeksi ja tee sitten toiminto automaattiseksi. Jatka helpottamista Snap-muodossa, mutta lyhennä tämän kesto 0,6 sekuntiin. Tämä varmistaa, että animaatio ei vedä - ensimmäisen näytön siirtymisellä toiseen näyttöön oli paljon liikettä, joka vaati pidempää siirtymistä.

Prototyyppien luominen Adobe XD: llä: linkitä takaisin-painike

Kun olet linkittänyt takaisin-painikkeen, olet valmis testaamaan(Kuvan luotto: Web-suunnittelija)

Valitse nyt Takaisin-painike viimeiseltä näytöltä ja vedä sininen nuoli tästä takaisin hakunäyttöön. Kaikki edellisen siirtymän asetukset on muistettava. Olet nyt valmis menemään eteenpäin ja testaamaan tätä napsauttamalla toistopainiketta.

32. Itsenäinen

Rakenna prototyyppejä Adobe XD: llä: Animoi automaattisesti

Nyt voit nähdä, kuinka automaattinen animointi toimii(Kuvan luotto: Web-suunnittelija)

Automaattisen animoinnin avulla näet nyt, että kuva laajenee täyttämään ruudun, ja elementit, joita ei enää tarvita, häviävät, kun uusi teksti haalistuu. Päinvastoin tapahtuu palatessasi takaisin. Tämä tarjoaa hyvän tavan nähdä automaattisen animaation toimivan kolmella näytöllä.

33. Tallenna projekti

Rakenna prototyyppejä Adobe XD: llä: Tallenna projekti

Älä unohda tallentaa paikallista kopiota projektistasi(Kuvan luotto: Web-suunnittelija)

Oletuksena projektisi tulisi automaattisesti tallentaa Creative Cloudiin, mutta kannattaa tallentaa kopio omalle kiintolevyllesi mahdollisten ongelmien varalta. Valitse Tiedosto> Tallenna, vaihda sijainti tietokoneellesi ja nimeä projekti sopivalla nimellä.

34. Projektin jakaminen

Prototyyppien luominen Adobe XD: llä: Projektin jakaminen

Lähetä projekti ulos jakamispainikkeella muille(Kuvan luotto: Web-suunnittelija)

Prototyyppien koko tarkoitus on testata projektia muilla ihmisillä. Onneksi XD-käyttöliittymän oikeassa yläkulmassa on jakopainike, joka tekee tästä tuulen. Napsauta jakopainiketta ja valitse näkyviin tulevasta pudotusvalikosta vaihtoehto Jaa tarkistettavaksi.

35. Julkaise prototyyppi

Rakenna prototyyppejä Adobe XD: llä: Julkaise prototyyppi

Luo julkinen linkki, jotta ihmiset voivat testata projektia selaimessa(Kuvan luotto: Web-suunnittelija)

Seuraavassa näytössä kerrotaan, että automaattinen animointituki ei ole vielä käytettävissä verkossa, mutta se on tulossa pian. Napsauta Luo julkinen linkki ja napsauta sitten oikeassa yläkulmassa olevaa linkkiä siirtyäksesi julkiseen linkkiin verkkoselaimessa. Sinun on pidettävä välilyöntinäppäintä alhaalla, jotta voit käyttää äänikomentoa prototyypin kanssa.

36. Videoversio

Rakenna prototyyppejä Adobe XD: Video -versiolla

Vaihtoehtoisesti voit tallentaa käyttöliittymän toiminnassa videona(Kuvan luotto: Web-suunnittelija)

Toinen prototyyppi voidaan jakaa tallentamalla käyttöliittymä toimintaan. Napsauta jakopainiketta ja valitse Tallenna video. Tämä avaa ikkunan, ja kun suljet tämän, sinua pyydetään tallentamaan ruudun tallenne MP4-tiedostona, mikä on myös hyödyllinen tapa jakaa prototyyppisi.

Tämä artikkeli julkaistiin alun perin luovan web-lehden numerossa 285 Nettisivujen suunnittelija . Osta numero 285 täältä tai tilaa Web Designer täältä .

Aiheeseen liittyvät artikkelit: