Share
In deze tutorial gaan we een aantal nieuwe functies verkennen in Adobe XD, namelijk 'responsive resize and constraints'. Deze functies, toegevoegd in september 2018, maken een reële schaal van ontwerpen binnen Adobe XD mogelijk, wat ons echt responsieve webontwerpmogelijkheden geeft.
Om deze nieuwe functies te demonstreren zal ik de Bones iOS wireframe-kit gebruiken die beschikbaar is op Envato Elements:
Bones IOS Wireframe KitVoordat Adobe XD zijn nieuwe functies voor het wijzigen van de grootte introduceerde, moest het formaat van een ontwerp worden gewijzigd door alle benodigde elementen handmatig opnieuw te plaatsen. U zou bijvoorbeeld uw tekengebied groter maken en vervolgens de bovenste staafelementen en alle andere objecten dienovereenkomstig opnieuw positioneren, opnieuw uitlijnen en de grootte ervan wijzigen. Niet ideaal.
Responsive resize neemt al die handarbeid en lost dingen automatisch voor je op. Open een document in Adobe XD en u ziet een variabele schaal wijzigen in het eigenschappenvenster:
Wanneer ik nu het formaat van hetzelfde tekengebied wijzig, zie je dat het centraal uitgelijnde object in het midden blijft, rechts uitgelijnde objecten blijven aan de rechterkant en links uitgelijnde objecten blijven aan de linkerkant. Wanneer ik het tekenbord verticaal uitrek, wordt de positionering van de UI-elementen perfect behouden.
Oorspronkelijke en verkleinde gebruikersinterface in Adobe XDDe uitlijning en spatiëring van objecten kan op uw behoeften worden afgestemd. Als u bijvoorbeeld naar de vier elementen onder aan ons demoscherm kijkt, ziet u dat wanneer de grootte van de e-mail- en wachtwoordinvoer iets te ver van elkaar is geplaatst (zoals we weten, de nabijheid een belangrijke factor is) bij het ontwerpen van visuele relaties).
Door eerst de ingangen te groeperen, kunnen we Adobe XD laten weten dat we willen dat ze visueel verbonden zijn, zodat ze bij het verkleinen dichter bij elkaar worden gehouden (let op de roze lijn rond de groep):
Handmatige beperkingen gaan een stap verder door ons in staat te stellen nog specifieker te zijn met hoe Adobe XD omgaat met responsief wijzigen.
Onder de Responsieve grootte wijzigen schakelen tussen er is een schakelaar om het proces te maken Met de hand, in plaats van automatisch. Met de besturingselementen die we krijgen, kunnen we voor elk object opgeven op welke randen van het tekengebied we het willen laten plakken en of we de hoogte of breedte vast willen houden.
Hier is bijvoorbeeld een interface waarin de objecten automatisch worden aangepast aan de grootte van het formaat. Het is helemaal niet slecht, maar het zou beter kunnen:
Automatische grootte wijzigenMet een of twee elementen handmatig beperkt, kunnen we ervoor zorgen dat de volgknop aan de bovenrand blijft plakken, dat de tabbladen hetzelfde doen en dat de inhoud van de post allemaal links uitgelijnd blijft:
Handmatige beperkingen: veel beter!Download de nieuwste Adobe XD-update en speel met de nieuwe instellingen voor responsieve resize - ik garandeer u dat u tevreden zult zijn met wat u vindt! Met deze update heeft Adobe een zeer saai proces gemaakt dat uiterst intuïtief en snel is - en in combinatie met functionaliteit zoals Repeat Grid vindt u responsief ontwerp in Adobe XD, vooral krachtig voor complexe UI-ontwerpen.
Accentsconagua