Miten prototyyppi mobiilisovellus Adobe XD: llä

Feb 2, 2026

Miten tehdään

Tämä opetusohjelma, jossa voit tehdä mobiilisovelluksen prototyypin Adobe XD: ssä, koottiin yhteen Adobe XD CC (2017 beta) Vuonna 2016. Äskettäin käynnistetty Adobe XD CC On ollut muutamia tweaks, mikä helpottaa sitä vielä helpompaa.

Hanki 15% alennus Adobe Creative Cloudista täällä

Jos olet suunnittelija, joka luo käyttäjäkokemuksia mobiilisovelluksille tai verkkosivustoille, voit käyttää useita työkaluja eri tehtäville, kun prototyyppi .

Aloitat tutkimusta. Sitten piirrät ideoita kynällä ja paperilla ja siirrät myöhemmin ajatuksesi suunnittelutyökaluun. Jotta saat parhaan virtauksen, vietät kaikki omaisuutesi ja tuovat ne toiseen työkaluun prototyypin rakentamiseksi. Sieltä jakaa tai testata prototyyppisi, kerätä palautetta ja palaa syklin keskelle iteroimaan, siirtymällä työkalusta työkaluun, kun tarkentat suunnittelua.

Useat suunnittelutyökalut puuttuvat eri osaan ongelmasta. Mutta sen sijaan, että teet elämäsi suunnittelijana helpommin, vaihtaminen kaikkien näiden työkalujen välillä vähenee vain tahtiasi.

Mitä jos olisi yksi työkalu, jonka tarkoitus, voit nauttia täysin liitetystä työnkulusta? Mistä voit suunnitella ja prototyyppi kokemuksista muutamassa minuutissa, jakaa ne verkossa kaapata palautetta ja tee muokkaukset helposti rikkomatta askeleesi? Tavoitteena Adobe Experience Design CC - tai, kuten me kutsumme, Adobe XD - oli tehdä juuri niin.

Tässä opetusohjelmassa näytämme sinulle Adobe XD: n tärkeimmät alueet suunnittelemalla, prototyyppällä ja jakamalla yksinkertainen "Tapaa Team" Mobile App.

Luomme sisällön sivun, jossa luetellaan tuotteen tiimin jäsenet, käyttäjät voivat napsauttaa yksittäisiä merkintöjä, jotka on otettava perusteellisempaan Biog-sivulle. Opit luomaan korkealaatuisia malleja, prototyyppi ja jakaa ne keräämään palautetta.

Katso videota yllä ja noudata alla olevia kirjallisia ohjeita, kun haluat oppia prototyypin Adobe XD: n kanssa. Ei vain näytämme sinulle, kuinka voit tehdä sen, näytämme myös, miten testata sen, tallentaa esikatselu videota toiminnassa ja miten jakaa ja viedä se.

Huomaa, että jotkin prosessit saattavat olla muuttuneet hieman Adobe XD: n uudemmassa versiossa.

01. Asenna Adobe XD ja aloita uusi muotoilu

Start your design by selecting the iPhone artboard from your template options — Aloita muotoilu valitsemalla iPhone-artboard mallilta

Ensinnäkin varmista, että Adobe XD on Asennettu tietokoneeseen . Käynnistä se, katsokaa tervetuliaisnäyttöä ja aloita uusi muotoilu iPhonen artboard-mallilla.

02. Luo toinen artboard

Käytä Artboard-työkalua ( A ) Toisen artikkelin luominen ja sitten muuttavat nimikkeitä (kaksoisnapsauttamalla niitä) "iPhone - tiimisivulle" ja "iPhone - yksityiskohtaisivulle". Muuta sekä artboards 'taustavärejä mustalle käyttämällä oikealla olevaa kiinteistön tarkastajaa. Valitse työkalu ( V ) Valittu, voit painaa välilyöntiä milloin tahansa suunnitellaksesi.

03. Lataa opetusominaisuudet

Olen koonnut omaisuuden kansion, jota käytän koko opetusohjelmassa. Voit ladata ne tässä . Finderista, vedä "iPhone-status-bar.Svg" Artin 1 yläosaan ( X: 8, Y: 5 ). Kopioi sitten ja liitä se artboardiin 2, joten sekä artboardilla on yläosan tilapalkki. Osuma cmd + l Voit lukita nämä tilapalkit molemmissa taideteollisuudessa, joten niiden ominaisuuksia ei voi muuttaa. Voit avata niiden lukituksen avulla pikakuvaketta uudelleen tai napsauttaa Lukitse-kuvaketta.

04. Piirrä suorakulmio ja aseta mitat

Keskitymme Artboard 1: n (tiimi-sivu). Suorakulmion työkalun käyttäminen ( R ), piirrä vaaleanpunainen suorakulmio (# FF2BC2, jolla ei ole reunaa) Artboard 1: ssä ja aseta sen mitat 375 x 230: een oikealla olevan kiinteistön tarkastajapaneelin avulla.

05. Järjestä esineitä uudelleen

Jos haluat kääntää reunuksen tai täytä päälle ja pois, napsauta oikealla olevaa silmäkuvaketta. Osuma Shift + CMD + [ lähettää se aina takaisin taakse tai mene Object & gt; Järjestä & gt; Lähetä takaisin . Jos haluat vaihtaa värejä heksadesimaalisilla arvoilla, napsauta värikuvaketta ja kun natiivi värinpoisto avautuu, valitse toinen välilehti ylhäältä ja vaihda pudotusvalikosta RGB-liukusäätimeen.

06. Luo otsikko

Tekstityökalun käyttäminen ( T ), Luo otsikko tiimisivullesi. Kaivos on Helvetica Bold, 20, #FFFFFF, X: 18, Y: 123. Aloitetaanko yhdessä tiimin jäsenten luettelo. Piirrä harmaa neliö, jossa joukkueen jäsenen kuva istuu (100 x 100, x: 8, y: 238, # d0d0d0 ilman rajaa).

07. Lisää toinen suorakulmio

Tällöin tarvitsemme valkoisen suorakulmion (260 x 100, X: 108, Y: 238, #FFFFF, jolla ei ole rajaa), johon sisällytetään tiimin jäsenen nimi otsikossa ja työnimike alapäässä. Nyt käytä paikkamerkin tekstiä ja tyyli sitä haluamallasi tavalla.

08. Lisää nuolikuvake

Jos haluat näyttää tämän ruutuun, on kattava alue, sisällytämme nuolikuvan. Vedä 'Path.svg' Finderista XD-kankaalle pisteeseen altispöytä. Sitten siirrä se X: 330, Y: 279.

09. Aseta headshot

Finderista vedä headshot paikalleen harmaalla neliöllä.

10. Luo luettelo

Use the powerful Repeat Grid feature to create your list of team members — Luo tehokas Repeat Grid -ominaisuus luodaksesi tiimin jäsenten luettelon

Nyt voimme luoda luettelon. Tässä vaiheessa voit tavallisesti kopioida ja liittää yläosan, siirtämällä kopioidun version alas ja säätämällä marginaalia. Te tekisit samoin uusille tuotteille, ja jos halusit vaihtaa marginaaleja, sinun pitäisi tehdä se manuaalisesti, yksi kerrallaan.

No, ei Adobe XD: n kanssa - voit käyttää Repeat Grid -ominaisuutta. Valitse haluamasi kohteet, napsauta oikealla olevaa REPEAT GRID '-painiketta oikealla ( cmd + r ) Ja käytä vihreitä kahvoja toistaaksesi kohteet pystysuoraan. Voit myös toistaa ne vaakasuoraan tablet-versioon.

11. Säädä marginaali

Säädä toistuvan verkkosi marginaali leijuu kohteiden reunalla, napsauttamalla ja vetämällä. Aseta marginaali 7. Vedä toistoverkko alartaan alareunaan. Meillä on nyt neljä riviä pelata.

12. Muokkaa tekstikenttiä

Drag all the headshots onto the grid — Vedä kaikki headshotit verkkoon

Vaikka ominaisuudet (värit, x ja y-asemat ja niin edelleen) ovat maailmanlaajuisia, kunkin kohteen sisältö voi olla ainutlaatuinen. Muokkaa tekstikenttiä jokaisen henkilön nimeen ja työnimikkeeseen. Voit syöttää verkkoon ja ryhmään kaksoisnapsauttamalla CMD + Klikkaa Voit ohjata kaikki elementit ryhmään tai toistuvaan verkkoon. Nyt meidän on vain tarttuttava kaikkiin headshotit kerralla ja vedä ne verkkoon ja olemme valmiit tällä näytöllä.

13. Luo pimeä vaikutus

Hyppää tallennus 2 (yksityiskohta). Jälleen, aloitamme paikkamerkin suorakulmion (375 x 444, X: 0, Y: 0, #ffffff ilman reunaa) ja vedä headshot täyttää se. Luomme pimeän vaikutuksen muuttamalla kuvan läpikuultavuutta 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), jotta käyttäjä voi palata tiimi-luetteloon. Tämä on istuttava X: 20, Y: 40. On tärkeää lukita kuva ensin, koska muuten SVG korvaa päähine.

15. Lisää yhteystiedot

Haluamme lisätä vaaleanpunaisen palkin jokaiselle sivulle, joka luetsee tiimin jäsenen yhteystiedot (375 x 45, X: 0, Y: 400). Käytä tekstityökalua ( T ) Jos haluat luoda tekstielementin lukemisen "paikkamerkin linkin", keskitä se, tyyli se ja aseta se X: 169, Y: 416.

16. Luo lisää tekstin elementin tapauksia

Käytetään REPEAT GRID -työkalulla, jotta voit luoda tämän tekstin elementin kaksi muuta tapausta. Ensin muuntaa teksti toistuvaan verkkoon ( cmd + r ) Ja pidä sitten optio-näppäintä samalla, kun laajenna verkkoasi vaakasuoraan. Kaunis, eikö olekin? Suora-valitse teksti ( CMD + Klikkaa ) Ja muuta sisältöä lukemaan "sähköposti", "Twitter" ja "LinkedIn".

17. Luo nimi ja bio-laatikko

Suunnittelun lopettaminen luodaan valkoinen laatikko (360 x 214, X: 8, Y: 445), johon sisältyy tiimin jäsenen nimi ja Biog. Lisää ensin tekstielementti käyttämällä paikan päällä olevaa henkilön nimi ". Biog: n tekstielementtiin haluamme käyttää alueen tekstiä. Voit tehdä tämän valitsemalla Tekstityökalu ( T ) Ja napsauta ja vedä määrittääksesi kopion alue. Kirjoita uudelleen paikkamerkin teksti nyt ja säädä sen muotoiluominaisuuksia.

18. Luo mukaan muita tiimin jäseniä

Duplicate your detail page so there is one for each team member — Duplicate yksityiskohtaisivusi niin jokaiselle joukkueen jäsenelle on yksi

Nyt tehdään uusia taulukkoja muille tiimin jäsenille. Avaa ensilevy pääkuva ( cmd + l ) Ja valitse sitten Artboard 2: n otsikko ja paina CMD + C Kopioi se. Loitontaa ( CMD + - - Tai käytä ohjauslevyä pinch-to-zoom), paina sitten CMD + V liittää kolme uutta taidetta. Lisää jokaista BIOG-tietoja jokaiselle sivulle. Päivitä nimet ja headshot-kuvat ja järjestä karboardit kankaalle. Viileä! Suunnittelumme on viimeistelty nyt.

19. Aseta virtaus

On aika alkaa määritellä sovelluksen virtaus. Prototyyppi voi olla tuhannen kokouksen arvoinen, joten luomme yhden kommunikoida suunnittelumme. Yksinkertaisesti hypätä Prototype-tilaan (ylhäältä vasemmalle), valitse käyttäjä, jota käyttäjä (HOLD cmd Direct-Select) ja vedä johto oikeaan artboardiin. Kun hiiri vapautetaan, voimme asettaa segmentin, helpottavan ja keston. Yksinkertainen.

20. Yhdistä

Wire each item on your list to its respective detail page — Jokaisen luettelossasi jokainen kohde vastaavan yksityiskohdan sivulle

Mennään kukin artboardin 1 luettelosta ja lankaa ne vastaaviin yksityiskohtiin. Jokaiselle näistä haluamme asettaa segistuksen liukumaan vasemmalle ja helpottaa helpottaa. Seuraavaksi voimme lantaa takaisin nuolet jokaiseen yksityiskohtiin Takaisin Artboard 1 - Muista asettaa segmentti liukumaan juuri tällä kertaa. Boom - Prototyyppi on valmis.

21. Testaa prototyyppi

Any changes to your design will be reflected immediately in the preview — Kaikki muutokset suunnittelusi heijastuvat välittömästi esikatselussa

Voit testata prototyypin napsauttamalla oikean yläosan toistopainiketta (esikatselu). Sinun ei tarvitse sulkea esikatseluikkunaa päivittää suunnittelusi tai johdot. Aloita vain muutokset, ja ne näkyvät automaattisesti esikatseluikkunassa.

22. Tee video

On helppo tallentaa videosi vuorovaikutuksista, kun testataan prototyyppi. Kun esikatselu-ikkuna auki, aloita ja lopeta tallennus painamalla Record-painiketta. Tallenna ".mov" -tiedosto ja jaa sidosryhmien kanssa.

23. Jaa työsi

Share prototypes on the web — Jaa prototyyppejä verkossa

Voit jakaa prototyyppejä verkossa napsauttamalla viimeistä painiketta oikeassa yläkulmassa (Share Online). Napsauta Luo LINK-painiketta. Kaikki varat ladataan luovaan pilviin ja linkki luodaan. Jos muutokset ovat tarpeen, voit palata suunnittelutilaan, tehdä muutokset ja jakaa uudelleen. Koko virtaus toimii vain.

24. Vientitiedostot

You can export designs as PNGs for Web, iOS and Android at different sizes, or SVGs — Voit viedä malleja PNG: iin Web, IOS ja Android eri kokoisia tai SVGS

XD: stä voit viedä PNG: itä Web, iOS ja Androidille eri kokoille sekä erittäin optimoituja SVG-tiedostoja.

25. Nauti tuloksista

Onnittelut! Olet oppinut Adobe Experience Design CC (esikatselu) perusteet. Voit myös jakaa prototyyppisi verkossa ja sosiaalisen median - Lisää #Adobexd Joten voimme nähdä työnne.

Tämä artikkeli oli alun perin ilmestynyt Net-aikakauslehti Julkaisu 280. Tilaa verkko tähän .

Aiheeseen liittyvät artikkelit

Miten välttää prototyyping-kisat
Kuinka käyttää animaatiota mobiilisovelluksissa
10 vinkkejä parempaan liikkuviin UX-muotoisiin