Share
Să facem o simplă, dar eficientă "bară de administrare statică" în Photoshop. Vom lua o selecție de elemente de interfață UI și vom proiecta diferitele lor state, pregătite pentru construirea în HTML și CSS.
Dacă ați folosit WordPress de la versiunea v3.1, atunci veți observa fără îndoială bara de admin prezentată vreodată, care apare pe front-end de fiecare dată când sunteți conectat?
Un instrument simplu și util, care vă permite să sari direct în admin fără - știți - întâi mergi la admin. Google este și fanii stației de administrare statice; se potrivește frumos cu întreaga aplicație web-app. Dacă utilizați GMail, Google Docs, Google +, ați văzut acest lucru:
Chiar și browserul Chrome are uneori o bară de instrumente similară în subsolul paginii?
Și dacă vizitați Themeforest, veți găsi adesea autori care folosesc bare statice pentru a naviga în previzualizarea temelor:
OK, acum știm despre ce vorbim, să ne gândim acum la unele dintre aspectele de proiectare pe care trebuie să le luăm în considerare.
Vorbiți destul. Să deschidem Photoshop (sau să vă simțiți liberi să vă creați în focuri de artificii) și să eliminați lucrurile?
Deschideți un document nou, 200x1000px al meu și adăugați niște ghiduri pentru a defini bara dvs. de instrumente (70 de pixeli înălțime), butoanele dvs. (30 pixeli vertical centrată în interiorul barei) plus o margine stânga și dreapta de 20 pixeli.
Adăugați o textură aleatorie în fondul principal, aceasta reprezintă pagina dvs. web și va sta sub bara. Apoi, adăugați o formă (negru) cu o opacitate de 85%. Aceasta este bara în sine, și dându-i o ușoară transparență va sublinia faptul că este "deasupra" conținutului paginii web.
Vom adăuga acum câteva elemente comune pe pagină. Vor fi câteva exemple, dar nu trebuie să tragem totul, atâta timp cât ne satisfacem toate stările diferitelor noastre elemente. Cu asta, restul construirii se poate face în browser.
Când vine vorba de construirea barei noastre de admin, vom trage o imagine miniaturală utilizând API-ul Gravatar. Acesta va fi prezent pentru a ilustra utilizatorul că este conectat (ceea ce poate părea evident, dar este un memento util în cazul în care cineva dorește să se deconecteze când pleacă.)
Între timp, am apucat imaginea gravatar implicită și vom folosi acest lucru ca un înlocuitor.
Creați un dreptunghi rotunjit (U), cu o rază de graniță de 2px, între ghidajele prezentate mai jos. Țineți apăsată tasta de deplasare în timp ce îl trageți, restrângandu-i dimensiunile la pătrat. Veți fi realizat un patrat de 30x30px. Plasați imaginea miniatură de deasupra ei, faceți clic dreapta pe ea în panoul straturilor și selectați "Creare mască de tăiere".
Am adăugat o umbră întunecată la stratul de mască (faceți dublu clic pe stratul pentru a deschide proprietățile stratului) de 2px direct în jos. Aceasta va fi o stare comună a multora dintre elementele noastre, pe care o vom vedea mai târziu.
Adăugați un text pentru a saluta utilizatorul (în acest caz Droid Serif Italic la 12px) și o etichetă mai neutră pentru a permite utilizatorului să se deconecteze.
Atunci când desenați forme în Photoshop, veți găsi deseori că anti-aliasing (ceea ce face totul cald și fuzzy) poate lua departe unele detalii din munca ta. Să demonstrăm acum acest lucru prin trasarea unei forme simple pătrate pe fundalul întunecat.
Este perfect precis, sau așa crezi. După ce ați făcut o mărire mai mare, puteți observa clar estomparea de-a lungul fiecărui margine. Prin eliminarea acestora putem să ne curățăm imaginea și să realizăm perfecțiunea pixelilor. Faceți o copie a formei și plasați-o de-a lungul laturii.
Foarte bine. Acum, luați Instrumentul de selecție directă (A) - micul săgeată de cursor alb - și selectați forma. Comanda și faceți clic pentru a selecta două noduri de-a lungul unei margini, apoi împingeți-le spre interior până când vedeți o margine perfect clară.
Mult mai bine! Vectorii se aliniază exact cu grila pixelilor. Acum repetați acest lucru pentru celelalte trei margini, asigurându-vă că păstrați cât mai mult posibil dimensiunile obiectului.
OK, arata mult mai bine, dar diferenta reala devine clara atunci cand depasim pixelii reali?
O diferență delicată, dar semnificativă. Țineți cont de acest lucru când construiți butoanele în timpul acestui tutorial și rezultatul final va fi cu atât mai bun pentru el.
Evitați să trebuiască să curățați marginile rătăcite, acționând mai întâi "Snap to Pixels" în opțiunile de formă:
Vă mulțumim din nou lui Jeff pentru că ați arătat acest lucru!
Am discutat deja despre dimensiunile generale ale butoanelor noastre, astfel că mișcarea și construirea câtorva nu vor fi o problemă. Acum vom examina exemplul liber (nu este conectat la alte butoane) - butonul de notificări.
În același mod în care ne-am format masca gravatar, tragem un dreptunghi rotund de 30 de pixeli în jurul unui text simplu Arial 12px. Acest buton va ilustra o stare de hover, așa că vom face un accident vascular cerebral bine vizibil în jurul dreptunghiului, dați-i o culoare de fundal solidă și (așa cum am făcut cu gravatarul nostru) aplicați o umbră de picătură pentru a da butonului aspect ridicat.
O altă caracteristică obișnuită a interfeței utile este eticheta numerotată care indică câte e-mailuri, notificări, actualizări etc. sunt active. Veți fi familiarizați cu acestea dacă sunteți un utilizator de smartphone, un proprietar de mac, veniți să vă gândiți la el - dacă ați deschis vreodată un browser de orice fel?
Vom folosi această convenție UI și vom da butonului nostru notificări o etichetă numerică. Vom folosi o culoare mai izbitoare, deoarece ideea din spatele acestora este de a atrage atenția utilizatorului. Un text întunecat, îndrăzneț Arial, cu o umbră de picătură palidă, așezat pe un gradient galben subtil, ar trebui să facă truc. Iată o privire rapidă asupra setărilor pentru gradient:
Din nou, acesta este un mic dreptunghi rotunjit, cu o rază de 2px pe colțuri și are o umbră subțire. O vom pune pe butonul nostru și pe dreapta. ordinat.
După ce ne-am creat butonul în starea de hover, trebuie să ne ocupăm de starea implicită. Acest lucru va fi mai puțin izbitoare - clar, dar discret. Copiați butonul notificări, asigurându-vă că păstrați cu ușurință fiecare element al dvs. într-un dosar propriu în panoul straturilor. Modificați textul etichetei (dacă doriți), apoi micșorați puțin culoarea. Faceți același lucru pentru culoarea accidentală și eliminați umbră.
Duplicați acest buton, deoarece vom folosi și acesta pentru a demonstra modul în care apar elementele grupate.
Când avem o mică colecție de butoane asociate (de exemplu, butoanele de navigare), trebuie să îi facem pe utilizatori conștienți de faptul că au de-a face cu un grup și nu doar cu un șir de elemente aleatorii. Putem folosi proximitate, o tehnică prin care se realizează unitatea în designul web. Am plasat obiecte aproape unul de altul, astfel încât relația lor să fie indicată vizual.
După cum puteți vedea, am eliminat colțurile rotunjite, unde se întâlnesc butoanele noastre. Efectul rotunjit va fi evident numai de-a lungul marginilor exterioare ale obiectelor grupate. Într-un moment, vom adăuga un alt buton între aceste două pentru a sublinia în continuare efectul.
În primul rând, totuși, să ne uităm la modul în care eliminăm colțurile rotunjite. Cu dreptunghiul nostru evidențiat, selectați Instrumentul de ștergere a ancorei și eliminați cele două noduri ale curbei.
Apoi, selectați instrumentul Convert Point și transformați cele două puncte rămase în unghiuri drepte.
Bingo!
După ce ați îndepărtat colțurile rotunjite de pe o parte a fiecăruia dintre butoane, puteți acum să le strângeți împreună.
Nu există nimic ca un set de icoane de calitate pentru a instrui utilizatorii în cea mai directă formă posibilă. Pe unele dintre butoanele noastre vom folosi iconițe în loc de text - arată foarte bine și salvează în spațiu. Putem folosi întotdeauna sfaturi pentru a verifica ceea ce este pentru fiecare. Iată un exemplu de două butoane pentru icoane, unite, dintre care unul demonstrează efectul de hovering:
După cum am menționat, nu vom folosi o singură imagine în timpul acestui tutorial (OK, în afară de miniatură gravatar). În schimb, du-te și luați textul de simboluri Web de la Just be Nice Studio. Ce frumos dintre ei.
Este frumos și vine complet în format .otf (pentru utilizarea pe sistemul dvs.) și un kit de fonturi web pentru implementarea în paginile dvs. web cu @ font-face. Aceasta înseamnă că nu trebuie să folosim nici un fișier sprite sau un singur fișier imagine; putem folosi doar caractere și aplicăm acest font - genial.
În acest caz, am folosit U și S respectiv, dar putem schimba și schimba foarte ușor atunci când construim. Putem aplica chiar și efecte folosind CSS, la fel ca și în cazul fonturilor normale, dar mă duc în fața mea aici? Deocamdată, construiți doar câteva butoane și folosiți câteva din aceste icoane minunate.
În același fel în care am lucrat, construiți un câmp de căutare. Este identic cu butoanele în starea lor implicită (cursa gri deschisă, culoarea de culoare gri gri, nu are umbră), cu excepția faptului că nu are fundal solid.
Butonul său adiacent face cu toate acestea, și din nou utilizează unul dintre simbolurile noastre Web Symbols (L). Închideți totul împotriva ghidului din dreapta, așa cum o vom poziționa în browser peste această margine.
Am crezut că ar fi frumos să includ un buton suplimentar care atrage suplimentar atenție, în cazul în care ceva - er - extra, trebuie să facă. Un buton "publicare" sau "închide cadru", de exemplu.
Din nou, putem folosi icoanele, păstrând dimensiunile obișnuite ale butoanelor și colțurile rotunjite de 2px. De data aceasta, cu toate acestea, folosim același gradient galben ca și cu eticheta numărului de notificare, # f9d944 la # fee77f, cu o lovitură de # f9d944. Pictograma este gri închis # 292929, la fel ca în cazul notificării, cu o umbră de picătură palidă.
Starea sa de hover va avea, după cum era de așteptat, o umbră întunecată, la fel ca și celelalte butoane.
Ne apropiem acum și aproape că am acoperit toate stările posibile ale elementelor noastre de interfață. Vom adăuga un buton suplimentar între butoanele Setări și profil, de data aceasta pentru a acționa ca un meniu derulant (rețineți absența completă a colțurilor rotunjite):
În captura de ecran de mai sus veți vedea drop-down vizibil, prin definiție atunci butonul este activ (sau plutind peste). Butonul preia starea corespunzătoare; evidențiat accident vascular cerebral, text mai ușor și umbră întunecată. Am folosit o altă pictogramă Web Symbols () pentru a indica că mai există conținut sub buton.
Meniul derulant trebuie să fie asociat vizual cu restul elementelor UI, dar trebuie să iasă în evidență. Acesta va fi, de asemenea, deasupra oricărui conținut al paginii web vizibil în acel moment. Prin urmare, am ales să fac un dreptunghi alb simplu, cu o umbră de picătură:
Fundalul luminos îl leagă vizual cu butonul "meniu", iar umbra îi ajută să se evidențieze de orice alt conținut. Efectul de hover evidențiat asupra link-ului drop-down este pur și simplu o nuanță mai blândă a galbenului pe care l-am folosit.
Există doar un mic element cu care trebuie să ne ocupăm acum; tooltip-ul (amintiți-vă că am menționat acest lucru?) O vom folosi ca verificare în cazul în care scopurile butoanelor noastre de icoane nu sunt imediat clare.
Imaginea de mai sus prezintă primul meu instrument - foarte clar, în principiu, dar apoi mi-am dat seama că era identic din punct de vedere vizual (în afară de punctul mic) în meniul drop-down. Așa cum ar sugera că într-un fel au avut un rol similar, am hotărât mai bine să iau un traseu alternativ. Aceasta este o sugestie; aceasta nu ar trebui să fie confuză pentru altceva.
A doua încercare este mult mai reușită. Este subtilă față de bara de administrare întunecată, dar textul foarte contrastat îl face foarte lizibil. Tot ce ai nevoie pentru a construi acest catelus mic este un dreptunghi negru (nu colturi rotunjite de data asta, dar asta depinde de tine). Cu prima dvs. formă trasată, trageți o altă figură, asigurându-vă că ați selectat instrumentul Add to Shape (+). Aceasta va lega cele două forme într-o singură formă, păstrând în același timp vectorii individuali pentru editare:
Cu ajutorul instrumentului de selecție directă (A) puteți selecta punctele celei de-a doua forme și manipulați-o separat. Redimensionați-o după cum doriți și rotiți-o 45ș. Veți ajunge cu ceva asemănător?
Sfârșitul drumului! Sperăm că veți fi desenat un design UI care vă satisface aprobarea. În tutorialul următor vom vedea despre codarea acestui lot într-o bară de administrare statică, care se adresează browserului. Vă mulțumim pentru lectură, aștept cu nerăbdare să văd ce credeți despre acest lucru în comentariile!
Accentsconagua