Adobe XD: Cum se utilizează caracteristica auto-animată

Mar 1, 2026
să
Adobe XD
(Credit de imagine: Adobe)

În ciuda intrării sale târzii în jocul Prototyping, Adobe XD este unul dintre cele mai bune și mai rapide instrumente de telefonie și prototipuri disponibile. Prototypingul este un proces-cheie în ciclul de viață al proiectului, dar joacă, de asemenea, un rol esențial în dezvoltarea prin sprijinirea designerilor și a echipelor DEV cu întreținerea fluxului de lucru.

Ca designeri, avem adesea nevoie de o mulțime de instrumente pentru a proiecta diferitele etape ale fluxului de lucru al experienței utilizatorului. Adobe inovează în mod activ un instrument transfrontalier care poate fi utilizat pentru testele de testare, crearea de firframe, predarea specificațiilor echipei Dev și, de asemenea, proiectarea colaborativă (consultați lista noastră de Instrumente Wireframe pentru mai multe opțiuni).

Caracteristica auto-animată înseamnă că Adobe XD poate fi, de asemenea, utilizat pentru a crea micro-interacțiuni și animații fără sudură cum ar fi instrumentele precum principiul. Acest lucru ajută designerii să prezinte experiențe prototip bogate, de la fluxurile de onoare, animații pentru carusele mobile, indicatori de progres și multe altele. Cea mai bună parte despre această caracteristică este că este simplu să înveți și să execute.

În acest articol, voi explica cum să creați simple micro-animații folosind caracteristica auto-animată. Vom căuta atât interacțiunile bazate pe gest, cât și la interacțiunile bazate pe robinete.

Dacă nu ați primit încă Adobe XD, vedeți cum să Descărcați Adobe XD. post, apoi verificați-vă favoritul Adobe XD plugin-uri .

01. Glisați gesturile pentru a adăuga la Fav sau de ștergere

Adobe XD

(Imagine: © Vamsi Batchu)

Swipe interacțiunile sunt una dintre cele mai frecvent utilizate micro-interacțiuni pe aplicațiile mobile. Pentru acest exemplu, să ne uităm la un playlist muzical. Pentru prima tabără, vom crea un ecran de playlist cu cinci melodii în ea. Fiecare melodie este o carte individuală și, în esență, atunci când fiecare carte este rotită la stânga, ar trebui să elimine melodia din lista de redare. Atunci când o carte este înfășurată spre dreapta, ar trebui să adauge cântecul în coadă.


Să începem și să creăm prima carte. Puteți adăuga detalii de bază, cum ar fi numele cântecului, numele artistului, lungimea cântecului și ratingul. Acum grupați toate aceste elemente într-un singur strat. Duplicați-l până când sunt făcute cinci carduri similare. Puteți să le editați pe baza gustului dvs.

Pentru prima carte - C1 - vom adăuga o glisare stânga pentru a șterge acțiunea. Deci, să creăm un pătrat mic cu un fundal roșu, să adăugați un text de ștergere și o pictogramă așa cum se arată în ecranul de mai jos. Grupați toate aceste elemente într-un strat numit A1. Combinați acum C1 și A1 într-un strat L - astfel încât A1 se află în partea dreaptă a C1.

02. Creați a doua carte

Pentru a doua carte - C2 - Vom adăuga un Adăugați la acțiunea de a glisa la dreapta în mod similar. Creați un grup A2 cu pictogramă, text și fundal verde. Adăugați-l în partea stângă a grupului C2 și creați un strat combinat numit L2. Acum, prima tabără (S1) este completă. Să duplicăm întregul tablă de două ori, în două stări - S2 și S3. Vom folosi S2 pentru ștergerea și s3 pentru a adăuga în așteptare coadă. Pentru a face acest lucru trebuie să facem câteva schimbări pentru fiecare dintre aceste articole de artă. Iată setările pentru ambele glisare:

● S1 - Schimbați opacitatea A1 și A2 la 0% și aranjați L1, L2, astfel încât acestea să fie aliniate la centru.

● S2 - Aranjați cardul L1, astfel încât marginea dreaptă a L1 este aliniată cu celelalte carduri. Schimbați opacitatea de A2 la 0%.

● S3 - Aranjați cardul L2, astfel încât marginea stângă a L2 este aliniată cu celelalte carduri. Schimbați opacitatea A1 la 0%.


03. Animați tablourile de artă

Acum, că pachetele sunt configurate complet, următorul pas este să le animați. Puteți face acest lucru prin intrarea în modul prototip din partea din stânga sus a sculei. Acum, pe tablă de artă S1, faceți clic pe stratul L1 și adăugați o interacțiune în partea dreaptă a sculei prin setarea declanșatorului pentru a trage, acțiunea la auto-animarea și destinația la bordul de artă S2. De asemenea, puteți adăuga relaxare pe baza preferințelor dvs. Testați această interacțiune făcând clic pe butonul de redare din partea dreaptă din partea dreaptă a sculei. Pe panoul S1, faceți clic pe stratul L2 și adăugați o interacțiune similară utilizând aceleași setări, dar, în acest caz, setați destinația la S3. Această interacțiune va crea glisarea stângă.

04. Extindeți-vă cardurile

Adobe XD

(Imagine: © Vamsi Batchu)

Cea de-a doua interacțiune pe care o vom uita este observată în mod obișnuit pe majoritatea aplicațiilor și site-urilor web în care treceți printr-o listă sau un catalog de produse și când faceți clic pe unul dintre aceștia, sunteți luat într-o pagină nouă cu mai multe detalii despre produs . Auto-animarea face super simplu de a anima acest tip de interacțiune. Pentru acest exemplu, permiteți-ne să începem prin crearea unei pagini de catalog de produse. Puteți alege orice produs, de exemplu, un telefon mobil (care va fi exemplul nostru), îmbrăcămintea etc. Pentru prima tabără (S1), creați un bară de antet cu un meniu hamburger și o pictogramă de profil.

05. Lucrați pe imagini și detalii

Acum, creați un element de text antet cu numărul de articole de catalog. Pentru fiecare dintre cartelele de produse, vom avea o imagine, numele telefonului, prețul și evaluările. Putem apela aceste carduri C1 la C6. Cea mai bună modalitate de a face acest lucru este de a crea prima carte (C1) și apoi să utilizați o caracteristică uimitoare a XD numită Repeat Grid, care se găsește în colțul din dreapta sus al panoului de sculă. Acest lucru vă permite să duplicați elementele cu ușurință, menținând alinierea și spațierea intactă. Configurarea acestui tablă de ansamblu este completă. Vom anima a doua carte, deci este important să dezactivați elementele acelui card, astfel încât XD să poată efectua auto-animate.

06. Proiectați al doilea tablă de artă

Acum, pentru a lucra la a doua tapardă. Duplicați prima tabără și ștergeți cardurile C1, C3-C6. Vom folosi cardul C2 existent pentru a construi această pagină, astfel încât numele straturilor sunt aceleași. Mai întâi, extindeți fundalul cardului, astfel încât să acopere întreaga pagină de sub bara de antet. Acum putem aranja celelalte elemente în orice mod pe care le dorim - ideea de bază fiind că ar trebui să fie diferită de modul în care cardul a fost în tablă S1, pentru că atunci puteți vedea tranziția. Din acest motiv, hai să aruncăm numele telefonului mobil la 25px și să-l îndrăznești. În mod similar, măriți dimensiunea prețului și plasați-o sub numele mobil. Apoi este partea importantă - imaginea telefonului mobil. Trebuie să vă măriți semnificativ dimensiunea și, de asemenea, aliniați-o în centru.

07. Aplicați atingerile de finisare

Pentru a ordona totul și finalizarea designului, aranjați evaluările și stelele de sub totul și spre stânga. Deoarece această tabără reprezintă versiunea detaliată a produsului, puteți include acum informații suplimentare despre telefon, cum ar fi memoria, culorile disponibile ale telefonului, accesorii furnizate cu telefonul și așa mai departe, pe baza preferințelor dvs. Orice altceva va urma când parcurgeți tablă de artă. De asemenea, puteți modifica pictograma antetului hamburgerului, pentru a permite utilizatorului să se întoarcă la tablă de artă anterioară S1. Amintiți-vă să modificați numele pictogramei pentru a se potrivi cu numele pictogramei în prima tablă.

08. Creați micro-interacțiunea

Să mergem la modul prototip acum pentru a crea micro-interacțiunea. Pentru a face acest lucru, selectați cardul C2 din tabla de artă S1 și trageți săgeata albastră la tabla de artă S2. În panoul de interacțiune din partea dreaptă, setați declanșatorul ca robinet, acțiunea ca auto-animație și destinație ca S2. Pentru interacțiuni mai ușoare, este bine să mergeți cu ușurință pentru relaxare și un timp de 0,4 sau 0,6 secunde. Faceți clic pe pictograma săgeată din spate pe tabla de artă S2 și trageți săgeata spre S1. Puteți utiliza aceleași setări pentru ca aceasta să fie consecventă. Acum, faceți clic pe S1 și jucați prototipul pentru a vedea magia. Veți observa o animație netedă atunci când cardul C2 este atins. Reglați setările de relaxare pentru a face animația mai ușoară.

09. Mergeți dincolo de elementele de bază

Adobe XD

(Imagine: © Vamsi Batchu)

Acum aveți o idee de bază despre cum să creați interacțiuni simple. De asemenea, puteți încerca să animați automat schimbarea culorilor elementelor, dimensiunilor și formelor pentru a vedea tranziții netede între pachetele multiple. În plus față de TAP și trageți declanșatoarele, există și alte declanșatoare pe care designerii le pot experimenta, cum ar fi utilizarea tastelor de tastatură și a tastelor de gamepad pentru a declanșa prototipuri pe o anumită cheie de tastă. Există, de asemenea, un mod în care puteți crea și de a proiecta prototipuri vocale pentru Alexa, Siri și așa mai departe, unde puteți atribui propoziții și le puteți vorbi pentru a obține răspunsuri specifice.

Citeste mai mult:

  • Cel mai bun constructor de site-uri web
  • Comenzile rapide Adobe XD pe care ar trebui să le cunoașteți (dar probabil nu)
  • Construiți prototipuri cu Adobe XD

să - Cele mai populare articole

Cum se scrie codul HTML mai repede

să Mar 1, 2026

(Credit Imagine: Viitor) Site-urile moderne necesită o mulțime de cod HTML. Lamele complexe cu mai multe vizualiză..

8 Reguli de aur de proiectare mobilă

să Mar 1, 2026

Designul mobil este o considerație relativ nouă, dar vitală. Doar un deceniu în urmă, proiectarea pentru web a însemnat pro..

vopsea un iepure răutăcios în acuarelă

să Mar 1, 2026

După ce am studiat zoologia, animalele și viața sălbatică au fost întotdeauna o mare pasiune pentru mine și nu mă obosesc niciodată de a le picta. Suntem norocoși să trăim în zon..

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

să Mar 1, 2026

Pentru a descărca fișierele însoțitoare pentru numărul mondial 3D 232, faceți clic pe linkul de mai jos Fiecare articol și..

Creați un caracter cu o poziție puternică în Photoshop

să Mar 1, 2026

Crearea de caractere de sex masculin exagerate este totul despre exagerare, împingând formele, distracția, mișcarea și unghi..

Vopsea un portret în uleiuri

să Mar 1, 2026

Învăţare Cum de a picta Un portret nu este ușor, dar există câțiva pași pe care îi puteți urma pentru a ..

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

să Mar 1, 2026

Suspinul este A. Tehnica de pictura Popular în Renaștere în care creați o redare tonală monocromă a unei luc..

Cum să obțineți modelul dvs. Zbrush în Maya

să Mar 1, 2026

Pentru asta Maya Tutorial. Îți voi arăta cum am primit acest model de legătură groaznic din Zbrush în Maya p..

Categorii