Dizaynerlar uchun vizual ierarxiya tamoyillari

Dizaynerlar uchun vizual ierarxiya tamoyillari dizayn tushunchasi bo'lib, u tomoshabinning ko'zlari dizayn bo'ylab harakatlanishini boshqarish va qaysi elementlar eng muhim yoki vizual jozibadorligini aniqlash uchun ishlatiladi.

Dastlab tosh lavhalar, papirus varaqlari va qog'ozlar mavjud edi. Keyin kompyuter ekranlari va elektron planshetlar paydo bo'ldi. Sahifani ko'rsatish texnologiyasi rivojlanib borar ekan, dizaynerlar tarkibni tartibga solishning aniq usulini qoldiradilar. Lekin qaysi biri yaxshiroq? Qisqasi , vizual ierarxiya.

Vizual ierarxiyaning ta'rifi: Vizual ierarxiya - bu tartibga solish dizayndagi grafik elementlar Har bir elementning ahamiyati bo'yicha. Vizual vazn aniqlaydi element ahamiyati dizayn ierarxiyasida, tomoshabinga nimaga e'tibor qaratish kerakligini va qanday tartibda aytib beradi.

Dizaynerlar uchun manbalar. 50 bepul

Bu tobora muhim masalaga aylanib bormoqda, chunki sezgir ramkalar dizaynerlarni bir vaqtning o'zida turli xil sahifalar haqida o'ylashga majbur qiladi. Zich matn va qisqa e'tibor oralig'iga duch kelgan dizaynerlar o'quvchining ko'zini eng muhim ma'lumotlarga yo'naltirish uchun 6 tamoyilni ishlab chiqdilar.

Vizual ierarxiyaning ushbu 6 tamoyili sizga broshyuralardan tortib ilovalargacha bo'lgan hamma narsani loyihalashtirishga yordam beradi va oxirgi foydalanuvchi dizaynerlar uchun ijobiy o'qish tajribasiga ega bo'lishini ta'minlaydi.

Barcha madaniyatlar yuqoridan pastga o'qiladi va ko'pchilik madaniyatlar chapdan o'ngga o'qiladi. Ammo bu bilim uchun muhim bo'lsa-da sahifa dizayni, dizaynerlar vazifani ancha qiyin deb bilishadi.

So'nggi tadqiqotlar shuni ko'rsatdiki, odamlar sahifani o'qishdan oldin uni qiziqtiradimi yoki yo'qligini bilish uchun avval uni skanerlashi mumkin. Skanerlash naqshlari odatda ikkita shakldan birini oladi, "F" va "Z" va siz dizayningizda bundan foydalanishingiz mumkin.

F-naqshlar. Vizual ierarxiya tamoyillari

F-shablonlar maqolalar yoki blog postlari kabi an'anaviy matn sahifalariga qo'llang. O'quvchi chap tomonni skanerlaydi sahifalar chapga tekislangan sarlavhalar yoki boshlang'ich mavzu jumlalarida qiziqarli kalit so'zlarni qidiradi, so'ngra u qiziq narsaga duch kelganida to'xtaydi va o'qiydi (o'ngga). Natija F (yoki E yoki undan ham ko'proq gorizontal chiziqlarga ega bo'lgan narsa; lekin "F" atamasi yopishib qolgan) ga o'xshaydi.

Bundan qanday foydalana olasiz? Muhim ma'lumotlarni chap tomonga tekislang va paragraf bloklarini ajratish uchun qisqa, qalin sarlavhalar, o'qlar va shunga o'xshash diqqatni tortuvchi elementlardan foydalaning.

Z-model. Vizual ierarxiya tamoyillari

Z-naqshlar ma'lumotlar blok paragraflarida ko'rsatilmasligi shart bo'lgan reklama yoki veb-saytlar kabi boshqa turdagi sahifalarga nisbatan qo'llaniladi. O'quvchi birinchi navbatda sahifaning yuqori qismini skanerdan o'tkazadi, bu erda muhim ma'lumotlar topilishi mumkin, keyin diagonal ravishda qarama-qarshi burchakka o'tadi va sahifaning pastki qismida xuddi shunday qiladi.

Veb-dizaynerlar odatda o'z sahifalarini ushbu xatti-harakatga aniq mos keladigan tarzda loyihalashtiradilar, eng muhim ma'lumotlarni burchaklarga joylashtiradilar va boshqa muhim ma'lumotlarni yuqori va pastki chiziqlar bo'ylab yo'naltiradilar va diagonalni bog'laydilar.

Quyida 2010 yilgi konferentsiya yig'ilishini loyihalashda muhim elementlar logotip hisoblanadi (yuqori chapda), "hozir ro'yxatdan o'tish" tugmasi (yuqori o'ngda) va strategik jihatdan chiroyli Z-naqshli joylarga joylashtirilgan dinamiklar ro'yxati (pastda).

2. Hajmi muhim. Vizual ierarxiya tamoyillari
_

Bu juda oddiy: odamlar birinchi navbatda katta narsalarni o'qiydilar. Agar Young Vic uchun quyida keltirilgan reklamaga "bo'linishdan" oldin ko'zlaringiz "spektakl" ga jalb qilingan bo'lsa, darhol sezgi psixologiga murojaat qilishingiz kerak: ehtimol siz noyob anomaliya sifatida sinovdan o'tib, yaxshi pul ishlashingiz mumkin.

Qizig'i shundaki, bu tendentsiya yuqoridan pastga qoidani rad etish uchun etarlicha kuchli. Yuqoridagi rasmda "hack" "harakat qilish vaqti" ni bekor qiladi, chunki u kattaroq va chap tomonda (shuning uchun chapdan o'ngga qoida yordam beradi).

Ammo Yillik hisobotning keyingi sahifasida: Inson huquqlari kampaniyasi 2012 (OAVning beshinchi ustunida ishlab chiqilgan) biz katta hajmda o'qiymiz. shrift “Saylov 2012” matnining to‘g‘ridan-to‘g‘ri tepasida “Tanviq yo‘lida tenglik uchun kurash”. Vizual ierarxiya tamoyillari

"Saylov 2012" - bu eng yuqori darajadagi ma'lumotlar tartibi: u bizga quyidagi ma'lumotlar tegishli bo'lgan umumiy mavzuni aytib beradi. Ammo dizayner maqolaning sarlavhasi o'quvchilar uchun qiziqarliroq deb qaror qildi va shuning uchun uni birinchi bo'lib o'qilishi uchun baholadi.

3. Fazo va tekstura. Vizual ierarxiya tamoyillari

E'tiborni jalb qilishning yana bir usuli tarkibga nafas olish uchun etarli joy bering . Agar tugma atrofida sezilarli salbiy bo'sh joy bo'lsa yoki matn blokidagi chiziqlar keng tarqalgan bo'lib kuzatilsa, bu elementlar o'quvchilarga osonroq ko'rinadi.

Quyidagi rasmda (DrawtoClick saytining bir qismi) ko'rib turganingizdek, intervallar o'lchamdan foydalanishga oqlangan muqobil yoki qo'shimcha bo'lishi mumkin. Bu erda savdo nuqtasi, "Notre agence vouscompagne..." juda kichik bosma nashrda yozilgan, lekin u juda ko'p oq bo'shliq bilan o'ralgan bo'lib, uning ahamiyatini ko'rsatadi. Quyida "Le Compendre", "Le Réaliser" va "Le Partager" iboralari atrofdagi makondan ajratilgan holda qo'shimcha urg'u oladi.

Odamlar vizual ierarxiyaga nisbatan "tekstura" haqida gapirganda, ular teksturaning grafik effektlarini nazarda tutmaydi. Aksincha, bu turdagi "tekstura" sahifadagi bo'shliq, matn va boshqa tafsilotlarning umumiy joylashuvi yoki tuzilishini anglatadi. Bright Pink-dan olingan ushbu misol kontseptsiyani yaxshi ko'rsatadi:

Birinchi rasmda "Sport" so'zi ierarxiyada "badminton" dan yuqori, chunki u balandroq, kattaroq va jasurroqdir. 2-rasmda "badminton" ni alohida ajratib turadigan va uni o'z makoniga joylashtiradigan qora to'rtburchaklar tufayli bu ikki so'z taxminan tengdir.

Uchinchi rasmda fondagi chizma "Sport" maydonini to'xtatadi, ammo "badminton" maydonini to'xtatadi va shuning uchun "badminton" ierarxiyada eng yuqori bo'lgan teskari o'zgarishlarga olib keladi. Ushbu rivojlanishni oldindan aytish qiyin, shuning uchun dizaynerlar ko'pincha uni "to'qimalarning" yaxlit tuyg'usi bilan bog'lashadi.

4. Shrift vazni va juftlashtirish. Vizual ierarxiya tamoyillari

Shrift tanlash vizual ierarxiyani o'rnatish uchun juda muhimdir. Shriftning eng muhim atributlari orasida vazn, uning harflarini tashkil etuvchi chiziqlar kengligi va serif va sans serif kabi uslublar mavjud. Kursiv kabi boshqa o'zgartirishlar ham rol o'ynashi mumkin.

E'tibor bering, qanday qilib naushnik The Tea Factory uchun quyidagi veb-dizayndagi so'z ierarxiyasining tartibiga ta'sir qiladi: "Isitishga yordam beradigan mukammal choylar" - bu o'yinning nomi, ammo shrift og'irligi va kursivdagi farqlar, so'zlarni joylashtirishdan tashqari, ko'proq narsani yaratadi. dinamik, kamroq chiziqli, o'qish tajribasi. "://azbyka.com.ua/foto/tea-factory.jpg" />

Ba'zi hollarda, maqsad turli xil ma'lumotlarni bir xil darajada shoshilinch ravishda taqdim etishdir. Hammani bir xil o'lcham va vaznga o'rnatish ekvivalentlikni ta'minlaydi, lekin ayni paytda uni monoton ko'rinishga olib keladi. Shriftni farqlash - buning oldini olishning bir usuli, masalan, quyida joylashgan Trendi jurnali muqovasi. Vizual ierarxiya tamoyillari

Broshyurani chop etish uchun tayyorlash.

Bu yerda, sahifaning chetidagi beshta tizerlar ierarxiya boʻyicha bir xil boʻladi, lekin ikkita yaxshi bogʻlangan shriftni oʻzgartirish orqali xilma-xillikka erishiladi: biri oʻrtacha ogʻirlikdagi serif, ikkinchisi yengil, lekin baland sans-serif.

5. Rang va soya. 

Mana yana bir aql bovar qilmaydigan narsa: yorqin ranglar o'chirilgan ranglardan yoki kulrang soyalardan ajralib turadi, engilroq soyalar esa "uzoqroq" ko'rinadi va shuning uchun ierarxiyada boyroq, quyuqroq soyalarga qaraganda pastroq tushadi. Ular qaerdadir veb-sayti yorqin yorug'lik va rangli orqa yorug'likni qora va oq panjara effekti bilan yorqinlik effektiga qarama-qarshi qo'yadi:

Guggenheim veb-sayti joy tanlash, hozirda ko'rilayotgan ko'rgazmalar ro'yxati va maxsus ko'rgazmalarga havolalar kabi muhim ma'lumotlarni ta'kidlash uchun rangdan foydalanadi. Vizual ierarxiya tamoyillari

Maxsus qadoqlash uchun eng yaxshi shrift

Uitni muzeyi veb-sayti, aksincha, bir shrift, vazn va ohang (qora) ichida ierarxiyani o'rnatadi (bu asosiy ohangga oq rang qo'shib, uni engilroq qilish demakdir). "Pop madaniyati bo'yicha Kori Archangel" vizual ierarxiyada "Uitni hikoyalarida yangi" dan aniq pastda joylashgan, bu nafaqat pastroq bo'lgani uchun, balki uning soyasi engilroq bo'lgani uchun ham oq fonda kamroq ko'zga tashlanadi. Vizual ierarxiya tamoyillari

Rang alohida ma'noga ega mobil dizayn kichik ekran o'lchami o'lchamdagi o'zgarishlar va keng intervalli kabi boshqa strategiyalardan foydalanish qobiliyatingizni cheklaydigan ilovalar. Grainger Industrial Supply ilovasida "To'lovga o'tish" tugmasi qizil rangga ega bo'lib, u paydo bo'lgan har qanday sahifada ajralib turadi. Dar qidiruv natijalari paneli, aksincha, kulrang bo'lib, uni ierarxiyada qidiruv paneli va mahsulot havolalari kabi boshqa elementlarga taxminan ekvivalent qiladi.

6. Dizaynerlar uchun yo'nalish.

Sahifa tartiblari odatda vertikal va gorizontal chiziqlardan iborat bo'lib, konventsiya bo'yicha ham, eng o'qilishi mumkin bo'lgan format bo'lgani uchun ham mo'ljallangan. Bunday tizimda ierarxiyani o'rnatishning yangi usuli mavjud: tarmoqni buzish.

Egri chiziq yoki diagonal bo'ylab joylashgan matn, markaziy o'rinni egallab, atrofdagi panjara bilan bloklangan matndan avtomatik ravishda ajralib turadi. Bu uzoq vaqtdan beri reklama sohasida samarali strategiya bo'lib kelgan, masalan, Frost Designning avtobus bekati plakati.