Dizaynerlər üçün vizual iyerarxiya prinsipləri

Dizaynerlər üçün vizual iyerarxiya prinsipləri tamaşaçının gözlərinin dizaynda necə hərəkət etdiyini istiqamətləndirmək və hansı elementlərin ən vacib və ya vizual olaraq cəlbedici olduğunu müəyyən etmək üçün istifadə olunan dizayn konsepsiyasıdır.

Əvvəlcə daş lövhələr, papirus tumarları və kağızlar var idi. Sonra kompüter ekranları və elektron planşetlər gəldi. Səhifənin göstərilməsi texnologiyası inkişaf etdikcə, dizaynerlər məzmunu təşkil etmək üçün aydın şəkildə qalırlar. Amma hansı daha yaxşıdır? Qısası , vizual iyerarxiya.

Vizual iyerarxiyanın tərifi budur: Vizual iyerarxiya tənzimləmədir dizaynda qrafik elementlər hər bir elementin əhəmiyyətinə görə. Vizual çəki müəyyən edir element əhəmiyyəti dizayn iyerarxiyasında, tamaşaçıya nəyə diqqət yetirməli və hansı ardıcıllıqla danışmalıdır.

Dizaynerlər üçün resurslar. 50 pulsuz

Cavab verən çərçivələr dizaynerləri eyni anda bir çox müxtəlif səhifələr haqqında düşünməyə məcbur etdiyindən bu, getdikcə daha vacib bir məsələyə çevrilir. Sıx mətn və qısa diqqət aralığı ilə üzləşən dizaynerlər oxucunun nəzərini ən vacib məlumatlara yönəltmək üçün 6 prinsip hazırlayıblar.

Vizual iyerarxiyanın bu 6 prinsipi sizə broşuralardan tutmuş proqramlara qədər hər şeyi dizayn etməyə kömək edəcək və son istifadəçinin dizaynerlər üçün müsbət oxu təcrübəsinə malik olmasını təmin edəcək.

Bütün mədəniyyətlər yuxarıdan aşağıya, əksər mədəniyyətlər isə soldan sağa oxunur. Ancaq bu bilik üçün vacib olsa da səhifə dizaynı, dizaynerlər işin daha çətin olduğunu bilirlər.

Son araşdırmalar göstərdi ki, insanlar səhifəni oxumazdan əvvəl onunla maraqlanıb-maraqlanmadıqlarını yoxlamaq üçün əvvəlcə onu skan edirlər. Skan nümunələri adətən "F" və "Z" kimi iki formadan birini alır və siz dizaynınızda bundan yararlana bilərsiniz.

F-Nümunələri. Vizual İerarxiya Prinsipləri

F şablonları məqalələr və ya blog yazıları kimi ənənəvi mətn səhifələrinə müraciət edin. Oxucu sol tərəfi skan edir səhifələr sola düzülmüş başlıqlarda və ya ilkin mövzu cümlələrində maraqlı açar sözlər axtarır, sonra maraqlı bir şeylə qarşılaşdıqda dayanır və oxuyur (sağda). Nəticə F (və ya E və ya daha çox üfüqi zolaqlı bir şey; lakin "F" termini ilişib qalmışdır) kimi görünür.

Bunu necə istifadə edə bilərsiniz? Vacib məlumatları sola düzün və paraqraf bloklarını parçalamaq üçün qısa, qalın başlıqlar, güllələr və digər oxşar diqqəti cəlb edən elementlərdən istifadə edin.

Z modeli. Vizual İerarxiya Prinsipləri

Z nümunələri məlumatın mütləq blok paraqraflarında təqdim edilmədiyi reklamlar və ya veb-saytlar kimi digər növ səhifələrə tətbiq edin. Oxucu əvvəlcə vacib məlumatın tapılma ehtimalı olan səhifənin yuxarı hissəsini skan edir, sonra diaqonal olaraq əks küncə keçir və səhifənin aşağı hissəsində də eyni şeyi edir.

Veb dizaynerləri adətən səhifələrini bu davranışa açıq şəkildə uyğunlaşdırmaq üçün dizayn edirlər, ən vacib məlumatları künclərdə yerləşdirirlər və digər vacib məlumatları yuxarı və aşağı çubuqlar boyunca istiqamətləndirirlər və diaqonalı birləşdirirlər.

Aşağıda 2010-cu il konfrans məclisinin dizaynında mühüm elementlər loqodur (yuxarı solda), "indi qeydiyyatdan keç" düyməsi (yuxarı sağda) və strateji olaraq gözəl Z naxışlı yerlərə yerləşdirilən dinamiklərin siyahısı (aşağıda).

2. Ölçü vacibdir. Vizual İerarxiya Prinsipləri
_

Bu olduqca sadədir: insanlar əvvəlcə böyük şeyləri oxuyurlar. Əgər Gənc Vic üçün aşağıdakı reklamı "bölməzdən" əvvəl gözləriniz "tamaşa"ya çəkilirsə, dərhal qavrayış psixoloqu ilə əlaqə saxlamalısınız: çox güman ki, nadir bir anomaliya kimi sınaqdan keçirilərək yaxşı pul qazana bilərsiniz.

Maraqlısı budur ki, bu tendensiya əslində yuxarıdan aşağıya doğru qaydanı rədd edəcək qədər güclüdür. Yuxarıdakı şəkildə, "hack" daha böyük və sola olduğu üçün "fəaliyyət vaxtı"nı əvəz edir (buna görə də soldan sağa qayda kömək edir).

Lakin İllik Hesabatın növbəti səhifəsində: İnsan Hüquqları Kampaniyası 2012 (beşinci media sütununda hazırlanmışdır) biz geniş şəkildə oxuyuruq. şrift "Seçki 2012"nin üstündəki mətndən əvvəl "Təşviqat yolunda bərabərlik uğrunda mübarizə". Vizual İerarxiya Prinsipləri

"Seçki 2012" ən yüksək səviyyəli məlumat sırasıdır: o, bizə aşağıdakı məlumatın aid olduğu ümumi mövzunu bildirir. Lakin dizayner məqalənin başlığının oxucular üçün daha maraqlı olduğuna qərar verdi və buna görə də birinci oxunması üçün onu qiymətləndirdi.

3. Məkan və faktura. Vizual İerarxiya Prinsipləri

Diqqəti cəlb etməyin başqa bir yolu nəfəs almaq üçün kifayət qədər yer verin . Düymənin ətrafında əhəmiyyətli mənfi boşluq varsa və ya mətn blokunda sətirlər geniş şəkildə izlənilirsə, bu elementlər oxuculara daha asan görünəcəkdir.

Aşağıdakı şəkildə (DrawtoClick-in saytının bir hissəsi) gördüyünüz kimi, boşluq ölçüsü istifadə üçün zərif alternativ və ya tamamlayıcı ola bilər. Burada satış nöqtəsi olan “Notre agence vouscompagne...” çox kiçik çapda yazılmışdır, lakin onun əhəmiyyətini göstərən çoxlu boşluqla əhatə olunmuşdur. Aşağıda "Le Compendre", "Le Réaliser" və "Le Partager" ifadələri ətraf məkandan ayrılaraq əlavə vurğulanır.

İnsanlar vizual iyerarxiya ilə əlaqəli "tekstura" haqqında danışarkən, fakturanın qrafik effektlərini nəzərdə tutmurlar. Əksinə, bu tip "tekstura" səhifədəki məkanın, mətnin və digər detalların ümumi düzülüşünə və ya strukturuna aiddir. Bright Pink-dən bu nümunə konsepsiyanı yaxşı göstərir:

Birinci şəkildə “İdman” sözü daha hündür, daha böyük və daha cəsarətli olduğu üçün iyerarxiyada “badminton”dan daha yüksəkdir. Şəkil 2-də “badminton”u fərqləndirən və onu öz məkanında yerləşdirən qara düzbucaqlı sayəsində iki söz təxminən bərabərdir.

Üçüncü şəkildə, fon cızması "İdman" məkanını kəsir, lakin "badminton" məkanını kəsir və buna görə də "badminton"un iyerarxiyada ən yüksək olduğu yerdə əks nəticə verir. Bu inkişafı proqnozlaşdırmaq çətindir, buna görə də dizaynerlər tez-tez onu vahid "tekstura" hissi ilə əlaqələndirirlər.

4. Şriftin çəkisi və cütləşməsi. Vizual İerarxiya Prinsipləri

Şrift seçimi vizual iyerarxiyanın qurulması üçün çox vacibdir. Şriftin ən mühüm atributları arasında çəki, onun hərflərini təşkil edən ştrixlərin eni və serif və sans serif kimi üslub var. Kursiv kimi digər dəyişikliklər də rol oynaya bilər.

Diqqət yetirin necə qulaqlıq The Tea Factory üçün aşağıdakı veb dizaynda söz iyerarxiyasının sırasına təsir edir: "istinməyinizə kömək edəcək mükəmməl çaylar" oyunun adıdır, lakin şrift çəkisi və kursiv fərqləri, söz yerləşdirilməsi ilə yanaşı, daha çox dinamik, daha az xətti, oxu təcrübəsi. "://azbyka.com.ua/foto/tea-factory.jpg" />

Bəzi hallarda məqsəd müxtəlif məlumatları eyni dərəcədə təcili olaraq təqdim etməkdir. Hər kəsi eyni ölçü və çəkiyə uyğunlaşdırmaq ekvivalentliyi təmin edəcək, həm də onu monoton göstərəcək. Aşağıdakı Trendi jurnalının üz qabığı kimi şriftin fərqləndirməsi bunun qarşısını almağın bir yoludur. Vizual İerarxiya Prinsipləri

Çap üçün broşüranın hazırlanması.

Burada, səhifənin periferiyasındakı beş tizer iyerarxiyada eynidir, lakin iki yaxşı qoşalaşmış şrifti dəyişdirərək müxtəlifliyə nail olursunuz - biri orta ağırlıqlı serif, digəri isə yüngül, lakin hündür sans-serif.

5. Rəng və kölgə. 

Budur, daha bir qeyri-beyindir: parlaq rənglər səssiz rənglərdən və ya boz çalarlarından fərqlənir, açıq rənglər isə daha "uzaq" görünür və beləliklə, daha zəngin, daha tünd çalarlara nisbətən iyerarxiyada aşağı düşür. Haradadırlar veb-saytı parlaq işıq və rəngli arxa işıqlandırma ilə parlaqlıq effektinə qara və ağ şəbəkə effekti verir:

Guggenheim veb-saytı məkan seçimi, hazırda baxılan sərgilərin siyahısı və xüsusi sərgilərə keçidlər kimi mühüm məlumatları vurğulamaq üçün rəngdən istifadə edir. Vizual İerarxiya Prinsipləri

Xüsusi Qablaşdırma üçün Ən Yaxşı Şrift

Whitney Muzeyinin veb-saytı, əksinə, rəngdən istifadə edərək bir şrift, çəki və ton (qara) daxilində bir iyerarxiya qurur (bu, əsas tona ağ əlavə etmək, onu daha yüngül etmək deməkdir). “Pop Mədəniyyətində Kori Baş Mələk” vizual iyerarxiyada “Yeni Uitni Hekayələri”nin altında açıq-aydın görünür, yalnız aşağı olduğu üçün deyil, həm də kölgəsi daha açıq olduğundan, ağ fonda daha az nəzərə çarpır. Vizual İerarxiya Prinsipləri

Rəngin xüsusi mənası var mobil dizayn kiçik ekran ölçüsünün ölçü dəyişikliyi və geniş interval kimi digər strategiyalardan istifadə etmək imkanınızı məhdudlaşdıran tətbiqlər. Grainger Industrial Supply proqramında "Ödənişə davam et" düyməsi qırmızı rəngə boyanaraq onu göründüyü istənilən səhifədə fərqləndirir. Dar Axtarış Nəticələri paneli, əksinə, boz rəngdədir və onu iyerarxiyada axtarış çubuğu və məhsul keçidləri kimi digər elementlərə təxminən ekvivalent edir.

6. Dizaynerlər üçün istiqamət.

Səhifə tərtibatları adətən həm şərti olaraq, həm də ən oxunaqlı format olduğu üçün şaquli və üfüqi xətlərdən ibarət şəbəkəni izləmək üçün nəzərdə tutulub. Belə bir sistemdə iyerarxiya qurmağın yeni yolu var: şəbəkəni pozmaq.

Əyri və ya diaqonal boyunca yerləşdirilən mətn avtomatik olaraq ətrafdakı torla bloklanmış mətnə ​​qarşı seçilir və mərkəzi mərhələ tutur. Bu, Frost Design-ın avtobus dayanacağı posteri kimi reklamda çoxdan təsirli strategiya olub.