Hogyan prototípi egy mobilalkalmazást az Adobe XD-vel

Ez a bemutató, amely bemutatja, hogyan készítsen egy mobilalkalmazás prototípust az Adobe XD-ben, összeállították Adobe XD CC (2017 Beta) 2016-ban Újonnan indította az Adobe XD CC-t Van néhány csípése, így könnyebben használható.

• Szerezzen egy 15% -os kedvezményt az Adobe Creative Cloud-on

Ha Ön egy tervező, amely felhasználói tapasztalatokat hoz létre a mobilalkalmazásokhoz vagy weboldalakhoz, akkor több eszközt használhat különböző feladatokhoz, amikor prototípusozás .

Kutatással kezdesz. Ezután vázolja az ötleteket a tollal és a papírra, és később átadja a gondolataidat egy tervezési eszközre. Ahhoz, hogy jöjjön létre a legjobb áramlást, exportálja az összes eszközt, és hozza őket egy másik eszközbe egy prototípus létrehozásához. Innen megosztja vagy teszteli a prototípusát, összegyűjti a visszajelzést, és térjen vissza a ciklus közepére, hogy iteráljon, átkapcsolva az eszközt, hogy finomítsa a designját.

Számos tervezési eszköz mindegyike a probléma másik részét kezelik. De ahelyett, hogy könnyebbé válna az életed, mint egy tervező, az összes eszköz közötti váltás csak csökkenti a tempót.

Mi van, ha egyetlen eszköz lenne, amely azt jelentette, hogy élvezheti a teljesen összekapcsolt munkafolyamatot? Ahol perceken belül megtervezheted és prototikusan megtervezheted és prototikusan megoszthatják őket az interneten, hogy visszajelzést kapjanak, majd könnyen szerkeszthetők a lépések megszakításához? A cél az Adobe Experience Design CC - Vagy nevezzük, az Adobe XD - az volt, hogy ezt tegye.

Ebben a bemutatóban megmutatjuk Önnek az Adobe XD fő területeit, tervezve, prototípusozással és megosztással egy egyszerű "megfelel a csapat" mobilalkalmazással.

A termékcsalád tagjai listáját tartalmazó tartalomoldalt hozunk létre, majd a felhasználók képesek lesznek kattintani az egyéni bejegyzésekre, amelyeket egy mélyebb bioger oldalra kell venni. Meg fogja tanulni, hogyan hozhat létre nagy hűségű formatervezést, prototípust, és megoszthatja őket, hogy visszajelzést kapjon.

Nézze meg a fenti videót, és kövesse az alábbi írásbeli lépéseket az Adobe XD prototípusának megismeréséhez. Nem csak megmutatjuk, hogyan lehet megmutatni, akkor is megmutatjuk, hogyan kell tesztelni, rögzíteni egy előnézeti videót az akcióban, és hogyan kell megosztani és exportálni.

Ne feledje, hogy egyes folyamatok kissé megváltoztak az Adobe XD újabb verziójában.

01. Telepítse az Adobe XD-t és indítsa el az új designt

Először is, biztosítsa az Adobe XD-t telepítve van a számítógépre . Indítsa el, nézze meg az üdvözlő képernyőt, és indítsa el az új designt egy iPhone Artoard sablonnal.

02. Hozzon létre egy második műveletet

Használja az Artboard eszközt ( A ) Második cikk létrehozása, majd változtassa meg címeiket (duplán kattintva) az "iPhone - Team Page" és az "iPhone - Részlet oldal" -ra. Változtassa meg mindkét művészeti háttérszínét a jobb oldali ingatlanfelügyelő segítségével. A SELECT TOOL ( V ) Kiválasztott, megnyomhatja a szóközt bármikor, hogy tegye át a tervezésedet.

03. Töltse le az oktatói eszközöket

Összeszerettem egy olyan eszközt, amelyet az egész bemutató során fogok használni. Letöltheti őket itt . A Finder-től húzza az "iPhone-Status-Bar.Svg" -t a Művészeti 1 tetejére ( X: 8, Y: 5 ). Ezután másoljon és illessze be a 2-es cikkbe, így mindkét képregények az állapotsoron vannak a tetején. Találat cmd + l Ezeknek az állapotsoroknak mindkét képtárban lezárása, így tulajdonságaik nem módosíthatók. Az őket feloldásához használhatja újra a parancsikont, vagy kattintson a "Lock" ikonra.

04. Rajzoljon egy téglalapot és állítsa be a méreteket

Fókuszáljunk az 1. cikkre (a csapatoldalra). A téglalap eszközzel ( R ), Felhívni a rózsaszín téglalap (# FF2BC2 nincs határ) rajztábla 1 és állítsa méretei 375 x 230 az ingatlan ellenőr a jobb oldali panelen.

05. Az objektumok átrendezése

A határ vagy kitöltés gombra kattintva kattintson a jobb oldalon lévő "Eye" ikonra. Találat Shift + cmd + [ küldje el egészen a hátra, vagy menjen Object & gt; Gondoskodik & gt; Küld vissza . Ha a hexadecimális értékek segítségével módosítani szeretné a színeket, kattintson a színes ikonra, és amikor megjelenik a Native Color Picker, válassza ki a tetején lévő második lapot, és módosítsa a legördülő "RGB csúszkákat".

06. Hozzon létre egy fejlécet

A szöveges eszköz használata ( T ), Kattintson ide a fejléc létrehozásához a csapat oldalához. Az enyém Helvetica Bold, 20, #FFFFFF, X: 18, Y: 123. Kezdjük összeállítani a csapat tagjai listáját. Rajzoljon egy szürke négyzetet, ahol a csapat tagja ül (100 x 100, X: 8, Y: 238, # d0d0d0 nincs határ nélkül).

07. Adjon hozzá egy másik téglalapot

Ehhez egy fehér téglalapra van szükségünk (260 x 100, X: 108, Y: 238, #FFFFFF nincs határon), amelyen a csapattag nevét fejlécként és munkakörként tartalmazzuk, mint alfejezetként. Most használja a helyőrző szöveget, és stílust, ahogy szeretné.

08. Adjon hozzá egy nyíl ikont

A doboz megjelenítéséhez egy csapos terület lesz, tartalmazunk egy nyíl ikont. Húzza a "Path.svg" -t a Finder-től az XD vászonra, hogy egy pontot a mértől. Ezután áthelyezése x: 330, Y: 279-re.

09. Helyezze a fejlövést

A Finder-től húzza a fejlutást a szürke téren.

10. Hozzon létre a listát

Most létrehozhatunk listát. Ezen a ponton általában a felső elem másolása és beillesztése lenne, a másolt verziót lefelé mozgatja és beállíthatja a margót. Ugyanezt tennéd az új elemeknél, és ha megváltoztatni szeretné a margókat, akkor manuálisan kellene csinálnod, egyenként.

Nos, nem az Adobe XD-vel - használhatja az ismétlődő rács funkciót. Válassza ki a megismételni kívánt elemeket, kattintson az "Repeat Grid" gombra a jobb oldali ingatlanfelügyelőn ( cmd + r ) és használja a zöld fogantyúkat, hogy az elemeket függőlegesen ismételje meg. Ön is megismételheti őket vízszintesen egy tabletta verzióra.

11. Állítsa be a margót

Állítsa be az ismételt rács margóját az elemek szélén, kattintson és húzza. Állítsa be a margót 7-re. Húzza az ismétlődő rácsot a műhely aljára. Most már négy sorunk van játszani.

12. Szerkessze a szövegmezőket

Míg a tulajdonságok (színek, x és y pozíciók és így tovább) globálisak, minden elem tartalma egyedi lehet. Szerkessze a szövegmezőket az egyes nevek és munkakör nyelvhez. Kattintson duplán a rács és a csoport beírásához, vagy cmd + kattintás a csoporton belül vagy ismételt rácson belüli bármely elemet. Most csak meg kell ragadnunk az összes fejlövést egyszerre, és húzzuk őket a rácsra, és befejeztük ezt a képernyőt.

13. Hozzon létre egy sötétített hatást

Ugorjunk a 2. cikkre (a részletes oldalra). Ismét elkezdünk egy helyőrző téglalappal (375 x 444, x: 0, y: 0, #FFFFFF nincs határ nélkül), és húzza a fejlutást, hogy kitöltse. Létrehozunk egy sötét hatást, ha a kép átlátszatlanságát 60 százalékra változtatjuk, és hátra küldi ( Shift + cmd + [ ).

14. Adjon hozzá egy másik nyílat

Ezután zárja le a headshot elemet ( cmd + l ) és adjunk hozzá egy másik nyíl ('back-arrow.svg'), hogy jelezze, hogy a felhasználó visszatérhet a csapatlistához. Ez az X: 20, Y: 40-en kell ülnie. Fontos, hogy először a képet rögzítsük, mert különben az SVG helyettesíti a fejlapot.

15. Adja meg az elérhetőségi adatokat

Szeretnénk egy rózsaszín sávot tartalmazni minden oldalon, amely felsorolja a csapat tag elérhetőségeit (375 x 45, x: 0, y: 400). Használja a szöveges eszközt ( T ), Hogy hozzon létre egy szöveges elemet olvasás „Placeholder kapcsolat”, középre, stílus fel, és helyezze x 169, y: 416.

16. Hozzon létre több példányt a szöveges elemnek

Használjuk az ismétlődő rács eszközt, hogy két további példányt hozzunk létre ennek a szöveges elemnek. Először konvertálja a szöveget egy ismétlődő rácshoz ( cmd + r ), majd tartsa lenyomva az opció gombot, miközben a rácsot vízszintesen bővíti. Gyönyörű, nem igaz? Közvetlen-Válassza ki a szöveget ( cmd + kattintás ) és változtassa meg a tartalmat az "e-mail", a "Twitter" és a 'LinkedIn' elolvasásához.

17. Hozzon létre nevet és bio dobozt

A design befejezéséhez hozzon létre egy fehér dobozt (360 x 214, X: 8, Y: 445), amely magában foglalja a csapattag nevét és biogját. Először adjon hozzá egy szöveges elemet a "személy neve" helyőrzőjével. A BIOG-t tartó szöveges elemhez a területszöveget szeretnénk használni. Ehhez válassza ki a szöveges eszközt ( T ), és kattintson és húzza, hogy meghatározza a másolat területét. Ismét írja be a helyőrző szövegét most, és állítsa be a stílus tulajdonságait.

18. Hozzon létre képeket más csapattagok számára

Most készítsünk néhány új képeket más csapattagok számára. Először kinyit a fő képet ( cmd + l ), majd kattintson az ArtBoard 2 címére, hogy kiválassza, és nyomja meg cmd + c másolni. Kicsinyítés ( cmd + - vagy használja a trackpadot a Pinch-to-zoomhoz, majd nyomja meg cmd + v három új műhely beillesztéséhez. Adjon hozzá néhány BIOG-információt az egyes oldalakhoz. Frissítse a neveket és a headshot képeket, és rendezze el a rajzokat a vászonra. Menő! A tervezésünk most befejeződött.

19. Állítsa be az áramlást

Itt az ideje, hogy elkezdje meghatározni az alkalmazás áramlását. A prototípus ezer találkozót érhet el, így létrehozzuk az egyiket, hogy kommunikáljunk a tervezési szándékunkat. Egyszerűen ugorj a prototípus módba (bal felső), válassza ki az elemet, amelyet a felhasználó megérinti (tartsa cmd közvetlen választáshoz), és húzza a vezetéket a jobb oldali képen. Amikor az egér felszabadul, beállíthatjuk a szegéket, enyhítjük és időtartamot. Egyszerű.

20. Csatlakozzon

Menjünk mindegyik elemünk listáján a műtárgyon 1, és vezesse őket a megfelelő részletre. Mindegyikhez szeretnénk beállítani a szegéket, hogy csúsztassa balra, és a könnyítés megkönnyítse. Ezután meg tudjuk vezetni a hátsó nyilakat mindegyik részletes oldalakon vissza az Artboard 1 - Ne feledje, hogy állítsa be a Segue-t, hogy jobbra csúsztassa. Boom - Prototípusunk készen áll.

21. Tesztelje a prototípust

A prototípus teszteléséhez kattintson a jobb felső sarokban (Előnézet) gombra. Nem kell bezárnia az előnézeti ablakot a tervezés vagy a vezetékek frissítéséhez. Csak kezdje meg a változtatásokat, és automatikusan tükröződik az előnézeti ablakban.

22. készítsen videót

Könnyen rögzíthető az interakciók videójának felvétele a prototípus tesztelése során. Az Előnézeti ablak megnyitásakor kattintson a Record gombra a felvétel elindításához és leállításához. Mentse el a ".mov" fájlt, és ossza meg az érdekelt felekkel.

23. Ossza meg munkáját

A prototípusok megosztása az interneten, kattintson az utolsó gombra a jobb felső sarokban (Ossza meg online). Kattintson a Link létrehozása gombra. Minden eszköz feltöltésre kerül a kreatív felhőre, és létrehozunk egy linket. Ha szükséges, akkor visszatérhet a tervezési módba, hogy a módosítások és a megosztás újra. Az egész áramlás csak működik.

24. Fájlok exportálása

Az XD-tól a PNGS-t webes, iOS-ra és Androidra exportálhatja különböző méretben, valamint nagyon optimalizált SVG fájlokat.

25. Élvezze az eredményeket

Gratulálunk! Ön elsajátította az Adobe Experience Design CC (előnézet) alapjait. Szabadon megoszthatja prototípusait az interneten és a közösségi médiában - Add #adobexd így láthatjuk a munkáját.

Ez a cikk eredetileg megjelent net magazin 280 kiadása. Iratkozzon fel itt Netre .

Kapcsolódó cikkek

• Hogyan lehet elkerülni a prototípusú buktatókat
• Hogyan kell használni animációt mobilalkalmazásokban
• 10 tipp a jobb mobil UX Designhoz