29 Dicembre 2020

Density-independent Pixel (DP) - Cos'è e come usarlo in UI

Quando si progetta una UI (User Interface) è di fondamentale importanza comprendere l'enorme ecosistema di dispositivi che possono essere utilizzati per visualizzare il nostro contenuto (che sia un sito web, un'app, un sistema operativo, ecc).

Risulta riduttivo parlare addirittura di responsive quando, all'interno della stessa tipologia di viewport (es: mobile), esiste un'ampissima gamma di dispositivi, schermi e risoluzioni differenti.

PPI - Pixel per Inch

A seconda della qualità del display utilizzato, infatti, si ha una più o meno elevata quantità di pixel all'interno dello stesso spazio fisico. Questo dato viene definito PPI, ossia Pixel per Inch.
Paragonando due dispositivi di fascia diversa, entrambi con dimensioni fisica di 5,2 pollici avremo:

  • Sul display di fascia bassa: una minore densità di pixel per pollice (es: 72 ppi) e una relativa qualità inferiore dell'immagine;
  • Sul display di fascia alta: una maggiore densità di pixel per pollice (es: 300 ppi) con una conseguente maggiore qualità recepita dell'immagine.


Il problema

Inevitabilmente i PPI influiscono sulle dimensioni fisiche degli elementi della nostra UI: un componente come un pulsante, con dimensione N px, apparirà più grande su uno schermo a bassa densità di pixel e più piccolo, più compatto, su uno schermo ad alta densità di pixel.


Un effetto chiaramente indesiderato, se consideriamo che queste componenti (pulsanti, link, collegamenti) hanno una dimensione minima da rispettare per risultare ergonomici e correttamente tappabili.

Chi risente maggiormente di questo problema è Android, sistema operativo open source di casa Google.
Proprio perchè open source, viene utilizzato su una gigantesca mole di device diversi, ognuno dei quali adopera display, tecnologie e PPI differenti, rendendo pressocchè impossibile prevedere e conosere tutte le possibili combinazioni di questi elementi.

Nonostante ciò, sono state identificate ben 6 pixel-densities più comuni sui dispositivi Android:

  • ldpi - low-density (~120ppi - 0.75 x Standard)
  • mdpi - medium-density (~160ppi - 1 x Standard)
  • hdpi - high-density (~240ppi - 1.5 x Standard)
  • xhdpi - extra-high-density (~320ppi - 2 x Standard)
  • xxhdpi - extra-extra-high-density (~480ppi - 3 x Standard)
  • xxxhdpi - extra-extra-extra-high-density (~640ppi - 4 x Standard).

 

Density Independence

È dunque necessario identificare un'unità di misura che possa essere "density independent", in grado ossia di uniformare le dimensioni delle componenti di una UI su qualunque tipologia di display, per garantirne non solo maggiore consistency visiva, ma anche maggiore accessibilità dei contenuti.

Un Density-independent Pixel (DP), è un'unità di misura flessibile, che crea una proprozione tra PPI e dimensioni fisiche del display, proprio per uniformare la dimensione delle componenti e mostrarle con coerenza su schermi differenti.


Per convenzione 1DP = 1PX su schermi con una densità pari a 160PPI.

La formula adoperata dal Density-independent Pixel è:
DP = (larghezza in PX * 160) / PPI

Con questa unità di misura variabile si ha maggiore controllo sulle possibili alterazioni device-specific degli elementi dell'interfaccia.

 

Controlled Chaos

Se i DP sono, dunque la salvezza dello UI designer per tutte le componenti dell'interfaccia, non bisoogna, al contempo, trascurare gli oggetti raster (le immagini) che verranno utilizate al suo interno.
Come è intuibile dalla scala delle più comuni pixel-densities, non si tratta solo di un export 1x e 2x, bensì di una più vasta gamma di assets in grado di garantire il giusto equilibrio tra peso e qualità percepita.

Un buon workflow prevede la progettazione a 1x, delegando la generazione degli altri assets necessari solo alla fase di export, preservandone comunque la qualità adoperando formati vettoriali ogni qual volta sia possibile (es: icone) e lavorando con oggetti avanzati nel caso si tratti di bitmap.

CLICCAMI!