Share
Ce veți creaDezvoltarea ghidului de stil oferă o abordare extrem de flexibilă pentru designul web modern. În acest tutorial vă voi îndruma prin proiectarea unui kit de interfață cu utilizatorul (UI), explicând în același timp procesul de luare a deciziilor care va menține setul nostru UI consistent și reutilizabil.
Pentru a vă urma, veți avea nevoie de următoarele active (disponibile în mod gratuit):
Deschideți Photoshop și începeți prin crearea unui nou document (Fișier> Nou ... ) folosind setările de mai jos. Aveți libertatea de a utiliza o pânză de dimensiuni pe care o preferați - web-ul nu are lățime fixă, la urma urmei.
Să stabilim câteva ghiduri, astfel încât setul nostru de UI să fie organizat și aliniat. Nu folosesc întotdeauna o grilă, dar stabilirea unor constrângeri va asigura unitate și coerență. Mergi la Vizualizare> Ghid nou ... și stabiliți câteva linii directoare. De obicei, aleg 1000px ca lățime de pornire a site-ului, așa că să păstrăm setul nostru de UI în aceste dimensiuni.
Notă: Linii directoare utilizate pentru acest tutorial: vertical la 100px, 600px și 1100px.
Bacsis: De asemenea, puteți utiliza pluginul GuideGuide Photoshop pentru a face acest proces și mai rapid.
Prin lipirea etichetei Photoshop vom păstra lucrurile organizate și ușor de navigat și editat. Într-un mediu de lucru, vom avea nevoie de acest kit UI de multe ori ca punct de referință și activ de dezvoltare, deci trebuie să-l păstrați organizat (dezvoltatorii vă vor mulțumi). Să formăm grupuri cu șase straturi numite Tipografie, Butoane, Formulare, Avatare, Imagini și Culori.
Pentru a crea grupuri, mergeți la Layer> Nou> Grup ... și dați fiecăruia un titlu așa cum este menționat. Pentru crearea rapidă a unui grup, faceți clic pe pictogramă.
După cum a spus Oliver Reichenstein, "Web Design este tipografie de 95%", deci trebuie să o faceți bine. Mai întâi de toate trebuie să stabilim mediul perfect pentru tipul nostru; un fundal neutru și ușor pentru ochi. Contextul și tipografia trebuie să mențină niveluri rezonabile de contrast pentru a fi citite. Pentru acest tutorial, să folosim un ton subtil de culoare gri - o culoare neutră, dar suficient de puternică pentru a oferi aplicației dvs. o personalitate. Am setat culoarea primului # e9eeef și lovit Alt + Backspace pentru fundal.
Deschideți Tipografie grup, alegeți Instrument tip orizontal (T) și selectați Open Sans font. Open Sans este o tipă modernă care vine în mai multe greutăți diferite și are un aspect profesional și totuși primitoare. Este destul de elegant pentru titluri, dar și suficient de practic pentru copia corporală pe web.
Open Sans are o mulțime de variante, deci pentru acest kit UI voi folosi doar un font. Rețineți că ar trebui să fiți atenți dacă utilizați mai mult de două fonturi diferite pentru proiectele dvs., deoarece lucrurile se pot dezordonat repede.
Am setat culoarea primului la negru # 000000 apoi folosind Instrument tip orizontal (T) și cele menționate anterior Open Sans font cu Ușoară opțiune și mărime 55px au introdus titlul secțiunii. Vom folosi titluri de aceeași dimensiune și de titluri pentru titluri viitoare pentru a păstra coerența.
Acum trebuie să stabilim o ierarhie pentru tipografia noastră. Verificați acest articol Cum să stabiliți o scală tipografică modulară de Ian Yates pentru a înțelege mai bine știința și importanța tipografiei web.
HTML(HyperText Markup Language) are numeroase etichete diferite care ajută browserele să interpreteze conținutul unei pagini. Multe dintre aceste etichete sunt utilizate în mod specific pentru tipografia web, cum ar fi , , si asa mai departe. Acestea descriu titlurile, fiind cea mai importantă. După aceea, există o eticheta folosită pentru paragrafe. Fără a intra în mai multe detalii în ceea ce privește HTML, vom defini aspectul acestor elemente.
Utilizarea Instrument tip orizontal (T) introduceți trei titluri. Am folosit-o Open Sans (lumină) 55px pentru h1, 44px pentru h2 și 32px pentru h3 lăsând 30px gap între ele. Spațiul este un alt lucru important de ținut minte. Lăsați un spațiu suficient, astfel încât tipul dvs. să fie ușor de citit și să pară echilibrat.
Notă: Am folosit-o Regulat greutate pentru h3. Pe măsură ce tipul devine mai mic Ușoară varianta poate deveni mai puțin lizibilă.
Așa cum am stabilit titlurile noastre să trecem la copia conținutului real. Luați în considerare toate variantele posibile de copiere și afișare în kitul UI, astfel încât dezvoltatorii să poată pune în aplicare ceea ce ați planificat. Gândiți-vă la un stil de titlu în interiorul paragrafului, stiluri bold, italic și, de asemenea, link-uri.
Pentru culoarea principală a copiei am ales gri # 838383, pentru titlul negru # 000000 și albastru # 006ee3 pentru culoarea linkului.
Titlul va fi considerabil mai întunecat decât copia principală, oferindu-i un impact mai mare. Culoarea principală a conținutului ar trebui să fie relaxantă și ușor de citit. În cele din urmă, asigurați-vă că alegeți o altă culoare pentru linkurile dvs., astfel încât utilizatorii să înțeleagă că sunt clicabili.
Notă: Setați titlul și fontul de legătură la Semibold greutate pentru a le face să arate mai mari și mai importante.
Butoanele sunt foarte importante pentru proiectele web. Ele sunt linkuri simple sau depun formulare de cele mai multe ori, dar ele pot servi, de asemenea, o funcție de apel la acțiune (CTA) prin conducerea oamenilor prin intermediul paginii, luând deciziile mai repede. Este vital să definiți un aspect consistent al butoanelor, astfel încât utilizatorul să fie familiarizat cu ele în întreaga aplicație.
Minimizați Tipografie făcând clic pe săgeata mică de lângă numele grupului și deschizând Butoane grup. După aceea, creați câteva noi orientări verticale pentru a împărți spațiul nostru de conținut în trei zone egale cu intervale de 35px între. Mergi la Vizualizare> Ghid nou ... și setați următoarele linii directoare: 410px, 445px, 755px și 790px. Aici vom plasa butoanele noastre, astfel încât toate acestea să fie egale și coerente.
Navigați înapoi la Tipografie grup, găsiți stratul titlului secțiunii și duplicați-l făcând clic pe CMD + J, apoi mutați-o Butoane grupați-l și modificați-l în "Butoane".
După aceasta, introduceți trei titluri ale stărilor butoanelor: Normal, Hover și Active. Plasați-le în stânga celor trei secțiuni egale, ținând cont de decalajul de 35px dintre prima, a doua și a treia zonă.
Acum setați culoarea prim-planului la albastrul folosit anterior # 006ee3 și să creeze un nou grup numit Primar Normal. Apoi, ridicați a Instrument rotunjit dreptunghiular (U), a stabilit Rază la 3 pixeli și desenați o formă de dreptunghi rotunjită de dimensiune 310x44px. Plasați-l între primele două linii directoare sub titlul "Normal". Pentru a finaliza butonul, scrieți un text pe aceasta folosind culoarea albă #FFFFFF astfel încât este ușor de citit.
Acum duplicați Buton primar grup, făcând clic CMD + J pe grup și redenumiți aceste grupuri Cursa primară și Activitate primară. După locul respectiv, aceste grupuri noi se află sub cele două secțiuni create anterior.
Ce fac planare și activ poți să te întrebi? Hover descrie starea unui buton odată ce mutați cursorul mouse-ului peste el, așa că trebuie să ilustrăm feedback din buton. O legătură devine activă când faceți clic pe ea.
Pentru stilul hover și stările active ale butoanelor le vom pur și simplu întuneca. Creați un strat nou deasupra formei butonului și completați-l cu negru # 000000. După aceea, țineți-vă jos Alt și mouse-ul peste strat până când vedeți o mică pictogramă săgeată în jos - eliberați-l pentru a crea o Mască de tăiere. În cele din urmă, reduceți stratul Opacitate la 10%.
Notă: pentru starea activă a butonului crește stratul negru Opacitate la 20%.
Acum duplicați toate grupurile de butoane anterioare și schimbați titlurile și culoarea în secundar. Vom defini culorile kitului UI mai târziu în acest tutorial, pentru care acum pur și simplu alegeți o culoare și înlocuiți albastrul anterior. Am folosit verde # 36c265.
Formularele sunt un element de aplicație web foarte important, deoarece permit utilizatorilor să introducă informații și să interacționeze cu aplicația. Vom proiecta câteva forme de bază, astfel încât dezvoltatorii să se poată adapta la același stil și să păstreze consistența designului.
Minimizați Butoane grup și deschideți Formulare grup. Din nou, duplicați titlul secțiunii din grupul anterior și redenumiți-l la "Formulare". Vom crea câteva tipuri de intrări de formate de bază, inclusiv introducerea textului, câmpul parolei, lista de dropdown sau selectați câmpul și trimiteți câmpul (un buton simplu).
Atunci când se proiectează forme, claritatea și familiaritatea sunt factorii cheie. Nu încercați să reinventați roata. Creați un nou grup și sunați-l Nume. Apoi alegeți a Instrument tip orizontal (T) și introduceți o etichetă de câmp de introducere, în cazul meu este "Prenume" folosind aceeași dimensiune negru de 18px # 000000 Open Sans (Regular) font.
Acum duplicați unul din straturile de formă ale butoanelor și mutați-l în Nume grup. După această modificare, culoarea sa de fundal este albă #FFFFFF și adăugați un gri 1px # d5d5d5 în accident vascular cerebral. În cele din urmă, plasați un exemplu de text introdus în interiorul dreptunghiului rotund alb. Pentru exemplul meu am folosit 16 pixeli Open Sans (Regular) și culoarea gri # 838383 așa cum sa folosit anterior pentru textul corpului.
Creați mai multe câmpuri de intrare cu titluri prin simpla copiere a primului câmp de introducere. În mod tradițional, pentru câmpul de parolă utilizați puncte • sau asteriscuri *. Un exemplu de mai multe câmpuri este prezentat mai jos.
Duplicat CMD + J unul dintre grupurile de butoane, mutați-l în interiorul Formulare grupați-o și plasați-o sub câmpurile de intrare create recent. Încă o dată este important să rămânem consecvenți și să reutilizăm elementele create anterior.
În acest tutorial ne lipim de o interfață de bază foarte utilă care ar putea servi o aplicație web foarte simplă. Să creați acum un alt tip de câmp de intrare; .
Duplicați una dintre grupurile de câmpuri de introducere și plasați-o între liniile verticale a treia și a patra, asigurați-vă că ați aliniați totul. Modificați valoarea la ceea ce doriți și adăugați o simplă pictogramă săgeată pentru a indica faptul că este un câmp vertical. Puteți găsi pictogramele săgeți pe Iconfinder.
Pentru a ușura munca pentru dezvoltatori, asigurați-vă că includeți o stare activă. Gândiți-vă cum va arăta dropdownul atunci când utilizatorul face clic pe el? Este o sarcină a designerului de a ghida dezvoltatorul pentru a crea o experiență consistentă și unificată.
Duplicați grupul de dropdown creat recent. Utilizarea Instrumentul de selecție directă (A) faceți clic pe un colț de formă pentru a vedea punctele de margine, apoi țineți apăsată Schimb, selectați cele patru puncte de fund și apăsați jos de câteva ori pentru a extinde forma. Această tehnică păstrează vectorul de formă și păstrează colțurile neatinsă.
După aceea, duplicați selecțiile posibile și plasați unele sub prima. Folosește o Instrumentul de linie (U) 1px în Greutate pentru a face separatoare simple și, în final, schimba culoarea săgeții la cea utilizată pentru butoane. Acest lucru vă va ajuta să indicați faptul că câmpul este activ.
Vom crea acum un scenariu simplu de eroare, cum ar fi dacă cineva a introdus o parolă prea slabă.
Duplicat CMD + J câmpul de parolă creat anterior și plasați-l sub câmpurile derulante. După aceea, modificați marginea câmpului la un roșu subtil (am folosit # eb8686) și fundalul la un roșu cenușiu # e9dde3. În cele din urmă, alegeți un roșu mai puternic # b63131 și introduceți un mesaj de eroare simplu.
Asta e cu forme! Am acoperit elementele de bază, dar asta e suficient pentru a începe să proiectezi formulare mai complexe.
Avatarele sunt aproape standard în orice aplicație web în aceste zile, așa că este util să ai niște vizuale pentru o mai ușoară comunicare și identificare a utilizatorilor.
Minimizați grupurile inutile și deschideți grupul Avatars. Alegeți Instrument de elipsă (U) și, ținând jos Schimb, trageți un cerc de 80x80 pixeli. Mergeți la uifaces.com și alegeți o imagine. Copiați-l și lipiți-l deasupra cercului recent creat. Ține-te jos Alt și mouse-ul peste miniatură a imaginii până când vedeți o săgeată mică, apoi eliberați mouse-ul pentru a crea o Mască de tăiere.
Este important să vă gândiți la modul în care vor fi folosite avatarele și să includă unele dimensiuni diferite pentru dezvoltatori care să le folosească. De exemplu, imaginile de avatar mai mari ar putea fi folosite pe pagina de profil și mai mici în secțiunea comentarii.
Pur și simplu duplicați avatarul și scalați-l jos T Cmd +, care tine pe loc Schimb cheie pentru a menține proporțiile.
Ar trebui să includem într-adevăr o mostră a modului în care imaginile vor fi afișate în aplicația noastră. Voi pune o singură imagine în interiorul dreptunghiului rotunjit pentru a arăta că imaginile ar trebui să aibă colțuri rotunjite.
Alegeți Instrument rotunjit dreptunghiular (U) și trageți o formă dreptunghiulară între orientările verticale de mai jos Avatare grup. După aceea, alegeți o imagine, am folosit unul de la unsplash.com, redimensionez dacă este necesar T Cmd + și de a crea un Mască de tăiere.
În cele din urmă vom acoperi culorile. O paletă solidă de culori este esențială și ar trebui să verificați teoria culorii pentru a înțelege mai bine semnificația și importanța culorilor pe care le utilizați. Alegem culorile chiar la sfârșitul procesului, pentru că acum avem o idee bună despre elementul de care trebuie să stilim.
Deschideți colorate grupați și alegeți una dintre culorile pe care le-ați utilizat pentru butoane drept culoare prim-plan. Apoi, folosind a Instrument rotunjit dreptunghiular (U) trage un dreptunghi. Apoi alegeți a Instrument tip orizontal (T) și scrieți titlul culorii sau ce va fi folosit pentru ex. "Culoare primară" și furnizați codurile de culori în format HEX, RGB sau orice alt format necesar. Creați un grup nou, dați-i un nume de culoare și puneți toate straturile în el.
Acum pur și simplu duplicați CMD + J grupul de culori și să faceți cât mai multe exemple de culori de care aveți nevoie. De obicei este mai bine să rămânem la patru sau cinci culori, deoarece mai multe culori pot face lucrurile să pară dezordonate. Check out Kuler și COLOURlovers pentru o paletă de culori uimitoare, o sursă de inspirație.
Pentru acest tutorial, după cum vedeți, am folosit culori "primare" și "secundare", o singură culoare pentru textul corpului și una pentru titluri, de asemenea alb pentru fundalurile de intrare. Acestea sunt prezentate mai jos.
Deci, tu o ai. Un ghid simplu pentru interfața cu utilizatorii de aplicații web. Sper că ați învățat și ați înțeles elementele de bază ale creării unui ghid de stil, de ce au fost luate unele decizii și cum au beneficiat proiectul.
Dacă aveți întrebări sau aveți dificultăți, vă rugăm să nu ezitați să mă pingați în secțiunea de comentarii!
Accentsconagua