Визуальная иерархия
Визуальная иерархия , согласно гештальт-психологии , представляет собой закономерность в визуальном поле, в которой некоторые элементы имеют тенденцию «выделяться» или привлекать внимание сильнее, чем другие элементы, что предполагает иерархию важности. [1] Хотя это может произойти естественным образом в любой визуальной области, этот термин чаще всего используется в дизайне (особенно в графическом дизайне и картографии ), где элементы намеренно разрабатываются так, чтобы одни выглядели более важными, чем другие. Этот порядок создается визуальным контрастом между формами в поле восприятия. Объекты, наиболее контрастирующие с окружением, в первую очередь распознаются человеческим разумом.
Доказательство
[ редактировать ]Есть некоторые научные доказательства использования визуальной иерархии с помощью отслеживания взгляда. Например, одно исследование показало, что когда люди соглашаются, что графический дизайн хорош, они демонстрируют более похожие движения глаз; измеряется расстоянием Фреше . [2]
Теория
[ редактировать ]Концепция визуальной иерархии основана на гештальт-психологической теории , немецкой теории начала 20-го века, которая предполагает, что человеческий мозг имеет врожденные организующие тенденции, которые «структурируют отдельные элементы, формы или формы в последовательное, организованное целое», особенно при обработке визуальных изображений. информация. [3] Немецкое слово Gestalt переводится как «форма», «образец» или «форма». [4] Когда элемент в поле зрения отделяется от «целого», созданного перцептивной организацией мозга, он «выделяется» для зрителя. Формы, которые наиболее сильно оторваны от своего окружения, выделяются больше всего. Обычно это называют эффектом фон Ресторфа , который гласит, что изоляция привлекает внимание.
Физические характеристики
[ редактировать ]Мозг отделяет объекты друг от друга на основе различий между их физическими характеристиками. Эти характеристики делятся на четыре категории: цвет, размер, выравнивание и характер. [5] Каждый тип контраста можно использовать для построения визуальной иерархии. Те же характеристики иногда классифицируются (особенно среди картографов) по визуальным переменным Жака Бертена . [6]
- Цвет включает в себя оттенок , насыщенность , ценность и воспринимаемую текстуру форм. [7] Темные фигуры будут выделяться на светлом фоне, светлые фигуры — на темном фоне, яркие фигуры — на приглушенном фоне и так далее. Флуоресцентные цвета , используемые для теннисных мячей и другого спортивного инвентаря, призваны мгновенно выделить их практически в любом естественном поле зрения.
- Размер оказывает сильное влияние на визуальную иерархию. Крупные элементы почти всегда привлекают внимание, если их можно распознать как фигуры .
- Выравнивание – это расположение форм относительно друг друга. Например, элементы в верхнем левом углу страницы часто видны первыми (по крайней мере, для тех читателей, которые привыкли к западным языкам), центр поля имеет заметное значение. Также можно использовать негативное пространство : фигура, изолированная среди большого количества белого пространства, будет больше выделяться среди других фигур.
- Характер включает в себя несколько видов контрастов, основанных на форме. Например, сложные узоры привлекают больше внимания, чем простые или предсказуемые узоры, замысловатые формы привлекают больше внимания, чем обобщенные. Даже масштабные узоры могут привлечь внимание, если они контрастируют с узором в остальной части поля зрения.
Камуфляж является примером устранения контраста в цвете и/или персонаже специально для уменьшения визуальной иерархии.
«Тест на косоглазие» часто предлагается как простой, хотя и ненаучный метод оценки визуальной иерархии графического продукта, такого как карта или веб-страница. [8] При просмотре не в фокусе (или с большого расстояния) зритель не отвлекается на детали, а может видеть только общие (гештальт) закономерности, такие как визуальная иерархия. Все вышеперечисленные модели, за исключением некоторых аспектов характера, распознаются этим методом.
Приложение
[ редактировать ]
Визуальная иерархия — важная концепция в области графического дизайна , области, которая специализируется на визуальной организации. Дизайнеры пытаются контролировать визуальную иерархию, чтобы направить взгляд на информацию в определенном порядке для конкретной цели. Можно сравнить визуальную иерархию в графическом дизайне с грамматической структурой в письменной форме с точки зрения важности каждого принципа для этих областей.
Картография
[ редактировать ]В картографическом дизайне визуальная иерархия используется для выделения определенных важных объектов на карте по сравнению с менее важными объектами. [9] Обычно у карты есть цель, которая диктует концептуальную иерархию того, что должно быть более или менее важным, поэтому одна из целей выбора символов карты состоит в том, чтобы сопоставить визуальную иерархию с концептуальной иерархией. [10]
Визуальная иерархия карты может применяться к отдельным географическим объектам (например, к выделению отдельной страны), к слоям карты связанных объектов (например, к выделению озер больше, чем к дорогам), а также ко всему макету карты и другим объектам. -элементы карты (например, чтобы заголовок выглядел более важным, чем масштабная линейка). Как и основные элементы карты, такие объекты имеют вес, а свойства, применимые к визуальной иерархии слоев карты, также применяются к другим элементам на странице. Размер и выравнивание — два основных фактора, определяющих визуальную иерархию этих функций. [11] Картографы часто используют принципы негативного пространства и контраста между фигурой и фоном для разработки соответствующей визуальной иерархии, используя контраст между неиспользуемым пространством и элементами макета. [1]
Дизайн пользовательского опыта и поведенческий дизайн
[ редактировать ]В дизайне пользовательского опыта и поведенческом дизайне , таком как веб-дизайн , визуальная иерархия используется для определения приоритетов навигационных структур и контента, чтобы аудитория сосредотачивалась на элементах, которые облегчают использование системы, или увеличивает вероятность того, что они заметят контент, содержащий психологические подталкивания. Цвет — один из многих факторов, используемых при разработке визуальной иерархии, и ключевой фактор из-за высокой значимости цветового восприятия. [7]
См. также
[ редактировать ]Ссылки
[ редактировать ]- ^ Jump up to: а б «визуальная иерархия» . ГИС-словарь . ЭСРИ. Архивировано из оригинала 3 марта 2016 г. Проверено 26 сентября 2019 г.
- ^ Урано, Йоко; Куросу, Аарон; Хенсельман-Петрусек, Грегори; Тодоров, Александр (2021). «Визуальная иерархия связана с впечатлением от хорошего дизайна» . Семинар CHI'21 по движениям глаз как интерфейсу когнитивного состояния : 1–9. doi : 10.31234/osf.io/hksf9 . S2CID 236599584 .
- ^ Джексон, Ян. «Гештальт — теория обучения для обучения графическому дизайну». Международный журнал художественного и дизайнерского образования . Том 27. Выпуск 1 (2008): 63-69. Цифровой.
- ^ Петтерссон, Руне. «Информационный дизайн — принципы и рекомендации». Журнал визуальной грамотности . Том 29. Выпуск 2 (2010): 167-182. Цифровой.
- ^ Фельдстед, CJ. Основы дизайна . Нью-Йорк: Издательская корпорация Питтмана, 1950.
- ^ Тейт, А. (2018). Визуальная иерархия и макет . Свод знаний по географической информатике и технологиям (издание за 2-й квартал 2018 г.) , Джон П. Уилсон (ред.). DOI: 10.22224/gistbok/2018.2.4
- ^ Jump up to: а б Кугельман, Б. Кугеман, Р. и др. (2019) Психология цвета. АльтерСпарк. https://www.alterspark.com/color-psychology/visual-hierarchy
- ^ Джефф Готельф, Тест на косоглазие: как быстрое знакомство с дизайном может выявить его недостатки , Usabilla
- ^ Робинсон, Артур Х. Элементы картографии. 6-е изд., Уайли, 1995.
- ^ https://www.ordnancesurvey.co.uk/resources/carto-design/clear-visual-hierachy.html . Архивировано 22 декабря 2017 г. в Wayback Machine.
- ^ Слокам, Терри А. Глава 5 тематической картографии и геовизуализации , Пирсон, 2014.