Share
Acest articol este al treilea dintr-o serie de trei părți care prezintă noile abordări ale iconografiei pe care Iconic le va oferi. Dacă vă place ceea ce vedeți în acest articol, vă rugăm să luați în considerare sprijinirea Iconic pe Kickstarter
Conținut sponsorizatAcest conținut a fost comandat de Iconic și a fost scris și / sau editat de echipa Tuts +. Scopul nostru cu conținut sponsorizat este de a publica tutoriale relevante și obiective, studii de caz și interviuri inspirate care oferă cititorilor o valoare educațională autentică și ne permit să finanțăm crearea de conținut mai util.
Iconografia reactivă este abordarea afișării icoanelor de fidelitate adecvate pe baza dimensiunii afișării unei pictograme pentru a asigura o lizibilitate optimă.
Conținutul pe care îl creăm este privit în mai multe permutări decât oricând. Dispozitiv, densitate ecran, rezoluție, platformă, browser. Atât de multe variabile - toate acestea au un impact (în grade diferite) asupra lizibilității conținutului nostru. Icoanele, în particular, pot fi destul de sensibile la dimensiunea în care sunt afișate.
Trebuie înțeleasă principala directivă a unei icoane. În acest scop, trebuie să fie asigurată lizibilitatea unei pictograme atunci când este afișată. Există moduri de a proiecta icoane pentru o mai mare lizibilitate - în special la dimensiuni mai mici. Proiectarea în acest mod poate fi adesea în detrimentul opțiunilor estetice - sau cel puțin estetice.
Estetica joacă, de asemenea, un rol esențial în iconografie. Din păcate, lizibilitatea și estetica pot fi de multe ori forțe opuse. Designul unei pictograme are de obicei un dimensiunea optimă unde lizibilitatea și estetica sunt bine echilibrate. Foarte puține icoane, dacă există, pot obține un echilibru perfect de lizibilitate și estetică la toate dimensiunile. Deci, dacă vrem ca icoanele noastre să fie lizibile și atractiv pe o gamă largă de dimensiuni, necesită mai multe versiuni de pictograme optimizate pentru intervale de dimensiuni specifice.
Această idee nu este nouă. Această abordare era obișnuită pentru icoanele raster. Cu pătrunderea imaginilor vectoriale pe web, noi, ca designeri de icoane, am greșit scalabilitatea pentru lizibilitate. Deci, ceea ce face ca Iconic să ia această veche abordare unică? Iconic este de transport maritim cu trei dimensiuni de fiecare pictogramă și acesta vine cu codul pentru pictogramele pentru a oferi versiunea lizibilă optimă a fiecărei pictograme automat.
Există două moduri de bază pentru ajustarea icoanelor. Unul joacă pe ipoteză, celălalt este mai precis. Una este simplă, cealaltă mai complexă. Abordarea simplă utilizează interogările media pentru a ajusta pictogramele la anumite lățimi ale ecranului. Acest poate sa deoarece dimensiunea conținutului deseori scade în raport cu dimensiunea ecranului - adică o pictogramă văzută pe un ecran desktop este probabil să fie setată la o dimensiune mai mare decât pe un ecran mobil. Poate.
dreapta modalitatea de a face acest lucru este de a aplica o funcționalitate receptivă a unei pictograme la nivel de element - ceea ce înseamnă că pictograma potrivită este afișată pe baza dimensiunilor pictogramei, nu a dimensiunilor ecranului. Cea mai bună abordare este ca icoanele să fie conștiente de dimensiunile lor și să se schimbe pur și simplu la cea mai potrivită versiune lizibilă / estetică. Acest lucru se sfârșește prin a fi un pic mai complex ...
Deci, cum putem face asta??
Notă: Exemplele de mai jos sunt încă prototipuri de prototip. Niciunul din următorul cod nu este definitiv, cu atât mai puțin beta. Încă ne aflăm în faza de cercetare și dezvoltare a acestei abordări și știm că există multe aspecte care trebuie încă abordate. Vom lucra la o direcție mai concretă pentru această metodă după finalizarea campaniei Kickstarter.
Există câteva moduri în care abordăm iconografia receptivă în acest moment și direcțiile "finale" sunt încă în aer. Vom împărtăși trei moduri diferite în care ne gândim la tehnică în acest moment.
În primul rând, cea mai simplă abordare. SVG a fost mereu în centrul Iconicului, dar este ușor să uităm că Iconic a fost unul dintre primele seturi de asemenea livrate ca un font web. După cum se dovedește, funcționează fonturile web turbat bine pentru iconografie receptivă. Motivul pentru care fonturile web funcționează bine pentru o iconografie receptivă este că toate pictogramele sunt adăugate la un singur font. Aceasta permite ca intervalele de dimensiuni să fie tratate ca o greutate diferită (de exemplu, Iconic-Large.otf, Iconic-Medium.otf, Iconic-Small.otf). Fiecare pictogramă de pe ecran poate fi schimbată pur și simplu schimbând grosimea fontului pentru fontul web. În demo-ul de mai jos, pictogramele răspund la lățimea ecranului.
Vedeți demo După cum sa menționat anterior, ajustarea icoanelor pe baza lățimii ecranului nu este cea mai bună abordare pentru a asigura lizibilitatea. Icoanele trebuie să răspundă la propriile dimensiuni ale afișajului. Din păcate, încă nu avem capacitatea de a crea interogări de elemente în CSS. Vestea bună este că oamenii se gândesc la acest lucru și creează soluții. Demo-ul de mai jos utilizează interogări de elemente și fonturi web pentru o pictogramă de ajustare dinamică, bazată pe dimensiunea afișării.
Au existat o mare gândire în acest spațiu, în special de la Andreas Bovens, care a vorbit de mai multe ori despre vrăjitoarele SVG. Această abordare se bazează pe faptul că interogările media într-un fișier SVG menționat ca un img, încorporare sau obiect utilizați dimensiunile de afișare ale SVG. Semnificația unei interogări media a min-width: 400px în SVG ar declanșa dacă imaginea a fost de 400 de pixeli sau mai mult - indiferent de lățimea ecranului. Demo-ul de mai jos arată că funcționalitatea în acțiune.
În prezent există o problemă cu această abordare. Aceste puncte de interferență nu mai funcționează atunci când fișierul SVG este injectat în DOM. SVG DOM-injecția este vitală pentru alte caracteristici ale lui Iconic, deci va fi ceva ce va trebui să ne dăm seama în viitorul apropiat.
O icoană ilegală nu reușește în cea mai importantă datorie. Trebuie să încetăm să ne gândim la imaginile vectoriale ca la capturile pentru lizibilitatea icoanelor. Trebuie să proiectăm icoane care să se potrivească cu diferite game de dimensiuni și avem nevoie de instrumente care să afișeze icoane la fidelitatea corectă pe baza dimensiunii afișate. Niciunul dintre opiniile actuale nu este perfect. Dar ele reprezintă un pas înainte în direcția cea bună.
Scopul lui Iconic este de a ajuta la furnizarea de noi abordări ale iconografiei.
Vă rugăm să luați în considerare susținerea Iconic pe Kickstarter
Accentsconagua