Design dell’icona dell’App¶
L’intero sistema e le applicazioni seguono i principi di progettazione Suru avviati da Canonical e Samuel Hewitt.
Filosofia del design e significato di Suru¶
Suru allude alla cultura giapponese.
Il disegno di Suru è ispirato dagli origami.
La carta può essere utilizzata in due e tre forme dimensionali, perché è trasferibile e diversificata.
Suru porta una struttura precisa ma organica all’interfaccia Ubuntu Touch. Le linee taglienti e i diversi livelli di trasparenza evocano i bordi e la consistenza della carta.
Suggerimenti per il designo dell’Icona dell’App¶
Disegno descrittivo¶
L’icona che si sceglie per la vostra app dovrebbe descrivere ciò che la vostra applicazione è circa, che cosa fa, o che servizio è lì per in modo riconoscibile.
Forme distintive¶
A seconda dell’oggetto che si sceglie di mostrare nell’icona, sulla prospettiva, l’illuminazione e altri fattori, potrebbe essere difficile riconoscere quello che si sta cercando di descrivere. Una TV potrebbe sembrare una scatola, o uno schermo del computer, un telecomando come un telefono, ecc.
Dettagli¶
Un’icona dettagliata è molto bella da guardare da come mostra la qualità e l’occhio per le piccole cose. Potrebbe aggiungere confusione però, soprattutto nelle dimensioni più piccole o per le persone che hanno la vista compromessa. Mostra ciò che è necessario, fai attenzione ai dettagli, ma non sovraccaricare l’icona.
Colori¶
Usa colori distintivi, rendi la tua icona un po” in risalto e dalle la forma in sufficiente contrasto per essere visibile.
Gradienti¶
Se dovessi aggiungere un gradiente alla tua icona, usa solo colori leggermente diversi l’uno dall’altro in modo che il cambiamento non sia troppo drammatico. Per esempio:
Composizione¶
Le icone Suru sono composte da semplici forme geometriche. Lo sfondo è di solito una superficie colorata con il pittogramma, composto anche da forme piatte, “floating” sopra di esso.
L’effetto pieghevole¶
In linea con il motivo origami, alcune icone Suru hanno una piega implicita. In molte icone questa è una singola linea orizzontale o verticale, ma a volte la linea di piega corrisponde o allinea con elementi del pittogramma.
La piega è disegnata creando un sovrapposizione di un poligono bianco o nero di opacità molto bassa (di solito tra 1% ~ 10%).
Griglie¶
L’uso di un layout a griglia garantisce la coerenza tra tutte le icone e obbliga a riservare un’area per lo sfondo dell’icona per un padding uniforme intorno al pittogramma.
Si noti che gli elementi circolari sono leggermente più grandi degli elementi rettangolari della griglia; questo superamento è necessario per compensare l’illusione ottica per cui gli oggetti circolari appaiono più piccoli degli oggetti rettangolari delle stesse dimensioni.
Griglia di unità¶
Progettare tenendo conto di una griglia di pixel è fondamentale per avere icone nitide e pulite. Poiché la maggior parte delle icone del desktop ha dimensioni pari a un fattore quattro (16x16, 24x24, 32x32, 48x48, 256x256), la pratica migliore è quella di utilizzare una griglia di pixel con linee ogni 4 pixel e di disegnare su quella griglia.
Ombre¶
Spesso un’icona Suru viene disegnata con due serie distinte di ombre, una per il pittogramma per creare un effetto di ombra a goccia e una seconda sotto la forma complessiva dell’icona.
L’effetto ombra sul pittogramma centrale è una combinazione di due ombre di forma identica al pittogramma:
una forma che è rgba(0,0,0,0,0.1) con uno spostamento verticale di 2 pixel e una sfocatura dell’1%
una forma che è rgba(0,0,0,0,0.4) con uno spostamento verticale di 4 pixel e una sfocatura del 10%
Se è presente l’effetto piega, la seconda ombra viene disegnata utilizzando un gradiente lineare con tre stop le cui posizioni corrispondono alla posizione della piega dello sfondo.
Evidenziazioni¶
I pittogrammi hanno un’evidenziazione bianca sempre più leggera (1 pixel) lungo il bordo superiore. Per fare ciò, creare 2 copie bianche solide della forma principale del pittogramma e spostare una copia di 1 pixel verso il basso e “differenziare” le due in modo che ciò che rimane sia un “bordo” da allineare alla parte superiore del pittogramma. Ripetere se necessario.
A seconda del colore dell’elemento del pittogramma, è possibile variare l’opacità dell’evidenziazione. Ad esempio, se il pittogramma utilizza colori primari e brillanti, non c’è bisogno di un’evidenziazione.
Le griglie e altre risorse si trovano in questo repository gitlab.