Share
În ultima tranșă ați învățat despre istoria designului icoanelor și despre modul în care a evoluat de la reprezentările alb-negru ale articolelor de birou în reprezentări izometrice colorate, sticloase, hiperremitate, de ... articole de birou. În această tranșă, voi fi mai mult în lumea icoanelor și în explorarea a ceea ce înseamnă icoanele pentru noi astăzi.
Această postare este Ziua 8 a Sesiunii noastre de Design Interfață. Zilele sesiunii de sesiuni creativei · con - substantiv (Calculatoare) o imagine sau un simbol care apare pe un monitor și este folosit pentru a reprezenta o comandă, ca un sertar de fișiere care să reprezinte fișierul - dictionary.com
Așa că știm semnificația "Icon" în sensul tradițional de calcul al cuvântului, dar cum explică acest lucru toate icoanele ilustrative pe care le vedem astăzi? Cum ar trebui o imagine frumos redată a unui ceainic, a unei nave spațiale sau a unei găleți de pui să reprezinte ceva în interfața cu utilizatorul? Există câteva răspunsuri la această întrebare.
Nu contează cât de strictă sau neobișnuită este designul dvs., toate icoanele ar trebui să fie făcute conform specificațiilor - vor exista mai multe despre asta în curând.
Mai jos veți vedea o defalcare a designului icoanelor moderne. Unii oameni pot argumenta că pictogramele de pe partea "ilustrației" a diagramei nu ar trebui să fie considerate icoane. Acest lucru este parțial adevărat, nu sunt icoane tradiționale, ci sunt icoane moderne în sensul că ar putea reprezenta aplicații, jocuri sau un context specific.
Icoanele din partea stângă a diagramei sunt icoane care ar fi considerate a fi icoane tradiționale cu o întorsătură modernă. Asociază imediat aceste icoane cu funcția lor, acest lucru fiind realizat de peste 30 de ani de limbaj vizual, care este un factor puternic în succesul designului.
Icoanele din mijlocul graficului sunt icoane care nu sunt nici ilustrative, nici informative, ci o combinație a celor două. Plicul este tradițional din cauza formei sale, dar ar putea fi perceput diferit datorită randării sale, un astfel de design funcționează cel mai bine într-un anumit context. Blue Twitter Bird are o recunoaștere imediată de către utilizatorii de internet, dar este redusă la o ilustrație a unei păsări albastre pentru non-utilizatori (cum ar fi mama mea), iar stilul GTalk Bubble se bazează, de asemenea, destul de mult pe asocierea brandului.
Link-uri către pictogramele de mai sus (în nici o ordine particulară)
Pump It Up, de la mgilchuk, My Breafast, prin clipire, SNOW.E 2 XP, prin RADE8, CS3 iKons - Win, by -kol, iChat Bubble, prin Delta909, Icecream icon set, Miniartx, Batman Mask, Svengraph, In Dragostea Dragostea, prin Raindropmemory, Twitter Bird, prin fracturi, Starwars Vehicle Archigraphs, de Cyberella74, Systematrix Full, prin royalflushxx, New Moshii World, prin anekdamian, Extras Somatic Rebirth, de Iconfactory si David Lanham
Când proiectați icoane pentru o interfață, nu puteți merge în trecut. Verificați desenele anterioare pentru a indica cum să abordați a ta. Veți găsi că cele mai multe pachete de software și interfețe de utilizator au pictograme similare, din cauza experienței utilizatorilor (UX). Dacă un utilizator este brusc confruntat cu un design pe care nu îl așteaptă sau nu se simte confortabil, este posibil să se confunde.
Dacă proiectați pentru o anumită platformă, verificați întotdeauna notele pentru dezvoltatori înainte de a începe, acestea vă vor oferi o idee despre dimensiunea, perspectiva și paleta de culori pe care ar trebui să o utilizați. Puteți găsi linkuri către notele dezvoltatorilor Apple și Microsoft în secțiunea "Resurse și citiri suplimentare" la sfârșitul acestui post.
Verde = Bun - Albastru = Ajutor - Galben = Alertă - Roșu = Eroare
Specificațiile pictogramelor se complică cu fiecare nouă tehnologie sau sistem de operare. Windows și Mac se află într-o dimensiune a pictogramei Arms Race, cu cea mai mare pictogramă măsurată până la data de 512 pixeli masive. Tendința pentru icoane uriașe are mult de-a face cu rezoluțiile moderne ale ecranului, dar există și o anumită cerință factor de drool cu o pictogramă gigant, perfect redată. Uită-te la exemplele de mai jos dacă nu mă crezi!
AppZapper, Billings, Lucruri și Coda Icoane de aplicație pentru Mac (downscale pentru a se potrivi acestui post!)
Acum că ți-am arătat-o Drool demn icoane, să trecem pe niște icoane pe care le-am proiectat eu. Exemplul de mai jos este un fișier .ICO de-construit realizat în viața mea anterioară ca o pictogramă și un designer de interfață (cei care mă cunosc ca LoungeKat probabil că nu știu acest fapt). Pictograma principală de 256 pixeli a fost realizată în Adobe Photoshop cu forme și stiluri de straturi, apoi a fost redimensionată pentru fiecare dimensiune individuală (64, 48, 32, 16) și importată în Microangelo Toolset pentru a fi combinată ca .ICO. Pictograma de 256 pixeli nu face parte din fișierul pictogramă însăși, ci este inclusă în software ca PNG transparent, pe care ferestrele le solicită dacă dimensiunea este necesară. Aceasta menține dimensiunea fișierului în jos.
După cum puteți vedea, am folosit câteva variante ale designului în funcție de adâncimea și dimensiunea culorii pictogramei. Pictogramele includ toate aceste dimensiuni și spații de culoare pentru a se adapta la toate modurile diferite pe care le pot vizualiza sistemul de operare.
Este important să proiectați fiecare dimensiune separat, scalarea unei imagini mari poate face ca designul să pară neclară. Când proiectați o pictogramă de 16px, este întotdeauna mai bine să ajungeți în vizualizarea pixelilor. După cum puteți vedea, câțiva pixeli bine plasați pot transmite mai mult decât credeți. Puteți citi informații suplimentare despre pictograme, diverse specificații și recomandări din industrie în ghidul de pictograme al Axialis Software.
Un exemplu de scalare
Pentru o mai bună înțelegere a icoanelor, aș sugera să vă uit la cât mai multe sisteme de operare, programe, interfețe și portaluri diferite. Gândiți-vă la modul în care culoarea și metafora sunt diferite pentru fiecare aplicație. Ce icoane ies în evidență ca fiind ușor de înțeles (poate că dosarul sau coșul de gunoi vă poate lovi ca fiind cel mai ușor de înțeles?), Care icoane trebuie explicate în continuare? Crede-mă, vei fi surprins de ceea ce afli despre psihologia din spatele limbajului vizual pe care-l folosim în fiecare zi și care adesea ia în considerare.
Accentsconagua