Disegno delle icone in-app#

Icone dell’interfaccia#

Le icone dell’interfaccia comunicano lo stato o le azioni visualizzate, come il livello della batteria o un allarme, e consentono all’utente di eseguire azioni come l’apertura di un menu, la condivisione di contenuti o la stampa di un documento. Le icone dell’interfaccia si trovano nella barra superiore o nelle icone dell’applicazione, ad esempio nell’intestazione o nei menu.

|messaggio-scorta.svg| |quota.svg| |orologio-sveglia_scorta.svg| |allarme-sicurezza.svg| |impostazioni.svg|

Vedere un elenco delle icone. disponibili nel sistema.

colore#

Le icone dell’interfaccia possono essere colorate in qml, pertanto sono state progettate con il colore #808080.

Carattere#

Per dare un aspetto coerente all’interfaccia utente e per rendere distintive le icone di Suru, il disegno si basa sugli stessi motivi del carattere Ubuntu. I motivi del carattere possono essere applicati al simbolo per definirne i contorni.

../../_images/14.png

Estremità#

Le estremità dei tratti sono squadrate, ma l’estremità superiore dei tratti verticali è leggermente obliqua con un angolo di +10º.

../../_images/15.png

Rotazione#

Quando non sono orizzontali o verticali, gli oggetti sono orientati lungo un asse di +45º.

../../_images/16.png

Angoli#

Se possibile, sono preferibili gli angoli curvi. L’immagine seguente mostra uno zoom sulle curvature esterne e interne predefinite, con i nodi e la maniglia di Bezier. La curvatura predefinita può essere ridotta quando la forma è più piccola.

../../_images/17.png

Frecce#

Per le frecce di navigazione si utilizza il simbolo del chevron. La punta della freccia è un triangolo isoscele in cui i due lati uguali sono leggermente curvati (secondo lo schema del carattere Y).

../../_images/18.png

Opacità#

L’opacità al 50% viene utilizzata per riflettere lo stato di un indicatore. In caso di doppio spazio (abilitato e disabilitato, ad esempio), cambia l’opacità dell’intera icona. Quando lo stato consente una gamma di valori, è possibile modificare l’opacità di una singola porzione dell’icona.

../../_images/19.png

Griglia#

Le icone dell’interfaccia sono progettate per 96x96 pixel, con almeno 4 pixel di margine su ogni lato.

../../_images/20.png