Adobe experiențe de design Experiență, sfaturi și tehnici

01 din 07

Adobe experiențe de design Experiență, sfaturi și tehnici

Când Adobe a introdus Designul de Experiență ca Previzualizare Publică , compania a realizat în același timp două fapte destul de uimitoare. În primul rând, au plasat un spațiu pe piața de software de prototipuri emergente. În al doilea rând, au creat o oportunitate pentru utilizatori de a juca cu o "muncă în curs" și le permite utilizatorilor să influențeze acest progres. Acum că aplicația a fost disponibilă pentru câteva luni, m-am gândit că ar fi un moment bun pentru a împărtăși câteva trucuri, sfaturi și tehnici de design Experiență.

Dar, mai întâi, s-ar putea să te întrebi ce se înțelege prin software-ul prototip. Printre principalii jucători din acest spațiu se numără Proto.io, Principiul, UXPin, Atomic.io , Experiența în Design și InVision. Spre deosebire de aplicațiile cum ar fi Sketch 3, Photoshop și Illustrator, în care sunt produse designuri statice, acești editori grafici introduc interactivitate, mișcare și alte caracteristici comune în spațiul modern de mobil și web design.

Odată cu creșterea mobilității și a focalizării inevitabile a laserului asupra utilizatorului, nu mai este suficient pentru un designer să biciuiască câteva schițe, să tragă împreună câteva compase și apoi să elibereze proiectul sau să-l încarce pe un server web. Fluxul de lucru UI / UX a schimbat fundamental lucrurile. Fiecare etapă a procesului, de la identificarea utilizatorului, schițe, cadre de tip wireframe, mockups și prototipuri, este acum supusă unei testări extinse a utilizatorilor.

Aceasta este ultima etapă - prototiparea - în care punctele de durere sunt descoperite și fixate înainte ca proiectul să treacă la producția finală. Aici interactivitatea, mișcarea, tranzițiile ecranului și plasarea a tot ceea ce este pe ecran sunt atât de importante. Problemele și problemele nu pot fi prezentate simplu ca o imagine statică sau explicate verbal. La urma urmei, aceste produse sunt pentru oamenii reali. Mai degrabă decât să mișteți toate acestea la cod, procesul de prototipare este din ce în ce mai mult realizat de software-ul grafic conceput doar în acest scop. Este mai ușor să remediați o greșeală, să înlocuiți o imagine, să rescrieți un anumit text, să mutați un buton și așa mai departe folosind un editor vizual, decât să rescrieți și să depanați codul în mod constant.

De fapt, acest software a devenit o componentă cheie în mediul de proiectare și dezvoltare de astăzi "Rapid Prototyping".

Cu asta a spus, hai sa ne distram cu Experienta Design.

02 din 07

Creați un plan de destinație cu un cerc simplu în Adobe Experience Design

Un aspect curat al XD este folosirea instrumentelor de desen vectorial. Nu găsiți o pictogramă? Nici o problema. Rulați-vă propriul. Iată cum:

1. Selectați instrumentul Elipsă și, cu tastele Opțiune / Alt-Shift apăsate, desenați un cerc.
2. Cu cercul selectat, setați culoarea de umplere la FF0000 și granița la "none" din proprietăți.
3. Faceți dublu clic pe cerc pentru a afișa punctele de ancorare. Trageți ancora inferioară în jos.
4. Faceți dublu clic pe punctul de ancorare selectat și curbele sunt înlocuite cu linii.
5. Desenați un alt cerc mic, cu o umplutură albă și fără stofe. Mutați-o în poziție și selectați știftul și cercul. În panoul Aliniere din partea de sus a proprietăților, faceți clic pe butonul Centru orizontal și este creat PIN-ul.

03 din 07

Creați o blur de fundal în Adobe Experience Design

Este un lucru obișnuit să aveți text sau alt conținut pe o imagine de fundal. Problema aici este imaginea, de cele mai multe ori, excesul de conținut de deasupra ei. O modalitate de a rezolva această problemă este de a bloca imaginea de fundal. Puteți blur imaginea în Photoshop sau în alte aplicații de editare a imaginilor, dar acest lucru este oarecum ineficient, mai ales că XD poate gestiona acum această sarcină pentru dvs. Iată cum:

1. Creați un nou tablou de bord și adăugați imaginea de fundal.
2. Selectați Instrumentul dreptunghi și desenați un dreptunghi peste imagine. Cu dreptunghiul selectat, setați Fill to White și Stroke la None.
3. Cu dreptunghiul selectat, selectați Fundal Blur în panoul proprietăților. Cele trei glisoare sunt Suma Blur, Luminozitate și Opacitate. Iată ce fac ei:

• Blur Amount: reglează estomparea imaginii sub formă. Valoarea maximă este +50.
• Luminozitate: reglează culorile și umbrele din imagine. Valoarea minimă este -50, iar valoarea maximă este de +50.
• Opacitate: Afectează transparența formei și vizibilitatea imaginii sub formă. Valorile variază de la 0% la 100%.

Dacă doriți să "schimbați lucrurile", schimbați culoarea formei și redați-o cu valoarea Opacitate pentru a schimba "aspectul" imaginii.

04 din 07

Creați un Scrim în Adobe Experience Design

O problemă comună de proiectare este că elementele elementelor de interfață trebuie să fie o culoare comună, dar sunt pierdute atunci când sunt plasate pe o imagine de fundal sau o culoare solidă. Soluția este o scrimă. Un scrim este un gradient oarecum opac plasat între elementul de interfață și fundal. Acest lucru este ușor de realizat în XD. Iată cum:

1. Creați tabloul dvs. de arhitectură în XD, adăugați o imagine și copiați și inserați elemente de interfață din Kitul UI corespunzător - File> Open UI Kit ... - în tabloul de bord. În imaginea de mai sus, fotografia face ca bara de stare și bara de aplicații să fie greu de văzut.
2. Selectați Instrumentul dreptunghi și extrageți un dreptunghi. În panoul Proprietăți, selectați Umplere și selectați Gradient din meniul derulant din Color Picker. Setați culorile gradientului la alb-negru. Setați valoarea A - Opacitate - la 60%, iar valoarea White A la 0%.
3. Cu dreptunghiul selectat, selectați Obiect> Aranjare> Trimitere înapoi . Elementele de interfață sunt vizibile acum pe imagine.

05 din 07

Creați un avatar Avatar în Adobe Experience Design

Un model comun de design se găsește în aplicațiile Chat unde oamenii vorbesc unul cu celălalt, iar imaginea difuzorului apare pe ecran. Aceste avatare sunt de obicei imagini care au fost mascate. Este ușor să realizați acest lucru în XD. Iată cum:

1. Începeți cu o imagine și un cerc sau altă formă pe tabloul de bord. Puteți completa cercul cu orice culoare. Ceea ce nu trebuie să faceți este să adăugați o culoare accidentală. Acesta va disparea atunci când creați efectul, deci de ce deranjez. Dacă aveți nevoie să mutați cercul, copiați-l în clipboard.
2. Deplasați cercul pe imagine și selectați atât imaginea, cât și cercul. Cu obiectele de bot selectate, selectați Object> Mask with Shape . Când eliberați mouse-ul, Avatar este creat. De acolo puteți să-l redimensionați.
3. Dacă trebuie să adăugați un accident vascular cerebral, lipiți cercul așezat în clipboard pe tabloul de bord. Cu copia selectată, opriți umplerea în Proprietăți și adăugați o culoare și o lățime a stroke. Pentru a le alinia, selectați ambele obiecte și faceți clic pe butoanele Centru de Aliniere din opțiunile Aliniere din partea de sus a panoului de proprietăți.
4. Dacă doriți să mutați fotografia în mască, faceți dublu clic pe mască. Aceasta va afișa imaginea și forma mască. Faceți clic pe imagine și trageți-o în poziție. Când eliberați mouse-ul, imaginea va fi în noua sa poziție în interiorul măștii.

06 din 07

Joacă cu artboard-urile de design din experiența Adobe

Tablourile de design Experience Experience nu sunt doar acolo pentru ca dvs. să plasați conținut. Și ei pot fi manipulați. Iată câteva lucruri pe care le puteți face:

1. Dacă aveți nevoie de versiunile de pe Landscape și Portrait ale unui tablou de artă, duplicați tabloul de bord și, cu dublul selectat, faceți clic pe butonul peisaj din panoul Proprietăți. Tabloul de bord se va schimba în orientarea peisajului. Dacă artboard-ul conține conținut, faceți clic pe numele Artboard-ului și proprietățile Artboard vor apărea în panoul Properties.
2. Pentru a adăuga o culoare personalizată în Artboard și proiectul pentru aceasta, selectați Artboard și faceți clic pe cipul Color fill în secțiunea Appearance din panoul Properties. Introduceți valoarea hexazecimală pentru culoare și faceți clic pe semnul +. Culoarea va fi adăugată ca o culoare personalizată. Pentru a aplica acea culoare în altă parte, selectați un obiect și faceți clic pe cipul Custom Color pentru a aplica culoarea.
3. Artboardurile pot fi făcute vertical. Pentru a face acest lucru, selectați tabloul de bord și schimbați înălțimea acestuia fie pe Panourile de proprietăți, fie prin glisarea în partea de jos a tabloului de bord în jos. În zona derulantă a panoului de proprietăți, selectați vertical din meniul pop-up și introduceți înălțimea ferestrei de vizualizare pentru ecran. Acea linie albastră punctată vă arată partea de jos a ferestrei de vizualizare. Pentru a le testa, faceți clic pe butonul Redare și derulați. Pentru a dezactiva deplasarea, selectați Nici una din fereastra derulantă Derulare.

07 din 07

Editați un kit UI mobil în Adobe Experience Design

Experiența Design conține un Kit UI pentru dezvoltarea iOS, Android și Windows UI's. Când le deschizi pentru prima oară, poți să crezi că sunt destul de bine stabilite. Nu prea - fiecare din piesele din aceste truse este complet editabil. Să aflăm prin construirea unei platforme Android.

1. Începeți prin selectarea instrumentului Artboard și selectând Android Mobile în secțiunea Google din panoul Proprietăți .
2. Selectați Fișier> Deschideți UI Kit> Material Google . Aceasta deschide Kitul UI de design material. Selectați Magnifierul și marcați tabloul de bord al ghidurilor de ecran . Îmi place să încep cu acest lucru pentru că mi-a oferit ghidurile pentru plasarea corectă pe ecran a elementelor de interfață. Dacă faceți clic pe unul dintre barele albastre veți vedea că este blocat. Faceți clic pe blocarea atașată fiecăruia pentru ao debloca . Marchează tabloul de bord și copiați selecția în clipboard. Reveniți la documentul dvs. și inserați ecranul în tabloul de bord.
3. Faceți clic o dată pe bara de aplicații din partea de sus a tabloului de bord. Observați cum îl puteți selecta. Selectați Obiect> Aranjare> Atingeți în față. Selecția dvs. este acum deasupra Ghidurilor ecranului. Acest lucru ar trebui să vă spun că fiecare dintre elementele de pe ecran poate fi editat.
4. Faceți dublu clic pe bara de stare din partea superioară, iar în panoul Proprietăți și pe Culoarea de umplere la 455A64 . Faceți dublu clic pe bara de aplicații și setați umplerea acesteia la 607D8B. Acest lucru ar trebui să vă spun că fiecare element dintr-un kit UI poate fi editat pentru a îndeplini specificațiile de culoare ale proiectului.
5. Cum rămâne cu icoanele? Iată cum puteți schimba culoarea. Faceți dublu clic pe inimă pentru ao selecta. Dacă vă uitați la panoul Proprietăți, puteți presupune că nu puteți edita selecția. Nu chiar. Faceți dublu clic pe inimă pentru încă o dată . Proprietățile se deschid și modificați culoarea de umplere la FF0000. Repetați acest truc dublu-clic pentru pictogramele rămase și textul.