Slik bruker du Responsive Resize og Constraints i Adobe XD

I denne opplæringen skal vi utforske noen nye funksjoner i Adobe XD, nemlig "responsiv resize and constraints". Disse funksjonene, som ble lagt til i september 2018, tillater ekte skalering av design i Adobe XD, noe som gir oss reell responsive webdesign evner. 

For å demonstrere disse nye funksjonene skal jeg bruke Bones iOS wireframe-settet som er tilgjengelig på Envato Elements:

Ben IOS Wireframe Kit

Se videoen

Endre størrelse før XD-oppdateringen

Før Adobe XD introduserte sine nye resize-funksjoner, endret størrelsen på et design manuelt å plassere alle de nødvendige elementene. For eksempel vil du gjøre tegneplaten større, deretter reposisjonere, justere og endre størrelsen på de øverste linjene og alle andre objekter tilsvarende. Ikke ideell.

Responsive Resize nå

Responsive resize tar alt det manuelle arbeidet og retter ting for deg automatisk. Åpne et dokument i Adobe XD, og ​​du vil legge merke til et Responsive Resize-sving i egenskapsruten:

Nå når jeg endrer størrelsen på det samme tavlen, ser du at det sentralt justerte objektet forblir i midten, rettlinjede gjenstander holder seg til høyre, og gjenstandene i venstre linje forblir til venstre. På samme måte, når jeg strekker artikkelen vertikalt, holdes plasseringen av UI-elementene perfekt.

Original og endret brukergrensesnitt i Adobe XD

Skreddersydde justering

Justeringen og avstanden mellom objekter kan skreddersys etter dine behov. Hvis du for eksempel ser på de fire elementene nederst på demo-skjermen, vil du se at når størrelsen på e-post- og passordinngangene er fordelt litt for langt unna hverandre (som vi vet, er nærhet en viktig faktor i å designe visuelle forhold).

Ved først å gruppere inngangene kan vi informere Adobe XD om at vi vil at de skal være visuelt koblet, slik at de holdes tettere sammen ved å endre størrelse (merk den rosa linjen rundt gruppen):

begrensninger

Manuelle begrensninger tar ting et skritt videre ved å la oss være enda mer konkrete med hvordan Adobe XD omhandler responsiv resizing.

Under Responsive Resize veksle det er en bryter for å gjøre prosessen Håndbok, i stedet for Automatisk. Kontrollene vi gir, gir oss mulighet til å spesifisere, for hver gjenstand, hvilke kanter av kunstglasset vi ønsker at den skal holde seg til, og om vi vil beholde sin høyde eller bredde fast.

For eksempel, her er et grensesnitt hvor gjenstandene endres responsivt automatisk. Det er ikke dårlig i det hele tatt, men det kan være bedre:

Automatisk resizing

Med en eller to av elementene manuelt begrenset, kan vi sikre at følgeknappen stikker til toppkanten, fanene gjør det samme, og innleggets innhold holder seg rett til venstre:

Manuelle begrensninger: mye bedre!

Konklusjon

Last ned den nyeste Adobe XD-oppdateringen og spill av med de nye responsive resize-innstillingene. Jeg garanterer at du vil like det du finner! Med denne oppdateringen har Adobe gjort det som var en veldig kjedelig prosess, ekstremt intuitiv og rask og kombinert med funksjonalitet som Repeat Grid, finner du responsiv design i Adobe XD, spesielt kraftig for komplisert brukergrensesnitt.

Lær mer om Adobe XD