Použijte Adobe XD pro vytvoření mikro interakcí

Sep 11, 2025

jak

(Image Credit: Adobe)

Adobe XD může pomoci s prototypem - jedním z nejdůležitějších procesů v životním cyklu návrhu, který 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. V poslední době byly některé hlavní změny v prototypové krajině v poslední době: návrháři jsou zkaženi pro výběr.

Stejně jako mnoho jiných disciplín není žádný jeden design a prototypový nástroj, který může dosáhnout všeho. Různé stupně vyžadují jedinečnou sadu nástrojů. Pryč jsou dny, kdy návrháři se spoléhali pouze na Photoshop a skica. Ačkoli oni jsou skvělé UI Design Tools, nemají schopnosti pro rychlé uživatele toky a drátové rámečky (viz náš top Wireframe Tools. Pro více možností drátů).

Nyní s rostoucím množstvím interakcí v návrhu - jako jsou animace, gesta a hlasová kontrola - je to těžké najít nástroj, který může dosáhnout všech těchto prototypových schopností a stále udržují věci jednoduché. Kódování je jedním ze způsobů vytváření těchto interakcí, ale je časově náročný. Společnost Adobe XD naštěstí přijde k záchraně uvolněním aktualizace na jeho prototypový nástroj, který obsahuje šikovnou funkci nazvanou "Auto Animate". Je to zdaleka největším doplňkem výkonné sady nástrojů.

Získejte Adobe Creative Cloud

Myšlenka zde je jednoduchá: Auto Animate umožňuje návrhářům vytvářet interaktivní prototypy s pohlcujícími animacemi jednoduchým duplikací kresle nebo modifikace vlastností objektu. Tyto vlastnosti by mohly být cokoliv, jako jsou rozměry, poloha X a Y, opacity, rotace. Dříve Adobe XD nabídl základní interakce, jako je posuvné, zatlačte a rozpustí.

S přidáním nových funkcí mohou návrháři snadno vytvářet filmy založené na pohybu, což zase pomůže uživateli vytvářet mentální modely toku informací, když jsou navigace mezi více obrazovkami. To lze také použít k vytvoření vizuálních hierarchií, CTA nebo zpráv, které dočasně zmizí nebo z obrazovky.

V tomto článku budu vysvětlovat, jak vytvářet jednoduché mikro animace pomocí tohoto nového automatického animátního rysu Adobe XD. Než začneme, existuje několik věcí, které je třeba zvážit, jak musí být předměty zpracovávány pro Auto Animace:

Když objekt nebo prvek není v cílové kreslicí, obvykle mizí při zobrazení náhledu
Když prvek není přítomen v počáteční kreslicí, má tendenci fade dovnitř
Vždy dráždí kresby, když jste v režimu prototypu, který vytvoří interakce
Pro vytváření animací se vždy ujistěte, že objekty a prvky mají odpovídající názvy ve vrstvách a také název skupiny, v nichž mohou být

Proveďte změnu stavu pomocí automatického animátu

Adobe XD tutorial — Může to znít jednoduchý, ale budete muset začít se dvěma tvary (Image Credit: VAMSI Batchu)

Začněme jednoduchým příkladem změny stavu pomocí automatického animátu. V tomto příkladu jsou vlastnosti, které by změnily šířku, výšku a barvu. Pro všechny automatické animované přechody potřebujete více než dvě kresby.

Na počáteční kreslicí, nakreslete tvar - v našem příkladu je to zelený obdélník 500px x 200px. Duplikujte tuto kreslicí a vyberte obdélník na druhé kreslice. Potřebujeme upravit vlastnosti obdélníku zvýšením šířky na 1000 a výšku na 500. Můžete také provádět další modifikace, jako je změna opacity na 50% nebo vytvoření barevné barvy.

Nyní klikněte na kartu Prototyp v levém horním rohu. Vyberte první artboard a propojte jej pomocí šipky na druhý kreslicí. Když to uděláte, existuje karta Interakce vpravo od aplikace, která může být použita pro nastavení parametrů, jako je spoušť, akce, cíl a uvolnění. Každý parametr lze přizpůsobit podle vašich potřeb. Existuje pět typů spouště - včetně klepnutí, přetažení a časování - které iniciují animaci.

Nastavit kartu Akce Výchozí hodnotu Ani Animate a protože v našem příkladu existují jen dvě kresby, nastavte cílovou kartu na ARTBOOK 2. Existují také více hladkých přechodů, které lze zvolit a načasovat. Klikněte na ikonu Přehrát v pravém horním rohu a zobrazte Auto Animate svou magii a animovat obdélník. Pokud existuje více než dva prvky, které musí být změněny současně, ujistěte se, že názvy těchto prvků jsou stejné v obou kreslicích. To bude informovat aplikaci, že tyto dva prvky musí být animovány.

Rozšiřte karty

Pojďme pokrok na příklad s více interaktivitou a jedním, který obsahuje více prvků. Začněme tím, že pro to vytvoříte první kreslicí, skládající se z karty. Karta bude mít prvky, jako je záhlaví, popis a odkaz v dolní hodnotě čtení historie. Vedle odkazu bude ikona šipky směrem dolů. Když uživatel klikne na odkaz, karta se otevře jako zásuvka pro zobrazení předchozích záznamů. Vzhledem k tomu, že se to stane na funkci Click / Tap, předchozí položky by neměly být vytvořeny v první kreslicí.

Dále duplikujeme tuto kreslicí a změní několik vlastností karty. První věc, kterou je třeba udělat, je zvýšit výšku obdélníkové karty, aby vypadala jako rozšířený stav. Záhlaví a popis níže by měl být nezměněn. Nyní je čas přidat tyto položky, které jsme zmínili dříve.

Představte si, že pro kartu jsou tři položky. Každá položka má název vstupu, datum vstupu a tlačítko podle hlavního snímku. Můžete vytvořit jeden záznam a dvakrát duplikovat, abyste vytvořili skupinu položek. Uspořádejte je, jak je znázorněno na hlavním obrázku a umístěte text Zobrazit textový odkaz pod těmito záznamy. Protože je v rozšířeném stavu, otočte ikonu šipky tak, aby se směřovala nahoru. A je to. Dokončili jste nastavení kresby.

Chcete-li vytvořit animaci, přejděte na první artboard a klikněte na kartu Prototyp z levého horního rohu. Nyní klikněte na odkaz Zobrazit historii na první artboard a přetáhněte odkaz prototypu na druhý kreslicí. Díky tomu je zobrazení historie propojení spoušť. Změňte vlastnosti v kartě Interakce vpravo nastavením spouštěče k klepnutí a akci na Auto Animate. Otestujte jej a zobrazí se animace hladké zásuvky. Proveďte změny volby uvolnění v kartě Interakce, pokud zjistíte, že animace není dostatečně hladká.

Proveďte animace

Přetažením je jedním z nejčastějších animací, pokud jde o mobilní interakce. Zkusme jednoduchý příklad se dvěma kresbami. Pro první kreslicí, začněte vytvořením kruhu jakékoli barvy a rozměrů. Nyní vytvoří obdélník o šířku 250px a výškou 25px. Duplikovat tento obdélník osmkrát, udržet prostor 20px mezi každým duplikátem, takže vytvoří zásobník. Před kopírováním této krmebnice umístěte kruh na první obdélník.

Pro druhý kresle není moc. Jednoduše snižte mezeru mezi každým duplikovaným obdélníkem, takže se cítí jako stlačený. Podobně jako první kreslicí, umístěte kruh na první obdélník. Posledním krokem je prototype kliknutím na kartu Prototyp z levého horního rohu. Nyní klikněte na kruh z první kresby a proveďte to spoušť. Stejně jako předchozí příklady změňte vlastnosti v kartě Interakce vpravo nastavením spouštěče pro přetažení a akci na Auto Animate. Po klepnutí na tlačítko Přehrát zobrazíte náhled animace, budete moci vidět hladké akci, jako by byl blok komprimován sférou.

Vytvořit nekonečné animace nakladače

Jedním z nejlepších funkcí aplikace Adobe XD je, že auto animát může být aplikován mezi více kresbami. Chcete-li dělat takovou animaci, stačí provést jednoduché změny v jedné z vlastností.

Pojďme vytvořit načítání animace, ve které se baterie naplní. Klíčem k získání tohoto perfektního je řemeslné řemeslné kreslicí šňůry správně. První artbone má zástupný symbol akumulátoru, jak je znázorněno na obrázku. Lze jej vytvořit pomocí obdélníkových tvarů. Pro skutečnou baterii uvnitř zástupného symbolu by měla být první kresle prázdná (což představuje 0%). Duplikovat tuto kreslicí a vytvořit zelený obdélník s výškou 50px, která dokonale zapadá do zástupného symbolu. Vytvořit podobné duplikáty, takže výška baterie ve třetím kreslicí je zvýšena o 50px a tak dále. Pokračujte, dokud není krmivo zcela naplněno.

Nyní musíme vytvořit nekonečnou smyčku mezi těmito kryty tak, aby vytváří synchronní animaci načítání. K tomu přejděte do režimu prototypu, klikněte na první artbonku a přetáhněte šipku prototypu na druhý kreslicí. Změňte vlastnosti v panelu Interakce nastavením spouštěče k času a potom nastavte zpoždění na 0 sekund, která bude oživit druhou kreslicí šňůru při zobrazení náhledu. Proveďte stejné změny všem kreslícím prostorem, připojením druhé až třetí a tak dále, než konečně propojujete poslední kresbu k prvnímu. Úspěšně jsme propojili všechny kresby, abychom vytvořili nekonečnou smyčku. Změňte nastavení uvolnění a doby trvání podle požadavku, aby se načtení hladší.

Ačkoli tam jsou tuny variant, které lze vyzkoušet pomocí Adobe XD, aktuální možnosti nástroje jsou omezené a jsou stále pravidelné aktualizované vývojovým týmem. Takže ve srovnání s nástroji, jako je princip, můžete mít pocit, jako by XD má omezenou sadu nástrojů. Adobe však udělal vynikající práci, aby se nástroj jednoduše učil a používal. Vytváření komplexních interakcí může trvat nějakou dobu a úsilí, ale jsou zcela dosažitelné pomocí funkce Auto Animátu XD. Klíčem je porozumět základům pohybujících se objektů, změna velikosti, přidávání vrstev a používání spouštěčů.

Tento článek se původně objevil vydání 326 z síť , přední světový časopis pro web designéry a vývojáře. Koupit Vydání 326. nebo Přihlásit se zde .

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

40 brilantní wordpress tutoriály
11 Úžasné rámce Javascriptu
Je Neumorphism opravdu 2020 nejžhavější trendu?

Použijte Adobe XD pro vytvoření mikro interakcí

Proveďte změnu stavu pomocí automatického animátu

Rozšiřte karty

Proveďte animace

Vytvořit nekonečné animace nakladače

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

Jak vytvořit pin-up umění

Jak vytvořit logo v aplikaci Photoshop

21 způsobů, jak zlepšit produktivitu s NPM

Jak implementovat světelné nebo tmavé režimy v CSS

Vytvoření více expozičního obrazu s Adobe CC

Jak nakreslit nos

Jak zlepšit výkon eCommerce stránek

Připravte svou práci pro 3D Tisk: 8 Top tipů

Kategorie