Share
Designeri vs. dezvoltatori - este un argument la fel de vechi ca și calculatoarele. Adevărul este însă că nici nu poate trăi fără celălalt. Un design UI strălucit este la fel de lipsit de funcționalitate, așa cum este cea mai bună bucată de cod cu un frontend urât, inutilizabil. În acest prim post despre UI Basics pentru dezvoltatori, voi încerca să stabilească câteva simple reguli de bază pe care le pot urma distribuitorii pentru a se asigura că aplicațiile, șabloanele și prototipurile lor sunt la fel de frumoase ca și codul însuși - și pot fi folosite pentru a porni.
Gândiți-vă: prima impresie este ultima impresie.
Alinierea se referă la poziția sau orientarea unui element în raport cu alt element sau cu el însuși. Când ne referim la două elemente care sunt aliniate una cu cealaltă, alinierea se referă, de obicei, la ce parte a celor două elemente este în linie. În contextul textului, alinierea se referă la partea în care textul este ancorat într-o linie dreaptă.
În imaginea de mai sus, al doilea exemplu de design simplu al formularului prezintă etichete care sunt aliniate la dreapta una cu alta cu câmpuri de intrare care sunt aliniate la stânga. Acest lucru asigură faptul că asocierea dintre fiecare etichetă și câmpul de introducere este clar și utilizatorul nu se confundă dacă unele etichete sunt prea mici, în timp ce altele sunt lungi.
Gândiți-vă: asigurați-vă că câmpurile de intrare nu sunt prea departe de cea mai lungă etichetă. Dacă variația în lățime este mică, încercați etichete de aliniere la dreapta și câmpuri de introducere pentru alinierea la stânga.
Pentru text, este ideal să utilizați alinierea stângă când designează ecranul. Deoarece cele mai multe metode de redare de tip "screen-screen" sunt incapabile de a distribui spațiu în mod adecvat atunci când justifică textul în ambele părți, alinierea din stânga păstrează textul lizibil și bine organizat. Puteți, bineînțeles, să utilizați alinierea centrală și dreaptă atunci când designul o cere, dar acestea sunt, de obicei, rezervate pentru cazuri speciale și bucăți mai mici de text.
Scopul principal al oricărei interfețe de utilizator este să lase interfața cu aplicația. Acest lucru, credeți sau nu, nu va fi posibil decât dacă îi spuneți utilizatorului ce trebuie să facă și în ce ordine. Din moment ce nu veți fi acolo în spatele fiecărui utilizator pentru a le ajuta să facă acest lucru, interfața trebuie să furnizeze toate indiciile. Iată câteva întrebări pe care trebuie să le întrebați atunci când evaluezi dacă fluxul de lucru dorit este potrivit:
Să luăm exemplul unei selecții de categorii de căutare pe iStockPhoto. În acest caz, pot căuta totul sau pot selecta o anumită categorie pentru a limita căutările mele la acel tip de informații. Deoarece actul principal este de a introduce un termen de căutare și de a lovi pe Căutare, acestea trebuie să fie destul de evidente. Un pas posibil între este selectarea unei categorii, care poate fi o listă drop-down între (ați ghicit că este corect) câmpul de căutare și butonul Căutare.
Un alt exemplu este dialogul de venituri / cheltuieli din aplicația cashbase. Câmpurile sunt aranjate în funcție de fluxul de lucru tipic pe care îl veți folosi pentru a înregistra aceste informații: introduceți suma (care este elementul cel mai important), selectați o categorie, adăugați o notă dacă este necesar și faceți clic pe Adăugați. Informațiile secundare care vor fi utilizate mult mai puțin frecvent - cum ar fi data care este implicită în prezent astăzi și opțiunea de repetare sau anulare - sunt disponibile, însă mult mai subtile.
Elementele conexe dintr-o interfață ar trebui grupate împreună. Acest lucru ar putea părea ca bunul simț atunci când o menționez, dar nu este întotdeauna bine înțeleasă. Motivul pentru care toate legăturile de navigare pe pagini de pe cele mai multe site-uri sunt prezentate într-o singură bară orizontală, este astfel încât utilizatorul să poată identifica relația dintr-o privire și să facă alegerea de a interacționa cu ei fără nici o confuzie.
Să ne uităm la acest exemplu din Gmail - o aplicație pe care mulți o folosesc în mod regulat. Aceasta este bara de instrumente care apare în partea de sus atunci când deschideți un e-mail. Cu toate că toate aceste butoane efectuează anumite acțiuni asupra mesajului deschis, acestea sunt grupate în continuare pe baza a ceea ce fac - acțiunile pe care le-ar folosi pentru a scăpa de mesaj (arhivă, spam, ștergere), pentru a schimba importanța mesajului utilizând căsuța de e-mail cu prioritate), acțiunile legate de etichetă și, în final, o meniuri cu opțiuni secundare.
Un alt exemplu de utilizare bună a proximității este bara de opțiuni din Zootool. Bara de instrumente din partea de jos este împărțită în trei seturi, fiecare care corespunde celor trei panouri din aplicație: lista cu pachete din stânga, fereastra de poștă electronică din centru care conține toate marcajele dvs. și panoul cu detalii din dreapta.
Nu totul într-o interfață de utilizator sau orice aspect pentru acel aspect are aceeași importanță ca orice altceva. Ierarhia este aranjarea elementelor într-un mod care denotă ceea ce este mai mare în ordine, ce urmează, și așa mai departe.
Să aruncăm o privire la acest exemplu aici și să încercăm să identificăm ce ordine de prioritate este. Din moment ce tot - titlurile, etichetele și textul paragrafului - arată la fel, trebuie să citiți totul pentru a face sens. Dacă aceeași interfață a fost modificată doar puțin mai jos, impactul general asupra lizibilității și, la rândul său, gradul de utilizare al interfeței este enorm.
Ca regulă generală, titlul paginii trebuie să fie cel mai mare și mai vizibil pe ecran. Acestea sunt urmate de titluri de secțiuni, subtitluri și apoi etichete mai mici. Textul paragrafului poate fi mai mult sau mai puțin vizibil în funcție de scopul acestuia. De asemenea, nu se limitează la text. Butoanele principale de acțiune pot fi diferențiate de acțiunile secundare, făcându-le mai strălucitoare, mai mari sau mai apreciate. Câmpurile de intrare pentru intrările obligatorii pot fi mai evidente decât celelalte. Pot continua, dar cred că aveți ideea.
Un alt aspect foarte important în proiectarea interfețelor este asigurarea unei diferențe clare între elemente. Desigur, doriți ca textul să poată fi citit pe fundal, dar contrastul se limitează la simpla utilizare a textului deschis pe fundal închis sau invers. Titlurile și textul paragrafului ar trebui să fie clar delimitate. Panourile și barele de navigare trebuie să fie separate de ele, astfel încât utilizatorul să știe ce este. Lista continuă.
Contrastul poate fi stabilit utilizând una sau mai multe dintre următoarele caracteristici:
Acest lucru ar trebui să fie evident, dar uimitor cât de des oamenii alunecă în acest punct. Dacă fundalul dvs. este luminos, evident că doriți ca textul să fie întunecat pentru a asigura lizibilitatea. Deși în teorie culorile complementare ar trebui să funcționeze bine împreună, nu este întotdeauna așa de ușor. Încercați să plasați un text verde strălucitor pe un fundal roșu și veți ști ce spun.
Posibilitățile aici sunt nelimitate, deci prima mea recomandare pentru oricine caută să aleagă culorile este să aleagă o paletă populară de culori de la site-uri precum Adobe Kuler sau ColourLovers. Acestea sunt contribuite, evaluate și votate de către utilizatorii pasionați, care de obicei își cunosc culoarea. Toate elementele de bază ale potrivirii culorilor și ale contrastului sunt de obicei luate în considerare, deci este doar o chestiune de a decide care schemă de culori funcționează în contextul aplicației dvs..
O notă de prudență, totuși - fi foarte precaut să mergeți peste bord cu culoare. Nu doriți ca acestea să umbrească utilitatea și utilitatea aplicației dvs..
O altă modalitate bună de a face diferența între elemente - bazată pe ierarhie, clasificare sau flux vizual - este de a folosi diferite dimensiuni. Acest lucru este valabil atât pentru text, cât și pentru imagini, fundaluri și elemente statice sau interactive. Poate că doriți să puneți mai mult accent pe butonul principal de acțiune, de exemplu, și să păstrați butoanele secundare comparativ mai puțin accesibile. Sau solicitările opționale pot fi mai mici și mai ușoare decât etichetele primare într-o formă.
Aplicația TeuxDeux face o lucrare strălucitoare de a folosi culoarea pentru a face diferența între zilele trecute, prezente și viitoare. Deoarece aspectul este orientat spre o săptămână de lucru, diferite dimensiuni de text sunt folosite pentru a vă asigura că numele zilelor sunt ușor de identificat, în timp ce datele sunt comparativ mai subtile.
Dat fiind că scopul principal al oricărei interfețe de utilizator este de a permite utilizatorilor să interacționeze cu aplicația, este imperativ ca invătătorii să știe ce să facă. Ca creatori ai interfeței, este foarte ușor să uiți că nu veți fi acolo pentru ca fiecare utilizator să le spună ce să facă. Utilizatorii nu mai au răbdarea să citească manuale și ghiduri de pornire rapidă înainte de scufundări în utilizarea unei aplicații. Interfața este necesară pentru a clarifica în mod clar ce părți ale acesteia sunt clicabile, touchable, draggable - pe scurt, interactive.
Toată lumea știe cum să treacă un comutator electric, nu? Lucrul care face ca oricui să fie evident că trebuie să fie apăsat un comutator la un moment dat pentru a schimba starea affordance. Pe suprafața plană a unui ecran - desktop, mobil sau altfel - pot fi utilizate diferite tehnici pentru a permite utilizatorilor să facă clic în mod intuitiv pe un buton sau pe un text într-un câmp de intrare. Atunci când creați hyperlink-uri de text, adăugarea unei linii de subliniere pentru link este standardul cel mai frecvent utilizat, deși există multe alte modalități creative de a face acest lucru.
Aici sunt cateva exemple:
Mergeți cu exemplul de comutare, de unde știți dacă mișcarea comutatorului a făcut ceea ce trebuia să facă? Lumina se aprinde sau se stinge sau, în unele cazuri, o lumină din interiorul comutatorului ajută la clarificarea dacă întrerupătorul este pornit sau oprit.
Într-o aplicație, un astfel de feedback poate fi foarte evident în cazurile în care un buton navighează către o altă pagină sau deschide o fereastră pop-up, dar situațiile în care tot ceea ce face este procesarea unor date în fundal - cum ar fi salvarea modificărilor în setările utilizatorului? Un fel de mecanism de feedback este esențial pentru a permite utilizatorilor să știe că acțiunea lor a avut succes. Acest lucru ar putea fi la fel de simplu ca mesajul "Setările dvs. au fost salvate", o scurtă notificare în partea de sus a paginii sau o evidențiere rapidă în jurul zonei care a fost actualizată.
Când adăugați o nouă sarcină în Amintiți-vă laptele, acesta poate apărea fie în lista din aceeași pagină, fie poate fi adăugat într-o altă listă în fundal (dacă, de exemplu, sarcina a fost atribuită unei alte categorii). Feedbackul pentru acțiune este, prin urmare, furnizat la două niveluri:
Textul din aplicație - totul de la logo la titluri, etichete și copie - reprezintă modul principal de comunicare cu utilizatorii. Din moment ce utilizatorii dvs. accesează informații despre aplicație sau prin intermediul acestora, modul în care setați tipul poate însemna diferența dintre succes și eșec. Desigur, titlurile trebuie să fie mai mari decât textul corporal, iar imprimarea fină trebuie să fie bine, bine; dar multe alte decizii influențează și modul în care utilizatorii consumă informații.
Pasul unu: definiți fonturile. Mă surprinde cât de mulți dezvoltatori nu se deranjează niciodată să schimbe fontul pe care textul lor îl generează. Fonturile implicite se modifică de la sistemul de operare la sistemul de operare și de la browser la browser, ceea ce înseamnă că, dacă nu specificați explicit ce font doriți să utilizați, textul dvs. arata diferit in fiecare combinatie de OS si browser. În plus, Times New Roman - pe care o mulțime de browsere utilizează în continuare ca font prestabilit - nu este doar un font bun pentru citirea pe ecran. Prima mea recomandare este adesea să folosesc un font sans-serif, deși Georgia sau noul font Cambria din Windows 7 arată de asemenea bine.
Dacă vă decideți să utilizați alte fonturi decât cele disponibile în condiții de siguranță, cum ar fi Arial / Helvetica, Georgia, Tahoma etc., asigurați-vă că există o modalitate de a le face să apară similar pe toate platformele. Dacă Flash este mediul de dezvoltare pe care îl alegeți, încorporați-l acolo unde este necesar. Pentru aplicațiile bazate pe HTML / JS, utilizați @ font-face în CSS sau în oricare dintre serviciile de fonturi web cum ar fi Typekit sau Google WebFonts. Amintiți-vă, totuși, că aceste tehnici vin cu o avertizare de dimensiuni suplimentare de fișiere pentru fonturile încorporate. Dacă viteza și reacția sunt primordiale pentru dvs., lipirea la fonturile de bază este cel mai bun pariu.
act de renunțare: Da, știu că Arial și Helvetica nu sunt exact similare, dar sunt destul de similare pentru ca majoritatea utilizatorilor să nu observe diferența.
Cantitatea de spațiu dintre două linii de text este cea mai importantă. Doriți ca vârful textului paragrafului dvs. (înălțimea liniei în CSS să vorbească) să fie de cel puțin 140% din dimensiunea fontului pentru a vă asigura că este ușor de citit. Orice mai puțin și textul dvs. va fi mult mai greu de citit și - mai important - de scanat.
Dacă intenționați să traduceți aplicația dvs. în oricare dintre limbile - și chiar ar trebui - este mai bine să testați interfața din timp cu diferite scenarii. Cel puțin, cantitatea de spațiu pe care un anumit mesaj o cere poate varia drastic între diferitele scripturi. Scripturile din Asia de Est folosesc mai puține cuvinte în medie, dar au nevoie de o mărime mai mare a fontului, iar scripturile indiene trebuie, de asemenea, să fie ușor mai mari pentru a fi citite, iar scripturile din Orientul Mijlociu (ca limba arabă) merg de la dreapta la stânga, -la dreapta.
Asta e deocamdată. Sper că aceste sfaturi au acoperit suficiente elemente de bază pentru ca dvs. să începeți să le aplicați imediat în proiectele dvs. Ca și în majoritatea disciplinelor legate de proiectare, nu există reguli dure și rapide de urmat, iar fiecare are propriile abordări asupra modului în care lucrurile ar trebui să funcționeze. Deci, dacă nu sunteți de acord cu oricare dintre sugestiile de mai sus - sau chiar dacă sunteți de acord cu acestea, dar aveți o altă perspectivă - să auzim despre ele în comentariile.
În continuare, vom lua toată această înțelepciune și vom încerca să o aplicăm la o interfață reală. Rămâneți aproape!
Accentsconagua