Så här använder du Responsive resize and restrictions i Adobe XD

I denna handledning kommer vi att utforska några nya funktioner i Adobe XD, nämligen "responsiv resize and constraints". Dessa funktioner, som läggs till i september 2018, tillåter verklig skalning av mönster inom Adobe XD, vilket ger oss genuint mottagliga webbdesignfunktioner. 

För att demonstrera dessa nya funktioner använder jag Bones iOS wireframe kit som finns på Envato Elements:

Ben IOS Wireframe Kit

Titta på videon

Ändra storlek före XD-uppdateringen

Innan Adobe XD presenterade sina nya resize-funktioner, ändrades storleken på en design manuellt om alla nödvändiga element. Till exempel skulle du göra din tavla större, ändra sedan, ändra och ändra storlek på de övre streckelementen och alla andra objekt i enlighet därmed. Inte idealisk.

Responsive Ändra storlek nu

Responsive resize tar allt det manuella arbetet och fixar saker för dig automatiskt. Öppna ett dokument i Adobe XD och du kommer märka ett svarsalternativ för Responsive Resize i egenskapsfönstret:

Nu när jag ändrar storlek på samma tavla, ser du att det centralt inriktade objektet förblir i mitten, rättlinjerade objekt håller sig till höger och vänsterjusterade objekt kvarstår till vänster. På samma sätt, när jag sträcker tavlan vertikalt, behålls UI-elementens positionering perfekt.

Original och omvandlat användargränssnitt i Adobe XD

Anpassning av anpassning

Justeringen och avståndet mellan objekt kan anpassas efter dina behov. Om du till exempel tittar på de fyra elementen längst ner på vår demo-skärm ser du att när storleken på e-post- och lösenordsinmatningarna är åtskilda lite för långt ifrån varandra (som vi vet är närhet en viktig faktor vid utformning av visuella relationer).

Genom att först gruppera inmatningarna kan vi informera Adobe XD om att vi vill att de ska vara visuellt kopplade, så att de hålls närmare varandra när de ändras (notera den rosa linjen runt gruppen):

begränsningar

Manuella begränsningar tar saker ytterligare ett steg genom att låta oss vara ännu mer specifika med hur Adobe XD hanterar responsiv resizing.

Under Responsive Resize växla det finns en växel för att göra processen Manuell, istället för Automatisk. De kontroller vi får ger oss möjlighet att ange, för varje objekt, vilka kanter av tavlan vi vill att den ska hålla sig till och om vi vill hålla sin höjd eller bredd fast.

Till exempel, här är ett gränssnitt där objekten ändras på ett ändamålsenligt sätt automatiskt. Det är inte illa alls, men det kan vara bättre:

Automatisk omformning

Med en eller två av elementen manuellt begränsad kan vi se till att följa knapparna håller sig till överkanten, flikarna gör detsamma och inläggets innehåll håller sig åt vänster:

Manuella begränsningar: mycket bättre!

Slutsats

Ladda ner den senaste Adobe XD-uppdateringen och spela om med de nya responsiva resize-inställningarna. Jag garanterar att du kommer att tycka om vad du hittar! Med den här uppdateringen har Adobe gjort vad som var en väldigt tråkig process, extremt intuitiv och snabb och kombinerad med funktionalitet som Repeat Grid, du hittar responsiv design i Adobe XD, särskilt kraftfull för komplicerad UI-design.

Läs mer om Adobe XD