Vizuālās hierarhijas principi dizaineriem

Vizuālās hierarhijas principi dizaineriem ir dizaina koncepcija, kas tiek izmantota, lai vadītu to, kā skatītāja acis pārvietojas dizainā un noteiktu, kuri elementi ir vissvarīgākie vai vizuāli pievilcīgākie.

Sākumā bija akmens plāksnes, papirusa ruļļi un papīrs. Pēc tam parādījās datoru ekrāni un elektroniskās planšetdatori. Attīstoties lapu parādīšanas tehnoloģijai, dizaineriem ir atstāts skaidrs veids, kā organizēt saturu. Bet kas ir labāks? Īsāk sakot , vizuālā hierarhija.

Šeit ir vizuālās hierarhijas definīcija: Vizuālā hierarhija ir izkārtojums grafiskie elementi dizainā katra elementa svarīguma secībā. Vizuālais svars nosaka elementa nozīme dizaina hierarhijā, pasakot skatītājam, uz ko fokusēties un kādā secībā.

Resursi dizaineriem. 50 bezmaksas

Šī problēma kļūst arvien svarīgāka, jo atsaucīgi ietvari liek dizaineriem domāt par daudzām dažādām lapām vienlaikus. Saskaroties ar blīvu tekstu un īsu uzmanību, dizaineri izstrādāja 6 principus, lai novirzītu lasītāju uz vissvarīgāko informāciju.

Šie 6 vizuālās hierarhijas principi palīdzēs jums izveidot visu, sākot no brošūrām un beidzot ar lietotnēm, nodrošinot galalietotājam pozitīvu lasīšanas pieredzi dizaineriem.

Visas kultūras tiek lasītas no augšas uz leju, un lielākā daļa kultūru tiek lasītas no kreisās uz labo pusi. Bet, lai gan šīs zināšanas ir svarīgas, lai lapas dizains, dizaineri zina, ka uzdevums ir daudz grūtāks.

Nesenie pētījumi liecina, ka cilvēki vispirms skenē lapu, lai noskaidrotu, vai tā viņus interesē, pirms to lasa. Skenēšanas modeļiem parasti ir viena no divām formām — "F" un "Z", un jūs varat to izmantot savā dizainā.

F raksti. Vizuālās hierarhijas principi

F-veidnes attiecas uz tradicionālajām teksta lapām, piemēram, rakstiem vai emuāra ziņām. Lasītājs skenē kreiso pusi lapas meklē interesantus atslēgvārdus pa kreisi izlīdzinātos virsrakstos vai sākotnējās tēmas teikumos, pēc tam apstājas un lasa (labajā pusē), kad viņš vai viņa saskaras ar kaut ko interesantu. Rezultāts izskatās kā F (vai E, vai kaut kas ar vēl vairāk horizontālām svītrām; bet termins "F" ir iestrēdzis).

Kā jūs varat to izmantot? Izlīdziniet svarīgu informāciju pa kreisi un izmantojiet īsus, treknrakstus virsrakstus, aizzīmes un citus līdzīgus uzmanību piesaistošus elementus, lai sadalītu rindkopu blokus.

Z-modelis. Vizuālās hierarhijas principi

Z-veida raksti attiecas uz cita veida lapām, piemēram, reklāmām vai vietnēm, kur informācija nav obligāti sniegta bloka rindkopās. Lasītājs vispirms noskenē lapas augšdaļu, kur, visticamāk, tiks atrasta svarīga informācija, pēc tam pa diagonāli pāriet uz pretējo stūri un dara to pašu lapas apakšā.

Tīmekļa dizaineri parasti izstrādā savas lapas tā, lai tie precīzi atbilstu šai darbībai, novietojot svarīgāko informāciju stūros un orientējot citu svarīgu informāciju gar augšējo un apakšējo joslu un savienojot diagonāli.

Zemāk 2010. gada konferences asamblejas dizainā svarīgi elementi ir logotips (augšējā kreisajā pusē), poga "reģistrēties tūlīt" (augšējā labajā stūrī) un skaļruņu saraksts (apakšā), kas ir stratēģiski izvietoti jaukās Z-raksta vietās.

2. Lielumam ir nozīme. Vizuālās hierarhijas principi
_

Tas ir pavisam vienkārši: cilvēki vispirms izlasa lielas lietas. Ja jūsu acis pievelk "izrādei", pirms "iedalāties" tālāk redzamajā Young Vic reklāmā, jums nekavējoties jāsazinās ar uztveres psihologu: jūs, iespējams, varētu nopelnīt labu naudu, pārbaudot kā retu anomāliju.

Interesanti ir tas, ka šī tendence patiesībā ir pietiekami spēcīga, lai noraidītu augšas uz leju likumu. Iepriekš redzamajā attēlā "hack" ignorē "laiku rīkoties", jo tas ir lielāks un pa kreisi (tātad noteikums no kreisās puses uz labo palīdz).

Bet nākamajā Gada ziņojuma lappusē: Cilvēktiesību kampaņa 2012 (izstrādāta piektajā mediju slejā) mēs lasām lielos fontu “Cīņa par vienlīdzību kampaņas ceļā” pirms teksta tieši virs tā “Vēlēšanas 2012”. Vizuālās hierarhijas principi

"Vēlēšanas 2012" ir augstākā līmeņa informācijas secība: tā mums norāda vispārējo tēmu, uz kuru attiecas tālāk sniegtā informācija. Bet dizainere nolēma, ka raksta nosaukums lasītājiem ir interesantāks, un tāpēc novērtēja to tā, lai tas tiktu izlasīts pirmais.

3. Telpa un faktūra. Vizuālās hierarhijas principi

Vēl viens veids, kā piesaistīt uzmanību, ir dot saturam pietiekami daudz vietas elpot . Ja ap pogu ir ievērojama negatīva atstarpe vai teksta blokā tiek plaši ievērotas rindas, šie elementi būs vieglāk redzami lasītājiem.

Kā redzams zemāk esošajā attēlā (daļa no DrawtoClick vietnes), atstarpes var būt eleganta alternatīva vai papildinājums izmēra izmantošanai. Šeit pārdošanas punkts “Notre agence vouscompagne...” ir rakstīts ļoti mazā drukā, taču to ieskauj baltu laukumu pārpilnība, norādot uz tā nozīmīgumu. Zemāk frāzes “Le Compendre”, “Le Réaliser” un “Le Partager” saņem papildu uzsvaru, atraujoties no apkārtējās telpas.

Kad cilvēki runā par "tekstūru" saistībā ar vizuālo hierarhiju, viņi nedomā faktūras grafiskos efektus. Drīzāk šāda veida "tekstūra" attiecas uz kopējo telpas, teksta un citu detaļu izkārtojumu vai struktūru lapā. Šis piemērs no Bright Pink labi ilustrē koncepciju:

Pirmajā attēlā vārds "Sport" atrodas hierarhijā augstāk nekā "badmintons", jo tas ir garāks, lielāks un drosmīgāks. 2. attēlā abi vārdi ir aptuveni līdzvērtīgi, pateicoties melnajam taisnstūrim, kas izceļ “badmintonu” un novieto to savā vietā.

Trešajā attēlā fona skribelējums pārtrauc sporta laukumu, bet ne badmintona atstarpi, un tādējādi rodas apvērsums, kur "badmintons" atrodas augstākajā hierarhijā. Šo attīstību ir grūti paredzēt, tāpēc dizaineri to bieži saista ar holistisku "tekstūras" sajūtu.

4. Fonta svars un savienošana pārī. Vizuālās hierarhijas principi

Fontu izvēle ir būtiska, lai izveidotu vizuālo hierarhiju. Viens no svarīgākajiem fonta atribūtiem ir svars, svītru platums, kas veido tā burtus, un stils, piemēram, serif un sans serif. Citām modifikācijām, piemēram, slīprakstam, var būt arī nozīme.

Ievērojiet, kā austiņas ietekmē vārdu hierarhijas secību vietnē The Tea Factory zemāk esošajā tīmekļa dizainā: spēles nosaukums ir "perfektas tējas, kas palīdz sasildīties", taču fonta svara un slīpraksta atšķirības papildus vārdu izvietojumam rada vairāk dinamiska, mazāk lineāra lasīšanas pieredze. "://azbyka.com.ua/foto/tea-factory.jpg" />

Dažos gadījumos mērķis ir sniegt dažādu informāciju kā vienlīdz steidzamu. Iestatot visiem vienādus izmērus un svaru, tiks nodrošināta līdzvērtība, bet arī tas izskatīsies vienmuļš. Fontu diferencēšana ir viens no veidiem, kā no tā izvairīties, piemēram, žurnāla Trendi vāks zemāk. Vizuālās hierarhijas principi

Brošūras sagatavošana drukāšanai.

Šeit piecas lapas perifērijā ir vienādas pēc hierarhijas, taču tiek panākta dažādība, mainot divus labi savienotus fontus — vienu vidēja svara serifu, bet otru vieglu, bet augstu bez serifa.

5. Krāsa un nokrāsa. 

Lūk, vēl viens vienkāršs jautājums: spilgtas krāsas izceļas no klusinātām krāsām vai pelēkajiem toņiem, savukārt gaišākas nokrāsas šķiet "attālākas" un tādējādi atrodas zemāk hierarhijā nekā bagātīgākas, tumšākas nokrāsas. Vietnē Where Are They kontrastē spilgta gaisma un krāsains fona apgaismojums ar melnbaltu režģa efektu, lai radītu spilgtumu:

Gugenheimas vietne izmanto krāsas, lai uzsvērtu svarīgu informāciju, piemēram, atrašanās vietas izvēli, pašlaik skatīto izstāžu sarakstu un saites uz īpašām izstādēm. Vizuālās hierarhijas principi

Labākais fonts pielāgotam iepakojumam

No otras puses, Vitnijas muzeja vietne nosaka hierarhiju viena fonta, svara un toņa (melnā) ietvaros, izmantojot nokrāsu (tas nozīmē, ka pamata tonim tiek pievienots balts, padarot to gaišāku). “Cory Archangel on Pop Culture” vizuālajā hierarhijā ir skaidri zem “New on Whitney Stories” ne tikai tāpēc, ka tas ir zemāks, bet arī tāpēc, ka tā nokrāsa ir gaišāka, padarot to mazāk pamanāmu uz baltā fona. Vizuālās hierarhijas principi

Krāsai ir īpaša nozīme mobilais dizains lietojumprogrammas, kurās mazs ekrāna izmērs ierobežo jūsu iespēju izmantot citas stratēģijas, piemēram, izmēru izmaiņas un lielas atstarpes. Programmā Grainger Industrial Supply poga “Turpināt uz norēķināšanos” ir iekrāsota sarkanā krāsā, tādējādi izceļot to jebkurā lapā, kur tā tiek rādīta. Turpretī šaurās meklēšanas rezultātu panelis ir pelēks, tāpēc tas hierarhijā ir aptuveni līdzvērtīgs citiem elementiem, piemēram, meklēšanas joslai un produktu saitēm.

6. Virziens dizaineriem.

Lapu izkārtojumi parasti tiek veidoti tā, lai tie atbilstu vertikālu un horizontālu līniju režģim gan pēc vienošanās, gan tāpēc, ka tas ir salasāmākais formāts. Šādā sistēmā ir jauns veids, kā izveidot hierarhiju: tīkla sadalīšana.

Teksts, kas ir novietots gar līkni vai diagonāli, automātiski izceļas uz apkārtējo režģa bloķēto tekstu, ieņemot centrālo vietu. Tā jau sen ir bijusi efektīva stratēģija reklāmā, piemēram, Frost Design autobusu pieturas plakāts.