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.
Estremità#
Le estremità dei tratti sono squadrate, ma l’estremità superiore dei tratti verticali è leggermente obliqua con un angolo di +10º.
Rotazione#
Quando non sono orizzontali o verticali, gli oggetti sono orientati lungo un asse di +45º.
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.
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).
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.
Griglia#
Le icone dell’interfaccia sono progettate per 96x96 pixel, con almeno 4 pixel di margine su ogni lato.