Használja az Adobe XD-t a mikro-kölcsönhatások létrehozásához

Sep 17, 2025

kézikönyv

(Kép hitel: Adobe)

Az Adobe XD segíthet a prototípusban - az egyik legfontosabb folyamat a tervezési életciklusban, amely létfontosságú szerepet játszik a fejlesztésben a tervezők és a DEV csapatok munkafolyamat karbantartásával. A közelmúltban a prototípusos táj nagy változása történt: a tervezők elrontják a választást.

Csakúgy, mint sok más tudományág, nincs egyetlen design és prototiping eszköz, amely mindent elérhet. A különböző szakaszok egyedi eszközöket igényelnek. Elmúltak azok a napok, amikor a tervezők kizárólag a Photoshopra és a vázlatra támaszkodtak. Bár nagy UI tervezési eszközök, nem rendelkeznek a gyors felhasználói áramlásokkal és a drótvázokkal (lásd a tetejét Wireframe eszközök a WireFraming opciókhoz).

Most a tervek növekvő összegével - mint például az animációk, gesztusok és hangvezérlés - kemény megtalálni egy olyan eszközt, amely elérheti ezeket a prototípusozási képességeket, és még mindig megőrzi a dolgokat. A kódolás az e kölcsönhatások megteremtésének egyik módja, de időigényes. Szerencsére, az Adobe XD jött a mentő felszabadításával egy frissítést a prototípus eszköz, amely tartalmaz egy praktikus funkció az úgynevezett „Auto Animate”. Ez messze a legnagyobb az erőteljes eszközhálózat mellett.

Get Adobe Creative Cloud

Az ötlet az itt egyszerű: az Auto Animate lehetővé teszi a tervezők számára, hogy interaktív prototípusokat építsenek felmelegítő animációkkal egyszerűen másolva egy képet, vagy módosítsák az objektum tulajdonságait. Ezek a tulajdonságok lehetnek bármi, például a méretek, az X és Y pozíciója, az opacitás, a forgatás. A korábban az Adobe XD alapvető interakciókat kínált, mint például a csúszás, a nyomasztás és a feloldódás.

Az új funkciók hozzáadásával a tervezők könnyedén létrehozhatnak mozgásalapú animációkat, amelyek viszont segítenek a felhasználó számára, hogy olyan információs áramlási modelleket hozzanak létre, amikor több képernyő között navigálnak. Ezt is fel lehet használni, hogy hozzon létre a vizuális hierarchia CTA-k vagy üzeneteket halványul, vagy ki a képernyőn átmenetileg.

Ebben a cikkben megmagyarázom, hogyan készítsek egyszerű mikrok animációkat az Adobe XD új automatikus animációs funkciójával. Mielőtt elkezdenénk, van néhány dolog, hogy fontolja meg, hogyan kell az objektumokat kezelni az automatikus animációhoz:

Ha egy objektum vagy elem nem a célállomáson van, akkor általában elhalványul ki, amikor előnézeti
Ha egy elem nincs jelen az eredeti alkotóban, akkor hajlamos elhalványulni
Mindig húzza meg a képeket, amikor prototípus módban van, amely létrehozza az interakciókat
Az animációk létrehozásához mindig győződjön meg róla, hogy az objektumok és elemek megfelelnek a rétegek nevének, és a csoport neve is

Állítsa be az állapotváltást az Auto Animate segítségével

Adobe XD tutorial — Egyszerűen hangzik, de két formával kell elkezdenie (Kép hitel: Vamsi Batchu)

Kezdjük azáltal, hogy egyszerű példát készítünk az államváltozásra az Auto Animate segítségével. Ebben a példában az a tulajdonságok, amelyek megváltoznának a szélesség, a magasság és a szín. Minden automatikus animációs átmenet esetén több mint két képződoboz szükséges.

Az eredeti alkotóban rajzoljon egy alakot - példánkban, ez egy 500px x 200px zöld téglalap. Ismertesse ezt a képet, és válassza ki a téglalapot a második műlapon. Meg kell módosítanunk a téglalap tulajdonságait azáltal, hogy növelnénk az 1000-es szélességet és a magasságot 500-ra. További módosításokat is végezhet, mint például az átlátszatlanság 50% -os megváltoztatása vagy a szín rózsaszín.

Most kattintson a bal felső sarokban található Prototípus fülre. Válassza ki az első alkotót, és kapcsolja be a második lapra a második lapra. Ha ezt megteszi, hogy van egy közbenső lap jobb oldalán a app, hogy lehet használni, hogy beállított paraméterek, mint Trigger, Action, Destination és lazítás. Minden paraméter az Ön igényei szerint testreszabható. Jelenleg öt fajta ravaszt - köztük Tap, drag and Időzített -, hogy kezdeményezni fogja az animációt.

Állítsa be az Action fület alapértelmezett az AUTO ANIMATE és azért, mert példánkban csak két artboard van, állítsa be a célt a Célpont fülre. Kattintson a jobb felső sarokban, hogy az Auto Animate tegye a mágiáját és animálja a téglalapot. Ha több mint két olyan elem van, amelyet egyszerre kell megváltoztatni, győződjön meg róla, hogy az elemek neve mindkét képtárban megegyezik. Ez tájékoztatja az alkalmazást, hogy ezeknek a két elemnek animáltnak kell lennie.

Bontsa ki a kártyákat

Most haladjunk előre egy példára, több interaktivitással és egy több elemet is tartalmaznak. Kezdjük úgy, hogy létrehozzuk az első alkotót erre, amely egy kártyából áll. A kártya olyan elemekkel, mint egy fejléc, leírás és egy link az alsó olvasási történelemben. A link mellett lesz egy nyíl ikon, amely lefelé néz. Ha a felhasználó rákattint a linkre, a kártya megnyílik, mint egy fiók, amely megmutatja az előző bejegyzéseket. Mivel ez megtörténik a kattintás / érintő funkció, az előző bejegyzéseket nem szabad az első műhelyben hozni.

Ezután megismételjük ezt a képet, és megváltoztatjuk a kártya néhány tulajdonságát. Az első dolog, hogy növelje a téglalap alakú kártya magasságát, hogy úgy néz ki, mint egy kibővített állapot. A fejléc és az alábbi leírás változatlanul kell lennie. Most itt az ideje, hogy hozzáadjuk azokat a bejegyzéseket, amelyeket korábban említettünk.

Képzeld el, hogy három bejegyzés van a kártyára. Minden bejegyzésnek belépési neve, belépési dátuma és egy gombja a fő képen látható. Egy bejegyzést hozhat létre, és kétszer másolhatja, hogy hozzon létre egy bejegyzést. Rendezze el őket a fő képen látható módon, és helyezze el a nézet története szöveges linket a bejegyzések alatt. Mivel kibővített állapotban van, forgassa el a nyíl ikont, hogy felfelé nézzen. Ez az. Ön befejezte a műhelyek beállítása.

Az animáció létrehozásához menjen az első alkotóba, és kattintson a Prototype fülre a bal felső sarokban. Most kattintson az Előzmények megtekintése linkre az első rajztábla és húzza a prototípus link a második rajztábla. Ez teszi a nézet előzményeit a ravaszt. Módosítsa a tulajdonságokat az interakció a jobb oldali fület beállításával trigger Tap és cselekvési Auto Animate. Tesztelje meg a sima fiók animációját. Végezze el a változtatásokat az interakció lapon, ha az animáció nem elég sima.

Húzza az animációkat

A húzás az egyik leggyakoribb animáció, amikor a mobil kölcsönhatásokról van szó. Próbáljunk meg egy egyszerű példát két mesterekkel. Az első alkotóhoz kezdje meg a szín és a méretek körét. Most hozzon létre egy téglalapot, amelynek szélessége 250px és magassága 25px. Nyolcszor ismételje meg ezt a téglalapot, és 20px-es helyet tartson fenn minden másolat között, hogy létrehoz egy köteget. Helyezze a kört az első téglalap tetejére, mielőtt megduplázná ezt a képet.

A második műhelyben nincs sok maradék. Egyszerűen csökkentse az egyes duplikált téglalapok közötti különbséget, így úgy érzi, hogy tömörített. Az első alkotóhoz hasonlóan helyezze a kört az első téglalap tetejére. Az utolsó lépés az, hogy megvédje azt a prototípus lapra kattintva a bal felső sarokban. Most kattintson a körre az első alkotóból, és tegyen egy ravaszt. Csakúgy, mint az előző példák, változtassa meg az interakció lapon lévő tulajdonságokat a jobb oldalon, ha a ravaszt húzza és cselekedjen az automatikus animáláshoz. Ha rákattint a Lejátszás gombra az animáció előnézetéhez, akkor sima műveletet láthat, mintha a blokkot a gömb tömöríti.

Végtelen rakodó animációk létrehozása

Az Adobe XD egyik legjobb tulajdonsága az, hogy az Auto Animate alkalmazható több műhely között. Egy ilyen animáció elvégzéséhez egyszerűen módosítania kell az egyik tulajdonságot.

Hozzunk létre egy betöltési animációt, amelyben az akkumulátor feltöltődik. A kulcs, hogy ez a tökéletes az, hogy az első alkotóelem megfelelő. Az első alkotóelemnek van egy elem helyőrzője, ahogy a képen látható. A téglalap alakú formák segítségével hozható létre. A helyőrző belsejében lévő tényleges akkumulátornak az első alkotónak üresnek kell lennie (ami 0% -ot képvisel). Ismertesse ezt a képet, és hozzon létre egy zöld téglalapot egy 50px magassággal, amely tökéletesen illeszkedik a helyőrzőbe. Hasonló duplikátumok létrehozása Tehát az akkumulátor magassága a harmadik műhelyben 50px-rel és így tovább növekszik. Folytassa addig, amíg a testület teljesen kitöltött.

Most egy végtelen hurkot kell létrehoznunk ezek között a művészek között, hogy létrehozzunk egy szinkron betöltési animációt. Ehhez menjen a Prototype módba, kattintson az első alkotóba, és húzza a prototípus nyílát a második műlapra. Módosítsa a tulajdonságokat az interakció panel, ehhez a trigger idő alatt, majd állítsa be a késleltetés 0 másodperc, ami animálni a második rajztábla, amikor az előnézet. Végezze el ugyanazokat a változtatásokat az összes művészeti táblákkal, ha összekapcsolja a második a harmadik és így tovább, mielőtt végül összekapcsolja az utolsó műhely az első. Sikeresen összekapcsoltuk az összes rajztáblát, hogy végtelen hurkot képezzen. Módosítsa a lazítás és az időtartam beállításait az Ön igénye szerint, hogy a betöltés simább legyen.

Bár vannak olyan tonna variációk, amelyeket az Adobe XD segítségével meg lehet próbálni, a szerszám jelenlegi képességei korlátozottak, és még mindig rendszeresen frissülnek a fejlesztési csapat. Tehát az eszközökhöz hasonló eszközökkel összehasonlítva úgy érzi, mintha az XD korlátozott eszközt tartalmaz. Az Adobe azonban kiváló munkát végzett abban, hogy az eszköz egyszerű megtanulása és használata. A komplex kölcsönhatások létrehozása egy kis időt és erőfeszítést igényelhet, de teljesen elérhetők az XD automatikus animációs funkciójával. A kulcs az, hogy megértsük a mozgó objektumok alapjait, átméretezik őket, rétegek hozzáadásával és triggerekkel.

Ez a cikk eredetileg 326 háló , A világ vezető magazinja webes tervezőknek és fejlesztőknek. megvesz Kiadás 326 vagy Iratkozzon fel itt .

Olvass tovább:

40 Brilliant Wordpress oktatóanyagok
11 Csodálatos JavaScript keretrendszerek
A neumorfizmus valóban 2020 legmelegebb trendje?

Használja az Adobe XD-t a mikro-kölcsönhatások létrehozásához

Állítsa be az állapotváltást az Auto Animate segítségével

Bontsa ki a kártyákat

Húzza az animációkat

Végtelen rakodó animációk létrehozása

kézikönyv - Most Popular Articles

A művészet előrelátásának alapvető útmutatója

Hozzon létre saját kalligrafikus kefét az Illustrator-ban

Interaktív 3D-s tipográfia hatásai

Élvezze az energikus tengeri kilátást az olajokban

Hogyan kell használni a védjegyet a webfejlesztésben

festék, mint egy impresszionista

Hogyan hozhat létre reális CG ruhát

Hogyan hozzunk létre egy gyönyörű akvarell tájfestést

Kategóriák