Adobe XD: Hogyan kell használni az Auto-Animate funkciót

Nov 19, 2025

kézikönyv

(Kép hitel: Adobe)

Annak ellenére, hogy késői bejutás a prototípusos játékba, az Adobe XD az egyik legjobb és legrövidebb drótváz és prototípuskészítő eszköz. A prototípusozás kulcsfontosságú folyamat a tervezési életciklusban, de szintén fontos szerepet játszik a fejlesztésben a tervezők és a DEV csapatok munkafolyamat-karbantartásával.

Tervezőként gyakran szükségünk van egy csomó eszközre, hogy megtervezze a felhasználói élmény munkafolyamatának különböző szakaszait. Az Adobe aktívan innovál egy olyan keresztplatformos eszközt, amely a tervek tesztelésére, a drótváz megteremtésére használható, a dev csapatnak és az együttműködési tervezésnek (lásd a listát Wireframe eszközök további lehetőségekért).

Az Auto-Animate funkció azt jelenti, hogy az Adobe XD is használható zökkenőmentes mikro-kölcsönhatások és animációk, például olyan eszközök, mint az elv. Ez segít a tervezőknek a gazdag prototípus tapasztalataihoz, a fedélzeti áramlásoktól, a mobil karusszel, az előrehaladási mutatókhoz és így tovább. A legjobb rész a funkcióról az, hogy egyszerű tanulni és végrehajtani.

Ebben a cikkben megmagyarázom, hogyan készítsek egyszerű mikrok animációkat az Auto-Animate funkció használatával. Mind a gesztus alapú, mind a tapintású kölcsönhatásokra nézünk.

Ha még nem kapta meg az Adobe XD-t, nézze meg, hogyan kell Töltse le az Adobe XD-t Post, majd nézd meg kedvenc kedvencét Adobe XD bővítmények .

01. Húzza át a gesztusokat a FAV-hoz vagy törléséhez

A swipe kölcsönhatások az egyik leggyakrabban használt mikroszkonyáskölcsönhatások a mobilalkalmazásokon. Ehhez a példához nézzünk egy zenei lejátszási listát. Az első artboard számára létrehozunk egy lejátszási lista-képernyőt öt dalban. Minden dal egyéni kártya és lényegében, amikor minden kártyát lecsöpögnek, el kell távolítania a dalt a lejátszási listából. Amikor egy kártyát lecsöpögnek, hozzá kell adnia a dalt a sorba.

Kezdjük el és hozzunk létre az első kártyát. Az alapvető részleteket, például a dal nevét, a művész nevét, a dal hosszát és a minősítést. Most csoportosítsa ezeket az elemeket egyetlen rétegbe. Ismételje meg, amíg a hasonló kártyák közül öt készül. Az ízlés alapján szerkesztheti őket.

Az első kártya - C1 - A bal oldali csúszást a törléséhez kell hozzáadni. Tehát készítsünk egy kis négyzetet piros háttérrel, adjunk hozzá néhány törlési szöveget és egy ikont, amint azt az alábbi képernyőkép mutatja. Mindezeket az elemeket egy A1 nevű rétegbe csoportosítsuk. Most kombináljuk a C1 és A1 egy L. rétegbe, hogy az A1 a C1 jobb oldalán van.

02. Hozza létre a második kártyát

A második kártya - C2 - Hasonló módon hozzáadunk egy add hozzá a jobb oldali swipe akcióhoz hasonló módon. Hozzon létre egy A2 csoportot ikonral, szöveggel és zöld háttérrel. Adja hozzá a C2 csoport bal oldalán, és hozzon létre egy L2 nevű kombinált réteget. Most az első artboard (S1) teljes. Nézzük meg kétszer az egész alkotót, két államba - S2 és S3. Az S2-t a Swipe és az S3 törléséhez használjuk a várakozáshoz. Annak érdekében, hogy meg kell tennünk néhány változtatásokat mindegyik műveletekhez. Itt vannak a Swipes beállításai:

● S1 - Az A1 és A2-ig 0% -os opacitás megváltoztatása és az L1, L2 gondoskodása, így középpontba kerülnek.

● S2 - Rendezze az L1 kártyát, így az L1 jobb széle a többi kártyához igazodik. Módosítsa az A2-től 0% -ig.

● S3 - Rendezze el az L2 kártyát, így az L2 bal széle a többi kártyához igazodik. Módosítsa az A1-0% -os opacitást.

03. Animálja a képeket

Most, hogy a képeket teljesen felállították, a következő lépés az animálni. Ezt a szerszám bal felső sarkában lévő prototípus módba lépheti. Most az S1-rajztábla, kattintsunk a réteg L1 és adjunk hozzá kölcsönhatás jobb oldalán a szerszám beállításával trigger, hogy húzza, Action Auto-Animálás és cél a rajztábla S2. A beállítások alapján is bővíthető. Tesztelje ezt az interakciót a szerszám jobb oldali oldalán lévő lejátszás gombra kattintva. Az S1 ArtBoard-on kattintson az L2 rétegre, és adjon hozzá hasonló interakciót ugyanazokkal a beállításokkal, de ebben az esetben állítsa be a célállomást az S3-ra. Ez az interakció létrehozza a bal oldali csúszást.

04. Bontsa ki a kártyáit

A második kölcsönhatás, amelyet megnézünk, általában a legtöbb alkalmazáson és weboldalon általában látható, ahol egy listán vagy katalóguson keresztül megy keresztül, és ha az egyikre kattint, akkor egy új oldalra kerül sor, amely további részleteket tartalmaz a termékről . Az auto-animátum szuper egyszerűvé teszi ezt a fajta interakciót. Ehhez a példához kezdjük el a termékkatalógus oldal létrehozásával. Választhat bármely olyan terméket, mint például egy olyan mobiltelefont (amely példája lesz), ruházati, stb. Az első artboard (S1) létrehozásához hozzon létre egy fejlécet Hamburger menüvel és profil ikonjával.

05. Munka a képeken és a részletekben

Most hozzon létre egy fejléc szöveges elemet a katalógus elemek számával. Mindegyik termékkártyához egy képet fogunk kapni, a telefon, az ár és az értékelés neve. C1-C6 kártyákat hívhatunk. Ennek legjobb módja az első kártya (C1) létrehozása, majd az XD nevű ismétlődő rács lenyűgöző funkcióját használja, amely a szerszámpanel jobb felső sarkában található. Ez lehetővé teszi, hogy megkönnyítse az elemeket könnyedén, tartsa az illesztést és a távolságot. Ennek a terméknek a beállítása befejeződött. A második kártyát animáljuk, ezért fontos, hogy kiállítsa a kártya elemeit, így az XD automatikus animálódhat.

06. Tervezze meg a második műveletet

Most, hogy dolgozzon a második műlapon. Ismertesse az első alkotót és törölje a C1, C3-C6 kártyákat. A meglévő C2 kártyát használjuk az oldal felépítéséhez, így a rétegek nevei megegyeznek. Először bontsa ki a kártya hátterét úgy, hogy a fejléc alatt lévő teljes oldalt lefedje. Most már elrendezhetjük a többi elemet, amit akarunk - az alapvető ötlet, hogy másnak kell lennie attól, hogy a kártya az S1-ben volt, mert ez az, amikor láthatja az átmenetet. Emiatt a mobil nevét 25px-re emeljük, és merészkedjünk meg. Hasonlóképpen növelje az ár méretét, és helyezze el a mobil nevére. A következő a fontos rész - a mobiltelefon képe. Jelentősen meg kell növelnie méretét, és igazítsa a központba is.

07. Alkalmazza a befejező érintőket

Ahhoz, hogy rendezze meg mindent, és véglegesítse a designt, rendezze el a minősítéseket és a csillagokat mindenre, és balra. Mivel ez a cikk a termék részletes verzióját képviseli, akkor már tartalmazhat további információkat a telefonról, például a memóriáról, a telefon rendelkezésre álló színekről, a telefonnal megadott tartozékok és így tovább, a beállítások alapján. Minden más követi, amikor görgeted a képeket. A hamburger fejléc ikonját is megváltoztathatja, hogy a felhasználó visszatérjen az előző S1-hez. Ne feledje, hogy megváltoztatja az ikon nevét, hogy megfeleljen az ikon nevének az első alkotóban.

08. Hozzon létre a mikro-kölcsönhatást

Menjünk a Prototype módba most a mikro-kölcsönhatás létrehozásához. Ehhez válassza ki a C2 kártyát az S1 artboard S1-ben, és húzza a kék nyílot a Művészeti S2-re. A jobb oldali interakciós panelben állítsa be a ravaszt, mint érintse, az Auto-Animate és a célállomás mint S2. A simább kölcsönhatásokhoz jó menni könnyedén enyhíteni és 0,4 vagy 0,6 másodperc alatt. Kattintson a hátsó nyíl ikonra a Művészeti S2-en, és húzza a nyíl S1-re. Használhatja ugyanazokat a beállításokat, hogy ez következetes legyen. Most kattintson az S1-re, és játssza meg a prototípust, hogy megnézze a mágiát. A C2 kártya megérintésével sima animációt fog megfigyelni. Állítsa be a lazítási beállításokat, hogy az animáció simább legyen.

09. Menj túl az alapokat

Most már alapvető ötlete van arról, hogyan lehet egyszerű kölcsönhatásokat létrehozni. Megpróbálhatja az automatikus animációt az elemek, méretek és formák színeinek megváltoztatásával, hogy a többszörös műhely közötti sima átmeneteket láthassa. Amellett, hogy érintse meg és húzza kiváltó, vannak más kiváltó, hogy a tervezők lehet kísérletezni, mint például a billentyűk és gamepad gombokat ravaszt prototípusok egy adott kulcs csapot. Van egy olyan mód, amelyben létrehozhat és tervezhet hangprototípusokat Alexa, Siri és így tovább, ahol mondatokat rendelhet, és beszélhet velük, hogy konkrét válaszokat kapjon.

Olvass tovább:

A Legjobb webhely építők
Az Adobe XD parancsikonok, amelyeket tudnia kell (de valószínűleg nem)
Építsen prototípusokat az Adobe XD-vel

Adobe XD: Hogyan kell használni az Auto-Animate funkciót

01. Húzza át a gesztusokat a FAV-hoz vagy törléséhez

02. Hozza létre a második kártyát

03. Animálja a képeket

04. Bontsa ki a kártyáit

05. Munka a képeken és a részletekben

06. Tervezze meg a második műveletet

07. Alkalmazza a befejező érintőket

08. Hozzon létre a mikro-kölcsönhatást

09. Menj túl az alapokat

kézikönyv - Most Popular Articles

A fej rajzolása: Teljes útmutató

Különleges nyomtatási felületek létrehozása az InDesign-ben

Az állati szemek illusztrálása

Hogyan készítsünk egy műszerfal-alkalmazást reagálással

Frissítse a textúrákat az anyagtervezőben

Ismerje meg, hogy futtassa a tervezést és a tartalom sprinteket

öltés és kompozit 360 felvétel

Prep munkája 3D-s nyomtatáshoz: 8 Legjobb tippek

Kategóriák