Vizualinės hierarchijos principai dizaineriams

Vizualinės hierarchijos principai dizaineriams yra dizaino koncepcija, kuri naudojama siekiant nukreipti, kaip žiūrinčiojo akys juda per dizainą ir nustatyti, kurie elementai yra svarbiausi arba vizualiai patraukliausi.

Iš pradžių buvo akmeninės lentelės, papiruso ritiniai ir popierius. Tada atsirado kompiuterių ekranai ir elektroninės planšetės. Tobulėjant puslapio rodymo technologijai, dizaineriams paliekamas aiškus būdas tvarkyti turinį. Bet kas geriau? Trumpai tariant, , vizualinė hierarchija.

Štai vizualinės hierarchijos apibrėžimas: Vizualinė hierarchija yra išdėstymas grafiniai elementai dizaine pagal kiekvieno elemento svarbą. Vizualinis svoris lemia elemento svarba dizaino hierarchijoje, nurodant žiūrovui, į ką sutelkti dėmesį ir kokia tvarka.

Ištekliai dizaineriams. 50 nemokamai

Tai tampa vis svarbesnė problema, nes reaguojančios sistemos verčia dizainerius vienu metu galvoti apie daugybę skirtingų puslapių. Susidūrę su tankiu tekstu ir trumpu dėmesio skyrimu, dizaineriai sukūrė 6 principus, kad nukreiptų skaitytojo žvilgsnį į svarbiausią informaciją.

Šie 6 vaizdinės hierarchijos principai padės kurti viską nuo brošiūrų iki programų, užtikrindami, kad galutinis vartotojas turėtų teigiamą dizainerių skaitymo patirtį.

Visos kultūros skaitomos iš viršaus į apačią, o dauguma kultūrų – iš kairės į dešinę. Tačiau nors šios žinios yra svarbios puslapio dizainas, dizaineriai žino, kad užduotis yra daug sunkesnė.

Naujausi tyrimai parodė, kad prieš skaitydami žmonės pirmiausia nuskaito puslapį, kad įsitikintų, ar jis juo domisi. Nuskaitymo raštai paprastai būna vienos iš dviejų formų – „F“ ir „Z“, ir jūs galite tuo pasinaudoti kurdami dizainą.

F raštai. Vizualinės hierarchijos principai

F šablonai taikoma tradiciniams teksto puslapiams, pvz., straipsniams ar tinklaraščio įrašams. Skaitytojas nuskaito kairę pusę puslapių ieško įdomių raktinių žodžių kairėje sulygiuotose antraštėse arba pradiniuose temos sakiniuose, tada sustoja ir skaito (dešinėje), kai aptinka ką nors įdomaus. Rezultatas atrodo kaip F (arba E, arba kažkas su dar daugiau horizontalių juostelių; tačiau terminas „F“ įstrigo).

Kaip galite tai panaudoti? Sulygiuokite svarbią informaciją į kairę ir naudokite trumpas, paryškintas antraštes, ženklelius ir kitus panašius dėmesį patraukiančius elementus, kad išskaidytumėte pastraipų blokus.

Z modelio. Vizualinės hierarchijos principai

Z raštai taikoma kitų tipų puslapiams, pvz., skelbimams ar svetainėms, kur informacija nebūtinai pateikiama blokinėse pastraipose. Skaitytojas pirmiausia nuskaito puslapio viršų, kur greičiausiai bus rasta svarbi informacija, tada įstrižai pereina į priešingą kampą ir daro tą patį puslapio apačioje.

Žiniatinklio dizaineriai paprastai kuria savo puslapius taip, kad jie aiškiai atitiktų šį elgesį, svarbiausią informaciją patalpindami kampuose ir nukreipdami kitą svarbią informaciją išilgai viršutinės ir apatinės juostų bei sujungdami įstrižainę.

Žemiau Kuriant 2010 m. konferencijos asamblėjos dizainą, svarbūs elementai yra logotipas (viršuje kairėje), mygtukas „Registruotis dabar“ (viršuje dešinėje) ir garsiakalbių sąrašas (apačioje), kurie yra strategiškai išdėstyti gražiose Z raidės vietose.

2. Svarbus dydis. Vizualinės hierarchijos principai
_

Tai gana paprasta: žmonės pirmiausia perskaito didelius dalykus. Jei jūsų žvilgsnis patraukia „spektaklį“, kol „susiskyrėte“ į toliau pateiktą „Young Vic“ reklamą, turėtumėte nedelsdami kreiptis į suvokimo psichologą: tikriausiai galėtumėte uždirbti daug pinigų, kai būsite išbandytas kaip reta anomalija.

Įdomu tai, kad ši tendencija iš tikrųjų yra pakankamai stipri, kad atmestų taisyklę iš viršaus į apačią. Aukščiau esančiame paveikslėlyje „nulaužimas“ viršija „laiką veikti“, nes jis yra didesnis ir nukreiptas į kairę (taigi padeda taisyklė iš kairės į dešinę).

Tačiau kitame metinės ataskaitos „Žmogaus teisių kampanija 2012“ puslapyje (išplėtota penktoje žiniasklaidos skiltyje) skaitome plačiai šriftas „Kova už lygybę kampanijos kelyje“ prieš tekstą tiesiai virš jo „Rinkimai 2012“. Vizualinės hierarchijos principai

„Rinkimai 2012“ yra aukščiausio lygio informacijos tvarka: ji mums nurodo bendrą temą, su kuria susijusi toliau pateikta informacija. Tačiau dizaineris nusprendė, kad straipsnio pavadinimas skaitytojams įdomesnis, todėl įvertino jį taip, kad jis būtų perskaitytas pirmas.

3. Erdvė ir tekstūra. Vizualinės hierarchijos principai

Kitas būdas atkreipti dėmesį yra suteikti turiniui pakankamai vietos kvėpuoti . Jei aplink mygtuką yra daug neigiamos vietos arba teksto bloko eilutės yra plačiai sekamos, šie elementai bus lengviau matomi skaitytojams.

Kaip matote toliau pateiktame paveikslėlyje (DrawtoClick svetainės dalis), tarpai gali būti elegantiška alternatyva arba papildymas naudojant dydį. Čia išpardavimo taškas „Notre agence vouscompagne...“ parašytas labai smulkiu šriftu, tačiau jį supa gausybė balto tarpo, nurodančio jo svarbą. Žemiau frazės „Le Compendre“, „Le Réaliser“ ir „Le Partager“ gauna papildomą akcentą, atsiribodamos nuo supančios erdvės.

Kai žmonės kalba apie „tekstūrą“ vaizdinės hierarchijos atžvilgiu, jie neturi omenyje grafinių tekstūros efektų. Atvirkščiai, šio tipo „tekstūra“ reiškia bendrą erdvės, teksto ir kitų puslapio detalių išdėstymą ar struktūrą. Šis „Bright Pink“ pavyzdys gerai iliustruoja koncepciją:

Pirmame paveikslėlyje žodis „Sportas“ hierarchijoje yra aukščiau nei „badmintonas“, nes jis aukštesnis, didesnis ir drąsesnis. 2 paveiksle du žodžiai yra maždaug lygiaverčiai, nes juodas stačiakampis išskiria „badmintoną“ ir įdeda jį į savo vietą.

Trečiame paveikslėlyje fono raštas pertraukia „Sporto“, bet ne „badmintono“ erdvę, todėl atsiranda atvirkštinė padėtis, kai „badmintonas“ yra aukščiausias hierarchijoje. Šią raidą sunku nuspėti, todėl dizaineriai dažnai tai sieja su holistiniu „tekstūros“ jausmu.

4. Šrifto svoris ir poravimas. Vizualinės hierarchijos principai

Šrifto pasirinkimas yra labai svarbus nustatant vaizdinę hierarchiją. Tarp svarbiausių šrifto atributų yra svoris, raidžių brūkšnių plotis ir stilius, pvz., serif ir sans serif. Kiti pakeitimai, pvz., kursyvas, taip pat gali turėti įtakos.

Atkreipkite dėmesį, kaip ausinės įtakoja žodžių hierarchijos tvarką toliau pateiktame „The Tea Factory“ interneto dizaine: „tobulos arbatos, padėsiančios sušilti“ yra žaidimo pavadinimas, tačiau šrifto svorio ir kursyvo skirtumai, be žodžių išdėstymo, sukuria daugiau dinamiška, mažiau linijinė skaitymo patirtis. "://azbyka.com.ua/foto/tea-factory.jpg" />

Kai kuriais atvejais tikslas yra pateikti įvairią informaciją kaip vienodai skubią. Visiems nustatę vienodą dydį ir svorį, užtikrinsite lygiavertiškumą, bet taip pat atrodysite monotoniškai. Šriftų diferencijavimas yra vienas iš būdų to išvengti, pavyzdžiui, toliau pateikiamas žurnalo „Trendi“ viršelis. Vizualinės hierarchijos principai

Brošiūros ruošimas spausdinimui.

Čia penkių anonsų, esančių puslapio pakraščiuose, hierarchija yra vienoda, tačiau jie skiriasi pakeitę du gerai suporuotus šriftus – vieną vidutinio svorio, o kitą – lengvą, bet aukštą be serifo.

5. Spalva ir atspalvis. 

Štai dar vienas niekam tikęs dalykas: ryškios spalvos išsiskiria iš prislopintų spalvų ar pilkų atspalvių, o šviesesni atspalviai atrodo „tolimesni“ ir taip hierarchijoje nukrenta žemiau nei sodresni, tamsesni atspalviai. „Where Are They“ svetainė kontrastuoja ryškią šviesą ir spalvotą foninį apšvietimą su juodos ir baltos spalvos tinklelio efektu, kad padidintų šviesumą:

Guggenheimo svetainė naudoja spalvas, kad pabrėžtų svarbią informaciją, pvz., vietos pasirinkimą, šiuo metu peržiūrimų parodų sąrašą ir nuorodas į specialias parodas. Vizualinės hierarchijos principai

Geriausias tinkintos pakuotės šriftas

Kita vertus, Whitney muziejaus svetainė nustato vieno šrifto, svorio ir tono (juodos) hierarchiją, naudodama atspalvį (tai reiškia, kad prie pagrindinio tono pridedama balta, kad jis būtų šviesesnis). „Cory Archangel on Pop Culture“ vaizdinėje hierarchijoje yra aiškiai žemiau „New on Whitney Stories“ ne tik dėl to, kad yra žemiau, bet ir dėl to, kad jo atspalvis yra šviesesnis, todėl jis mažiau ryškus baltame fone. Vizualinės hierarchijos principai

Spalva turi ypatingą reikšmę mobilusis dizainas programos, kuriose mažas ekrano dydis riboja jūsų galimybę naudoti kitas strategijas, pvz., dydžio svyravimus ir didelius tarpus. „Grainger Industrial Supply“ programėlėje mygtukas „Eiti į apmokėjimą“ yra raudonos spalvos, todėl jis išsiskiria bet kuriame puslapyje, kuriame jis rodomas. Siauros paieškos rezultatų skydelis, priešingai, yra pilkas, todėl pagal hierarchiją jis maždaug atitinka kitus elementus, pvz., paieškos juostą ir produktų nuorodas.

6. Kryptis dizaineriams.

Puslapių išdėstymai paprastai kuriami taip, kad atitiktų vertikalių ir horizontalių linijų tinklelį, tiek dėl susitarimo, tiek dėl to, kad tai yra geriausiai įskaitomas formatas. Tokioje sistemoje yra naujas būdas nustatyti hierarchiją: sulaužyti tinklelį.

Tekstas, išdėstytas išilgai kreivės arba įstrižainės, automatiškai išsiskiria iš aplinkinio tinklelio blokuoto teksto ir užima centrinę vietą. Tai jau seniai buvo veiksminga reklamos strategija, pavyzdžiui, „Frost Design“ autobusų stotelės plakatas.