Dimensioni

A cosa servono

Le dimensioni di un elemento di design sono misure che definiscono lo spazio occupato in altezza e in larghezza dall'elemento, le sue proporzioni e la sua disposizione nello spazio complessivo dell'interfaccia.

L'uso di dimensioni standard garantisce coerenza visiva e armonia, migliorando non solo l'aspetto estetico dell'interfaccia ma anche la sua usabilità generale.

Le misure delle dimensioni sono espresse in percentuale e possono essere relative a:

• la dimensione dello schermo (viewport);
• la dimensione del contenitore in cui è inserito l'elemento, ad esempio le colonne della griglia.

Come usarle

Puoi usare misure diverse per uno stesso elemento in base a specifiche necessità di layout e per garantire che gli elementi di design siano sempre ottimizzati in base alla risoluzione dello schermo e al tipo di dispositivo.

Ad esempio, un pulsante può avere una dimensione 100% su dispositivi mobili per facilitare l'interazione in uno spazio ridotto, mentre una dimensione inferiore su dispositivi più grandi dove invece lo spazio a disposizione per interagire con gli elementi visibili a schermo è maggiore.

Queste misure si adattano alla griglia ma non la sostituiscono, in quanto non prevedono intercolonna e margini laterali.

I token per le dimensioni

I token relativi alle dimensioni appartengono alla tipologia globali. Come tali, possono essere riutilizzati come misura di riferimento per token semantici o specifici.