Colori e Fonts, linee guida iOS 7 interfaccia utente

Colori_caratteri_Fonts_iOS-7_interfaccia_utente_UIIl colore migliora la comunicazione
Secondo le linee guida di Apple, dobbiamo considerare il fatto che in iOS7 i colori aiutano ad indicare interattività, impartire vitalità e a fornire continuità visiva.
Notiamo che nelle applicazioni pre-installate (built-in) nel nostro dispositivo iOS si utilizzano famiglie di colori che appaiono chiaramente sia singolarmente che in combinazione, e sia su sfondi chiari che su sfondi scuri.ios7_colors

Ogni volta che andremo a creare colori personalizzati, bisogna quindi assicurarsi che stiano bene anche assieme. Ad esempio, se riteniamo che i colori pastello siano essenziali per lo stile della nostra applicazione, sarà necessario creare una famiglia di pastelli che possano essere utilizzati in tutta l’applicazione.
E’ necessario prestare attenzione ai contrasti cromatici in relazione a contesti diversi. Per esempio, se non c’è abbastanza contrasto tra lo sfondo della barra di navigazione (nav-bar) e  i titoli della bar-button, i pulsanti (buttons) saranno difficile da vedere. Una regola generale è quella di iniziare con un contrasto di almeno il 50% tra i colori che devono essere distinguibili. Testare il risultato visualizzando su un dispositivo in diverse condizioni di illuminazione, sopratutto all’aperto in una giornata di sole.

Suggerimento
Un modo per scoprire le aree che necessitano di maggiore contrasto è denaturare l’interfaccia utente (UI) e visualizzarla in scala di grigi. Se avrai
difficoltà a distinguere la differenza tra la parte interattiva e non interattiva o con gli sfondi nella versione in scala di grigi, probabilmente è necessario aumentare il contrasto tra questi elementi.

Custom Bar Tint.
Teniamo presente che in iOS 7 le barre (Bar) sono “trasducenti” e quindi i contenuti dell’app devono essere verificati quando si necessita di customizzare la colorazione delle barre.
Se avete bisogno di creare una barra con una tinta personalizzata che corrisponde a un colore specifico, come ad esempio il colore di un marchio pre-esistente, è bene sperimentare con i vari colori prima di ottenere il risultato che si desidera. L’aspetto di una barra è influenzato sia dalla sua”Traslucenza” che offre iOS 7 che dalla comparsa dei contenuti che possono apparire dietro la barra stessa.

NOTA per il developer. 
Per colorare gli elementi della barra, utilizzare la proprietà tintColor ;
per colorare la barra stessa , utilizzare la proprietà 
barTintColor.
Per ulteriori informazioni su queste proprietà della barra , fare riferimento a: UINavigationBar Class Reference, UITabBar Class Reference, UlToolbar Class Reference e UISearchBar Class Reference

Essere consapevoli dei problemi daltonismo.
La maggior degli ipo-vedenti hanno difficoltà distinguere il rosso dal verde . Metti alla prova la tua applicazione per assicurarti che non ci siano posti dove si usa rosso e verde come l’unico modo di distinguere tra due stati o valori (alcune immagini software di grafica includono strumenti che possono aiutare a far prove di colore per gli ipovedenti) . In generaIe , è una buona idea utilizzare più di un modo per indicare l’interattività di un elemento.

Consideriamo di scegliere un colore chiave (Key-colors)per indicare l’interattività e lo stato. I Colori chiave nelle applicazioni pre-installate sono ad esempio il giallo per l’app Note e il rosso nel calendario . Se si definisce un colare chiave per indicare l’interattività e lo stato, è necessario assicurarsi che gli altri colori della tua app non competano con esso.

Evitare di utilizzare lo stesso colore per gli elementi interattivi e non.
Il colore è uno dei modi in cui un elemento dell’interfaccia utente indica la propria interattività . Se gli elementi interattivi e non interattivi hanno lo stesso colore , è più difficile per gli utenti sapere cosa toccare (Tap).

Il colore comunica , ma non sempre nel modo in cui vogliamo.
Ognuno vede il colore in modo diverso, e molte culture differiscono nel modo in cui vengono assegnati i significati ai colori . è quindi consigliabile trascorrere del tempo per verificare come il vostro uso del colore possa essere percepito in altri paesi e culture.
Per quanto possibile , si deve essere sicuri che i colori della propria app possano inviare il messaggio appropriato.
Nella maggior parte dei casi , i colori non devono distrarre gli utenti
. A meno che il colore non sia lo scopo della vostra applicazione , di solito si consiglia di valutare bene di usare il colore in maniera “sottile” .

I Testi devono essere sempre leggibili.
Questa è la prima regola, il testo deve essere leggibile . Se gli utenti non riescono a leggere bene la vostra applicazione creerà frustrazione, non importa quanto siano belli i caratteri tipografici.
Quando si adottano i Caratteri Dinamici (Dynamic Type), in applicazioni iOS 7 si ottiene quanto segue :

• Regolazioni automatiche di spaziatura e altezza per ogni dimensione del carattere
• La possibilità di specificare diversi stili di testo per blocchi di testo distinti semanticamente, come Corpo (Body), Note in calce (Footnote) , o Testata (Headline)
• Il testo che risponde adeguatamente ai cambiamenti che l’utente effettua nelle impostazioni sulle dimensioni del testo (tra cui le dimensioni del testo dell’accessibilità)

Nota per il developer
Se si utilizza un carattere personalizzato, si può ancora scalare il carattere secondo l’impostazione di sistema che rappresenta la dimensione del testo. La vostra applicazione ha la responsabilità di rispondere in modo appropriato quando l’utente modifica tale impostazione.


Adottare un carattere dinamico (
Dynamic Type) richiede un certo lavoro. Bisogna  imparare a utilizzare gli stili di testo e garantire che la vostra applicazione recepisca i cambiamenti quando l’utente cambia l’impostazione del formato testo, si consiglia di far riferimento alla guida degli  Stili di testo: Text , Web, and Editing Programming Guide for i0S.

Dare priorità contenuti nel rispondere ai cambiamenti della dimensione del testo. Non tutti i contenuti  sono importanti allo stesso modo.
Quando gli utenti scelgono un dimensione del testo grande, vogliono rendere il contenuto interessante più facile da leggere; non vogliono che ogni parola sullo schermo sia più grande.
Ad esempio, quando gli utenti scelgono in impostazione di accessibilità con grande dimensione del testo, L’app Mali visualizza l’oggetto e il corpo del messaggio nel dimensioni grande  ma lascia il testo meno importante  come la data e il mittente in una dimensione più piccola.

Se è il caso , regolare anche il layout quando l’utente sceglie un dimensione del testo differente . Ad esempio , si potrebbe desiderare di cambiare una
layout di una colonna di testo corpo a un layout a due colonne quando l’utente sceglie una piccola dimensione del testo . Se si decide di modificare il layout per le diverse dimensioni di testo , è possibile scegliere di farlo per sottoinsiemi di dimensioni – come le piccole , medie e grandi , piuttosto che cambiare il layout per ogni formato possibile.

Assicurarsi che tutti gli stili di un font personalizzato siano leggibili in dimensioni diverse . Un modo per farlo è quello di emulare alcuni dei modi in cui iOS mostra stili di font in diverse dimensioni di testo. Ad esempio :
• il testo non dovrebbe mai essere inferiore a 11 punti , anche quando l’utente sceglie l’ extra-small come dimensione del testo . Per confronto , la dimensione dello stile del corpo (Body style) utilizza una dimensione del font di 17 punti per la dimensione grande, che è l’impostazione dimensione predefinita del testo.
• In generale, la dimensione del carattere e dei valori principali differiscono di un punto per l’impostazione della dimensione del testo. Le eccezioni a questa regola sono i due stili didascalia (caption), che utilizzano la stessa dimensione del carattere per extra-small, small, e medium settings.
Per le tre più piccole dimensioni di testo, i valori di monitoraggio sono relativamente grandi; le tre maggiori dimensioni di testo, i valori tracldng sono relativamente stretti.
Gli stili Titolo (headline) e Corpo (body) usano la stessa dimensione di carattere. Per distinguersi dallo stile Corpo, lo stile Titolo utilizza un peso (weight) maggiore.
• Il Testo in un navigation controller (controller di navigazione) utilizza la stessa dimensione del carattere che il body stile text utilizza per le impostazioni di testo di grandi dimensioni (in particolare, 17 punti).
• Il Testo utilizza sempre il peso regular o medio; non usa stile leggero (light) o grassetto (bold).

In generaIe,è bene  utilizzare un solo tipo di carattere per tutta la app. Mescolare diversi tipi di carattere può rendere la vostra app frammentata e sciatta. E’ sempre bene utilizzare un solo tipo di carattere e poche impostazioni di stili e dimensioni. Utilizzare UNcént text styles API per definire diverse aree di testo secondo l’uso semantico, come corpo o titolo.

 

Un commento:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*