Jak prototype mobilní aplikace s Adobe XD

Sep 12, 2025

jak

Tento návod, který ukazuje, jak vytvořit mobilní aplikaci Prototyp v Adobe XD, byl sestaven dohromady Adobe XD CC (2017 beta) v roce 2016. The. Nově spuštěné Adobe XD CC Má několik vylepšení, což je ještě snadnější použití.

Získejte zde 15% slevu na Adobe Creative Cloud

Pokud jste projektant, který vytváří zkušenosti uživatelů pro mobilní aplikace nebo webové stránky, můžete být použity k použití více nástrojů pro různé úkoly, kdy prototyping. .

Začnete s výzkumem. Pak si načrtnete nápady na pero a papír a později přenášejí myšlenky na designový nástroj. Chcete-li přijít s nejlepším tokem, exportujete všechny své aktivy a přiveďte je do jiného nástroje, abyste vybudovali prototyp. Odtud sdílíte nebo otestujete svůj prototyp, shromáždíte zpětnou vazbu a vraťte se do středu cyklu iterovat, přepínání z nástroje na nástroj, jakmile vylepšujete svůj design.

Několik konstrukčních nástrojů každý řeší jinou část problému. Namísto toho, aby váš život byl snadnější, přepínání mezi všemi těmito nástroji snižuje vaše tempo.

Co kdyby byl jediný nástroj, který by to znamenalo, můžete si vychutnat plně připojený pracovní postup? Kde byste mohli navrhnout a prototyp své zkušenosti během několika minut, sdílejte je na webu, abyste zachytili zpětnou vazbu, a pak se upravují úpravy bez porušení strese? Cíl s Adobe Experience Design CC - nebo, jak to nazýváme, Adobe XD - měl dělat to jen to.

V tomto tutoriálu vám ukážeme hlavní oblasti Adobe XD navrhováním, prototypováním a sdílením jednoduchého "setkání týmu" mobilní aplikace.

Vytvoříme stránku obsahu seznamu členů produktového týmu, pak uživatelé budou moci kliknout na jednotlivé položky, které mají být přijaty do hloubkové stránky biogu. Dozvíte se, jak vytvářet konstrukce s vysokou věrností, prototypem a sdílet je tak, aby shromažďovali zpětnou vazbu.

Podívejte se na video výše a postupujte podle písemných kroků, abyste se naučili, jak prototype s Adobe XD. Nejen, že vám ukážeme, jak to udělat, také ukážeme, jak to otestovat, zaznamenat náhled videa v akci a jak jej sdílet a exportovat.

Všimněte si, že některé procesy se mírně změnily v novější verzi aplikace Adobe XD.

01. Nainstalujte Adobe XD a spusťte nový design

Start your design by selecting the iPhone artboard from your template options — Spusťte svůj design výběrem iPhone Artboard z možností šablony

Za prvé, ujistěte se, že Adobe XD je nainstalován v počítači . Spusťte ho, podívejte se na uvítací obrazovku a začněte nový design s šablonou iPhone Artboard.

02. Vytvořte druhý kresliček

Použijte nástroj ARTBONGE ( A ) Chcete-li vytvořit druhý kreslicí, pak změnit své tituly (dvojitým kliknutím na ně) na 'iPhone - Team Stránka' a 'iPhone - detail Page'. Změnit barvy pozadí kresby na černou pomocí inspektora vlastností na pravé straně. S nástrojem Vybrat (vyberte PROTI ) Vybrané, můžete kdykoliv stisknout mezerník, abyste mohli vkládat přes návrh.

03. Download Tutorial Assets

Dala jsem sestavu složky aktiv, kterou budu používat v tomto tutoriálu. Můžete si je stáhnout tady . Z hlediska přetáhněte 'iPhone-Status-BAR.SVG' na vrchol Artboard 1 ( X: 8, Y: 5 ). Pak jej zkopírujte a vložte do ARTBOARD 2, takže oba kresby mají stavový řádek nahoře. Udeřil CMD + L. Chcete-li tyto stavové lišty uzamknout v obou řazení, takže jejich vlastnosti nelze upravit. Chcete-li je odemknout, můžete znovu použít zástupce znovu nebo klepněte na ikonu 'Lock'.

04. Nakreslete obdélník a nastavte rozměry

Zaměřme se na Artboard 1 (týmová stránka). Pomocí nástroje Obdélník ( R. ), Nakreslete růžový obdélník (# FF2BC2 bez ohraničení) v ARTBOARD 1 a nastavte rozměry na 375 x 230 pomocí panelu Inspektor vlastnosti vpravo.

05. Změnit objekty

Chcete-li ohraničení nebo vyplnit a vypnout, klepněte na ikonu "Eye" vpravo. Udeřil Shift + CMD + [ poslat to celou cestu dozadu, nebo jít do Objekt & gt; Uspořádat a gt; Odeslat nazpátek . Chcete-li změnit barvy pomocí hexadecimálních hodnot, klikněte na ikonu barev a když se objeví nativní picker barev, vyberte druhou kartu nahoře a změňte rozevírací síti na 'RGB posuvníky'.

06. Vytvořte záhlaví

Pomocí textového nástroje ( T. ), Klepnutím vytvořte záhlaví pro stránku týmu. Důl je Helvetica Bold, 20, #ffffff, X: 18, y: 123. Začněme dát dohromady náš seznam členů týmu. Nakreslete šedou čtverec, kde se fotografie členů týmu sedí (100 x 100, x: 8, y: 238, # d0D0D0 bez hranic).

07. Přidejte další obdélník

Vpravo na to potřebujeme bílou obdélník (260 x 100, x: 108, y: 238, #ffffff bez hranic), na kterém budeme zahrnout jméno člena týmu jako záhlaví a název práce jako podskupina. Prozatím používejte zástupný text a ve stylu to, jak si přejete.

08. Přidat ikonu šipky

Chcete-li zobrazit tento box, bude tappable oblast, budeme zahrnovat ikonu šipky. Přetáhněte 'path.svg' od vyhledávače na canvas XD do bodu mimo kreslicí. Pak ji přemístit do X: 330, Y: 279.

09. Umístěte headshot

Z hlediska přetáhněte headshot na místo na šedém náměstí.

10. Vytvořte seznam

Use the powerful Repeat Grid feature to create your list of team members — Pro vytvoření seznamu členů týmu použijte výkonnou funkci REPEAT REPEIT Grid

Nyní můžeme vytvořit náš seznam. V tomto okamžiku byste normálně kopírovali a vložili horní položku, přesunutí kopírované verze dolů a nastavení okraje. Uděláte to samé pro nové položky, a kdybyste chtěli změnit okraje, musíte to udělat ručně, jeden po druhém.

No, ne s Adobe XD - můžete použít funkci Repeat Grid. Vyberte položky, které chcete opakovat, klikněte na tlačítko 'Repeat Grid' na inspektor vlastnosti vpravo ( CMD + R. ) A použít zelené rukojeti opakovat položky vertikálně. Můžete je také opakovat horizontálně pro tabletovou verzi.

11. Upravte marži

Upravte okraj opakované mřížky se vznášíte na okraji vašich položek, klepnutím a přetažením. Pojďme nastavit okraj na 7. Přetáhněte opakovanou mřížku na spodní stranu kresby. Máme nyní čtyři řádky hrát.

12. Upravte textová pole

Drag all the headshots onto the grid — Přetáhněte všechny headshots na mřížku

Zatímco vlastnosti (barvy, X a Y pozice, a tak dále) jsou globální, každý obsah položky může být jedinečný. Upravte textová pole do jména každého jednotlivce a úloh. Poklepejte na položku pro zadání mřížky a skupiny nebo Cmd + Click. Přímo-vyberte libovolný prvek uvnitř skupiny nebo opakované mřížky. Nyní prostě potřebujeme chytit všechny headshots najednou a přetáhnout je na mřížku a jsme s touto obrazovkou dokončili.

13. Vytvořte ztmavený efekt

Pojďme přeskočit na ARTBOARD 2 (podrobná stránka). Znovu začneme se zástupným symbolovým obdélníkem (375 x 444, X: 0, y: 0, #ffffff bez hranic) a přetáhněte headshot k vyplnění. Vytvoříme ztmavený efekt změnou opacity obrazu na 60% a odesíláte jej dozadu ( Shift + CMD + [ ).

14. Přidejte další šipku

Poté zamkněte položku headshot ( CMD + L. ) A přidejte další šipku ("back-arrow.svg") pro označení uživatele se může vrátit do seznamu týmu. To je třeba sedět u X: 20, Y: 40. Je důležité, aby se obraz nejprve zamkl, protože jinak nahradí SVG headshot.

15. Přidat kontaktní informační bar

Chceme zahrnout růžový bar na každé stránce, která uvádí kontaktní údaje člena týmu (375 x 45, X: 0, Y: 400). Použijte textový nástroj ( T. ) Chcete-li vytvořit textový prvek, který přečtete odkaz "Zástupný zástupný odkaz", uprostřed to, styl IT a umístit jej na X: 169, Y: 416.

16. Vytvořte více instancí textového prvku

Použijte nástroj Repeat Grid, abyste vytvořili další dva instance tohoto textového prvku. Nejprve převést text na opakovanou mřížku ( CMD + R. ), Poté podržte klávesu volby a zároveň rozšiřte svou mřížku vodorovně. Krásný, že? Direct-Vyberte text ( Cmd + Click. ) A změňte obsah, abyste mohli přečíst "E-mail", "Twitter" a "LinkedIn".

17. Vytvořit jméno a bio box

Chcete-li dokončit design, vytvořte bílou políčko (360 x 214, x: 8, y: 445), které bude obsahovat jméno a biog člena týmu. Nejprve přidejte textový prvek pomocí názvu zástupného symbolů ". Pro textový prvek, který drží biog, chceme používat textový text. Chcete-li to provést, vyberte textový nástroj ( T. ) A klikněte a přetažením definovat oblast pro kopii. Znovu zadejte nějaký zástupný text pro nyní a upravte vlastnosti Styling.

18. Vytvořte kresby pro jiné členy týmu

Duplicate your detail page so there is one for each team member — Duplikovat svou detailovou stránku, takže pro každý člen týmu je jeden

Nyní pojďme udělat nové kresby pro jiné členy týmu. První odemknutí hlavního obrazu ( CMD + L. ), pak klikněte na název aplikace Artboard 2, vyberte jej a stiskněte CMD + C. zkopírovat. Oddálit ( CMD + - nebo použít trackpad k pinch-to-zoom), pak hit CMD + V. Vložit tři nové kresby. Do každé stránky přidejte některé informace o biotu. Aktualizujte názvy a obrázky headshot a uspořádejte kresby na plátně. Chladný! Náš design je nyní dokončen.

19. Nastavte průtok

Je čas začít definovat tok aplikací. Prototyp může mít hodnotu tisíce setkání, takže vytvoříme jeden sdělit náš návrhový záměr. Jednoduše přejděte na režim prototypu (vlevo dole), vyberte položku, která bude uživatelem poklepána (HOLD cmd. a přetáhněte drát na pravé kreslicí. Když je myš uvolněna, můžeme nastavit segue, uvolnění a trvání. Jednoduchý.

20. Připojte se nahoru.

Wire each item on your list to its respective detail page — Drát každou položku ve vašem seznamu do příslušné stránky podrobností

Pojďme jdeme i když každý z položek na našem seznamu na adrese ARTBOARD 1 a připojit je k jejich příslušnému detailu. Pro každého z nich chceme nastavit segue k posunutí doleva a uvolnění uvolnění. Dále můžeme připojit zadní šipky na každém z úderových stránek zpět do ARTBOARD 1 - Nezapomeňte nastavit segue pro tuto dobu prezentaci. Boom - náš prototyp je připraven.

21. Otestujte prototyp

Any changes to your design will be reflected immediately in the preview — Jakékoliv změny vašeho návrhu budou okamžitě odrážet v náhledu

Chcete-li otestovat prototyp, klikněte na tlačítko Přehrát vpravo (náhled). Pro aktualizaci návrhu nebo vodičů nemusíte zavřít okno náhledu. Stačí začít provádět změny a budou se automaticky zohledněny v okně náhledu.

22. Udělejte video

Je snadné nahrávat video z vašich interakcí při testování prototypu. S otevřeným oknem náhledu klepněte na tlačítko Record pro spuštění a zastavení záznamu. Uložte soubor ".mov" a sdílejte se svými zainteresovanými stranami.

23. Sdílejte svou práci

Share prototypes on the web — Sdílejte prototypy na webu

Chcete-li sdílet prototypy na webu, klikněte na poslední tlačítko vpravo (Sdílet online). Klikněte na tlačítko Vytvořit odkaz. Všechna aktiva budou nahrána do kreativního cloudu a bude vytvořen odkaz. Pokud jsou nutné změny, můžete se vrátit do režimu návrhu, provést změny a sdílet znovu. Celý tok funguje jen.

24. Exportovat soubory

You can export designs as PNGs for Web, iOS and Android at different sizes, or SVGs — Můžete exportovat návrhy jako PNGS pro web, iOS a Android v různých velikostech, nebo SVGS

Z XD můžete exportovat PNGS pro web, iOS a Android v různých velikostech, stejně jako vysoce optimalizované soubory SVG.

25. Užijte si výsledky

Gratulujeme! Zvládli jste základy Adobe Experience Design CC (náhled). Neváhejte sdílet své prototypy na webových a sociálních médiích - přidat #adobexd. Takže můžeme vidět vaši práci.

Tento článek se původně objevil Čistý časopis Vydání 280. Přihlásit se k odběru netto .

Související články

Jak se vyhnout prototypování nástrah
Jak používat animaci v mobilních aplikacích
10 tipů pro lepší mobilní UX design