Share
Rolul Photoshop în designul web devine tot mai modular. În loc să compunem un aspect pixel-perfect al unei întregi pagini web, este mai probabil să ne concentrăm în zilele noastre asupra stilurilor generale, schemelor de culori și elementelor de interfață specifice. Astăzi vom analiza mai atent proiectarea elementelor UI, trăgând împreună propriul nostru kit de UI în acest proces.
Înainte de a începe proiectarea propriei noastre colecții de elemente UI, să aruncăm o privire la unele site-uri care fac o treabă bună cu interfața lor. Cu siguranță nu doare pentru a obține o inspirație!
Interfața fluxului Flow face o treabă excelentă cu interfața cu utilizatorul. Este absolut curat, vibrant - și doar privindu-l, știți instinctiv ceea ce faceți și unde să mergeți. Observați folosirea excelentă a culorilor și a icoanelor care sunt încorporate în aplicația web.
Interfața utilizatorului Gumroad Gumroad are o vibrație excelentă cu interfața. Nu numai că interfața este distractivă, ci face o treabă excelentă de a prezenta informații într-un mod curat, concis și simplu. Observați cum funcționează cu adevărat butoanele de apel pentru acțiune din pagină.
Interfața lui Squarespace Squarespace ia minim și curat la nivelul următor. Fără utilizarea culorilor, interfața permite încă utilizatorilor să navigheze cu ușurință prin tabloul de bord. Observați că, deși există multe conținuturi, utilizarea inteligentă a umbririi face ca toate aceste numere să fie mai puțin intimidante.
Interogarea utilizatorului GoSquared Interfața grafică a GoSquared arată că aplicațiile web cu conținut greu pot, de asemenea, să beneficieze de un design excelent. Cu ajutorul modulelor, interfața devine curată și consistentă. Utilizarea mare a accentelor de culoare adaugă, de asemenea, la interfața de utilizare. Observați cum acest tip de interfață se îmbină cu personalizarea; utilizatorii pot schimba, elimina, adăuga sau edita module cu ușurință.
Acum că am aruncat o privire asupra unor interfețe de utilizator existente, este timpul să ne aruncăm pe noi înșine!
Vom începe cu antetul.
După cum am văzut mai devreme, culorile sunt foarte important când vine vorba de o aplicație web; o schemă de culori ajută la definirea atmosferei și facilitează identificarea aplicației. Culorile diferite provoacă, de asemenea, diferite stări sau teme (de exemplu, culorile jucătoare ale lui Gumroad sugerează că aplicația web este lipsită de stres și ușor de folosit) și pot fi utilizate pentru a viza diferite demografice (de exemplu, luminoase și vibrante pentru un public tânăr, neutră și simplă pentru un public mai în vârstă).
Rețineți că ar fi mai bine să alegeți o schemă de culori modestă cu culori ușor de văzut. De asemenea, asigurați-vă că utilizați contrast și nuanțe diferite, deoarece acest lucru ajută la definirea ierarhiei vizuale și face conținutul mult mai ușor de filtrat, așa cum se vede în exemplele de mai sus. Deoarece nu avem într-adevăr un scop pentru această aplicație, vom fi modeste și vom alege o schemă sofisticată de culoare albastru-gri:
Fiind unic în termeni de stil este important pentru o aplicație web; cum ar fi culorile, stilul este o modalitate de a face ca aplicația dvs. să fie recunoscută și să iasă în evidență de restul. Astăzi, accentul nostru va fi pe modern și simplu. Deși gradientele sunt excelente pe cont propriu, adăugarea de texturi și modele poate face ca elementele să iasă în evidență și să creeze o experiență mai tactică. Pentru a obține acest efect, vom folosi un model de zgomot în bara de navigare și în butoane. Verificați diferența:
Observați diferența pe care zgomotul o face în stânga? Simplu dar eficient! În plus față de modele, vom folosi stiluri de straturi pentru a schimba butoanele, astfel încât acestea nu numai să iasă în evidență, dar și stările lor sunt, de asemenea, distiguibile. În imaginea de mai sus, puteți observa cu claritate că butonul "Acasă" este activ.
Fără altă întârziere, să lansăm Photoshop! Începeți prin crearea unui fișier nou care are o lățime de 600 de pixeli și o înălțime de 350 de pixeli (setările web implicite). Creați o formă de dreptunghi care umple întreaga pânză și redenumiți stratul la "BG". Deoarece acum avem un fundal, ștergeți stratul implicit "Fundal". Apoi, schimbați culoarea de umplere la # dde3ec.
Acum, creați o nouă formă de dreptunghi, care are o lățime de 600px și o înălțime de 70 de pixeli, și aliniați-o la partea de sus a pânzei. Aceasta va fi bara de navigare a aplicației noastre web. Este important să țineți cont de dimensiuni atunci când proiectați, în acest caz nu dorim o navigare prea mare și intruzivă pentru restul aplicației, deci 70px este ideal.
Notă: Într-o situație de browser am putea folosi ems pentru a dimensiona elementele paginii noastre, dar când folosim Photoshop trebuie să rămânem la pixeli.
Redenumiți acest strat la "Nav Bar" și schimbați culoarea de umplere la # 303844. Este important să alegeți o culoare contrastantă pentru elementul dvs. de navigare și să o evidențiați din fundal. În acest caz, avem un fundal albastru deschis și o bară de navigație de culoare albastru închis. Blocați pozițiile ambelor straturi, doar pentru a nu se schimba accidental. Iată ce ar trebui să aveți în acest moment:
Înainte de a începe să adăugăm stiluri la bara de navigare, vom simula modelul de zgomot pe care l-am menționat anterior.
Creați un fișier nou care are o lățime de 100 de pixeli și o înălțime de 100 de pixeli (setările web implicite). Creați un nou strat, selectați întreaga pânză (cmd / ctrl + a) și completați-o cu orice culoare (cmd / ctrl + backspace). Din meniu, navigați la Filter> Noise> Add Noise. Setați cantitatea de zgomot la 400%, distribuția uniformă și asigurați-vă că este selectat Monocromatic. Iată cum ar trebui să arate:
Odată ce ați făcut acest lucru, mergeți la meniu, Editați> Define Pattern, denumiți modelul "Noise" și faceți clic pe "Ok". Acum, aveți un model de zgomot pe care îl puteți folosi pentru a personaliza elementele! Există o mulțime de resurse online excelente care oferă modele de utilizare web - încercați să experimentați cu ele pentru a crea un aspect unic!
Revenind la aplicația noastră web UI PSD, accesați opțiunile stilului stratului pentru "Nav Bar". Folosind stiluri de straturi, este ușor să adaugi câteva efecte deosebite acestei forme simple.
Vom începe prin a adăuga o lovitură de 1px în afara stratului, cu culoarea de umplere # 000000 și opacitatea la 100%. Acest lucru ne va da o linie de definire separând elementul de fundal.
Apoi, vom adăuga o umbră de picătură la strat: modul de amestecare ca normal, culoarea ca # 000000, opacitatea ca 58%, unghiul ca 90 de grade, distanța ca 1px, răspândirea ca 0px și mărimea de 5px. Această umbră de cădere va da un efect frumos evidențiind bara de navigație și făcându-l mai proeminent.
Apoi, vom adăuga o umbră interioară: modul de amestecare ca dodge linear (add), culoare ca #FFFFFF, unghi ca -90 grade, distanta ca 1px si sufocare si dimensiune ca 0px. Această umbră liniară adaugă un efect 3D bara de navigare și doar adaugă un pic mai mult la design.
Barul nostru de navigare pare puțin plat (nu se întâmplă nimic în această privință), dar să adăugăm un gradient: modul de amestecare ca suprapunere, opacitatea ca 20%, gradientul prestabilit de la negru la alb, stilul linear și unghiul de 90 de grade . Pentru a ne ajuta să adăugăm modelul pe care lucram mai devreme: modul de amestecare ca suprapunere și opacitate ca 1%. Iată ce ar trebui să aveți:
Acum că bara noastră de navigare arată grozav, este timpul să adăugați câteva elemente în ea. Designul butoanelor este destul de important pentru designul unei interfețe - ele sunt folosite foarte mult și trebuie să fie distincte, funcționale și reprezentabile ale mărcii.
Distincția între diferitele stări ale butoanelor este, de asemenea, importantă - utilizatorul are nevoie de feedback continuu, prin modificarea unică a stilurilor stratului, putem crea diferite stări. Vom începe prin crearea butonului activ.
Creați un strat nou "Nav Button Active" cu o formă dreptunghiulară rotunjită: lățime de 100px, înălțime de 40px și o rază de graniță de 4px. Din nou, dimensiunile sunt foarte importante. Lățimea și înălțimea butonului se bazează pe mai mulți factori, cum ar fi dimensiunile elementelor părinte, cantitatea de text și dimensiunea textului. Poziționați-o pe verticală, în raport cu bara de navigare și cu 40 de pixeli din partea stângă a pânzei.
Setați culoarea de umplere la # 90a2c3, opacitatea de umplere la 25% și deschiderea setărilor de stil pentru strat. Încă o dată, creați un accident vascular cerebral care este 1px în afara stratului, are o opacitate de 100% și are o culoare de umplere # 000000. Apoi creați o strălucire interioară: modul de amestecare normal, opacitatea de 13%, culoarea # 000000, suflul de 0 pixeli și dimensiunea de 4 pixeli. Această strălucire interioară ne dă efectul "împins în".
Acum, pentru umbra picătură: modul de amestecare de normală, culoarea de #FFFFFF, opacitatea de 10%, unghiul de 90 de grade și distanța de 2px. Această umbră de picături adaugă mai mult la împingerea în vigoare.
Apoi, adăugați un gradient: modul de amestecare normal, opacitatea de 6%, implicit negru la alb, liniar, și un unghi de 90 de grade. Așa cum am făcut cu bara de navigare, adăugați un model de zgomot cu suprapunerea modului de amestecare și opacitatea de 2%.
Rezultatul este un buton care are o calitate intuitivă; fără a se uita chiar la celelalte stări ale butoanelor, o utilizare poate recunoaște imediat că orice text din acel buton se referă la conținutul care este activ pe pagina web.
Textul este la fel de important pe un buton; rețineți că necesită cameră de respirație în funcție de dimensiunea butonului pe care îl alegeți, precum și de cantitatea de conținut pe care doriți să o afișați în buton.
Creați un nou strat de text numit "Text activ". Setați culoarea la # f3f5f9, marimea fontului la 12 pixeli și familia de fonturi pentru Helvetica Neue.
Notă: Helvetica Neue este prezentă ca sistem de fonturi în multe versiuni ale sistemului de operare, dar nu și pentru Windows. Puteți prefera să utilizați Arial pentru acest kit UI, deoarece este mai accesibil pentru utilizatorul final.
Adăugați o umbră de picătură: modul de îmbinare ca suprapunere, opacitatea de 35%, unghiul de -90 grade, distanța de 1px și răspândirea și dimensiunea de 0px. Textul "sans-serif" acum pare a fi împins cu butonul activ. În cele din urmă, centralizați textul în raport cu butonul. Aici, ceea ce avem este un text destul de simplu în interiorul butonului, dar folosind o culoare care este în concordanță cu tema și o umbră de picătură simplă, îmbunătățește conținutul și face mult mai ușor de citit.
Acum, să creăm un buton cu stil obișnuit pentru elementele din bara de navigare care nu sunt active. Este important să păstrați tema celeilalte stări a butonului, dar să schimbați stilul astfel încât acesta să fie diferit în mod corespunzător de starea activă.
Duplicați stratul "Nav Button Active" ca "Nav Button Normal" și stratul text "Text Active" ca "Text Normal". Pentru a face ca butonul de stare normal să arate diferit, vom inversa faptul că a împins aspectul și stilul butonului, astfel încât să pară că este împins din ecran. Acest lucru nu numai că îl face deosebit, ci permite utilizatorului să știe că poate fi selectat. Începeți prin a schimba culoarea de umplere a butonului # c2dcff și opacitatea de umplere de 5%.
De asemenea, schimbați umbra de umplere: modul de amestecare a culorii normale, culoarea ca # 000000 opacitatea de 10%, unghiul de 90 de grade, distanța de 2px. Apoi, schimbați umbra interioară: modul de amestecare normal, opacitatea de 25%, culoarea ca #FFFFFF, distanța de 1px. Acum, adăugați o strălucire interioară: modul de amestecare a ecranului, opacitatea de 7%, culoarea ca #FFFFFF și dimensiunea de 3px. În cele din urmă, modificați opacitatea gradientului la 13% și îndepărtați suprapunerea modelului. Rezultatul va fi un buton care este puțin mai ușor decât bara de navigare, în picioare cu ajutorul umbrei și accidentului.
Diferențierea culorii textului și a stilului este un alt mod în care puteți face stările să pară diferite. Modificați culoarea textului la # e8ecf3 și umbra de picătură astfel încât opacitatea să fie de 50%, iar unghiul este de 90 de grade.
În loc să dați utilizatorului un buton de "conectare" plictisitor pentru a face clic pe, de ce să nu schimbați lucrurile și să aveți o pictogramă de putere în schimb? Acest lucru va adăuga ceva creativ și unic designului, permițând în același timp utilizatorilor să distingă rapid butonul de conectare de orice altceva. Începeți prin duplicarea stratului "Nav Button Normal" la "Login Buton Nav". Ajustați dimensiunea formei astfel încât să fie o pătrată rotundă de 40 x 40 pixeli. Puteți face acest lucru utilizând instrumentul de selecție directă, selectând cele 4 puncte din partea dreaptă a stratului de formă și mutându-le spre stânga, astfel încât lățimea să se modifice la 40px + <). Use this method rather than transforming the shape layer, as that distorts the rounded edges.
Pentru a crea pictograma de alimentare, creați o serie de forme pe un strat numit "Power Icon". Mai întâi, faceți un cerc de 16x16 pixeli. Apoi, scade un cerc de 12 x 12 pixeli în centrul celui mai mare. Acest lucru vă va oferi un cerc de 16x16 pixeli cu o grosime de 2px. Apoi, scade un lat pătrat de 6 pixeli aliniat la centrul de sus al cercului. În cele din urmă, adăugați un dreptunghi înalt de 2px, de 8px, centrat în raport cu pătratul scăzut și aliniat la 1px deasupra celui mai înalt punct al cercului.
În acest moment, ar trebui să aveți un strat de formă cu pictograma de alimentare. Modificați culoarea formei pictogramei de alimentare la #FFFFFF. Deschideți stilurile de straturi și adăugați o umbră de umplere: modul de îmbinare a suprapunerii, culoarea ca # 000000, un unghi de 90 de grade, distanța de 1px și răspândirea și dimensiunea de 0px. Apoi adăugați un gradient: modul de amestecare a normalului, opacitatea de 10% și gradientul implicit de negru la alb.
În final, aliniați pictograma butonului de conectare la centrul butonului de conectare și aliniați butonul 40px din partea dreaptă a pânzei. Iată cum ar trebui să apară bara de navigare finalizată:
Chiar dacă am folosit același stil pentru acest buton ca și celălalt, înlocuirea textului cu o pictogramă a îmbunătățit designul general.
Am stabilit o bază excelentă pentru interfața web a aplicației noastre web, dar până acum am creat doar butoane și fundaluri. Să încercăm să extindem interfața utilizator adăugând o interfață de autentificare dropdown. Acest lucru ne va da șansa de a crea elemente și butoane de formă care să fie decorate pentru fundaluri diferite.
Să facem mai întâi un nou dreptunghi rotunjit (raza de graniță de 4 pixeli ca mai înainte pentru consistență), care are o lățime de 300 de pixeli și o înălțime de 200 de pixeli, denumindu-l "Login Dropdown BG". Apoi, adăugați un triunghi cu lățimea de 14px și 7px înălțimea stratului "Login Dropdown BG" și aliniați-l cu 13px din partea dreaptă sus a dreptunghiului rotunjit. Acest lucru va crea un efect de tip tooltip în meniul derulant și reprezintă o conexiune între butonul de conectare de deasupra acestuia.
Când schimbăm culoarea meniului de conectare în jos #FFFFFF, nu se deosebește de fundalul pânzei. Pentru a face mai mult de așteptat, vom adăuga o umbră de umplere: modul de amestecare normal, opacitatea de 25%, unghiul de 90 de grade, distanța și răspândirea de 0px și dimensiunea de 4px. Acest lucru ne oferă o umbră subtilă pentru cădere, făcându-l nu doar mai proeminent, ci și dând efectul că se află în fundal. Dacă ați codificat acest lucru, ar fi o idee bună să adăugați o animație scurtă pentru a adăuga efectul plutitor. Aliniați această formă drop-down 40px din dreapta pânzei și 13px din partea de jos a barei de navigare. Iata ce avem pana acum:
Observați cum alinierea dropdown-ului este în același timp cu butonul? Consistența cu poziția și umplutura fac curățarea și este mai ușor să codificați în interiorul unui container.
Acum, adăugați un strat text cu textul "Conectați-vă la contul dvs. sau creați unul nou". Schimbați dimensiunea fontului la 12px, familia de fonturi pentru Helvetica Neue (Regular) și culoarea la # 92969b. Pentru a reprezenta un link, schimba culoarea "creați una nouă" # 5c6f91.
În ceea ce privește stratul "Login Dropdown BG", aliniați textul 14px din stânga și 20px din partea de sus. Nu vrem să facem ca textul să iasă prea mult pe măsură ce ne dorim ca utilizatorii să se concentreze pe conectarea efectivă, motiv pentru care o dimensiune relativ mai mică a fontului și culori mai ușoare este o idee bună.
Este important să rețineți faptul că domeniul nostru de text trebuie să se potrivească cu tema designului, dar să fie suficient de clar pentru ca utilizatorii să îl poată recunoaște și să-l umple. Creați un dreptunghi rotunjit nou (raza de graniță de 3 pixeli) de 270px latime și 30px mare și denumiți-o "Câmp text". Rețineți că în loc de o rază de graniță de 4 pixeli, folosim o rază de graniță de 3 pixeli pentru câmpul de text. Motivul pentru aceasta este că câmpul de text se află în meniul derulant și ar părea incomod dacă dimensiunea razei era aceeași.
Schimbați culoarea de umplere a stratului la # f9fafc și adăugați o lovitură de 1px în afara formei care este culoarea # d3d8e1 (Opacitate 100%). Pentru a adăuga un câmp de text în câmpul de text, adăugați o umbră interioară: culoarea #FFFFFF, opacitatea de 100%, unghiul de -90 grade, distanța de 1px și răspândirea și dimensiunea de 0px. Am ales să schimb culoarea câmpului de text astfel încât să se evidențieze și să nu se amestece în fundalul drop-down.
Adăugați un strat text cu textul "Nume de utilizator" (dimensiune font 12px, Helvetica Neue Regular, culoare de # 727d88) și aliniați-l pe verticală și deplasați 10px stânga cu privire la câmpul de text. Aliniați câmpul de text 14px din stânga fundalului derulant și 18px din partea de jos a stratului de text. Pentru a crea un câmp de parolă, pur și simplu duplicați stratul de câmp text și stratul de text și aliniați-l pe 12px din partea de jos a primului strat de câmp text. Iată ce ar trebui să aveți în acest moment:
Observați modul în care dimensiunile și pozițiile tuturor câmpurilor de text și text arată natural; nu doriți să păstrați prea mult sau prea puțin spațiu, ci mai degrabă suficient pentru ca conținutul să se potrivească confortabil.
Este timpul să adăugați un buton de conectare pentru formularul nostru, dar butonul pe care l-am creat pentru navigare nu se va potrivi exact cu designul. Acest lucru se datorează faptului că acum avem de-a face cu un fundal ușor, iar stilurile folosite pe bara de navigare nu se vor deosebi de fundalul alb al dropdown-ului. Contrastul este foarte important pentru o interfață accesibilă.
Vom crea un stil de buton secundar, unul care poate fi folosit pentru conținutul principal al aplicației și care funcționează bine și pe fundaluri ușoare. Vom folosi stilul similar de la butoanele de navigare pentru stilul butonului de conectare, astfel încât stilul nostru să fie consistent.
Începeți prin a crea o nouă formă dreptunghiulară rotunjită (rază de graniță de 3 pixeli), care are o înălțime de 90 de pixeli, lățime de 35 de pixeli și denumiți-o "buton de conectare". Schimbați culoarea de umplere la # a3b2cd și adăugați o lovitură de 1px în afara stratului de formă care este culoarea # 7b8da4 (Opacitate 100%). Apoi, adăugați o acoperire cu gradient de opacitate de 25%, cu culorile implicite de la negru la alb. În cele din urmă, adăugați o umbră interioară normală cu culoarea #FFFFFF, 45% opacitate, unghiul de 90 de grade, distanța de 1px și răspândirea și dimensiunea de 0px.
Pentru conținutul textual, creați un nou strat de text (dimensiune de 12px, Helvetica Neue Regular, culoare #FFFFFF) cu textul "Login" și adăugați o umbră de umplere: modul de amestecare de suprapunere, culoare # 000000, distanța de 1px, și răspândirea și dimensiunea de 0px. Aliniați stratul de text în centrul butonului de conectare.
La fel ca designul Gumroad, dorim ca utilizatorii noștri să știe exact unde să facă clic după ce își completează detaliile de conectare.
Asta este cu designul nostru de fundație UI!
După câteva straturi și încă câteva stiluri de straturi, am finalizat proiectul pentru fundația UI-ului aplicației noastre web! Cu ceea ce avem, puteți obține o simț pentru tema, stilul, culorile și elementele interfeței cu utilizatorul.
Cu toate lucrările pe teren pe care le-am făcut, este relativ simplu să continuăm să proiectăm mai multe elemente. Am stabilit schema de culori și stilul designului nostru, astfel încât tot ceea ce este necesar este să facem mai multe forme și să optimizăm stilurile de culori / straturi. În mod esențial, odată ce aveți elemente de design de bază, puteți să prezentați module importante din aplicația dvs..
Cea mai bună parte a creării unui UI "sample" este că nu necesită eforturi atât de mari ca și cum ați fi creat un set complet de UI. Să presupunem că nu sunteți mulțumiți de direcția în care se îndreaptă UI - este mai bine să vă îndepărtați de o mică colecție de elemente, decât să aruncați ore de lucru în jos. Această abordare a fluxului de lucru vă permite, de asemenea, să explorați o mulțime de teme UI diferite și să alegeți cea care este perfectă pentru aplicația dvs..
Accentsconagua