Interfețe utilizator - Culori și aspect
Deși sunt interesat în mod specific de informațiile despre aplicațiile web, aș fi, de asemenea, curios și despre dezvoltarea aplicațiilor desktop. Această întrebare este condusă de munca mea pe site-ul meu personal, precum și de locul meu de muncă, unde am dezvoltat câteva caracteristici, dar l-am lăsat pe alții să se integreze în aspectul site-ului.
Există ghiduri sau reguli de bază pentru lucruri cum ar fi scheme de culori, machete, formatare etc? Vreau să asigur lizibilitatea și claritatea vizitatorilor, dar să nu fiu atât de bland și de obosită în același timp.
Cât despre cunoștințele mele în acest domeniu - Dacă îmi dai o fotografie, am destule cunoștințe pentru ao reproduce pe ecran, dar dacă îmi ceri să proiectez o nouă interfață sau să-i redesignem pe una existentă, nu aș ști unde să încep .
Usually, each operating System has user Interface Guidelines. For Windows, have a look here. (Edit: The links in that post are broken. But a Search for "User Interface Guidelines" on MSDN has articles about everything)
Apple are și el propriile sale caracteristici. De asemenea, poate doriți să păstrați accesibilitate in minte.
Un sfat pentru a verifica dacă culorile dvs. au un contrast bun este luarea unui instantaneu al acestuia și conversia în tonuri de gri. Dacă nu puteți citi ceva, culorile au fost cu siguranță rău alese.
Plus, although it's not about user interfaces, Before & After Magazine can give you some pretty good hints about color, design and related topics. It even has got some free pdf's to download.
Cartea Proiectarea interfețelor de Jenifer Tidwell are un capitol întreg pe această temă (capitolul 9, extrase accesibile on-line). Întreaga carte merită recomandată.
Sunt oribil să găsesc culori care să arate bine împreună, așa că înșel și folosesc imagini din natură, care sunt cea mai mare parte culoarea pe care o vreau (să zic, verde) și apoi folosesc acest site pentru a scoate schema de culori principală. În general, natura face o treabă destul de bună de a-și stabili propriile scheme de culoare frumoase.
Pentru interfața web, voi ieși aici pe un limbaj și voi spune că cea mai importantă culoare din designul web este albă sau "ușoară". Aceasta este culoarea deasupra căreia așezați pagini dense de conținut.
Text întunecat, fundal luminos, întotdeauna, când vine vorba de zonele cu conținut principal.
Și cea mai importantă regulă în aspect este spațiul alb. Lasă conținutul să respire.
Următoarele două reguli simple merită mai mult decât cele mai multe linii directoare de utilizare a interfeței utilizator.
Apropo, orientările pentru interfața cu utilizatorul MS sunt (în general și) oribile. Citeste Jakob Nielsen, uita-te la estetica designului Apple, dar stai departe de MS "neutru gri / albastru crunchbox" 12-pas Wizard 10pt text filozofia de UI.
(Și spun asta ca un programator de lungă durată MS GUI)
Utilizați combinații de culori cu contrast ridicat; Textul neagră pe fundal alb este cel mai bun exemplu de combo cu contrast ridicat.
Un combo rău este textul verde pe fundal roșu. Este oribil pentru oamenii nevăzători de culoare (ca mine).
See what your site looks like to a color blind person: colorfilter.wickline.org
În ceea ce privește aplicațiile desktop: Indiferent ce faceți, nu folosiți culori selectate manual. Stick cu culorile de sistem numite, cum ar fi "Fereastra de fundal", "Textul meniului", etc. În caz contrar, persoanele bazate pe caracteristicile de accesibilitate OS vor fi blocate cu opțiunile de culoare (de exemplu, nu pot alege o temă cu contrast ridicat) persoanele cărora le place să-și personalizeze temele pentru desktop vor crede că cererea dvs. este fugly.
Iată câteva indicii simple pentru utilizarea în tipografia . Aceste lucruri se adresează în principal problemelor de citire și accesibilitate.
DOs:
- Utilizați dimensiunea relativă a fontului (em)
- Identificați modificările de limbă dintr-un document utilizând atributul LANG
- Text negru pe fundal alb
- Pentru titluri, utilizați H1, H2, etc. și le așezați corespunzător
- Încărcați conținut și organizați cu titluri care se potrivesc cu ceea ce caută utilizatorii dvs.
- Scrie o copie clară și simplă
- Aliniați la stânga, zdrențuit dreapta
- Culoarea textului-fundal trebuie să aibă un contrast ridicat
Donts:
- Utilizați "faceți clic aici" sau "mai mult" ca text de legătură
- Utilizați subliniere pentru accentuare
- Mai mult de 2 familii de tip de font
- Italics
- Blocuri de text utilizând toate capacele
- Utilizați adevărat text albastru roșu sau albastru pe fundal alb (aberație cromatică)