Дизайнерлер үчүн визуалдык иерархиянын принциптери – көрүүчүнүн көздөрү дизайн аркылуу кандай кыймылдаарын жана кайсы элементтер эң маанилүү же визуалдык жактан жагымдуу экенин аныктоо үчүн колдонулган дизайн концепциясы.
Алгач таш лооктор, папирус түрмөктөрү жана кагаздар болгон. Андан кийин компьютер экрандары жана электрондук планшеттер пайда болду. Баракты көрсөтүү технологиясы өнүгүп жаткандыктан, дизайнерлер мазмунду уюштуруунун так жолун калтырышат. Бирок кайсынысы жакшы? Кыскасы , визуалдык иерархия.
Бул жерде визуалдык иерархиянын аныктамасы келтирилген: Визуалдык иерархия – бул тартип дизайндагы графикалык элементтер ар бир элементтин маанилүүлүгү боюнча. Көрүү салмагын аныктайт элементтин мааниси дизайн иерархиясында, көрүүчүгө эмнеге көңүл буруу керектигин жана кандай тартипте.
Дизайнерлер үчүн ресурстар. 50 бекер
Бул барган сайын маанилүү маселеге айланууда, анткени жооп берүүчү алкактар дизайнерлерди бир эле учурда көптөгөн ар кандай баракчалар жөнүндө ойлонууга мажбурлайт. Тыгыз текстке жана кыска көңүл бурууга туш болгон дизайнерлер окурмандын көзүн эң маанилүү маалыматка буруу үчүн 6 принципти иштеп чыгышкан.
Визуалдык иерархиянын бул 6 принциптери брошюралардан баштап колдонмолорго чейин баарын иштеп чыгууга жардам берип, акыркы колдонуучу дизайнерлер үчүн оң окуу тажрыйбасына ээ болушун камсыздайт.
Бардык культуралар өйдөдөн ылдыйга чейин окулат, көпчүлүк маданияттар солдон оңго карай окулат. Бирок бул билим үчүн маанилүү болсо да бет дизайны, дизайнерлер милдет алда канча татаал экенин билишет.
Соңку изилдөөлөр көрсөткөндөй, адамдар баракты окуудан мурун ага кызыгып же кызыкпаганын билиш үчүн биринчи скандоодо. Скандоо үлгүлөрү адатта "F" жана "Z" деген эки форманын бирин алат жана сиз дизайныңызда муну пайдалана аласыз.
F-үлгүлөр. Визуалдык иерархиянын принциптери
F-шаблондор макалалар же блог билдирүүлөрү сыяктуу салттуу текст беттерине колдонулат. Окурман сол жагын сканерлейт бет солго тегизделген темалардын же теманын башталгыч сүйлөмдөрүнөн кызыктуу ачкыч сөздөрдү издеп, андан кийин ал кызыктуу бир нерсеге туш болгондо токтоп, окуйт (оңго). Натыйжа F (же E, же андан да көп горизонталдуу сызыктары бар нерсе; бирок "F" термини тыгылып калган) окшойт.
Муну кантип колдоно аласыз? Маанилүү маалыматты сол тарапка тегиздеп, абзац блокторун бөлүү үчүн кыска, жоон аталыштарды, окторду жана башка ушул сыяктуу көңүл бурган элементтерди колдонуңуз.
Z-модел. Визуалдык иерархиянын принциптери
Z үлгүлөрү маалымат сөзсүз түрдө блоктук абзацтарда көрсөтүлбөгөн жарнамалар же веб-сайттар сыяктуу баракчалардын башка түрлөрүнө колдонулат. Окурман алгач маанилүү маалымат табылышы мүмкүн болгон барактын үстүн сканерлейт, андан кийин диагональ боюнча карама-каршы бурчка жылат жана барактын ылдый жагында да ушундай кылат.
Веб-дизайнерлер, адатта, бул жүрүм-турумга так дал келүү үчүн өз баракчаларын долбоорлошот, эң маанилүү маалыматты бурчтарга жайгаштырышат жана башка маанилүү маалыматты үстүнкү жана астыңкы тилкелер боюнча багыттап, диагоналды бириктиришет.
Төмөндө 2010-жылкы жыйындын дизайнында маанилүү элементтер логотип болуп саналат (жогорку сол жакта), "азыр катталуу" баскычы (жогорку оң жакта) жана стратегиялык Z үлгүсүндөгү жакшы жерлерге жайгаштырылган динамиктердин тизмеси (төмөндө).
2. Өлчөмү маанилүү. Визуалдык иерархиянын принциптери
_
Бул абдан жөнөкөй: адамдар биринчи чоң нерселерди окушат. Жаш Виктин төмөнкү жарнагына "бөлүнгөн" алдында көзүңүз "спектаклга" тартылса, дароо кабылдоочу психологго кайрылышыңыз керек: сейрек кездешүүчү аномалия катары сыноодон өтүп, жакшы акча таба аласыз.
Кызыктуусу, бул тенденция чындыгында жогорудан ылдыйга карай эрежени четке кагууга жетиштүү күчтүү. Жогорудагы сүрөттө "hack" "аракет кылууга убакытты" жокко чыгарат, анткени ал чоңураак жана солго карай (ошондуктан солдон оңго эреже жардам берет).
Бирок Жылдык отчеттун кийинки бетинде: Адам укуктары боюнча өнөктүк 2012 (медиадагы бешинчи тилкеде иштелип чыккан) биз кеңири окуйбуз шрифт Анын үстүндөгү тексттин алдында "Үгүт үгүт жолунда теңдик үчүн күрөш" "Шайлоо 2012". Визуалдык иерархиянын принциптери
"Шайлоо 2012" - бул эң жогорку деңгээлдеги маалымат тартиби: ал бизге төмөндөгү маалымат тиешелүү болгон жалпы теманы айтып берет. Бирок дизайнер макаланын аталышы окурмандар үчүн кызыктуураак деп чечти, ошондуктан аны биринчи окуй тургандай баалады.
3. Мейкиндик жана текстура. Визуалдык иерархиянын принциптери
Көңүл буруунун дагы бир жолу дем алуу үчүн жетиштүү орун берүү . Эгерде баскычтын айланасында олуттуу терс мейкиндик бар болсо же тексттик блоктогу сызыктар көп катталса, бул элементтер окурмандарга оңой көрүнөт.
Төмөндөгү сүрөттөн көрүнүп тургандай (DrawtoClick сайтынын бир бөлүгү), боштук өлчөмдү колдонууга жарашыктуу альтернатива же толуктоо болушу мүмкүн. Бул жерде, сатуу чекити, "Notre agence vouscompagne..." абдан кичинекей тамгалар менен жазылган, бирок ал ак мейкиндиктин мол менен курчалган, анын маанилүүлүгүн көрсөтүп турат. Төмөндө "Le Compendre", "Le Réaliser" жана "Le Partager" сөз айкаштары курчап турган мейкиндиктен ажырап, кошумча мааниге ээ.
Адамдар "текстура" жөнүндө визуалдык иерархияга байланыштуу айтканда, алар текстуранын графикалык эффекттерин билдирбейт. Тескерисинче, "текстуранын" бул түрү беттеги мейкиндиктин, тексттин жана башка деталдардын жалпы жайгашуусуна же структурасына тиешелүү. Bright Pinkтин бул мисалы түшүнүктү жакшы сүрөттөйт:
Биринчи сүрөттө "Спорт" деген сөз "бадминтонго" караганда иерархияда жогору турат, анткени ал бийик, чоңураак жана тайманбас. 2-сүрөттө "бадминтонду" өзгөчөлөнтүп, аны өз мейкиндигине киргизген кара тик бурчтуктун аркасында эки сөз болжол менен эквиваленттүү.
Үчүнчү сүрөттө, фон скрипт "Спорт" мейкиндигин үзгүлтүккө учуратат, бирок "бадминтон" мейкиндигин үзгүлтүккө учуратат, демек, "бадминтон" иерархияда эң жогорку орунда турган тескери өзгөрүүгө алып келет. Бул өнүгүүнү алдын ала айтуу кыйын, ошондуктан дизайнерлер аны көбүнчө "текстуранын" бүтүндөй мааниси менен байланыштырышат.
4. Ариптин салмагы жана жупташтыруу. Визуалдык иерархиянын принциптери
Шрифт тандоо визуалдык иерархияны түзүү үчүн абдан маанилүү. Ариптин эң маанилүү атрибуттарынын арасында салмагы, анын тамгаларын түзгөн штрихтердин туурасы жана serif жана sans serif сыяктуу стили саналат. Башка өзгөртүүлөр, мисалы, курсив, ошондой эле ролду ойношу мүмкүн.
Кантип байка кооздоо Чай фабрикасынын төмөнкү веб-дизайнындагы сөз иерархиясынын тартибине таасир этет: "жылынууга жардам берүү үчүн идеалдуу чайлар" - бул оюндун аталышы, бирок шрифттин салмагынын жана курсивдеги айырмачылыктар, сөздүн жайгашуусунан тышкары, дагы көп нерсени жаратат. динамикалык, аз сызыктуу, окуу тажрыйбасы. "://azbyka.com.ua/foto/tea-factory.jpg" />
Кээ бир учурларда, максат бирдей шашылыш маалымат катары ар түрдүү берүү болуп саналат. Баарына бирдей өлчөмгө жана салмакка коюу эквиваленттүүлүктү камсыздайт, бирок аны монотондуу кылат. Төмөнкү Trendi журналынын мукабасындай, ариптин дифференциациясы муну болтурбоонун бир жолу. Визуалдык иерархиянын принциптери
Бул жерде, беттин четиндеги беш тизер иерархияда бирдей, бирок эки жакшы жупташтырылган шрифттерди өзгөртүү аркылуу ар түрдүүлүккө жетишиңиз — бири орточо салмактагы сериф, экинчиси жеңил, бирок узун санс-сериф.
5. Түс жана көлөкө.
Бул жерде дагы бир акылга сыйбаган нерсе: ачык түстөр үнсүз түстөрдөн же боздун көлөкөлөрүнөн өзгөчөлөнүп турат, ал эми ачык түстөр “алыскы” болуп көрүнөт, демек, бай, күңүрт түскө караганда иерархияда төмөн түшүп калат. Алар кайда веб-сайт жаркыраган жарыкты жана түстүү арткы жарыктандырууну кара жана ак тор эффектиси менен жарыктыктын таасиринен айырмалайт:
Guggenheim веб-сайты жайгашкан жерди тандоо, учурда каралып жаткан көргөзмөлөрдүн тизмеси жана атайын көргөзмөлөргө шилтемелер сыяктуу маанилүү маалыматты баса белгилөө үчүн түстөрдү колдонот. Визуалдык иерархиянын принциптери
Ыңгайлаштырылган таңгак үчүн мыкты шрифт
Уитни музейинин веб-сайты, экинчи жагынан, бир шрифттин, салмактын жана тондун (кара) ичиндеги иерархияны тон менен белгилейт (бул негизги тонго ак түстү кошуп, аны жеңилирээк кылууну билдирет). "Поп маданиятындагы Кори Архангел" визуалдык иерархияда "Новы Уитни окуяларынан" ылдыйда ачык көрүнүп турат, анткени ал төмөн болгону үчүн гана эмес, ошондой эле анын көлөкөлөрү ачык болуп, ак фондо анча көрүнбөйт. Визуалдык иерархиянын принциптери
түс өзгөчө мааниге ээ мобилдик дизайн кичинекей экран өлчөмү башка стратегияларды колдонуу мүмкүнчүлүгүңүздү чектеген колдонмолор, мисалы, өлчөмдөрдүн өзгөрүшү жана кең аралыгы. Grainger Industrial Supply колдонмосунда "Текшерүүнү улантуу" баскычы кызыл түскө боёлгон жана ал пайда болгон бардык баракта өзгөчөлөнүп турат. Тар издөө натыйжалары панели, тескерисинче, боз түстө болуп, аны иерархияда издөө тилкеси жана продукт шилтемелери сыяктуу башка элементтерге болжол менен барабар кылат.
Grainger үчүн колдонмо дизайн
6. Дизайнерлер үчүн багыт.
Беттин макеттери, адатта, конвенция боюнча жана эң окулуучу формат болгондуктан, вертикалдуу жана горизонталдык сызыктардын торуна ылайыкташтырылган. Мындай системада иерархияны орнотуунун жаңы жолу бар: торду бузуу.
Ийри сызык же диагональ боюнча жайгаштырылган текст автоматтык түрдө курчап турган тор менен блоктолгон текстке каршы туруп, борбордук баскычты ээлейт. Бул көптөн бери Frost Design компаниясынын аялдама плакаттары сыяктуу жарнамадагы эффективдүү стратегия болуп келген.
Комментарий калтыруу