10 indicatori de remediere pentru dezvoltatori

Iată o situație care vă poate fi cunoscută: sunteți dezvoltator și construiți un prototip pentru a demonstra ceva. Funcționează exact așa cum spui, dar aspectul de groază de pe fețele utilizatorilor dvs. vă spune ceva greșit - demo-ul dvs. arată ca un crap.

Să arătăm câteva linii directoare și sfaturi pentru a vă ajuta demo-ul să arate cât de bine ar trebui.

Relaxa

S-ar putea să fi auzit următoarele: 

"Designul bun, când se face bine, devine invizibil. Numai atunci când sa terminat cu rău că o observăm. "- Jared Spool

Acest lucru este relevant pentru toți designerii, dar este deosebit de pertinent pentru dvs., ca dezvoltator. Construiești un demo; ceva care este destinat doar să demonstreze ceva. Utilizatorii săi trebuie să fie implicați în orice sarcină pe care o puneți în fața lor, fără a reacționa la "proiectarea".

Indicatorul # 1: Încercând să faceți o declarație stilistică, există șanse mari să vă mișcați mai departe de a oferi un demo bun. Nu te complica. Stick să-l facă să funcționeze.

Dacă ceva "nu arată bine", eliminați toate detaliile vizuale pe care le-ați adăugat (cum ar fi umbrele cutiei, margini, efecte) și reveniți la desen.

Acum avem un cuvânt de avertizare de avertizare, să ne concentrăm pe mai multe indicii practice!

Evitați o paletă murdară

Nimic nu este mai ofensiv pentru ochi decât opțiuni slabe de culoare. De fapt, deciziile de culoare ar trebui să fie abordate bine în procesul de proiectare UI, dar este întotdeauna tentant să se facă alegeri îndrăznețe ale culorilor din timp.

Nu, cu siguranță nu ceea ce urmărim

Dacă ați efectuat o operațiune de interfață cu Windows, veți începe cât mai simplu posibil; cu forme rudimentare, linii și monocrome. Odată ce aspectul și relațiile au fost rezolvate, ați adăuga mai multe detalii, mergând spre fidelitate mai mare până când veți începe în cele din urmă intenționat explorând culoarea. Deci, unele indicii:

ac indicator # 2: Luați în considerare monocromul propriilor dvs. demo-uri. Stick la nuanțe de gri (cincizeci?) Până când sunteți gata să utilizați culoarea pentru a ajuta la clarificarea lucrurilor.

Chiar dacă o facem nimic altfel, aceasta este o îmbunătățire

ac indicator # 3: Ca regulă generală, evitați culorile complet saturate (adică: culori la putere maximă, fără adaos de nuanță albă). În special atunci când sunt văzute pe un ecran iluminat, ele pot fi incomode să se uite când sunt combinate unul cu celălalt.

ac indicator # 4: Același lucru este valabil și pentru alb-negru. Evitând extremele, lipind de pe negru și alb, este mai puțin probabil să oferiți utilizatorilor ochi obosiți.

Mergeți și mai mult și adăugați o notă de culoare negrilor și a gri. După cum a spus Ian Storm Taylor în 2012:

"Umbrele nu sunt negre"

Lecțiile lui Ian de la școala de artă oglindesc propria-mi-mi amintesc că profesorul meu ma provocat să găsesc un punct negru în filmul lui Georges Seurat, după-amiaza de duminică pe insula La Grande Jatte.

Spoiler: nu veți găsi unul

ac indicator # 5: Când adăugați culori în designul dvs. monocrom, faceți acest lucru unul câte unul. Fiecare culoare pe care o adăugați este o invitație pentru distragerea utilizatorului. Am vorbit pe scurt despre evitarea saturației ridicate, dar nu există nimic de spus că nu puteți folosi o serie de saturații de o singură nuanță. Acest lucru vă va oferi varietatea și adâncimea de care aveți nevoie, fără riscuri.

Nu complicați tipografia

Dacă vorbim despre demo-uri și prototipuri, nu este nevoie să mergeți dincolo de utilizarea fonturilor sistemului (a se vedea Pointer # 1). Totuși, ia în considerare următoarele:

ac indicator # 6: Sunteți în siguranță în mâini cu sans-serif ("fără" serif). Serifele de tip Serif sunt cele care au detaliile în care se termină loviturile (un jargon acolo pentru tine).

Serifele pot fi utile pentru a adăuga personalitatea la un design și pot face adesea un text mai ușor de citit. Dar ele nu sunt utilizate în mod tradițional în designul UI, în special la dimensiuni mai mici, la fel de mult timp când acestea prezintă greutăți variate de accident vascular cerebral.

Notă: deoarece rezoluțiile ecranului cresc, claritatea se îmbunătățește și acest argument are o greutate mai mică.

Roboto & Noto

Google face uz de "umanistul" Droid Sans în interfețele lor Android, și mai recent Roboto și Noto. Apple utilizează San Francisco pentru gama lor de sisteme de operare, iar înainte de asta, Neue Helvetica. Firefox OS folosește Fira Sans. Observați aici tema comună? Toate sans serif.

ac indicator # 7: Evitați ambiguitatea. Combinațiile de caractere cum ar fi O0, aeo, 8B, Il1, 5S, 2Z, 6b și 9g sunt câteodată dificil de deosebit, în funcție de tipul ales. Testați-i; dacă vă luptați să le spuneți în afară, atunci veți fi înțelepți să alegeți un alt tip de text.

Fira Sans (de la sistemul de operare Firefox) este destul de clare

Cameră pentru a respira

Spațiul alb (spațiul funcțional) deservește designerul vizual în multe feluri. Ajută la crearea unui sentiment de echilibru, atrage atenția asupra aspectelor necesare ale designului, reduce sarcina cognitivă pentru utilizator (aș putea continua). Dacă interfața dvs. este îngrădită, utilizatorii vor face repede să se simtă inconfortabil și vor reduce capacitatea lor de a procesa eficient sarcinile.

Când te confrunți cu o mulțime de informații, este tentant să strângi cât mai mult posibil, dar care dintre aceste două exemple găsești mai ușor la ochi?

Ouch - acel titlu este împins în partea de sus a paginiiA fost adăugat spațiu pentru celulele tabelului și în jurul întregului lucru

ac indicator # 8: În cazul în care spațiul de respirație este "mai mult" este aproape întotdeauna mai bine. Adăugați elemente de umplutură, adăugați margini, creșteți înălțimile de linie, împrăștiați totul.

ac indicator # 9: Asigurați-vă că distanța este coerentă. Utilizați o unitate standard ca bază, adăugând spațiu în incremente de (de exemplu) 10px. Consistența este cheia pentru crearea ritmului și a armoniei.

Tipul Sans-serif, monocrom cu o culoare de accent, o mulțime de spațiu, spațiere consistentă

Faceți-vă viața mai ușoară

Nu este nici o rușine; permiteți cadre precum Bootstrap și Foundation să facă munca grea pentru dvs. Acestea sunt deseori criticate pentru că site-urile de producție sunt generice și neimaginative, dar pentru prototipuri sunt absolut perfecte, direct din cutie. 

Toate deciziile pe care le-am discutat până acum au fost deja făcute pentru dvs.: tipografie, culori, spațiere, consistență și pentru detalii dezordonate, cum ar fi formele pe care nu le puteți înșela.

ac indicator # 10: Stați pe umerii altora. Prindeți șabloanele Bootstrap existente, șabloanele de fundație sau Material Design Lite sau Skeleton sau Pure CSS sau UIKit sau oricare dintre cele un milion de cadre CSS care vă plac! Nu vă fie frică să vă adăugați propriile stiluri, având în vedere toate punctele discutate până acum.

Din blocurile de construcție ale ZURB

Aceste cadre sunt foarte cuprinzătoare. Asigurați-vă că utilizați toate piesele de care aveți nevoie; probabil că veți avea probleme dacă alegeți doar cîteva elemente.

Concluzie

Acest lucru nu a fost conceput pentru a fi un articol bazat pe design, ci are ca scop să vă ajute să rezolvați problemele pe care le aveți cu modelele dvs. de prototip. Dacă sunteți dezvoltator - probabil că înregistrați un curs sau că prezentați un produs clienților sau echipei dvs. - și chiar doriți ca demo-urile dvs. să-și facă treaba, acești indicatori ar trebui să vă aducă pe drumul cel bun. Anunțați-mă în comentariile dvs. dacă aveți întrebări specifice. Mult noroc!