Cum se utilizează Redimensionarea și constrângerile responsive în Adobe XD

În acest tutorial vom explora câteva noi caracteristici în Adobe XD, și anume "redimensionarea și constrângerile". Aceste caracteristici, adăugate în septembrie 2018, permit o scalare reală a modelelor din cadrul Adobe XD, oferindu-ne capabilități de design web cu adevărat receptive. 

Pentru a demonstra aceste noi caracteristici, voi folosi kitul de bare Bones iOS disponibil pe Envato Elements:

Bones IOS Wireframe Kit

Priveste filmarea

Redimensionarea înainte de actualizarea XD

Înainte ca Adobe XD să introducă noile caracteristici de redimensionare, redimensionarea unui design înseamnă repoziționarea manuală a tuturor elementelor necesare. De exemplu, ați face ca tabloul dvs. de artă să fie mai mare, apoi repoziționați, realiniați și redimensionați în mod corespunzător elementele superioare ale barei și toate celelalte obiecte. Nu este ideal.

Responsiv Redimensionați acum

O redimensionare responsivă ia toate aceste lucrări de muncă manuală și stabilește lucrurile pentru tine în mod automat. Deschideți un document în Adobe XD și veți observa un comutator de redirecționare a resurselor în panoul de proprietăți:

Acum, când redimensionez aceeași tablă de artă, veți vedea că obiectul aliniat central rămâne în centru, obiectele aliniate la dreapta rămân în partea dreaptă, iar obiectele aliniate la stânga rămân în partea stângă. De asemenea, atunci când întind graficul vertical, poziționarea elementelor UI este reținută perfect.

Interfață originală și redimensionată în Adobe XD

Adaptarea alinierii

Alinierea și spațierea obiectelor pot fi adaptate la nevoile dvs. De exemplu, dacă vă uitați la cele patru elemente din partea inferioară a ecranului demo, veți vedea că, la redimensionare, intrările de e-mail și parolă sunt distanțate prea mult una de cealaltă (după cum știți, proximitatea este un factor important în proiectarea relațiilor vizuale).

Grupând mai întâi intrările, putem informa Adobe XD că dorim ca acestea să fie conectate vizual, astfel încât acestea să fie ținute mai aproape împreună la redimensionare (notează linia roz din jurul grupului):

Constrângerile

Constrângerile manuale fac lucrurile un pas mai departe, permițându-ne să fim și mai specifici cu modul în care Adobe XD se ocupă de redimensionarea rapidă.

Dedesubt Responsabil Redimensionare comutați acolo este un comutator pentru a face procesul Manual, in loc de Automat. Comenzile pe care ni le dăm permit să specificăm pentru fiecare obiect care sunt marginile tabloului de bord pe care dorim să le respectăm și dacă dorim să păstrăm înălțimea sau lățimea fixă.

De exemplu, aici este o interfață în care obiectele sunt redimensionate în mod automat în mod corespunzător. Nu este deloc rău, dar ar putea fi mai bine:

Redimensionarea automată

Dacă unul sau două elemente sunt constrânse manual, putem asigura că butonul de urmărire se lipeste de marginea superioară, filele fac același lucru, iar conținutul mesajului se situează aliniat la stânga:

Constrângeri manuale: mult mai bune!

Concluzie

Descărcați cea mai recentă actualizare Adobe XD și jucați-vă cu noile setări de redimensionare receptive - vă garantează că veți dori ceea ce găsiți! Cu această actualizare, Adobe a făcut ceea ce a fost un proces foarte obositor, extrem de intuitiv și rapid și combinat cu funcționalități cum ar fi Repeat Grid, veți găsi un design receptiv în Adobe XD deosebit de puternic pentru designul complex al UI.

Aflați mai multe despre Adobe XD