Šiame straipsnyje suformuluosime pagrindinius svetainių hierarchijos sudarymo principus. Naudodamiesi jais galėsite sukurti lengvai suprantamą, logišką ir profesionalią svetainę, kurioje svarbūs elementai vyrauja prieš antrinės svarbos elementus.
Loginė vizualioji hierarchija yra vienas pagrindinių raktų į darnų svetainės įvaizdį. Plakato, bukleto, tinklalapio ar žurnalo puslapio sukūrimas grindžiamas loginės hierarchijos dėsnių naudojimu. Bet kokią kompoziciją sudaro elementai, ir šie elementai turi būti tinkamai subalansuoti erdvėje - ir nesvarbu, ar ji plokščia, ar trimatė.
Turinys
Kas yra vizualioji svetainės hierarchija?
Hierarchijos kūrimas dirbant su turiniu
„Apverstos piramidės“ principas
Vizualinės hierarchijos kūrimo būdai
Kaip patikrinti vizualinę hierarchiją
Kaip taikyti vizualinės hierarchijos principus interneto svetainės kūrime
Kas yra vizualioji svetainės hierarchija?
Patekus į svetainę su netinkamai suplanuota hierarchija, norisi ją palikti nedelsiant: elementų išsibarstymas painioja, klaidina ir vargina. Kitose svetainėse - atvirkščiai, - jūs orientuojatės iškarto, nemąstydami kaip patekti į vieną ar kitą skyrių ir pasiekti jus dominančią skiltį.
Vizualinė hierarchija svetainėje yra informacijos organizavimas ir pateikimas tokiu būdu, kad lankytojas galėtų greitai išsiaiškinti sąsają ir atskirti pagrindinę nuo antrinės.
Bet kurio tinklalapio vizualinis pateikimas turėtų padėti lankytojui greitai rasti atsakymus į tris klausimus:
Nauda (kas tai?)
Patogumas (kaip šitu naudotis?)
Būtinybė (kodėl man tai įdomu?)
Už intuityvaus dizaino slypi ne gudrus apipavidalinimas - visų pirma tai kruopšti turinio analizė ir struktūrizavimas, labai aiškiai sukonstravus visus elementus bei atsižvelgiant į jų svarbą vartotojui.
Hierarchijos kūrimas dirbant su turiniu
Turinį - informaciją, kuri užpildys svetainę - galite pateikti skirtingais būdais. Pradėdami modeliuoti svetainę, pirmiausia turite sutvarkyti turinį, o tam galite naudoti paprastą ir labai vizualią techniką.
1. Ant lapo surašykite pagrindinius svetainės skyrius. Parašykite viską, kas ateina į galvą. Neapsunkinkite savo užduoties - tiesiog surašykite raktinius žodžius, o vietą jiems rasite vėliau.
2. Iškirpkite užrašus: kiekviena antraštė turės savo stačiakampį.
3. Iškirptas antraštes sugrupuokite pagal temas.
4. Sukurkite sloginę seką kiekvienoje temoje.
Rašant šiuos žodžius ir frazes formuojami pagrindiniai būsimos svetainės elementai. Todėl kol kas prieš jus esanti nesusisteminta informacija yra panaši į skirtingų žymų rinkinį: vieni užrašai bus naudojami kaip skyrių pavadinimai, kiti - kaip poskyrių. Lankstinukų grupavimas padeda supaprastinti bendrą struktūrą ir nepasiduoti norui visą medžiagą padaryti pagrindine (o pagunda yra didelė, nes susikoncentravus ties tematika visi komponentai atrodo vienodai svarbūs).
Jei pradėsite komponuoti net pačius skirtingiausius vardus į grupes, greitai paaiškės, kad turinį galima suskirstyti į keletą pagrindinių kategorijų. Taigi iš krūvos popieriaus lapų formuojasi temos: „paslaugos“, „renginiai“, „apie mus“ ir pan. Begrupuojant antraštes, jų pavadinimas iškart padeda suprasti, ar nepateko į grupę ne tų elementų, ar galbūt temoje kažko trūksta.
Darbas su šiomis antraštėmis realiame, o ne virtualiame darbalaukyje yra puikus būdas fiziškai pajusti būsimos svetainės dizainą. Rūšiuokite, judėkite, statykite logiką išsamiai ir padarykite pertraukėlę, kad patikrintumėte, ar nedideli pakeitimai nepažeidė bendros sistemos. Taip sukuriama semantinė svetainės hierarchija.
Kiekviena antraštė turėtų rasti savo vietą bendroje kompozicijoje. Susikūrus grupėms, kiekviena jų turi įgauti savo loginę hierarchiją grupės viduje pagal svarbumo laipsnį. Taip turinio organizavimas taps jūsų interneto svetainės schema.
„Apverstos piramidės“ principas
Norėdami patikrinti, ar gauta schema veikia logiškai, galite naudoti „apverstos piramidės“ techniką, kurią žurnalistai naudoja rašydami straipsnius.
Pagrindinė tema turėtų būti atskleista pirmosiose dviejose pastraipose. Raktiniai žodžiai šioje straipsnio dalyje yra: kas, kada, kur, kodėl, kaip. Atsakymai į šiuos sąlyginius klausimus yra pati svarbiausia teksto dalis.
Antra dalis, esanti žemiau - tai detalės.
Paskutinėje, apatinėje ir siauriausioje apverstos piramidės dalyje - papildoma informacija.
Šis principas taip pat galioja kuriant svetainę, nors mes nekalbame apie pažodinį jo atkūrimą. Svarbiausias elementas - t.y. tas, kuris atsako į klausimus: kas tai, ką jūs siūlote, kuo tai naudinga lankytojui ir ką jis turi padaryti - turėtų būti vizualiai akcentuotas ir atskirtas nuo detalių ir papildomos informacijos.
Vizualinės hierarchijos kūrimo būdai
Kai schema paruošta ir aišku, kuris iš elementų yra svarbesnis už kitus, galite pradėti kurti turinį. Norint suteikti kiekvienam objektui norimą vaizdinį „svorį“ pagal gautą schemą, yra keletas gudrybių.
1. Elemento dydis
Akivaizdus, bet dėl to ne mažiau efektyvus būdas padaryti vieną elementą (užrašą, paveikslėlį, simbolį) reikšmingesnį už kitą, yra padaryti jį didesnį.
2. Tipografijos struktūra
„Tildoje“ dauguma antraščių jau automatiškai turi tris suvokimo lygius. Šis atskyrimas yra būtinas norint struktūruoti puslapio turinį. Lygiai gali skirtis pagal šrifto dydį, tipą ir spalvą: nuo pirmo, patraukliausio ir stambiausio, iki trečio - ramaus ir „prislopinto“.
Pirmasis lygis: čia rašomas aukščiausio prioriteto turinys; šio lygio antraštės krenta į akis ir yra skaitomos pirmiausia.
Antrasis lygis: šiame lygyje yra paantraštės, lentelių pavadinimai - visa tai reiškia pagrindines „temas“. Būtent šiame lygyje yra elementai, kuriais vadovaudamasis vartotojas patenka į svetainės skyrius arba tiesiog susipažįsta su jais.
Trečiasis lygis: šiam lygiui gali būti priskiriami teksto blokai, vaizdų aprašymai, trumpos pastabos - viskas, kas atskleidžia temą, bet neveikia kaip jos pavadinimas. Būtent čia jūs galite išsamiai papasakoti apie visas jūsų projekto detales.
3. Puslapio kompozicija
Kai žmogus pirmą kartą mato vaizdą - nesvarbu, ar tai paveikslėlis, ar tinklalapis, ar žurnalas - jis pasąmoningai seka viena iš vizualinės analizės schemų: schema F arba schema Z. T. y., Prieš pradėdamas atidžiai tyrinėti bet kokį vaizdą, žiūrovas „nuskaito“ jį judėdamas žvilgsniu išilgai vienos iš šių įsivaizduojamų raidžių. Verta nepamiršti to, komponuojant elementus puslapyje. Pirmiausia mes perskaitome elementus, esančius žvilgsnio kelyje, pasąmoningai laikydamiesi raidės trajektorijos.
4. Pakartojimai ir grupavimas
Galima suteikti reikšmę tam tikram objektui ne tik jį padidinant, bet ir naudojant pakartojimo techniką. Daugelis mažų elementų, esančių vienas šalia kito, gali turėti ne mažiau svorio nei vienas didelis elementas. Geriau tokią grupę įkomponuoti ant grandinės F arba Z linijų. Tarpai tarp objektų padės išryškinti semantinę grupę. Tarpas grupės viduje turėtų būti mažesnis nei tarpas grupės išorėje.
Dažna svetainės turinio dizaino klaida yra netinkamai apgalvoti atstumai tarp skirtingų semantinių blokų. Žmogus negali greitai, intuityviai suprasti, kas kam priklauso, ir dėl to prastai suvokia informaciją.
Pvz., Puslapyje yra skyrius „Apie produktą“, po kurio rašoma „Privalumai“. Kadangi antrosios dalies pavadinimas per daug artimas pirmajai, kyla painiavos. Tai nėra kritiška, bet erzina žmogų, nes tai verčia jus įsitempti. Ištaisyti tai paprasta - atstumus aplink skyrių padaryti didesnius nei tarp elementų, esančių jo viduje.
5. Spalva
Paryškinti elementai iš karto pastebimi; naudodami spalvą galite subalansuoti elementų išdėstymą puslapyje, išryškindami tuos, kurie turėtų patraukti dėmesį.
Todėl kurdami svetainę su spalvomis turite elgtis labai atsargiai. Daugeliu atvejų svetanėje visiškai pakanka dviejų pagrindinių spalvų - vyraujančios ir papildomos. Tokiu atveju jums bus lengviau organizuoti vizualinę hierarchiją.
6. Balta (tuščia) erdvė
Projektavimo procese svarbu nepersistengti. Pagrindinis uždavinys - pasiekti efektą minimaliomis priemonėmis. Paprastas baltas fonas yra tiek bendros kompozicijos dalyvis, kiek ir elementai esantys jame. Nemėginkite atsikratyti "oro" - regimoji erdvė turėtų „kvėpuoti“: tai yra garantija, kad objektai laisvai išreikš save, o ne pasiklys dėl per artimos kaiminystės su kitais objektais.
Pavyzdžiui, puslapio viduryje įdėjote raginimą veikti (motyvuojančią frazę ir mygtuką „pirkti“). Tai yra svarbus elementas, kurio nereikėtų pradanginti tarp kitų. Norint jį paryškinti, nebūtina padaryti milžinišką šriftą ir dažyti mygtuką branduoline spalva. Įtraukite daugiau erdvės prieš ir po raginimu veikti, ir jį bus lengva perskaityti.
P.s.: sakydami "baltas", turime omenyje ne spalvą, o tuščią erdvę.
Reziume: kaip kuriant svetainę taikyti vizualinės hierarchijos principus
Pagrindinė hierarchijos formulė yra darnus pirminių ir antrinių komponentų derinys.
1.Prieš pradėdami kurti svetainę, iš anksto paruoškite turinį
2. Struktūruokite savo turinį, pabrėždami hierarchijos lygius - svarbią, svarbią informaciją ir papildomą informaciją. Jokia dekoratyvinė technika neišgelbės „griūvančios“ logikos ir netvarkingos struktūros svetainėje.
3. Pasirinkite vaizdinės hierarchijos techniką - jos pagalba jūs pabrėšite pagrindinį dalyką.
4.Sukurkite svetainę. Minimalus dekoratyvumas, darbas su dydžiais, spalva ir tinkamu elementų išdėstymu regos lauke pagal originalią, kruopščiai pastatytą schemą yra raktas į gerai veikiančią svetainę.
