Utilizați Adobe XD pentru a crea interacțiuni micro

Sep 14, 2025

să

(Credit de imagine: Adobe)

Adobe XD poate ajuta la prototipuri - unul dintre cele mai importante procese din ciclul de viață al proiectului, care joacă un rol vital în dezvoltarea prin sprijinirea designerilor și a echipelor DEV cu întreținerea fluxului de lucru. Au existat câteva schimbări majore în peisajul prototipic recent: designerii sunt răsfățați la alegere.

La fel ca multe alte discipline, nu există un singur instrument de design și prototiping care să poată atinge totul. Diferite etape necesită un set unic de instrumente. Au dispărut zilele când designerii obișnuiau să se bazeze exclusiv pe Photoshop și Sketch. Deși sunt instrumente de design UI excelent, ele nu au capacitățile pentru fluxurile rapide ale utilizatorilor și cablurile de telefonie (vezi partea de sus Instrumente Wireframe Pentru mai multe opțiuni de fire).

Acum, cu cantitatea crescândă de interacțiuni în desene - cum ar fi animațiile, gesturile și controlul vocii - este greu să găsești un instrument care să poată atinge toate aceste capabilități prototiping și să păstreze lucrurile simple. Codificarea este o modalitate de a crea aceste interacțiuni, dar este consumatoare de timp. Din fericire, Adobe XD a venit la salvare prin eliberarea unei actualizări a instrumentului său de prototipare care include o caracteristică la îndemână numită "Animate automată". Este de departe cea mai mare plus față de setul de instrumente puternic.

Get Adobe Creative Cloud

Ideea aici este simplă: Animatele automate permite designerilor să construiască prototipuri interactive cu animații imersive prin simpla duplicare a unui tablă de artă sau prin modificarea proprietăților unui obiect. Aceste proprietăți ar putea fi orice, cum ar fi dimensiunile, poziția x și y, opacitatea, rotația. Adobe XD anterior a oferit interacțiuni de bază, cum ar fi alunecarea, împingerea și dizolvarea.

Odată cu adăugarea noilor caracteristici, designerii pot crea cu ușurință animații bazate pe mișcare, care la rândul lor vor ajuta utilizatorul să creeze modele mentale de flux de informații atunci când navigând între mai multe ecrane. Acest lucru poate fi, de asemenea, utilizat pentru a crea ierarhiile vizuale, CTA-urile sau mesajele care se estompează temporar din ecran.

În acest articol, voi explica cum să creați simple micro animații folosind această nouă caracteristică automată a Adobe XD. Înainte de a începe, există câteva lucruri de luat în considerare despre modul în care obiectele trebuie tratate pentru animația automată:

Când un obiect sau un element nu se află pe tabla de destinație, se estompează, de obicei, atunci când este previzualizată
Când un element nu este prezent în panoul inițial, acesta tinde să se estompeze
Întotdeauna fițiți pachetele de artă atunci când vă aflați în modul prototip, care va crea interacțiunile
Pentru crearea de animații, asigurați-vă că obiectele și elementele au nume de potrivire în straturi și, de asemenea, numele grupului pe care îl pot fi

Faceți o schimbare de stat utilizând animarea automată

Adobe XD tutorial — S-ar putea să sune simplu, dar va trebui să începeți cu două forme (Credit Imagine: Vamsi Batchu)

Să începem prin a face un exemplu simplu de schimbare a statului folosind automată animată. În acest exemplu, proprietățile care s-ar schimba sunt lățimea, înălțimea și culoarea. Pentru orice tranziții animate auto, aveți nevoie de mai mult de două plăci de artă.

La tara inițială, trageți o formă - în exemplul nostru, este un dreptunghi verde de 500px x 200px. Duplicați acest tablă de artă și selectați dreptunghiul de pe a doua tablă de artă. Trebuie să modificăm proprietățile dreptunghiului prin creșterea lățimii la 1000 și înălțimea la 500. De asemenea, puteți efectua modificări suplimentare, cum ar fi schimbarea opacității la 50% sau făcând culoarea roz.

Faceți clic pe fila prototip din colțul din stânga sus. Selectați prima tabără și conectați-o folosind săgeata la a doua tablă. Când faceți acest lucru, există o filă de interacțiune din partea dreaptă a aplicației care poate fi utilizată pentru a seta parametrii cum ar fi declanșarea, acțiunea, destinația și relaxarea. Fiecare parametru poate fi personalizat în funcție de nevoile dvs. Există cinci tipuri de declanșare - inclusiv robinet, trageți și programați - care vor iniția animația.

Setați tabelul de acțiune implicit la animarea automată și deoarece există doar două pachete de artă în exemplul nostru, setați fila de destinație la panoul de articole 2. Există, de asemenea, mai multe tranziții netede care pot fi alese și programate. Faceți clic pe pictograma de redare din partea dreaptă sus pentru a vedea Auto Animate Faceți magia și animați dreptunghiul. Atunci când există mai mult de două elemente care trebuie schimbate simultan, asigurați-vă că numele acestor elemente sunt aceleași în ambele pachete. Acest lucru va informa cererea că aceste două elemente trebuie să fie animate.

Extindeți cărțile

Acum, să progresăm la un exemplu cu mai multă interactivitate și una care include mai multe elemente. Să începem prin crearea primului tablă pentru aceasta, constând dintr-un card. Cardul va avea elemente cum ar fi un antet, o descriere și o legătură în istoria vederii de lectură de jos. Alături de link, va fi o pictogramă săgeată orientată în jos. Când utilizatorul face clic pe link, cardul se va deschide ca un sertar pentru a afișa intrările anterioare. Deoarece acest lucru se întâmplă pe funcția CLICK / TAP, intrările anterioare nu ar trebui create în primul tablă de artă.

Apoi, duplică acest tablă de artă și schimbăm câteva proprietăți ale cardului. Primul lucru pe care trebuie să-l faceți este să creșteți înălțimea cardului dreptunghiular pentru ao arăta ca o stare extinsă. Antetul și descrierea de mai jos ar trebui să fie neschimbate. Acum este timpul să adăugați acele intrări pe care le-am menționat mai înainte.

Imaginați-vă că există trei intrări pentru card. Fiecare intrare are un nume de intrare, o dată de intrare și un buton, după cum se arată în imaginea principală. Puteți crea o intrare și duplicați-o de două ori pentru a crea un grup de intrări. Aranjați-le așa cum se arată în imaginea principală și plasați linkul de text istoric de vizualizare sub aceste intrări. Deoarece se află într-o stare extinsă, rotiți pictograma săgeată astfel încât să se confrunte în sus. Asta este. Ați terminat înființarea pachetelor de artă.

Pentru a crea animația, accesați prima tabără și faceți clic pe fila prototip din colțul din stânga sus. Acum, faceți clic pe linkul Vizualizare Istoric de pe primul tablă de artă și trageți link-ul prototip la cel de-al doilea tablă de artă. Acest lucru face ca istoricul de vizualizare să conecteze declanșatorul. Schimbați proprietățile din fila Interacțiune din partea dreaptă, prin setarea declanșatorului pentru a atinge și acțiunea la animarea automată. Testați-l pentru a vedea animația sertarului neted. Faceți modificări la opțiunea de relaxare din fila Interacțiune dacă găsiți animația nu este suficient de netedă.

Faceți animații de tragere

Trageți este una dintre cele mai frecvente animații când vine vorba de interacțiunile mobile. Să încercăm un exemplu simplu cu două plăci de artă. Pentru prima tabără, începeți prin crearea unui cerc de orice culoare și dimensiuni. Acum creați un dreptunghi cu o lățime de 250px și o înălțime de 25px. Duplicați acest dreptunghi de opt ori, menținând un spațiu de 20px între fiecare duplicat, astfel încât să creeze un stack. Plasați cercul deasupra primului dreptunghi înainte de a duplica acest tablă de artă.

Nu este prea mult de făcut pentru a face pentru a doua tablă de artă. Pur și simplu reduceți decalajul dintre fiecare dintre dreptunghiurile duplicate, astfel încât se simte ca și cum este comprimat. Similar cu prima tabără de artă, puneți cercul deasupra primului dreptunghi. Pasul final este de a fi prototip făcând clic pe fila prototip din colțul din stânga sus. Acum faceți clic pe cercul de la prima tabără și faceți un declanșator. La fel ca exemplele anterioare, schimbați proprietățile din fila Interacțiune din dreapta, setând declanșatorul să tragă și acționează la animarea automată. Când faceți clic pe butonul de redare pentru a previzualiza animația, veți putea vedea o acțiune fără probleme ca și cum blocul este comprimat de sferă.

Creați animații Infinite încărcător

Una dintre cele mai bune caracteristici ale Adobe XD este că animalul automat poate fi aplicat între pachetele multiple de artă. Pentru a face o astfel de animație, trebuie doar să faceți schimbări simple la una dintre proprietăți.

Să creăm o animație de încărcare în care o baterie se umple. Cheia pentru a obține acest lucru perfectă este să înveți prima tabără în mod corespunzător. Primul tablă de articole are un substituent cu acumulator, după cum se arată în imagine. Poate fi creat folosind forme dreptunghiulare. Pentru bateria reală din interiorul substituentului, prima tabără ar trebui să fie goală (ceea ce reprezintă 0%). Duplicați acest tablă de artă și creați un dreptunghi verde cu o înălțime de 50px care se potrivește perfect în interiorul substituentului. Creați duplicate similare, astfel încât înălțimea bateriei din cel de-al treilea tablă de ansamblu este mărită cu 50px și așa mai departe. Continuați până când panoul de artă este complet umplut.

Acum trebuie să creăm o buclă infinită între aceste plăci, astfel încât să creeze o animație sincronă de încărcare. Pentru aceasta, accesați modul prototip, faceți clic pe prima tabără și trageți săgeata prototip la cel de-al doilea tablă de artă. Schimbați proprietățile din panoul de interacțiune, prin setarea timpului de declanșare și apoi setați întârzierea la 0 secunde, ceea ce va anima cel de-al doilea tablă de ansamblu atunci când este previzualizat. Efectuați aceleași modificări la toate plăcile de artă, prin legarea celui de-al doilea la al treilea și așa mai departe, înainte de a lega ultima dată la prima tabără. Am legat cu succes toate plăcile de artă pentru a forma o buclă infinită. Modificați setările de relaxare și durată conform cerințelor dvs. pentru a face încărcarea mai ușoară.

Deși există tone de variații care pot fi încercate folosind Adobe XD, capabilitățile actuale ale instrumentului sunt limitate și sunt încă actualizate în mod regulat de echipa de dezvoltare. Deci, în comparație cu instrumentele ca principiul, vă puteți simți ca și cum XD are un set de instrumente restricționat. Cu toate acestea, Adobe a făcut o treabă excelentă de a face instrumentul simplu de învățat și de utilizat. Crearea interacțiunilor complexe ar putea dura ceva timp și efort, dar acestea sunt total realizabile utilizând caracteristica animată auto XD. Cheia este de a înțelege elementele de bază ale obiectelor în mișcare, redimensionând-le, adăugând straturi și folosind declanșatoare.

Acest articol a apărut inițial problema 326 din net , Magazine de conducere din lume pentru designeri de web și dezvoltatori. Cumpără Numărul 326. sau Abonați-vă aici .

Citeste mai mult:

40 Tutoriale WordPress Brilliant
11 cadre JavaScript uimitor
Neumorfismul este cea mai tare tendință mai tare din 2020?

Utilizați Adobe XD pentru a crea interacțiuni micro

Faceți o schimbare de stat utilizând animarea automată

Extindeți cărțile

Faceți animații de tragere

Creați animații Infinite încărcător

să - Cele mai populare articole

Cum să întindeți o pânză și să se înființeze pentru vopsele de ulei

Construirea layout-urilor adaptive fără interogări media

Adăugați filtre SVG cu CSS

Cum se creează efecte lichide cu WebGL

30 Sfaturi de redare Keyshot

Descărcați fișiere pentru World 3D 232

Cum să topiți un obiect 3D cu trei.js

Descoperiți de preluare și cum să faceți cea mai bună utilizare a acestuia

Categorii