stringtranslate.com

Визуальная иерархия

Представление иерархического извлечения и комбинации функций в зрительной системе.

Визуальная иерархия , согласно гештальт-психологии , представляет собой закономерность в визуальном поле, в которой некоторые элементы имеют тенденцию «выделяться» или привлекать внимание сильнее, чем другие элементы, что предполагает иерархию важности. [1] Хотя это может произойти естественным образом в любой визуальной области, этот термин чаще всего используется в дизайне (особенно в графическом дизайне и картографии ), где элементы намеренно разрабатываются так, чтобы одни выглядели более важными, чем другие. Этот порядок создается визуальным контрастом между формами в поле восприятия. Объекты, наиболее контрастирующие с окружением, в первую очередь распознаются человеческим разумом.

Доказательство

Есть некоторые научные доказательства использования визуальной иерархии с помощью отслеживания взгляда. Например, одно исследование показало, что когда люди соглашаются, что графический дизайн хорош, они демонстрируют более похожие движения глаз; измеряется расстоянием Фреше . [2]

Теория

Концепция визуальной иерархии основана на гештальт-психологической теории , немецкой теории начала 20-го века, которая предполагает, что человеческий мозг имеет врожденные организующие тенденции, которые «структурируют отдельные элементы, формы или формы в последовательное, организованное целое», особенно при обработке визуальных изображений. информация. [3] Немецкое слово Gestalt переводится как «форма», «образец» или «форма». [4] Когда элемент в поле зрения отделяется от «целого», созданного перцептивной организацией мозга, он «выделяется» для зрителя. Формы, которые наиболее сильно оторваны от своего окружения, выделяются больше всего. Обычно это называют эффектом фон Ресторфа , который гласит, что изоляция привлекает внимание.

Физические характеристики

Мозг отделяет объекты друг от друга на основе различий между их физическими характеристиками. Эти характеристики делятся на четыре категории: цвет, размер, выравнивание и характер. [5] Каждый тип контраста можно использовать для построения визуальной иерархии. Те же характеристики иногда классифицируются (особенно среди картографов) по визуальным переменным Жака Бертена . [6]

На этой карте 1905 года реки и парки находятся на вершине визуальной иерархии из-за цветового контраста и размера, заголовок выделяется из-за размера и выравнивания, и в меньшей степени центральный город выделяется из-за характера, потому что угловой рисунок улиц контрастирует с остальной частью сетки. Даже пустое пространство в Западном Денвере привлекает внимание своим контрастом с общей сложностью карты и центральным положением. Отдельные улицы и их названия находятся внизу визуальной иерархии из-за отсутствия контраста, хотя, вероятно, это и было основной целью карты.

Камуфляж является примером устранения контраста в цвете и/или персонаже специально для уменьшения визуальной иерархии.

«Тест на косоглазие» часто предлагается как простой, хотя и ненаучный метод оценки визуальной иерархии графического продукта, такого как карта или веб-страница. [8] При просмотре не в фокусе (или с большого расстояния) зритель не отвлекается на детали, а может видеть только общие (гештальт) закономерности, такие как визуальная иерархия. Все вышеперечисленные модели, за исключением некоторых аспектов характера, распознаются этим методом.

Приложение

Первый выпуск The New York Times за 1851 год (вверху) имел плохую визуальную иерархию, из-за чего было трудно определить, какие новости считаются наиболее важными. К 1919 году (внизу) газета, в соответствии с более широкими отраслевыми тенденциями, установила более четкую иерархию, в которой более крупные заголовки имели приоритет над более мелкими.

Визуальная иерархия — важная концепция в области графического дизайна , области, которая специализируется на визуальной организации. Дизайнеры пытаются контролировать визуальную иерархию, чтобы направить взгляд на информацию в определенном порядке для конкретной цели. Можно сравнить визуальную иерархию в графическом дизайне с грамматической структурой в письменной форме с точки зрения важности каждого принципа для этих областей.

Картография

В картографическом дизайне визуальная иерархия используется для выделения определенных важных объектов на карте по сравнению с менее важными объектами. [9] Как правило, у карты есть цель, которая диктует концептуальную иерархию того, что должно быть более или менее важным, поэтому одна из целей выбора символов карты состоит в том, чтобы сопоставить визуальную иерархию с концептуальной иерархией. [10]

Визуальная иерархия карты может применяться к отдельным географическим объектам (например, к выделению отдельной страны), к слоям карты связанных объектов (например, к выделению озер больше, чем к дорогам), а также ко всему макету карты и другим объектам. -элементы карты (например, чтобы заголовок выглядел более важным, чем масштабная линейка). Как и основные элементы карты, такие объекты имеют вес, а свойства, применимые к визуальной иерархии слоев карты, также применяются к другим элементам на странице. Размер и выравнивание — два основных фактора, определяющих визуальную иерархию этих функций. [11] Картографы часто используют принципы негативного пространства и контраста фигуры и фона для разработки соответствующей визуальной иерархии, используя контраст между неиспользуемым пространством и элементами макета. [1]

Дизайн пользовательского опыта и поведенческий дизайн

В дизайне пользовательского опыта и поведенческом дизайне , таком как веб-дизайн , визуальная иерархия используется для определения приоритетов навигационных структур и контента, чтобы аудитория сосредотачивалась на элементах, которые облегчают использование системы, или увеличивает вероятность того, что они заметят контент, содержащий психологические подталкивания. Цвет — один из многих факторов, используемых при разработке визуальной иерархии, и ключевой фактор из-за высокой значимости цветовосприятия. [7]

Смотрите также

Рекомендации

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