Come utilizzare ridimensionamento e vincoli reattivi in ​​Adobe XD

In questo tutorial esploreremo alcune nuove funzionalità di Adobe XD, ovvero "ridimensionamento reattivo e vincoli". Queste funzionalità, aggiunte a settembre 2018, consentono il ridimensionamento reale dei progetti all'interno di Adobe XD, offrendoci funzionalità di progettazione Web veramente sensibili. 

Per dimostrare queste nuove funzionalità userò il kit wireframe Bones per iOS disponibile su Envato Elements:

Bones IOS Wireframe Kit

Guarda il video

Ridimensionamento prima dell'aggiornamento XD

Prima che Adobe XD introducesse le sue nuove funzionalità di ridimensionamento, il ridimensionamento di un disegno implicava il riposizionamento manuale di tutti gli elementi richiesti. Ad esempio, ingrandisci la tua tavola da disegno, quindi riposiziona, riallinea e ridimensiona gli elementi della barra superiore e tutti gli altri oggetti di conseguenza. Non ideale.

Ridimensionamento reattivo ora

Il ridimensionamento reattivo prende tutto il lavoro manuale e risolve le cose automaticamente. Apri un documento in Adobe XD e noterai un interruttore Ridimensiona reattivo nel riquadro delle proprietà:

Ora, quando ridimensiono la stessa tavola da disegno, vedrai che l'oggetto allineato al centro rimane al centro, gli oggetti allineati a destra restano a destra e gli oggetti allineati a sinistra rimangono a sinistra. Allo stesso modo, quando estendo la tavola da disegno verticalmente, il posizionamento degli elementi dell'interfaccia utente viene mantenuto perfettamente.

Interfaccia utente originale e ridimensionata in Adobe XD

Allineamento sartoriale

L'allineamento e la spaziatura degli oggetti possono essere adattati alle tue esigenze. Ad esempio, se guardi i quattro elementi nella parte inferiore della nostra schermata demo, vedrai che quando vengono ridimensionati gli input di email e password sono distanziati un po 'troppo lontano l'uno dall'altro (come sappiamo, la prossimità è un fattore importante nella progettazione di relazioni visive).

Raggruppando in primo luogo gli input possiamo informare Adobe XD che vogliamo che siano visivamente connessi, in modo da tenerli ravvicinati al ridimensionamento (notare la linea rosa attorno al gruppo):

vincoli

I vincoli manuali fanno compiere un ulteriore passo avanti, permettendoci di essere ancora più specifici su come Adobe XD si occupa del ridimensionamento sensibile.

Sotto il Ridimensionamento reattivo attiva / disattiva c'è un interruttore per rendere il processo Manuale, invece di Automatico. I controlli che ci vengono assegnati ci permettono di specificare, per ogni oggetto, quali bordi della tavola da disegno vogliamo che rimangano incollati, e se vogliamo mantenere la sua altezza o larghezza fissa.

Ad esempio, ecco un'interfaccia in cui gli oggetti vengono ridimensionati in modo reattivo automaticamente. Non è affatto male, ma potrebbe essere migliore:

Ridimensionamento automatico

Con uno o due elementi vincolati manualmente, possiamo assicurarci che il pulsante segui rimanga sul bordo superiore, che le linguette facciano lo stesso e che il contenuto del post rimanga allineato a sinistra:

Vincoli manuali: molto meglio!

Conclusione

Scarica l'ultimo aggiornamento di Adobe XD e gioca con le nuove impostazioni di ridimensionamento reattive: ti garantisco che ti piacerà quello che trovi! Con questo aggiornamento, Adobe ha realizzato un processo molto noioso estremamente intuitivo e rapido e, combinato con funzionalità come Repeat Grid, è possibile trovare un design reattivo in Adobe XD particolarmente potente per la progettazione dell'interfaccia utente complessa.

Ulteriori informazioni su Adobe XD