Un centro che sembra spostato
Nei tool di design e nel codice usiamo griglie e bounding box, i rettangoli che racchiudono gli elementi, per decidere dove mettere le cose. Le misure possono essere esatte e il risultato sembrare comunque storto. In un pulsante con testo e icona, per esempio, il contenuto può sembrare decentrato anche quando le distanze sono uguali. L’allineamento ottico serve a correggere questa differenza fra posizione misurata e posizione percepita.
Il peso visivo delle forme
Per centrare una forma bisogna considerare come è distribuito il suo peso visivo. Il caso classico è il triangolo dell’icona play dentro un cerchio: centrare il suo bounding box può farlo sembrare spostato; allineare il suo baricentro al centro del cerchio corregge quella sensazione1.
Il pulsante
Nel pulsante dell’esempio testo e freccia formano un solo gruppo. La freccia è asimmetrica e pesa di più a destra. Il padding è uguale sui due lati, quindi secondo le misure il gruppo è centrato. All’occhio può sembrare spostato.
Nell’esempio aumentiamo il padding a sinistra e lo riduciamo a destra. La somma non cambia, quindi il contenuto si sposta dentro il pulsante e la larghezza resta la stessa. La misura giusta dipende dalla forma dell’icona, dal testo e dal contesto in cui li usi. Apple suggerisce lo stesso accorgimento per le icone asimmetriche: mettere il padding dentro l’asset, così che centrarlo con le misure lo centri anche a occhio. Il suo esempio è l’icona download, che pesa di più in basso e, centrata geometricamente, sembra troppo bassa2.
La sidebar
In una sidebar le icone hanno bisogno della stessa area e di una colonna regolare, e il rapporto con le etichette deve essere chiaro. Le misure sono il punto di partenza.
Attiva le guide per vedere i box di icone e testo. Quando la colonna è a posto, guarda le forme una per una: qualcuna può sembrare ancora troppo alta, troppo bassa o spostata di lato. In quel caso puoi valutare una correzione ottica. Gli SF Symbols di Apple3 la portano già dentro il simbolo: ogni variante può avere margini sinistro e destro propri, anche negativi, che cambiano con il peso e la scala4.
Prima di correggere a occhio
Prima di spostare un elemento di uno o due pixel, controlla com’è costruito il componente: dimensioni coerenti, SVG puliti, viewBox corretti, spaziature costanti e allineamento geometrico. Uno spostamento può nascondere un problema in uno di questi punti. La correzione ottica ha senso quando la struttura è già coerente e una forma continua a sembrare fuori posto.
Marc Edwards, di Bjango1, sostiene che molte correzioni fatte a occhio si possono calcolare. Un cerchio largo quanto un quadrato sembra più piccolo; per dargli la stessa area va scalato del 112,84%. Per forme con buchi o rientranze, come una ciambella o una stella, propone di misurare l’area del loro involucro convesso. Un numero aiuta quando la correzione va automatizzata o animata; il risultato va comunque valutato nel componente.
Correzioni riutilizzabili
Parti dall’allineamento geometrico, poi osserva il componente con le forme e i testi che userai davvero. Negli esempi puoi attivare le guide e confrontare la posizione misurata con quella corretta. Se lo stesso spostamento serve in più punti, valuta se incorporarlo nell’icona, nel componente o nel design system, come fanno i simboli che hanno già margini ottici propri.
Per approfondire
- Bjango, Formulas for optical adjustments: Marc Edwards misura il peso visivo con area, involucro convesso e baricentro, partendo dal triangolo nel cerchio.
- Apple Human Interface Guidelines, Icons: il padding per centrare otticamente le icone asimmetriche, con l’esempio dell’icona download.
- Apple Human Interface Guidelines, SF Symbols: pesi, scale e margini ottici dei simboli.
- Apple, Creating custom symbols: i margini sinistro e destro di ogni variante, anche negativi, per l’allineamento orizzontale.