Adobe XD: Jak používat funkce Auto-Animate

Sep 13, 2025

jak

(Image Credit: Adobe)

I přes svůj pozdní vstup do prototyping hry je Adobe XD jedním z nejlepších a nejrychlejších nástrojů drátů a prototypů. Prototypování je klíčovým procesem v životním cyklu designu, ale také hraje důležitou roli ve vývoji tím, že pomáhá návrhářům a dev týmům s údržbou pracovního postupu.

Jako designéři, často potřebujeme mnoho nástrojů pro navrhování různých fází pracovního postupu uživatelských zkušeností. Společnost Adobe aktivně inovuje nástroj pro příčné platformě, který lze použít pro testování designu, vytváření drátových rámců, rozdávání specifikací do DEV týmu a také navrhování spolupráce (viz náš seznam Wireframe Tools. pro více možností).

Funkce Auto-Animate znamená, že Adobe XD může být také použit k vytvoření bezproblémových mikro-interakcí a animací, jako je například princip. To pomáhá návrhářům k řemeslným zážitkům bohatým prototypem, z palubních toků, animace pro mobilní kolotoče, ukazatele pokroku a další. Nejlepší část o této funkci je, že je to jednoduché učit se a vykonávat.

V tomto článku budu vysvětlovat, jak vytvářet jednoduché mikro animace pomocí funkce Auto-Animate. Budeme se dívat na interakce na bázi gesta a kohoutku.

Pokud ještě nemáte Adobe XD, viz našeho Stáhnout Adobe XD. post, a pak se podívejte na naše oblíbené Adobe XD plugins. .

01. Swipe gesta přidat do fav nebo smazání

Swipe Interactions jsou jedním z nejčastěji používaných mikro-interakcí na mobilních aplikacích. Z tohoto příkladu se podívejme na hudební seznam stop. Pro první artboard budeme vytvořit obrazovku playlistu s pěti písněmi v něm. Každá píseň je individuální karta a v podstatě, když každá karta je doleva doleva, měla by odebrat skladbu ze seznamu stop. Když je karta vpravo dole, měla by přidat píseň do fronty.

Začněme a vytvoříme první kartu. Můžete přidat základní podrobnosti, jako je název písně, jméno umělce, délka písně a hodnocení. Nyní sejměte všechny tyto prvky do jedné vrstvy. Duplikovat ji až do pěti z podobných karet. Můžete je upravit na základě chuti.

Pro první kartu - C1 - budeme přidat levý švih pro odstranění akce. Takže, pojďme vytvořit malé náměstí s červeným pozadím, přidat text odstranit text a ikonu, jak je znázorněno na snímku níže. Skupina všech těchto položek do vrstvy zvané A1. Nyní kombinujte C1 a A1 do vrstvy L - tak, že A1 je na pravé straně C1.

02. Vytvořte druhou kartu

Pro druhou kartu - C2 - budeme přidat přidat do fronty vpravo-swipe akce podobným způsobem. Vytvořte skupinu A2 s ikonou, textem a zeleným pozadím. Přidejte jej doleva ze skupiny C2 a vytvořte kombinovanou vrstvu s názvem L2. První Artboard (S1) je nyní kompletní. Pojďme duplikovat celou kreslicí dvakrát do dvou států - S2 a S3. Budeme používat S2 pro Delete Swipe a S3 pro přidání do fronty švihnutí. Abychom to udělali, musíme udělat nějaké změny pro každou z těchto kreseb. Zde jsou nastavení pro oba SWIPES:

● S1 - Změna opacity A1 a A2 na 0% a uspořádat L1, L2, takže jsou centrálně zarovnány.

● S2 - Uspořádat kartu L1, takže správný okraj L1 je zarovnán s ostatními kartami. Změnit krytí A2 až 0%.

● S3 - Uspořádejte kartu L2, takže levý okraj L2 je zarovnán s ostatními kartami. Změňte krytí A1 až 0%.

03. Animovat kresby

Nyní, když jsou kresby zcela nastaveny, dalším krokem je je oživit. Můžete to udělat tím, že přejdete do režimu prototypu na levé horní straně nástroje. Nyní na S1 ARTBOARGE klikněte na vrstvu L1 a přidejte interakci na pravé straně nástroje nastavením spouštěče pro přetažení, akci na Auto-animaci a cíl k ARTBOARGE S2. Můžete také přidat uvolnění na základě vašich preferencí. Testovat tuto interakci kliknutím na tlačítko Přehrát na pravé horní straně nástroje. Na adrese S1 klikněte na vrstvu L2 a přidejte podobnou interakci pomocí stejných nastavení, ale v tomto případě nastavte cíl na S3. Tato interakce vytvoří levý švih.

04. Rozbalte své karty

Druhá interakce, na které se budou dívat, je obyčejně vidět na většině aplikací a webových stránek, kde procházíte seznamem nebo katalogem produktů a když kliknete na jeden z těch, jste si vzali na novou stránku s více podrobějšími o produktu . Auto-animát dělá to super jednoduché oživit tento druh interakce. Začněte pro tento příklad vytvořením stránky katalogu produktu. Můžete si vybrat libovolný produkt, jako je například mobilní telefon (který bude náš náš příklad), oděvu atd. Pro první artboard (S1) vytvořte záhlaví bar s menu hamburger a ikonou profilu.

05. Práce na obrázcích a podrobnostech

Nyní vytvořte textový prvek záhlaví s počtem katalogových položek. Pro každou z produktových karet budou mít jeden obrázek, jméno telefonu, ceny a hodnocení. Můžeme zavolat tyto karty C1 až C6. Nejlepším způsobem, jak to provést, je vytvořit první kartu (C1) a poté použít úžasnou funkci XD s názvem Repeat Grid, který se nachází v pravém horním rohu panelu nástrojů. To vám umožní duplikovat položky s lehkostí, udržováním zarovnání a rozestupu neporušené. Nastavení této kresby je kompletní. Chystáme se oživit druhou kartu, takže je důležité rozšiřovat prvky této karty, takže XD může provádět auto-animát.

06. Navrhněte druhý kreslicí

Nyní se dostat do práce na druhé kreslice. Duplikovat první kreslicí a mazat karty C1, C3-C6. Pro sestavení této stránky použijeme existující kartu C2, takže názvy vrstev jsou stejné. Nejprve rozšiřte pozadí karty tak, aby pokrývá celou stránku pod barem záhlaví. Můžeme nyní uspořádat další položky jakýmkoliv způsobem, jakým chceme - základní myšlenka, že by se měl lišit od toho, jak byla karta v kreslicím S1, protože to je, když můžete vidět přechod. Z tohoto důvodu, pojďme narazit název mobilu na 25px a učinit to odvážný. Stejně tak zvýšit velikost ceny a umístit ji pod název mobilu. Dále je důležitou součástí - obraz mobilního telefonu. Musíte významně zvýšit jeho velikost a také zarovnat v centru.

07. Aplikujte dokončovací dotek

Uklidit všechno nahoru a dokončit design, uspořádat hodnocení a hvězdy pod vše a vlevo. Vzhledem k tomu, že tento kresle představuje podrobnou verzi produktu, můžete nyní zahrnout další informace o telefonu, jako je paměť, dostupné barvy telefonu, příslušenství uvedené s telefonem a tak dále, na základě vašich preferencí. Všechno ostatní bude následovat, jak budete posouvat kreslicí. Můžete také změnit ikonu záhlaví Hamburger, aby uživatel mohl vrátit zpět na předchozí Artboard S1. Nezapomeňte změnit název ikony, abyste odpovídali názvu ikony v první kreslicí.

08. Vytvořte mikro-interakci

Pojďme nyní do režimu prototypu vytvořit mikro-interakci. Chcete-li to provést, vyberte kartu C2 v kreslicích S1 a přetáhněte modrou šipku na kreslicí S2. V panelu Interakce na pravé straně nastavte spoušť jako kohoutek, akce jako auto-animát a cíl jako S2. Pro plynuující interakce je dobré jít s lehkostí pro uvolnění a čas 0,4 nebo 0,6 sekundy. Klikněte na ikonu Zadní šipka na ARTBOARGE S2 a přetáhněte šipku do S1. Pro to můžete použít stejná nastavení, aby byla konzistentní. Nyní klikněte na S1 a přehrejte prototyp, abyste viděli kouzlo. Budete pozorovat hladkou animaci, když je karta C2 poklepána. Upravte nastavení uvolnění, aby se animace hladší.

09. Jděte za základy

Nyní máte základní myšlenku, jak vytvořit jednoduché interakce. Můžete také zkusit Auto Animace změnou barev prvků, velikostí a tvarů, abyste viděli hladké přechody mezi více kresbami. Kromě kohoutku a přetažení spouštěčů existují i další spouštěče, které designéři mohou experimentovat s, například pomocí kláves klávesnice a klíčů Gamepad pro spouštění prototypů na konkrétním klávesovém klepnutí. K dispozici je také režim, ve kterém můžete vytvářet a navrhnout hlasové prototypy pro Alexa, Siri a tak dále, kde můžete přiřadit věty a mluvit je získat konkrétní odpovědi.

Přečtěte si více:

. \ T nejlepší stavitelé webových stránek
Krátky Adobe XD byste měli vědět (ale pravděpodobně ne)
Sestavte prototypy s Adobe XD

Adobe XD: Jak používat funkce Auto-Animate

01. Swipe gesta přidat do fav nebo smazání

02. Vytvořte druhou kartu

03. Animovat kresby

04. Rozbalte své karty

05. Práce na obrázcích a podrobnostech

06. Navrhněte druhý kreslicí

07. Aplikujte dokončovací dotek

08. Vytvořte mikro-interakci

09. Jděte za základy

jak - Nejoblíbenější články

Jak čerpat realističtější obrázky

5 Hot Nová funkce CSS a jak je používat

Jak pracovat s HTML Video

3D Text Tutorial pro grafické designéry

Vytvoření reagující řídicího panelu s figemem

Začínáme v aplikaci Amazon Lumberyard: Nastavení

Jak vytvořit 3D vlasy a srst

Jak získat model Zbrush do Maya

Kategorie