Disseny d’icones de l’aplicació¶
Tot el sistema i les aplicacions segueixen els principis de disseny de l’Suru iniciats per Canonical i Samuel Hewitt.
Filosofia del disseny i significat de Suru¶
Suru al·ludeix a la cultura japonesa.
El disseny de Suru està inspirat en l’origami.
El paper es pot utilitzar en dues i tres formes dimensionals, perquè és transferible i divers.
Suru aporta una estructura precisa però orgànica a la interfície Ubuntu Touch. Les línies afilades i els diferents nivells de transparència evoquen les vores i la textura del paper.
Consells de disseny per a una icona d’aplicació¶
Disseny descriptiu¶
La icona que triïs per a la teva app hauria de descriure de què tracta la teva app, què fa o per a quin servei hi ha d’una manera reconeixible.
Formes distintives¶
Depenent de l’objecte que trieu mostrar a la icona, en la perspectiva, la il·luminació i altres factors, pot ser difícil reconèixer el que esteu intentant representar. Un televisor pot semblar una caixa, o una pantalla d’ordinador, un comandament a distància com un telèfon, etc.
Detalls¶
Una icona detallada és molt agradable de veure, ja que mostra qualitat i el seu ull per les coses petites. No obstant això, podria afegir confusió, especialment en mides més petites o per a les persones que tenen problemes de vista. Mostra el que és necessari, presta atenció als detalls, però no sobrecarreguis la icona.
Colors¶
Utilitza colors distintius, fes que la teva icona destaqui una mica i donis a les formes suficient contrast per ser visible.
Degradats¶
Si afegiu un degradat a la icona, només utilitzeu colors que siguin lleugerament diferents entre si de manera que el canvi no sigui massa dramàtic. Per exemple:
ubicació¶
Les icones Suru estan compostes per formes geomètriques simples. El fons sol ser una superfície de color amb el pictograma, també compost de formes planes, “flotant” per sobre d’ell.
L’efecte dèbil¶
D’acord amb el motiu de l’origami, algunes icones de Suru tenen un plec implícit. En moltes icones aquesta és una única línia horitzontal o vertical, però de vegades les línies de plecs corresponen o s’alineen amb elements del pictograma.
El plec es dibuixa creant una superposició d’un polígon blanc o negre d’opacitat molt baixa (normalment entre 1%10%).
Quadrícules¶
L’ús d’una disposició de quadrícula garanteix la consistència a totes les icones i us obligarà a reservar àrea per al fons d’icona per a farciment parell al voltant del pictograma.
Tingueu en compte que els elements circulars són lleugerament més grans que els elements rectangulars de la quadrícula, aquest sobresalt és necessari per compensar la il·lusió òptica on els objectes circulars semblen més petits que els objectes rectangulars de les mateixes dimensions.
Quadrícula d’unitat¶
Dissenyar amb una quadrícula de píxels en general és crucial per tenir icones netes i transparents. Com que la majoria d’icones d’escriptori tenen dimensions que són un factor de quatre (16x16, 24x24, 32x32, 48x48, 256x256) utilitzant una quadrícula de píxels amb línies cada 4 píxels i dibuixar a aquesta quadrícula és la millor pràctica.
Ombres¶
Sovint es dibuixa una icona de Suru amb dos conjunts d’ombres diferents, un per al pictograma per crear un efecte d’ombra caiguda, i un segon per sota de la forma general de la icona.
L’efecte d’ombra caiguda sobre el pictograma central és una combinació de dues ombres que són idèntiques en forma al pictograma:
una forma que és rgba(0,0,0,0.1) amb desplaçament vertical de 2 píxels i un difuminat de l’1%
una forma que és rgba(0,0,0,0.4) amb un desplaçament vertical de 4 píxels i un difuminat del 10%
Si l’efecte de plec està present, la segona ombra es dibuixa utilitzant un gradient lineal amb tres oclusives les posicions de les quals corresponen a la ubicació del plec de fons.
Ressaltats¶
Els pictogrames tenen un ressaltat blanc de l’eversoslight (1 píxel) al llarg de la vora superior d’ells. Per fer-ho, feu 2 còpies sòlides en blanc de la forma del pictograma principal i moveu una còpia 1 píxel cap avall i “diferència” les dues, de manera que el que queda és una “aresta” que podeu alinear a la part superior del pictograma. Repeteix segons sigui necessari.
Depenent del color del teu element pictograma, pots variar l’opacitat del teu ressaltat. Per exemple, si està utilitzant colors brillants i primaris, no hi ha cap necessitat d’un punt culminant.
Les quadrícules i altres recursos es poden trobar en aquest .repositorigitlab <https://gitlab.com/cibersheep/ubuntu-icon-resource-kit>..