Informație verificată de Justyn Newman

Adobe XD (Adobe Experience Design) este o aplicație intuitivă avansată de design pentru interfețe și experiențe de utilizator, care a fost creată de Adobe pentru a le permite persoanelor creative să proiecteze, să creeze prototipuri și să partajeze proiecte legate de experiența și interacțiunea utilizatorului pe site-uri, aplicații și rețele de socializare.

Atunci când proiectați site-uri, aplicații mobile, interfețe de joc, șabloane de email și interfețe vocale, puteți trece rapid de la concept la crearea de prototipuri și partajare. Aplicația include funcții care vă permit să realizați aceste lucruri cu ușurință. În plus, o puteți folosi gratuit.

Urmați instrucțiunile de descărcare de mai jos pentru a folosi gratuit timp de 7 zile abonamentul Adobe XD.

Descărcați gratuit Adobe XD!

Cum să descărcați și instalați gratuit Adobe XD pe PC

  1. Faceți click aici pentru a deschide pagina de descărcare Adobe XD într-o filă nouă.
  2. Derulați până la sfârșitul paginii și faceți clic pe butonul de încercare gratuită
    Probă gratuită Adobe XD
  3. Adobe vă va oferi două opțiuni:
    • Descărcați Adobe XD, care include prototipuri partajate nelimitate și specificații de design, Adobe Portfolio, Adobe Fonts și 100 GB de stocare.
    • Descărcați întreaga colecție de aplicații Creative Cloud, care include peste 20 de programe, cum ar fi Photoshop, InDesign, Premiere Pro și multe altele. Alegeți pachetul preferat și apăsați butonul de Start Free Trial. În acest exemplu, descărcăm doar Illustrator, dar instrucțiunile sunt aceleași în ambele cazuri
      Probă gratuită XD
  4. ntroduceți o adresă de e-mail validă și pagina de plată se va deschide. Deși aceasta este o perioadă de încercare gratuită, va trebui să introduceți informațiile de plată pentru a activa perioada de încercare. Nu vi se va percepe nicio plată până la sfârșitul perioadei de încercare gratuită.
    Adobe XD free trial
  5. Dacă aveți deja un cont Adobe, puteți să vă autentificați acum. În caz contrar, creați o parolă sigură și apăsați butonul Continuă.
  6. Adobe va confirma că metoda de plată este validă, după care aplicația Creative Cloud se va descărca pe computerul dumneavoastră.
  7. Când descărcarea fișierului este completă, deschideți fișierul și introduceți parola dumneavoastră.
  8. Creative Cloud se va instala pe computerul dumneavoastră.
  9. Odată ce Creative Cloud este complet instalat, instalarea Adobe XD va începe automat. Dacă ați ales să descărcați întreaga colecție de aplicații Creative Cloud, acestea se vor instala una câte una.Odată ce Creative Cloud este complet instalat, instalarea Adobe XD va începe automat. Dacă ați ales să descărcați întreaga colecție de aplicații Creative Cloud, acestea se vor instala una câte una.

Descărcați gratuit Adobe XD!

Prezentare generală Adobe XD

Mulți utilizatori ai suitei Adobe așteptau ca dezvoltatorul să creeze un program care să conțină instrumente intuitive pentru a crea grafică potrivită pentru site-uri, aplicații web și aplicații mobile moderne. Adobe XD oferă această experiență. Programul este o noutate în oferta furnizorului Adobe Inc. Acesta combină mulți ani de experiență și instrumente și caracteristici din aplicațiile Adobe anterioare pentru a oferi cea mai bună experiență de design UI și UX.

Ca parte a Creative Cloud, este ușor să partajați lucrările și să importați fișiere din alte programe Adobe, precum Photoshop, Premiere Pro și Illustrator.

Adobe XD este software-ul perfect dacă doriți instrumente grafice care vă permit să creați cu ușurință cele mai bune interfețe de utilizator pentru site-uri web, aplicații, jocuri și multe altele. Pe lângă dezvoltarea de concepte și design-uri, aplicația vă permite să creați prototipuri și să vă împărtășiți ideile cu alții, chiar și în deplasare.

Deși XD este în mod obișnuit un software premium, puteți să vă abonați la un plan Starter gratuit. Acest plan are limitări, cum ar fi numărul de documente pe care le puteți partaja sau câte prototipuri și ieșiri puteți produce.

Cel mai bine este să începeți cu încercarea gratuită de 7 zile care vă oferă acces complet, fără limite. Apoi, puteți decide dacă doriți să continuați cu planul Starter sau să vă abonați la versiunea completă la sfârșitul săptămânii.

Caracteristici Adobe XD

Unul dintre marile avantaje ale utilizării XD este că, dacă aveți nevoie de o unealtă specifică, o puteți încărca întotdeauna din orice altă aplicație Creative Cloud. Există și opțiunea de a importa fișiere de imagine, cum ar fi jpg, svg, png și gif. Cu toate acestea, XD nu are capacitatea de a încărca fișiere video sau gif animate.

Componente

Componentele sunt elemente reutilizabile pe care le puteți crea și folosi pe parcursul întregului proiect. Veți economisi timp și efort și veți păstra consecvența designului. De exemplu, puteți crea o componentă pentru un buton care include textul, stilul și culoarea acestuia, pentru a-l putea adăuga cu ușurință în diferite părți ale proiectului.

Pentru a crea o componentă, selectați obiectul sau grupul de obiecte pe care doriți să-l transformați într-o componentă, apoi faceți click pe butonul Create Component din bara de instrumente. Dați un nume componentei și salvați-o. Pentru a utiliza componenta în design, trageți-o din panoul Components în spațiul de lucru.

Dispozitivul de aliniere automată a conținutului

Content Aware Layout-ul inteligent îți permite să lucrezi fără a fi nevoie să te preocupeți de alinierea perfectă a tuturor componentelor diferite. Adobe XD va muta automat obiectele pentru a crea spații uniforme atunci când adăugați, eliminați sau redimensionați obiectele. Pentru a activa Content Aware Layout, utilizați instrumentul de selecție pentru a selecta două sau mai multe straturi și apoi faceți clic pe butonul Make Component. Apoi, activați Content Aware Layout, iar dimensiunea de umplere se va ajusta în funcție de straturile din jur fără a distorsiona imaginile sau casetele de text.

Redimensionare adaptabilă și restricții

Redimensionarea adaptabilă și restricțiile vă permit să creați designuri potrivite pentru diferite dispozitive și ecrane. Nu vă mai faceți griji cu privire la crearea de prototipuri separate pentru fiecare dispozitiv; designurile vor arăta întotdeauna perfect.

Pentru a utiliza redimensionarea adaptabilă și restricțiile, trebuie să creați o componentă principală. Aceasta este o componentă care poate fi utilizată pentru a crea mai multe instanțe. Pentru a o crea, selectați obiectul sau grupul de obiecte pe care doriți să-l transformați în componenta principală și faceți click pe butonul Create Master Component din bara de instrumente.

După crearea componentei principale, puteți folosi redimensionarea adaptabilă și restricțiile. Selectați componenta principală și faceți click pe butonul Responsive Resize din bara de instrumente. Alegeți tipul de redimensionare adaptabilă pe care doriți să-l utilizați. De asemenea, puteți specifica marginile și padding-ul componentei principale.

Tranziții temporizate

Tranzițiile temporizate vă permit să creați animații care apar în anumite momente. Acestea sunt utile pentru crearea de prototipuri care arată cum vor interacționa utilizatorii cu un design într-un interval de timp. Pentru a crea o tranziție temporizată, selectați obiectul sau grupul de obiecte pe care doriți să-l animați și faceți click pe butonul Transition din bara de instrumente. Alegeți tipul de tranziție pe care doriți să-l folosiți. De asemenea, puteți specifica durata tranziției și ora la care ar trebui să apară.

Tranzițiile temporizate pot fi utilizate în numeroase scopuri, cum ar fi crearea de animații încorporate, tutoriale interactive și demonstrații pentru produse.

Linkuri ancoră

Linkurile ancoră vă permit să conectați între ele diferite părți ale prototipului. Acestea sunt utile pentru a crea fluxuri complexe pentru utilizatori sau pentru a le permite acestora să navigheze între diferite ecrane. De exemplu, puteți utiliza linkuri ancoră pentru a crea prototipul unui site cu mai multe pagini sau al unei aplicații mobile cu mai multe ecrane.

Pentru a crea un link ancoră, selectați obiectul sau grupul de obiecte la care doriți să vă conectați și faceți click pe butonul Anchor Link din bara de instrumente. După crearea linkului ancoră, acesta poate fi conectat la un alt obiect sau grup de obiecte din prototip. Trageți linkul ancoră din panoul Anchor Links către obiectul sau grupul de obiecte la care vreți să vă conectați.

Transformările 3D

Cu funcția de transformare 3D, puteți duce designul UX la nivelul următor. Aceasta vă permite să rotiți obiectele, să adăugați adâncime și să schimbați perspectiva designului dumneavoastră. Instrumentele 3D intuitive sunt destul de ușor de utilizat și vă oferă oportunitatea de a afișa designul cu o realitate pe care alte programe Adobe nu o pot oferi. Transformarea 3D este extrem de utilă pentru designurile AR/VR.

Suprapuneri

Suprapunerile vă permit să adăugați informații suplimentare în prototip, fără a crea un ecran nou. Această opțiune este utilă pentru a oferi feedback utilizatorilor sau pentru a-i ajuta să înțeleagă cum să folosească designul. Puteți crea sfaturi pentru utilizarea instrumentelor, mesaje de eroare sau ferestre de dialog modale.

Pentru a crea o suprapunere, faceți click pe butonul Overlay din bara de instrumente. Adăugați conținutul care vreți să apară în suprapunere. De asemenea, puteți specifica poziția suprapunerii și ora la care aceasta ar trebui să apară.

Mascare și efecte

Mascarea și efectele vă permit să creați modele complexe și atractive din punct de vedere vizual. Mascarea permite ascunderea anumitor părți ale unui obiect, iar efectele permit adăugarea de umbre, străluciri și alte îmbunătățiri vizuale.

Pentru a masca un obiect, selectați-l și alegeți instrumentul Shape. Desenați o formă peste partea obiectului pe care vreți să o ascundeți. Pentru a aplica un efect, selectați obiectul și faceți click pe butonul Effects din bara de instrumente. Alegeți efectul dorit și reglați setările după preferințe.

Aceste instrumente sunt folosite pentru a crea o mare varietate de efecte, cum ar fi butoanele personalizate, trecerile cu mouse-ul și tranzițiile animate.

Creați și partajați prototipuri

Una dintre cele mai bune lucruri despre Adobe XD este posibilitatea de a crea un prototip al design-ului. Nu numai că acest lucru vă oferă oportunitatea de a testa și de a vă asigura că totul funcționează și arată grozav, dar puteți partaja ușor design-ul cu clienții, colegii sau profesorii.

Prototipizarea este o caracteristică cheie pentru crearea design-urilor interactive, cum ar fi formularele sau butoanele, și pentru testarea modului în care diferite panouri de design se conectează și interacționează între ele.

Adobe XD dispune de mai multe instrumente concepute special pentru acest program, cum ar fi Auto Animate. Acest instrument vă permite să proiectați animații, tranziții și design-uri care se adaptează la dimensiunea ecranului sau la dispozitivul pe care sunt vizualizate prin scalarea diferitelor obiecte sau prin selectarea unui obiect care rămâne blocat într-un loc atunci când se derulează conținutul.

Creați urmărire pentru diferite tipuri de implicare a utilizatorilor

Pe lângă design, înțelegerea modului în care un utilizator interacționează cu designul dvs. este unul dintre cele mai importante aspecte ale proiectului. Adobe XD are instrumentele necesare pentru a vă permite să vedeți exact cum răspund utilizatorii datorită mai multor declanșatoare și intrări diferite. În funcție de proiectul finalizat, puteți utiliza orice, de la declanșatoare de bază, cum ar fi Apăsare sau Tragere, până la opțiuni mai avansate, precum voce, utilizarea unui controler de jocuri Bluetooth sau diferite taste.

Prototipuri vocale

Acest instrument vă permite să creați prototipuri care pot fi controlate prin voce. Este un nou mod de a testa și valida interfețele vocale, fără a scrie vreun cod. Veți economisi timp și efort și veți obține feedback de la utilizatori rapid și des.

Pentru a utiliza instrumentul, trebuie să creați un prototip în XD. Apoi, puteți adăuga comenzile vocale. Pentru a face acest lucru, faceți click pe butonul Voice Prototyping din bara de instrumente și selectați obiectul sau grupul de obiecte căruia vreți să-i adăugați o comandă vocală. După selectarea obiectului sau a grupului de obiecte, puteți înregistra comanda vocală.

După înregistrarea comenzii vocale, testați-o făcând click pe butonul Preview. Pentru a previzualiza prototipul pe un dispozitiv mobil, utilizați aplicația mobilă XD.

Exportarea fișierelor Adobe XD în HTML

Această funcție vă permite să exportați designurile XD în HTML. Veți economisi timp și efort, deoarece nu va mai trebui să convertiți manual designurile sau prototipurile.

Pentru exportul în HTML, selectați planșa dorită și mergeți la File > Export. În caseta de dialog Export, selectați HTML din meniul derulant Format și faceți click pe Export. XD va genera un fișier HTML și un fișier CSS. Fișierul HTML poate fi deschis în browser pentru a vizualiza designul.

Funcția de export în HTML este utilă mai ales pentru crearea de pagini web și aplicații. De asemenea, puteți partaja designurile cu dezvoltatorii, care vor folosi fișierele HTML și CSS pentru a crea site-ul sau aplicația.

Pentru a exporta un design, urmați pașii de mai jos:

    1. Creați designul paginii web în XD.
    2. Apoi, selectați planșa pe care vreți să o exportați și mergeți la File > Export.
    3. În caseta de dialog Export, selectați HTML în meniul derulant Format și faceți click pe Export. XD va genera un fișier HTML și un fișier CSS.
    4. Încărcați fișierele HTML și CSS pe server.
    5. Deschideți pagina web în browser pentru a vizualiza designul.

Funcția de export în HTML este un instrument puternic care vă ajută să creați pagini web și aplicații rapid și fără efort. În plus, este o modalitate excelentă de a împărtăși designurile cu dezvoltatorii.

Extindeți puterea lui XD cu plugin-uri

Adobe XD are o gamă destul de puternică de capacități, dar nici chiar Adobe nu a putut include totul într-un singur pachet. De aceea, este compatibil cu plugin-uri terțe. Puteți extinde capacitățile dintr-un punct de vedere tehnic sau adăuga combinații diferite de culori care nu sunt disponibile prin schemele de culori încorporate. Există sute de plugin-uri gratuite și plătite prin abonament, care pot fi încărcate cu ușurință în XD, fără a fi nevoie de cunoștințe tehnice sau expertiză.

Ușurința în utilizare

Pentru o experiență cât mai bună, este necesară o anumită experiență în dezvoltarea sau designul de aplicații. În prezent, pentru designeri și dezvoltatori, programul este destul de ușor de utilizat, mai ales dacă au experiență anterioară cu alte produse Adobe.

Dacă doriți să învățați să utilizați XD în mod corespunzător, puteți accesa o secțiune extinsă „Învață” prin aplicație sau prin site-ul Adobe.
Învață Adobe XD

Ghiduri pas cu pas pentru învățarea XD-ului

Aceste ghiduri pas cu pas te vor ajuta să parcurgi procesul de dezvoltare și design. Vei învăța cum să-ți configurezi stația de lucru, ce fac diferitele instrumente, cum să creezi obiecte 3D, să proiectezi prototipuri activate vocal sau prototipuri normale, cum să colaborezi cu alții și multe altele.

Odată ce începi să folosești XD, vei vedea că este un program destul de ușor de stăpânit, deoarece are o focalizare singulară. Cu actualizările făcute în ultima versiune a XD, cum ar fi Auto Animate și îmbunătățirea Content Aware Layout, multe dintre ajustările mai mici de pe tabla de desen apar automat, ceea ce face utilizarea programului chiar și mai ușoară.

Interfață

Când începeți un proiect nou în XD, puteți alege dacă doriți ca dimensiunea spațiului de lucru să fie dimensionată ca un iPhone, desktop, poveste Instagram sau dimensiune personalizată.
Dimensiunea documentului pentru noi proiecte XD

Alegeți dimensiunea documentului

După ce ați ales dimensiunea proiectului dorit, va apărea o stație de lucru cu instrumente pe stânga și elemente de stil pe dreapta.
Interfață Adobe XD

Cu elementele de pe partea dreaptă, poți ajusta:

  • Stilul: Adaugă opțiuni de stilizare CSS și altele pentru a crea designul perfect
  • Designul: Alege din diferite aspecte, grile și moduri susținute de interfața utilizator API-urilor.

Cu aceste setări, poți ajusta totul în legătură cu modul în care obiectele apar în stația ta de lucru. Poți rotunji colțurile, schimba culorile, seta diferite tipuri de fonturi, vizualiza cum ar arăta pagina cu un design responsiv și multe altele.

Pe bara de instrumente din stânga vei găsi toate uneltele principale, cum ar fi adăugarea de forme, linii, texte și zoom. Fiecare instrument are o combinație de taste, iar odată ce te familiarizezi cu ele, vei vedea cât de mult poți lucra mai rapid.

Compatibilitate

Versiunea completă a Adobe XD este disponibilă numai pentru PC și Mac, cu condiția să îndeplinească cerințele minime de sistem detaliate mai jos.

Există aplicații XD pentru Android și iOS, dar acestea permit doar previzualizarea designului și testarea prototipului. Veți avea întotdeauna acces la cea mai recentă versiune a proiectului prin biblioteca Creative Cloud. Cu toate acestea, nu există instrumente de editare, iar toate modificările trebuie făcute pe desktop.

Există două modalități de a previzualiza proiectele XD:

  1. Previzualizare în timp real cu o conexiune USB: Conectați dispozitivele mobile la computerul care rulează Adobe XD. Veți obține o privire în timp real asupra prototipurilor și design-urilor, iar toate modificările pot fi vizualizate pe dispozitivul mobil în timp real.
  2. Încărcarea documentelor cloud: Obțineți acces instant la toate documentele XD salvate ca document cloud în contul dvs. Creative Cloud.

Cerințele de sistem

În plus față de specificațiile necesare ale calculatorului, XD funcționează numai cu ultimele versiuni ale următoarelor browsere.

  • Chrome: Windows 7+ și macOS 10.13+
  • Firefox: Windows 7+ și macOS 10.13+
  • Edge: Windows 10+
  • Safari: macOS 10.13+

XD nu suportă vizualizarea specificațiilor de design partajate pe browserele mobile.

Windows

Sistem de operare Windows 10 (64-bit) și versiuni ulterioare
Afișaj Rezoluție de 1280×800 și cel puțin un ecran de 13 inch
RAM 4 GB
Intrare prin atingere și cu peniță Funcționează cu caracteristicile native de intrare prin atingere și cu peniță din Windows
Stocare Este recomandat să utilizați documente cloud din Creative Cloud și nu fișiere sincronizate din Creative Cloud sau alte servere de stocare.

Mac

Sistem de operare macOS 10.15 (Catalina) sau mai recent
Afișaj Rezoluție de 1400×900 și cel puțin un ecran de 13 inci. Este recomandat să aveți un ecran
RAM 4 GB
Stocare Cel mai bine este să utilizați documente cloud din Creative Cloud și nu fișiere sincronizate din alte servere de stocare Creative Cloud.

Accesul la internet este necesar atât pentru Windows, cât și pentru Mac în timpul instalării și înregistrării și pentru a accesa anumite biblioteci și funcții. Puteți vizualiza prototipuri cu capacități vocale doar atunci când sunteți conectat la internet.

iOS: Compatibil cu toate iPad-urile și iPhone-urile de 64 de biți care rulează iOS 14.0 și versiuni ulterioare.

Android: Adobe a testat XD pe Samsung Galaxy S10 & S20 și Google Pixel 2 & 4. Pe baza acestor teste, ar trebui să fie compatibil cu orice dispozitiv Android 9.0 și mai nou cu Open GL ES 2,0.

Alte programe de editare de la Adobe

  • Adobe Photoshop: Photoshop este cel mai bun program de editare pentru imagini și fotografii digitale. Include o colecție excelentă de instrumente care facilitează schimbarea trăsăturilor faciale sau eliminarea articolelor nedorite dintr-o imagine, opțiuni creative de tipografie și multe altele.
  • Adobe Illustrator: Adobe Illustrator funcționează pe calculatoarele cu Windows și Mac. Este un editor important de grafică vectorială și un program de design folosit de mulți experți pentru a crea grafică web și mobilă, sigle, pictograme, clipuri grafice și altele.
  • InDesign: Este un instrument de publicare pentru experți și este ideal pentru crearea de conținut pentru ziare, cărți, reviste și alte materiale tipărite. Aplicația are numeroase funcții utile, de la stilizarea textului și ajustarea imaginilor, până la opțiunile de tipărire avansate. Aplicația se integrează perfect cu alte instrumente Adobe Creative Cloud, precum Photoshop și Illustrator, ceea ce îmbunătățește procesul de design.
  • Premiere Pro: Platforma de editare video de top de la Adobe este folosită pentru filme, producții de televiziune și diverse segmente video. Aplicația are funcții avansate pentru îmbunătățirea filmărilor, optimizarea culorilor și adăugarea de efecte speciale. În plus, integrarea cu celelalte aplicații Adobe Creative Cloud, cum ar fi After Effects și Audition, simplifică crearea de videoclipuri complexe de calitate profesională.

Cum să dezinstalați Adobe XD

Dacă perioada de probă s-a încheiat și nu mai doriți să utilizați Adobe XD sau să treceți la abonamentul de bază, îl puteți elimina din calculator urmând acești pași simpli:

  1. Tastați Add or Remove Programs în bara de căutare din Windows și faceți click pe tasta Enter.
    Screenshot of uninstalling Adobe XD on Windows
  2. Identificați Adobe XD în lista de programe instalate și faceți clic pe butonul Uninstall.
    Screenshot of uninstalling Adobe XD
  3. Expertul de dezinstalare se va deschide. Confirmați că doriți să eliminați programul și acesta va fi șters din calculator.

Alternativ, puteți accesa contul Creative Cloud Desktop. Faceți click pe cele trei puncte din colțul din dreapta sus (lângă Adobe XD), apoi faceți clic pe Uninstall.
Screenshot of Creative Cloud Desktop

Cum să dezinstalați Adobe XD din Creative Cloud Desktop

Programul va fi eliminat de pe PC.

Întrebări frecvente

Adobe XD este gratuit?

Deși nu există o versiune gratuită Adobe XD, urmați ghidul pas cu pas de mai sus și vă voi arăta cum să profitați de perioada de probă de 7 zile. Veți avea suficient timp pentru a finaliza câteva proiecte sau pentru a testa software-ul și a decide dacă este potrivit pentru nevoile voastre înainte de a achiziționa un abonament.

Cum puteți exporta fișiere Adobe XD în HTML?

Funcția de export în HTML este ușor de utilizat și le permite creatorilor să-și convertească designurile în HTML. Alegeți planșa pe care vreți să o exportați și mergeți la File > Export. În caseta de dialog Export, selectați formatul HTML. După export, XD va genera un fișier HTML și un fișier CSS. Pentru mai multe informații despre exportarea fișierelor XD în HTML, consultați ghidul cu instrucțiuni pas cu pas.

Cum puteți decupa imagini în Adobe XD?

Decuparea imaginilor în Adobe XD este un proces simplu. Pentru a decupa o imagine, selectați-o și faceți click pe butonul Crop din bara de instrumente. Apoi, trageți de mânerele din colțurile dreptunghiului de decupare pentru a alege zona pe care vreți să o păstrați. De asemenea, puteți ține apăsată tasta Shift pentru a menține raportul de aspect al imaginii. Dacă sunteți mulțumiți, apăsați tasta Enter pentru a decupa imaginea.

Puteți exporta un fișier XD în WordPress?

Pentru a converti un design Adobe XD în WordPress, îl puteți exporta în HTML și CSS sau puteți utiliza un plugin.

Pentru exportul în HTML și CSS, deschideți designul în XD și selectați planșa pe care vreți să o exportați. Apoi, mergeți la File > Export și selectați HTML în meniul derulant Format. Faceți click pe Export pentru a genera fișierele HTML și CSS. Încărcați aceste fișiere pe site-ul WordPress.

Pentru cea de-a doua variantă, instalați și activați un plugin, cum ar fi XD to WordPress sau Xporter. Apoi, accesați setările pluginului și selectați fișierul XD dorit. Faceți click pe Convert pentru a genera o pagină nouă sau o postare WordPress cu designul ales.

Descărcă Adobe XD acum!