Rakenna prototyyppejä Adobe XD: llä

Nykyaikaisessa web- ja sovellusrakenteessa on usein useita kertoja, kun vuorovaikutus ei avaa koko uutta sivua tai näyttöä. Moderni lähestymistapa vuorovaikutteisen sisällön luomiseen vaatii siirtymiä suunnittelurajoituselementtien välillä niin, että käyttäjä on yllättynyt ja kiihdyttää sisällön vaihtamisen kokemus. Tämä kaikki tapahtuu samalla näytöllä tai sivulla ilman virkistystä. Tällaisten vuorovaikutusten suunnitteleminen ja niiden jalostaminen toimimaan asianmukaisesti voi kestää aikaa, mutta kannattaa tehdä ennen koodin kirjoittamista.

Tämä on, mitä Adobe XD on viettänyt viime kuukausien kehitystä saadaksesi oikean. Luo sisältöä yhdessä tilassa yhdellä näytöllä, siirrä se sisältö uudelle tilaan uudella näytöllä ja valitse vain "Auto Animate" -vaihtoehto siirtymiseen. Kaikki molempien näyttöjen sama sisältö animoi automaattisesti asemasta toiseen. Jos et halua, että kaikki molemmissa näytöissä näkyvää sisältöä tekevät sisällön näkymättömästä sisällöstä ja se siirtyy paikalleen.

Tutustu muihin Adobe-ohjelmistoon, kuten Adobe-ulottuvuus .

• 8 Olennaista prototyyppiä ja rakentaa työkaluja

Tässä näytämme sinulle, miten voit luoda sovelluksen prototyyppi, joka vain tämä (lisää Miten luoda sovellus tutorials, tutustu parhaimmillaan). Ja sen jälkeen, että XD: n uusi ominaisuus mahdollistaa käyttäjän hallita vuorovaikutusta äänensä kanssa. Tutkimme tätä suunnittelutoiminnona ja miten sovellus voi puhua myös käyttäjälle, mikä voi tarjota mielenkiintoisia suunnittelun mahdollisuuksia.

Lataa projektitiedostot Tähän opetusohjelmaan.

01. Hankkeen käynnistäminen

Jos sinulla ei ole Adobe XD: tä, voit ladata ja asentaa sen tässä . Kun asennus on valmis, avaa ohjelmisto ja Tervetuloa -näyttö, jonka avulla voit valita näytön koko latauksen. Tässä tapauksessa valitse iPhone 6/7/8, sillä se on tämän projektin oikea koko, mutta näet erilaisia ​​kokoja saatavilla.

02. Tuo ensimmäinen kuva

Kuvien tuominen on erilaisia ​​tapoja, mutta tässä ensimmäisessä tapauksessa siirry tiedostoon & gt; Tuonti. Valitse projektitiedostojen "omaisuus" -kansio ja ensimmäinen tuo tuonti on "Sky.png". Aseta se näytön yläosaan ja siirrä se vain pari pikseliä alas.

03. Aseta mökki

Suunnittelun seuraava kuva on "Cabin.png". Tuo vain tämä samalla tavalla kuin edellisessä vaiheessa ja aseta se täyttämään näytön. Lopuksi tuoda kuva "puut.png" ja aseta se näytön alareunaan puiden kanssa järven yli.

04. Tuo logo

Syynä nämä kuvat ovat erillisiä kerroksia, joten kun siirtyminen luodaan näytöiden välillä, jotka ne voivat liikkua erikseen. Siirry Tiedosto-valikkoon ja valitse Tuo. Tällä kertaa valitse "logo.ai", joka on vektorikuva. Aseta tämä kuva näytön yläosassa.

05. Lisää ympyrä

Valitse ympyrän työkalu ja piirrä ympyrä vain hieman suurempi kuin logo. Oikeudellisessa Ominaisuudet-paneelissa irrota aivohalvaus ja tee tausta mustaksi. Valitse tausta hämärtyminen ja vähennä kirkkautta -30 niin, että ympyrä on edelleen musta.

06. Järjestä grafiikka uudelleen

Nyt ympyrän täytyy liikkua logon takana. Valitse Object & Gt; Järjestä ja lähetä taaksepäin. Kuten muissa Adobe-tuotteissa, se on myös myös CMD / CTRL + [ Siirrä kaikki graafiset taaksepäin kerroksen järjestyksessä. Käyttämällä oikean neliön kannattimen avulla tuodaan esine eteenpäin järjestyksessä.

07. Pudota mikrofoni

Tuo nyt "MIC.AI" -kuva ja muokata kuvaa suhteellisen pieneksi. Aseta tämä näytön alareunaan. Piirrä ympyrä ympärille ja poista täyttö niin, että se on poistettu. Sitten tee aivohalvaus valkoinen ja kaksi pikseliä leveä. Mic-kuvan ympärillä oleva asema.

08. Tekstiviesti

Lisää teksti-työkalu, jos haluat lisätä sanat "Puhu etsimään" mikrofonin alapuolelle. Tee teksti valkoinen ja muuta sitä Helveticaan Neue Condensed Black. Avaa se napsauttamalla näytön vasemmassa alakulmassa. Kun olet valittu näytöllä, napsauta tämän merkinnän vieressä olevaa '+' -kuvaketta.

09. Liity ryhmälle

Valitse näytön vasemmassa alakulmassa oleva kerrospaneelin kuvake. Valitse näytöllä "Search" -teksti ja Shift-Click Ympyrän ja MIC-kuvakkeen lisääminen. Siirry kohteeseen ja valitse ryhmä. Kerrospaneelissa nimeä tämä ryhmä "Search". On hyödyllistä nimetä ryhmiä, varsinkin kun animoivat näitä.

10. Ryhmä logo

Aivan kuten viimeisessä vaiheessa, valitse logo ja hämärtynyt ympyrä sen ympärillä, sitten ryhmitellä ne yhteen. Kerrospaneelissa nimeä koko ryhmä "logo" siten, että se on helposti tunnistettavissa, jos haluat muokata tätä myöhemmin uudelleen. Tällä hetkellä ensimmäisen näytön muotoilu on valmis.

11. Lisäelementit

Vaikka ensimmäinen näyttö on valmis, on vielä enemmän suunnitteluelementtejä, jotka on lisättävä. Näin animaatio luodaan muuttamalla elementtejä "sijoittamista näyttöjen välillä. Siirry suorakulmion työkaluun ja pidä kiinni Siirtää Lisää neliö näytölle, mikä tekee reunusta valkoisesta.

12. Eri tuonti

Avaa nyt varojen kansio käyttöjärjestelmän kautta. Valitse "Cabin1.png" -kuva ja vedä tämä suoraan edellisessä vaiheessa luotuun neliöön. Se maskistetaan automaattisesti tämän sisälle. Kaksoisnapsauta muokata kuvan sijaintia ja varmista, että mökki on näkyvissä neliössä.

13. Lisää etiketti

Tekstityökalun käyttäminen Lisää teksti "Forest Cabin" tekstin alapuolelle ja käytä varojen paneelia tekstiä tallennetussa tyylissä vaiheesta 8. Valitse kuva ja etiketti ja ryhmittele ne yhteen. Nimeä ryhmä "vasen hytti" kerrospaneelissa.

14. Kopioi ryhmä

Normaalisti toistetaan käyttöliittymä elementti on täydellinen työ "Repeat Grid" -työkalulle. Tämä kuitenkin tarvitsee erityistä animaatiota, joka ei toimi REPE-verkkoon. Valitse kuva ja tekstiryhmä, kopioi ja liitä se niin, että se istuu alkuperäisen vieressä ja lisätä kuvan "Cabin2.png".

15. Nimeä uudelleen kopioi uudelleen

Muuta tekstiä "Snow Cabin" ja kerroksessa paneelin nimi tämä "oikea mökki". Valitse molemmat vasen ja oikea mökki ja päällekkäiset ne, aseta kaksoiskappaleet alla ja päivitä heidän tekstinsä ja kuvia "Cabin3.png" ja "Cabin4.png". Konserni molemmat yhdessä ja nimeä ryhmä "alempi mökki".

16. Tekstin otsikko

Lisää teksti sivulle tekstin "hakutulokset mökeihin". Anna tämä Rockwell-tyyppihyväksyntä ja tallenna tämä omaisuuspaneelin merkkityyleihin. Nyt sijoittaa "alempi mökki" -ryhmä suoraan näytön alareunassa ja ottaa ulkoasun alas nollaan siten, että se on näkymätön tällä näytöllä.

17. OPOPOITUMINEN

Valitse nyt vasen ja oikea mökki, siirrä ne näytön alareunaan ja ota ulkonäkö liukusäädin nollaan. Toista uudelleen hakukirjaan. Kun siirrymme toiseen näyttöön, nämä kaikki animoivat uusiin asentoihinsa. Siirrä "vasen mökki" yläpuolella kaikki muut matkustamiryhmät.

18. Kopioi näyttö

Valitse artboard napsauttamalla sen nimeä ja kaksoisnapsauta artikkelia ja muuta nimi "kotiin". Kopioi ja liitä Artboard ja nimeä se uudelleen. Valitse nyt logo ja siirrä se lähes pois näytöstä ja vähennä sen ulkonäköä nollaan.

19. Siirrä taustat

Valitse SKY-kuva ja nudge se hieman näytöllä. Valitse matkustamokuva ja siirrä se ylös, kunnes mökki on näytön yläosassa. Napsauta sitten puita kuvaa ja siirrä se ohjaamon yli. Valitse lopuksi "haku" -ryhmä ja vähennä ulkoasua nollaan.

20. Uudet elementit näkyvät

Valitse hakutulos kerrospaneelissa ja tuo sen ulkonäkö jopa 100. Siirrä se ylös näytölle. Toista tämä vasemmalle mökille, oikealle hyttille ja alemmalle hyttille. Käytä kynätyökalua piirtääksesi yksinkertaisen taustapainikkeen ja lisää ympyrän ympärille. Tee tausta hämärtää ja ota kirkkaus alas -30: een.

21. Täytä Takaisin-painike

Valitse Takaisin-nuoli ja ympyrä, ryhmittele ne yhteen ja nimeä ne "Takaisin-painike" kerrospaneelissa. Vaihda "Prototyyppiin" -tilaan painamalla XD-liitännän vasemmassa yläkulmassa olevaa prototyyppiä. Valitse kohtaa, vedä sininen nuoli haku-näytölle ja näyttöön tulee ponnahdusikkuna.

22. Äänikomento

Vaihda laukaisinta ääneen ja kirjoita sana "haku" äänikomentoon, jotta voit hallita tätä. Vaihda toiminto automaattisesti animoitiin ja helpottaa napsauttamalla. Tee kesto 1.5s. Napsauta haku-näytössä Takaisin-painiketta ja vedä sininen nuoli takaisin "Koti" -näyttöön. Vain muuttaa liipaisinta napauttamalla.

23. Testaa prototyyppi

XD-liitännän oikeassa yläkulmassa on toistopainike. Napsauta tätä ja toimiva prototyyppi avautuu nyt näytöllä. Kotisivulla sinun on pidettävä välilyöntiä, kun puhut äänikomennon "haku". Kun annat välilyönnin irti, se vie sinut seuraavaan näytölle ja animoida graafinen käyttöliittymä paikalleen.

24. Mene takaisin

Kun siirtyminen on käyttänyt, voit painaa Takaisin-painiketta palataksesi kotikäriin. Sulje prototyyppi ja napsauta haku-näyttöä ja napsauta sitten oikealla olevaa sinistä nuolta (älä vedä). Vaihda laukaisinta oikealle, tee viive 0S ja aseta toiminta puhetoistoon. Tee puhe "hakutulokset käytettävissä olevista mökeistä".

25. Puheen vahvistus

Testaa tämä nyt Play-painikkeella, jos haluat kuulla äänen vahvistuksen hausta. Sulje prototyyppi, kun olet kokeillut tätä. Toinen näyttö on luotu, joten klikkaa takaisin XD-käyttöliittymän vasemmassa yläkulmassa olevaa "Design" -näkymää. Napsauta haku-näyttöä napsauttamalla nimeä ja kopioi sitten ja liitä se.

26. Kuvan skaalaaminen

Nimeä uusi näyttö "mökki". Kaksoisnapsauta kuvaa vasempaan hytin kerros. Muuta kulmakappaleita, jotta se täyttää näytön ja sijoitetaan sitten kuvan sisäpuolelle siten, että se kattaa tämän näytön. Napsauta hakutuloksia tekstiä ja poista se alas nollaan poistaaksesi sen näkymästä.

27. Uudet näytönelementit

Kaksoisnapsauta "Forest Cabin" -tekstiä kuin se on osa ryhmää. Suurenna tekstin kokoa 26 pikseliä ja siirrä se hieman näytöllä. Lisää tekstiä näytölle Helvetican Neue Mediumissa 14 pikselin kokoa ja aseta se valkoiseksi erottumaan taustalla. Lisää valkoinen viiva linjatyökaluun otsikon alla.

28. Luo painike

Käytä suorakulmion työkalua piirtämään suorakulmio ruudulla suunnittelun alareunassa. Vedä kulmakahvat antamaan tämän muotoisen pyöreän kulman. Lisää sana 'Reserve' tähän käyttämällä Tallennettua merkkityyliä varojen paneelissa Helvetican Neue Condensed Bold.

29. Siirry Prototype-tilaan

Kaikki suunnitteluelementit ovat käytössä nyt koko sovelluksen suunnittelussa. Siirry "Prototyyppiin" -tilaan klikkaamalla sanaa "prototyyppi" vasemmassa yläkulmassa. Haku-näytössä napsauttamalla kuvan ja tekstin "Forest Cabin" -ryhmää. Vedä sininen kahva tästä "mökki" -näyttöön.

30. Animaatioasetukset

Valitse pop-up-paneelissa näyttöjen välisen siirtymisen, valitse Tilaa liipaisimeksi ja tee sitten Auto Animate. Pidä keventämällä napsauttamalla, mutta vähennä tämän kestoa 0,6s. Tämä varmistaa, että animaatio ei vedä - ensimmäisen näytön liike toiseen näyttöön oli paljon liikettä, joka tarvitsi pidemmän siirtymän.

31. Linkki Takaisin-painike

Valitse nyt Takaisin-painike lopullisesta näytöstä ja vedä sininen nuoli tästä takaisin "haku" -näytölle. Kaikki edellisen siirtymän asetukset on muistettava. Olet nyt valmis menemään eteenpäin ja testata tämän klikkaamalla Play-painiketta.

32. Auto-animaatti

Se, mitä näet automaattisella animaatiolla, on se, että kuva laajenee täyttämään näytön ja elementit, joita ei enää tarvita, häviävät, kun uusi teksti häivyttää. Päinvastoin tapahtuu. Tämä tarjoaa hyvän tavan nähdä automaattisen animatin, joka työskentelee kolmessa näytössä.

33. Tallenna projekti

Oletusarvoisesti projektin pitäisi säästää automaattisesti Creative Cloud, mutta on hyvä tallentaa kopio omaan kiintolevylle, jos sinulla on ongelmia. Valitse Tiedosto & GT; Tallenna, vaihda sijainti omaan tietokoneeseen ja nimeä projekti sopivalla nimellä.

34. Hankkeen jakaminen

Koko prototyyppien kohta on testata projekti muille ihmisille. Onneksi XD-käyttöliittymän oikeassa yläkulmassa on osake-painike, joka tekee tästä tuulesta. Napsauta Jaa-painiketta ja avautuu Drop-valikosta, valitse vaihtoehto Jaa tarkistettavaksi.

35. Julkaise prototyyppi

Seuraavassa näytössä kerrotaan, että automaattinen animaatio tuki ei ole vielä saatavilla verkossa, mutta se tulee pian. Napsauta Luo julkinen linkki ja valitse sitten linkki yläosassa, jos haluat käydä julkisen linkin verkkoselaimessa. Sinun on pitänyt pitää välilyönti alaspäin, jotta voit käyttää äänikomentoa prototyypin kanssa.

36. Video-versio

Toinen prototyyppi voidaan jakaa tallentamalla rajapinta toimintaan. Napsauta Jaa-painiketta ja valitse Tallennusvideo. Tämä avaa ikkunan ja kun suljet tämän, sinua pyydetään tallentamaan ruudun tallennus MP4-tiedostona, joka on myös hyödyllinen tapa jakaa prototyyppi.

Tämä artikkeli julkaistiin alun perin asiassa 285 Creative Web Design Magazine Nettisivujen suunnittelija . Osta numero 285 täältä tai Tilaa Web-suunnittelija tähän .

Aiheeseen liittyvät artikkelit:

• Mobile App Design: Aloittelijan opas
• Kuinka luoda sovellus Vue.js
• Hanki kahvoja mobiilisovelluksella