Interfacce utente: colori e layout

Question

Anche se sono particolarmente interessato alle informazioni sulle applicazioni Web, sarei anche un po' curioso riguardo allo sviluppo di applicazioni desktop.Questa domanda è guidata dal mio lavoro sul mio sito web personale e dal mio lavoro, in cui ho sviluppato alcune funzionalità, ma ho lasciato ad altri il compito di integrarle nell'aspetto del sito.

Esistono guide o regole pratiche per cose come combinazioni di colori, layout, formattazione, ecc.?Voglio garantire leggibilità e chiarezza per i visitatori, ma non essere insipido e noioso allo stesso tempo.

Per quanto riguarda le mie conoscenze in questo settore: se mi passi un'immagine, ho abbastanza conoscenze per riprodurla sullo schermo, ma se mi chiedi di progettare una nuova interfaccia o di ridisegnarne una esistente, non saprei da dove cominciare .

Answer 1

Di solito, ogni sistema operativo dispone di linee guida per l'interfaccia utente.Per Windows, disponi di un file guarda qui.(Modificare:I collegamenti in quel post sono interrotti.Ma una ricerca per "Linee guida per l'interfaccia utente" su MSDN ci sono articoli su tutto)

Anche Apple ha il suo.Inoltre, potresti voler mantenere accessibilità in mente.

Answer 2

Un consiglio per verificare se i tuoi colori hanno un buon contrasto è scattare un'istantanea e convertirli in scala di grigi.Se non sai leggere qualcosa, sicuramente i colori sono stati scelti male.

Inoltre, anche se non si tratta di interfacce utente, Rivista prima e dopo può darti alcuni ottimi suggerimenti su colore, design e argomenti correlati.Ha anche alcuni pdf gratuiti da scaricare.

Answer 3

Il libro Progettare interfacce, di Jenifer Tidwell contiene un intero capitolo sull'argomento (Capitolo 9, estratti accessibili online).Vale la pena consigliare l'intero libro.

Answer 4

Per quanto riguarda l'interfaccia utente web, esagero qui e dico che il colore più importante nel web design è il bianco, o "luce".Questo è il colore sopra il quale collochi tratti densi di contenuto.

Testo scuro, sfondo chiaro, sempre, quando si tratta delle aree di contenuto principali.

E la regola più importante nel layout è lo spazio bianco.Lascia respirare il contenuto.

Seguire queste due semplici regole vale più della maggior parte delle linee guida sull'usabilità dell'interfaccia utente.

E comunque, le linee guida dell'interfaccia utente di MS sono (nel complesso) orribili.Leggi Jakob Nielsen, guarda l'estetica del design Apple, ma stai lontano dalla filosofia dell'interfaccia utente con testo a 10 punti della procedura guidata in 12 passaggi "grigio neutro/blu crunchbox" di MS.

(E lo dico come programmatore di MS GUI di lunga data)

Answer 5

Sono pessimo nel trovare colori che stiano bene insieme, quindi imbroglio e utilizzo immagini della natura che sono per lo più del colore che desidero (ad esempio, verde) e poi uso questo sito web per estrarre la combinazione di colori principale.Generalmente la natura fa un ottimo lavoro nell'impostare i propri schemi di colori.

Answer 6

Usa combinazioni di colori ad alto contrasto;Il testo nero su sfondo bianco è il miglior esempio di combinazione ad alto contrasto.

Una combinazione errata è il testo verde su sfondo rosso.È orribile per le persone daltoniche (come me).

Scopri come appare il tuo sito a una persona daltonica: colorfilter.wickline.org

Answer 7

Per quanto riguarda le applicazioni desktop:Qualunque cosa tu faccia, non usare colori selezionati manualmente.Attenersi ai colori di sistema denominati come "Sfondo finestra", "Testo menu", ecc.Altrimenti, le persone che fanno affidamento sulle funzionalità di accessibilità del sistema operativo saranno bloccate con le tue scelte di colore (impossibili da scegliere un tema ad alto contrasto, ad esempio) e le persone a cui piace personalizzare i propri temi desktop penseranno che la tua applicazione sia scadente.

Answer 8

Ecco alcuni semplici suggerimenti per l'usabilità nel tuo tipografia.Queste cose risolvono principalmente problemi di leggibilità e accessibilità.

FARE:

• Utilizza la dimensione relativa del carattere (em)
• Identifica le modifiche linguistiche all'interno di un documento utilizzando l'attributo LANG
• Testo nero su sfondo bianco
• Per i titoli, utilizzare H1, H2, ecc.e nidificarli in modo appropriato
• Suddividi i contenuti e organizzali con titoli che si adattino a ciò che i tuoi utenti stanno cercando
• Scrivi un testo chiaro e semplice
• Allinea a sinistra, irregolare a destra
• Il colore del testo sullo sfondo deve avere un contrasto elevato

NON FARE:

• Utilizza "fai clic qui" o "altro" come testo del collegamento
• Usa la sottolineatura per dare enfasi
• Più di 2 famiglie di tipi di carattere
• Corsivo
• Blocchi di testo utilizzando tutto maiuscolo
• Utilizza testo rosso o blu su sfondo bianco (aberrazione cromatica)