Mobiilisovelluksen prototyyppi Adobe XD: llä

Tämä opetusohjelma, joka näyttää, miten mobiilisovelluksen prototyyppi tehdään Adobe XD: ssä, koottiin Adobe XD CC (2017 beta) vuonna 2016. vasta julkaistu Adobe XD CC on tehnyt muutaman muutoksen, mikä tekee siitä vieläkin helpomman käyttää.

Jos olet suunnittelija, joka luo käyttökokemuksia mobiilisovelluksille tai verkkosivustoille, saatat olla tottunut käyttämään useita työkaluja eri tehtäviin milloin prototyyppien tekeminen .

Aloitat tutkimuksesta. Sitten luonnostelet ideoita kynälle ja paperille ja siirrät ajatuksesi myöhemmin suunnittelutyökaluun. Parhaan tuloksen saamiseksi viet kaikki omaisuutesi ja tuodaan ne toiseen työkaluun prototyypin rakentamiseksi. Sieltä voit jakaa tai testata prototyyppiäsi, kerätä palautetta ja palata syklin keskelle iteroimaan vaihtamalla työkalusta toiseen, kun tarkennat suunnittelua.



Useat suunnittelutyökalut käsittelevät ongelman eri osan. Mutta sen sijaan, että helpottaisit elämäsi suunnittelijana, vaihto kaikkien näiden työkalujen välillä vähentää vain tahtiasi.

Entä jos olisi olemassa yksi työkalu, joka tarkoittaisi, että voit nauttia täysin yhdistetystä työnkulusta? Missä voisit suunnitella ja prototypata kokemuksesi muutamassa minuutissa, jakaa niitä verkossa palautteen keräämiseksi ja tehdä sitten muokkauksia helposti rikkomatta askeleitasi? Adobe Experience Design CC: n tai, kuten me kutsumme, Adobe XD: n, tavoitteena oli tehdä juuri se.

Tässä opetusohjelmassa näytämme sinulle Adobe XD: n pääalueet suunnittelemalla, prototyyppeillä ja jakamalla yksinkertaisen 'tavata joukkue' -mobiilisovelluksen.

Luomme sisältösivun, jossa luetellaan tuotetiimin jäsenet, ja käyttäjät voivat sitten napsauttaa yksittäisiä merkintöjä, jotka viedään syvällisemmälle biog-sivulle. Opit luomaan korkealaatuisia malleja, prototyyppejä ja jakamaan niitä palautteen keräämiseksi.

Katso yllä oleva video ja seuraa alla olevia kirjallisia ohjeita oppiaksesi prototyyppien muodostamisesta Adobe XD: llä. Sen lisäksi, että näytämme sinulle, miten se tehdään, näytämme myös, miten se testataan, nauhoitetaan esikatseluvideo toiminnassa ja miten jaetaan ja viedään.

Huomaa, että jotkut prosessit ovat saattaneet muuttua hieman Adobe XD: n uudemmassa versiossa.

01. Asenna Adobe XD ja aloita uusi suunnittelu

Aloita suunnittelu valitsemalla iPhone-piirtoalusta mallivaihtoehdoista

Aloita suunnittelu valitsemalla iPhone-piirtoalusta mallivaihtoehdoista

Varmista ensin, että Adobe XD on asennettu tietokoneellesi . Käynnistä se, katsele aloitusnäyttöä ja aloita uusi muotoilu iPhone-piirtoalusta.

02. Luo toinen piirtoalusta

Käytä Artboard-työkalua ( TO ) luoda toinen piirtoalusta ja muuttaa sitten niiden otsikot (kaksoisnapsauttamalla niitä) iPhone - Tiimisivu ja iPhone - Tietosivu. Vaihda molemmat Artboardsin taustavärit mustaksi käyttämällä oikealla olevaa kiinteistötarkastajaa. Valitse-työkalulla ( V ) valittuna, voit painaa välilyöntinäppäintä milloin tahansa, kun haluat siirtyä kuviosi yli.

03. Lataa opetusohjelman resurssit

Olen koonnut omaisuuden kansion, jota käytän tässä opetusohjelmassa. Voit ladata ne tässä . Vedä Finderista iphone-status-bar.svg Artboard 1: n yläosaan ( x: 8, y: 5 ). Kopioi ja liitä se sitten Artboard 2: een, joten molempien piirilevyjen yläosassa on tilarivi. Osuma cmd + L lukita nämä tilarivit molempiin piirtoalustoihin, jotta niiden ominaisuuksia ei voi muuttaa. Voit avata niiden lukituksen käyttämällä pikakuvaketta uudelleen tai napsauttamalla lukkokuvaketta.

04. Piirrä suorakulmio ja aseta mitat

Keskitymme Artboard 1: een (joukkue sivu). Suorakulmio-työkalun ( R ), piirrä piirtoalustalle 1 vaaleanpunainen suorakulmio (# FF2BC2 ilman reunaa) ja aseta sen mitat 375 x 230 oikealla olevalla kiinteistötarkastuspaneelilla.

05. Järjestä esineet uudelleen

Kytke reunus tai täytä se päälle tai pois napsauttamalla oikealla olevaa 'silmä' -kuvaketta. Osuma shift + cmd + [ lähettää sen aina taaksepäin tai siirry Objekti> Järjestä> Lähetä takaisin . Jos haluat vaihtaa värejä heksadesimaaliarvoilla, napsauta värikuvaketta ja kun alkuperäinen värivalitsin ponnahtaa esiin, valitse yläosassa toinen välilehti ja vaihda avattavaksi asetukseksi 'RGB Sliders'.

06. Luo otsikko

Tekstityökalun ( T ), napsauta luoda otsikko tiimisi sivulle. Minun on Helvetica Bold, 20, #FFFFFF, x: 18, y: 123. Aloitetaan koota tiimimme luettelo. Piirrä harmaa neliö, johon joukkueen jäsenen kuva istuu (100 x 100, x: 8, y: 238, # D0D0D0 ilman reunusta).

kupla kirjain fontti Google-dokumenteissa

07. Lisää toinen suorakulmio

Tämän oikealla puolella tarvitsemme valkoisen suorakulmion (260 x 100, x: 108, y: 238, #FFFFFF ilman reunaa), johon sisällytämme joukkueen jäsenen nimen otsikkona ja työnimikkeen alaotsikkona. Käytä toistaiseksi paikkamerkkitekstiä ja muotoile se haluamallasi tavalla.

08. Lisää nuolikuvake

Jos haluat näyttää, että tämä ruutu on painettava alue, sisällytämme nuolikuvakkeen. Vedä polku.svg Finderista XD-kankaalle pisteeseen taulusta. Sijoita se sitten x: 330, y: 279.

09. Aseta päälaukku

Vedä päähaku Finderista harmaalle neliölle.

10. Luo luettelo

Luo tiimisi luettelo tehokkaan Toista ruudukko -ominaisuuden avulla

Luo tiimisi luettelo tehokkaan Toista ruudukko -ominaisuuden avulla

Nyt voimme luoda luettelomme. Tässä vaiheessa normaalisti kopioit ja liität ylimmän kohteen, siirrät kopioitua versiota alaspäin ja säätät marginaalia. Teet saman myös uusille kohteille, ja jos haluat muuttaa marginaaleja, sinun on tehtävä se manuaalisesti yksi kerrallaan.

No, ei Adobe XD: n kanssa - voit käyttää Repeat Grid -ominaisuutta. Valitse kohteet, jotka haluat toistaa, napsauta oikealla olevassa kiinteistötarkastuksessa olevaa Toista ruudukko -painiketta ( cmd + R ) ja toista kohteet pystysuunnassa vihreillä kahvoilla. Voit myös toistaa ne vaakasuunnassa tablet-versiolle.

11. Säädä marginaali

Säädä toistuvan ruudukon marginaali viemällä kohdetta kohteiden reunaan, napsauttamalla ja vetämällä. Määritetään marginaaliksi 7. Vedä toistoristikko taulukkosi alaosaan. Meillä on nyt neljä riviä pelata.

12. Muokkaa tekstikenttiä

Vedä kaikki pääosuudet ristikkoon

Vedä kaikki pääosuudet ristikkoon

Vaikka ominaisuudet (värit, x- ja y-sijainnit jne.) Ovat globaaleja, jokaisen kohteen sisältö voi olla ainutlaatuinen. Muokkaa tekstikenttiä kunkin henkilön nimen ja työnimikkeen mukaan. Voit kaksoisnapsauttaa syöttääksesi ruudukon ja ryhmän tai cmd + napsauta minkä tahansa elementin valitsemiseksi suoraan ryhmästä tai toistetusta ruudukosta. Nyt meidän on vain tartuttava kaikkiin pääkuviin kerralla ja vedettävä ne ristikkoon, ja tämä näyttö on valmis.

13. Luo tummennettu vaikutus

Siirrytään Artboard 2: een (tietosivu). Jälleen aloitamme paikkamerkin suorakulmiosta (375 x 444, x: 0, y: 0, #FFFFFF ilman reunusta) ja vedämme otsakuvan täyttääksesi sen. Luomme tummennetun vaikutuksen muuttamalla kuvan peittävyyden 60 prosenttiin ja lähettämällä sen takaisin ( shift + cmd + [ ).

14. Lisää toinen nuoli

Lukitse sitten headshot-kohde ( cmd + L ) ja lisää toinen nuoli ('back-arrow.svg') osoittamaan, että käyttäjä voi palata tiimiluetteloon. Tämän on istuttava kohdissa x: 20, y: 40. On tärkeää lukita kuva ensin, koska muuten SVG korvaa pääkuvan.

15. Lisää yhteystietopalkki

Haluamme sisällyttää jokaiselle sivulle vaaleanpunaisen palkin, jossa luetellaan tiimin jäsenen yhteystiedot (375 x 45, x: 0, y: 400). Käytä Teksti-työkalua ( T ) luodaksesi tekstielementin, joka lukee 'Paikkamerkki-linkki', keskitä se, muotoile se ja sijoita se x: 169, y: 416.

16. Luo lisää tekstielementin esiintymiä

Käytetään Toista ruudukko -työkalua luomaan vielä kaksi esiintymää tästä tekstielementistä. Muunna ensin teksti toistuvaksi ruudukoksi ( cmd + R ), pidä sitten optionäppäintä painettuna samalla, kun laajennat ruudukkoasi vaakasuunnassa. Kaunis, eikö olekin? Valitse teksti suoraan ( cmd + napsauta ) ja muuta sisältö lukemaan Sähköposti, Twitter ja LinkedIn.

17. Luo nimi ja biolaatikko

Suorita suunnittelu loppuun luomalla valkoinen laatikko (360 x 214, x: 8, y: 445), joka sisältää tiimin jäsenen nimen ja biog. Lisää ensin tekstielementti käyttämällä paikkamerkkiä 'Henkilön nimi'. Biog: ää pitävälle tekstielementille haluamme käyttää aluetekstiä. Voit tehdä tämän valitsemalla Teksti-työkalun ( T ) ja määritä kopion alue napsauttamalla ja vetämällä. Kirjoita uudestaan ​​toistamiseen paikkamerkkiteksti ja säädä sen muotoiluominaisuuksia.

18. Luo tauluja muille ryhmän jäsenille

Kopioi tietosivusi, jotta jokaiselle ryhmän jäsenelle on yksi

Kopioi tietosivusi, jotta jokaiselle ryhmän jäsenelle on yksi

Tehdään nyt uusia tauluja muille tiimin jäsenille. Avaa ensin pääkuvan lukitus ( cmd + L ), valitse sitten Artboard 2: n otsikko ja napsauta cmd + C kopioida se. Loitontaa ( cmd + - tai käytä zoomausta ohjauslevyllä) ja paina sitten cmd + V liittää kolme uutta taulua. Lisää biog-tietoja jokaiselle sivulle. Päivitä nimet ja headshot-kuvat ja järjestä piirtoalustat kankaalle. Viileä! Suunnittelumme on toistaiseksi valmis.

19. Aseta virtaus

On aika alkaa määritellä sovelluksen virtaus. Prototyyppi voi olla tuhannen kokouksen arvoinen, joten luomme yhden viestimään suunnittelutarkoituksestamme. Siirry yksinkertaisesti prototyyppitilaan (vasemmassa yläkulmassa), valitse kohde, jota käyttäjä napauttaa (pidä painettuna cmd suora valinta) ja vedä johdin oikealle taululle. Kun hiiri vapautetaan, voimme asettaa segmentin, keventämisen ja keston. Yksinkertainen.

20. Yhdistä

Kytke kukin luettelosi kohde sen tietosivulle

Kytke kukin luettelosi kohde sen tietosivulle

Mennään vaikka jokin Artboard 1 -listallamme olevista kohteista ja johdotetaan ne omalle tietosivulleen. Jokaiselle näistä haluamme asettaa segmentin liukumaan vasemmalle ja lieventämisen helpottamaan. Seuraavaksi voimme kytkeä jokaisen tietosivun takanuolet takaisin Artboard 1: een - muista asettaa segmentti Slide Right tällä kertaa. Boom - prototyyppimme on valmis.

21. Testaa prototyyppi

Suunnitteluusi tehdyt muutokset näkyvät välittömästi esikatselussa

Suunnitteluusi tehdyt muutokset näkyvät välittömästi esikatselussa

Testaa prototyyppi napsauttamalla Toista-painiketta oikeassa yläkulmassa (Esikatselu). Sinun ei tarvitse sulkea Esikatselu-ikkunaa päivittääksesi mallisi tai johdot. Aloita vain tekemällä muutoksia, ja ne näkyvät automaattisesti esikatseluikkunassa.

22. Tee video

Prototyyppiä testattaessa on helppo tallentaa video vuorovaikutuksestasi. Kun Esikatselu-ikkuna on auki, napsauta Tallenna-painiketta aloittaaksesi ja lopettaaksesi tallennuksen. Tallenna .mov-tiedosto ja jaa se sidosryhmiesi kanssa.

23. Jaa työsi

Jaa prototyyppejä verkossa

Jaa prototyyppejä verkossa

Voit jakaa prototyypit verkossa napsauttamalla oikeassa yläkulmassa olevaa viimeistä painiketta (Jaa verkossa). Napsauta Luo linkki -painiketta. Kaikki resurssit ladataan Creative Cloudiin ja luodaan linkki. Jos muutoksia tarvitaan, voit palata suunnittelutilaan, tehdä muutokset ja jakaa uudelleen. Koko virtaus vain toimii.

24. Vie tiedostot

Voit viedä malleja PNG-tiedostoina Webille, iOS: lle ja Androidille erikokoisina tai SVG: nä

Voit viedä malleja PNG-tiedostoina Webille, iOS: lle ja Androidille erikokoisina tai SVG: nä

XD: stä voit viedä PNG-tiedostoja Webille, iOS: lle ja Androidille erikokoisina sekä erittäin optimoituja SVG-tiedostoja.

miten tehdä mekaaninen lyijykynä

25. Nauti tuloksista

Onnittelut! Olet oppinut Adobe Experience Design CC: n (esikatselu) perusteet. Voit vapaasti jakaa prototyyppejäsi verkossa ja sosiaalisessa mediassa - lisää #adobexd jotta voimme nähdä työsi.

Tämä artikkeli ilmestyi alun perin nettilehti numero 280. Tilaa net täältä .

Aiheeseen liittyvät artikkelit