Greg Rog

19 iul 2017 · 8 min citit

Adobe Experience Design este o aplicație excelentă pentru UI/UX Designers - printre toate celelalte caracteristici, vă oferă posibilitatea atât de a proiecta, cât și de a prototipa interacțiunile și tranzițiile între planșe de lucru. Iată o listă cu sfaturile și trucurile mele preferate personale care vă vor permite să profitați de potențialul XD.

trucuri

Iată un videoclip de 40 de minute pe care l-am realizat și mai jos veți găsi o recapitulare:

Puteți crea machete simple și filme cu aplicația mobilă Adobe Comp pentru iOS și Android. Avantajele sunt prototiparea rapidă și intuitivă folosind degetul sau stiloul, cu o mulțime de gesturi predefinite. De asemenea, este ușor să creați un wireframe la o întâlnire cu clientul dvs. Chiar dacă Adobe Comp nu acceptă Adobe XD Export, puteți exporta în Illustrator și apoi copiați> lipiți în Adobe XD pentru forme vectoriale editabile.

Dacă doriți să transferați bitmap-uri între Photoshop și Adobe XD, pur și simplu faceți o selecție în Photoshop și Cmd + Shift + c (Copiați copiile combinate ale tot ceea ce este vizibil sub selecție), apoi Cmd + v în Adobe XD. Cu toate acestea, puteți exporta și straturi vectoriale din Photoshop făcând clic dreapta pe un strat și selectând „Copiere SVG” și lipind în XD.

În Adobe XD, puteți activa Grid pentru un plan de lucru utilizând comanda rapidă Cmd +. În mod implicit, grila este setată la 8 px, deci împingerea cu Shift + săgețile stânga/dreapta nu se potrivește în grilă. Faceți clic pe numele planșelor de lucru pentru ao selecta și schimbați valoarea implicită de 8 px la grila de 10 pixeli pentru a se potrivi cu ghidajul. Faceți acest lucru implicit pentru alte proiecte.

Nu există astfel de ghiduri ca în Photoshop în Adobe XD (până acum), dar ghidajele inteligente apar în timp ce trag și permit o poziționare mai bună a elementelor. Cu toate acestea, uneori, acest comportament implicit ar putea genera instantanee nedorite. Pur și simplu apăsați Cmd în timp ce trageți pentru a dezactiva temporar ghidajele inteligente.

Cel mai bine este să creați un plan de lucru separat pentru un ghid de stil, unde veți pune toate elementele de identitate, precum și culorile mărcii, tipografia, stilurile și comenzile comune, cum ar fi butoanele, intrările și pictogramele comune.

Pentru un ritm de tip vertical puteți folosi gridlover.net. Reutilizarea stilurilor de text în Adobe XD funcționează după cum urmează: selectați zona de text pe care doriți să o utilizați ca referință pentru stilurile din zona de text următoare, apoi creați una nouă și stilurile vor moșteni.

Puteți mări și micșora dimensiunea fontului trăgând micul oval din conturul inferior al textului. Câmpul de text trebuie să fie de tipul punctului, ceea ce înseamnă că trebuie creat cu un singur clic de mouse, fără a glisa câmpul de text.

Fiecare câmp de text poate conține substiluri cu proprietăți de text diferite, cum ar fi culoarea și greutatea.

Copiați orice text și lipiți-l direct în Adobe XD, iar câmpul de text va fi creat automat.

După ce ați experimentat înălțimea liniei fontului, vă recomandăm să resetați valoarea implicită. Nu este nevoie să o ghiciți - puneți doar 0 în linia de intrare înălțime și se va reseta.

Utilizați Shift + săgeată stânga/dreapta pentru a manipula valorile din intrări precum alfa sau culoare.

În caseta de dialog Selector de culori, utilizați valori hexazecimale pentru o potrivire precisă a culorilor. Puteți introduce o literă/număr, de ex. #f, pentru a obține rezultatul #ffffff sau utilizați combinații de 2 sau 3 - litere/numere pentru rezultate diferite.

Uneori este mai ușor și mai rapid să folosiți instrumentele Adobe XD implicite, cum ar fi forme și stilou, precum și operații booleene pe forme pentru a desena pictograme simple.

Pentru a converti textul în forme și a edita punctele vectoriale ale fiecărei litere, utilizați comanda rapidă Cmd + 8.

Puteți trage și plasa imagini direct pe pânza Adobe XD, din Finder sau chiar de pe un site web. De asemenea, puteți plasa o imagine pe orice formă pentru ao umple. În unele cazuri, ați putea prefera să mascați o parte a unei imagini. Amintiți-vă, masca respectivă este aplicată din stratul de deasupra și este nedistructivă.

Utilizați opțiunea Repeat Grid (Ctrl + r) pentru a multiplica un grup sau strat. Apoi extindeți mânerele orizontal sau vertical pentru a face copii. Puteți regla marginea în timp ce vă deplasați între copii.

Uneori puteți utiliza opțiunea Repeat Grid pentru operațiuni precum crearea pictogramelor. Amintiți-vă, puteți seta, de asemenea, marje negative pe formele opace pentru a obține modele sofisticate.

Adobe XD poate citi textul separat de returnare lăsat într-un .txt. fișier pe un câmp text. Funcționează cel mai bine atunci când aplicați text fals sau real la elementele de grilă repetate.

Uneori, lucrul cu Repeat Grid nu este neapărat optim. Există momente când doriți să utilizați grila pentru a copia elemente și a o elimina apăsând Cmd + Shift + g pentru editare ulterioară.

Simbolurile sunt elemente reutilizabile în Adobe XD. Puteți folosi multe cazuri de ex. un buton, apoi schimbați o instanță și toate celelalte se vor actualiza în consecință. Cel mai bine este să folosiți simboluri în ghidurile de stil.

Reglați proprietatea raza chenarului trăgând pe puncte mici lângă colțurile formei. Apăsați lung pe Alt pentru a regla raza unui singur colț.

Stratul blocat nu poate fi modificat, dar poate fi totuși selectat, stratul ascuns ar putea funcționa mai bine dacă doriți să selectați straturile pe care le acoperă. Ascundeți temporar un strat pentru a vă reorganiza și a lucra asupra straturilor care sunt dedesubt.

Folosiți numerele de pe tastatură pentru a regla opacitatea. Fie apăsați de ex. 5 pentru 50% sau 4 urmate de 7 pentru 47%.

Faceți dublu clic pe numele unui strat pentru a-l redenumi. Apăsați Tab pentru a trece la următorul strat fără a părăsi modul de editare. Apăsați Shift + Tab pentru a vă deplasa în sus.

Dacă doriți să aveți un control precis asupra fiecărui punct vectorial după câteva operații booleene pe forme, extindeți-le cu Cmd + 8.

Cmd + faceți clic pe un strat în timp ce vă aflați într-un grup, pentru al selecta direct.

Instalați aplicația gratuită iOS și conectați dispozitivul prin USB pentru a obține o previzualizare instantanee a lucrării dvs. Acesta este cel mai bun mod de a descoperi dacă culorile sau dimensiunile fontului sunt setate corect.

În Adobe XD puteți lucra atât la Design, cât și ulterior, puteți crea un prototip care poate fi făcut clic cu tranziții Artboards. Comutați între două moduri făcând clic pe Ctrl + Tab.

Puteți accesa iOS, Material și Windows UI Kit din meniul Fișier> Kituri UI din Adobe XD.

Puteți obține feedback instant de la alții partajând prototipurile dvs. - pur și simplu obțineți linkul și trimiteți-l colegilor dvs. de echipă sau utilizați Codul încorporat pentru încorporare pentru dribling sau Behance. Utilizatorii care primesc linkul pot posta comentarii și le pot fixa la locul exact de pe prototip.