Share
Există o mie de moduri de a proiecta și de a crea butoane de astăzi și trebuie doar să-și petreacă o mică cantitate de timp cautând prin munca pe dribbble pentru a obține un sentiment de ele. O mare parte din aceste exemple sunt exact aceleași, dar uneori există câteva ciudate care simt că au avut puțin mai multă grijă și atenție în a face.
Profitând de proprietățile minunate ale noului CSS3, putem crea stiluri de butoane uimitor de elegante și elegante, fără atâta miros de imagine, și au stiluri perfect potrivite pentru browserele mai vechi. Vă recomandăm să vă creați butoanele direct în CSS sau să vă îndreptați spre instrumentul dvs. de aspect, dar este important să vă gândiți cu atenție la modul în care designul butonului dvs. trăiește în context.
Este prea ușor să ajungeți la un "UI Elements PSD" pre-proiectat pe care un suflet generos le-a împărtășit gratuit (și fără îndoială conține butoane inspirate de Apple). Dar de ce să nu vă gândiți dacă stilul respectiv este potrivit în contextul designului dvs. și luați în considerare dacă există loc pentru a crea ceva mai original?
Reciclarea butoanelor altcuiva este bine, economiseste timp, dar nu este nici un rău în a lua un moment pentru a înțelege designul și compoziția butoanelor dvs. (sau al altcuiva), într-un mod mai detaliat. Cum sunt concepute? Se potrivesc interfeței / contextului / mărcii? Există posibilitatea de a crea ceva unic? Sunt butoanele mele destul de proeminente? Am nevoie de butoane primare, secundare, terțiare? Sunt destul de diferite între ele? Arată slick ?! (De ce nu, noi toți vrem să proiectăm lucruri interesante?.
Iată câteva zeci de lucruri rapide și simple despre care mă gândesc întotdeauna când proiectez butoane. Nu am de gând să împărtășesc idei despre cum să folosesc efecte de strat în Photoshop, ci și câteva principii simple de design generale, care pot să meargă mult în optimizarea designului butoanelor și altor interfețe generale.
Este important ca butoanele să se potrivească stilului lor contextual. Acest lucru ar putea însemna montarea într-o paletă de culori, stil grafic sau luarea unei conduceri de la o anumită formă de linii directoare sau logo. Poate că există câteva forme proeminente, texturi sau stiluri de design pe care le puteți ridica. Poate că o siglă are un aspect circular pentru aceasta și ați putea ridica acest lucru în butoanele dvs. sau alte potențiale apeluri la acțiune.
Dacă o interfață utilizează în mod predominant o culoare plată, atunci butoanele mari, cum ar fi cele mari, nu sunt calea de parcurs. Dacă puteți, profitați de ocazia de a experimenta extinderea mărcii prin interfață utilizând forme, efecte, coloranți sau alte forme de înfrumusețare.
Urmați de mai sus, opriți-vă pentru un moment înainte de a deschide "UI Elements PSD". Este ușor să ajungeți la grade, umbre, picioare, etc., dar să vă gândiți dacă este alegerea potrivită nu numai pentru a se potrivi cu o marcă, ci și cu interfața în care se află butoanele și dacă trebuie să se simtă prea ".
Este posibil ca butoanele să fie nevoite să se simtă mai ales în butoane în cadrul unei aplicații și pe telefonul mobil, de exemplu, dar cu site-uri Web poate că există loc pentru a face ceva diferit cu butoanele sau apelurile la acțiune.
Cu atâtea designuri de interfețe fiind inspirată de styling-ul Apple OS, mai ales în multe dintre elementele PSI ale UI Element, butoanele se pot pierde puțin printre alte elemente folosite în UI, diluând potențialul lor important. Încercați să utilizați culoarea, dimensiunea, spațiul alb sau tipografia pentru a vă asigura că butoanele dvs. au greutatea vizuală de care au nevoie pentru a ieși din restul interfeței.
În urma celor de mai sus, dacă există multe alte elemente UI de colț rotunjite în designul dvs., vă recomandăm să utilizați butoane rotunjite sau poate o altă schimbare de formă. Acest lucru vă poate oferi un contrast suplimentar, care vă asigură că apelurile importante la acțiune au proeminența de care ar putea avea nevoie.
Dacă vă străduiți pentru un stil inspirat de sistemul de operare sau dacă lucrați cu elemente PSD predispuse, atunci este posibil ca elementele dvs. UI să fie predominant rotunde, dreptunghiulare în formă. Luați în considerare reducerea nivelului de înfrumusețare pe elemente care își pot permite să se simtă mai puțin ".
De exemplu, meniurile selectate la comandă, comenzile segmentate, declanșatoarele personalizate ale meniului ar putea fi aceleași forme de colț rotunjit, dar folosind mai puține umbre, granițe, înclinare, gradient sau alte efecte pot contribui la reducerea bogăției lor și, la rândul lor,.
Cele mai multe butoane pe care le vedem acolo au o formă de frontieră sau accident vascular cerebral pe ele. Cu voce tare, dacă butonul este mai întunecat decât fundalul pe care se află, utilizați o curbă întunecată a culorii butonului general. Dacă inversul este adevărat, atunci mergeți pentru un accident vascular cerebral care are o nuanță mai închisă a culorii de fundal. Dacă vă lipiți de primul și îl folosiți pe un fundal mai întunecat, găsesc că poate face ca marginile butonului să fie puțin "murdare". Folosind aceasta din urmă poate ajuta, de asemenea, să faceți butonul dvs. într-adevăr pop. Consider că acest lucru este un principiu general de design atunci când se ocupă de accidente / frontiere în designul web.
De-a lungul anilor am jurat întotdeauna de "Legea Shadow". "Legea umbră" afirmă că umbrele picăturilor funcționează cel mai bine atunci când un element este mai ușor decât fundalul. Dacă un element este mai întunecat decât fundalul, atunci umbrele ar trebui folosite foarte subtil. Similar cu accidentele de culoare și frontierele, consider că acest lucru este un principiu general de design care se aplică tuturor elementelor UI.
Pe lângă faptul că este un alt detaliu mic care vă poate diferenția în continuare butoanele de elementele similare din UI, utilizarea elementelor simbolice simple, cum ar fi săgețile, poate da un sentiment de acțiune și o mică apreciere a ceea ce se întâmplă când un utilizator dă clic.
De exemplu, o săgeată îndreptată imediat după ce textul de pe un buton poate da utilizatorului un sentiment de mișcare sau de părăsire a paginii. O săgeată îndreptată în jos ar putea sugera că un anumit conținut va fi dezvăluit progresiv mai jos sau poate că se va deschide un anumit meniu.
Dacă proiectați o interfață în care există în mod consistent o mulțime de acțiuni și funcționalități pe ecran, poate fi important să stabiliți o limbă vizuală cu ajutorul butoanelor dvs. prin stabilirea unor stiluri primare, secundare, terțiare și potențial mai multe.
Luați în considerare rezervarea celei mai puternice și mai îndrăznețe culori pentru butoanele principale și utilizarea unei puteri sau saturații mai puțin progresive, pe măsură ce reduceți importanța. Pe lângă culoarea și umbra, vă recomandăm să reduceți mărimea, spațiul alb, dimensiunea textului și nivelul de înfrumusețare pentru a reduce în continuare greutatea vizuală a butoanelor care nu sunt primare.
Acesta nu este un adevărat în realitate, dar este adesea ceva considerat spre sfârșitul procesului de proiectare. Lucrați întotdeauna prin stările de bază necesare pentru butoanele dvs. pentru a vă asigura că oferă utilizatorilor feedback suficient în contextul lor. Utilizatorii vor avea probabil un model mental al modului în care un buton funcționează în lumea reală pe măsură ce îl utilizează prin diferitele sale state. Unele trucuri simple de CSS cu umbre, granițe și înclinări și altele asemănătoare pot oferi utilizatorului un feedback simplu și o simplă atingere a bomboanelor pentru ochi!
În calitate de designeri veți avea toate propriul proces prin care treceți. Pun pariu că o mare parte a timpului poate implica mutarea capului înapoi de pe ecran, înclinându-l ușor, căutând și spunând: "Da, asta e bine!". Aceasta este o parte din distracția de proiectare a desigur și designerii talentați tind să-l facă bine chiar face acest lucru, dar cred că este întotdeauna bun pentru a rula un pic de comentarii interne, interogarea și raționamentul asupra deciziilor de proiectare pe care le face.
Nu există nici un rău în reutilizarea sau înclinarea pe stilurile pre-proiectate și elementele UI, acestea pot economisi, evident, o mulțime de timp. S-ar putea chiar să fie cazul că cineva are pixel-perfect artizanat exact ceea ce căutați și oferă-l gratuit. Cu toate acestea, nu cred că există vreun rău în a avea o înțelegere mai profundă a procesului de proiectare și a ambarcațiunilor din spatele a ceea ce creați și a vă informa deciziile de proiectare înainte.
Accentsconagua