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

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

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

Теория

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

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

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

На этой карте 1905 года реки и парки находятся на вершине визуальной иерархии из-за цветового контраста и размера, название выделяется из-за размера и выравнивания, и в меньшей степени центральный город выделяется своим характером, потому что узор улиц под углом контрастирует с остальной сеткой. Даже пустое пространство в Западном Денвере привлекает внимание своим контрастом с общей сложностью карты и центральным положением. Отдельные улицы и их названия находятся внизу визуальной иерархии из-за отсутствия контраста, хотя, вероятно, это и было предполагаемой основной целью карты.
  • Цвет охватывает оттенок, насыщенность, ценить, и воспринимается текстура форм.[6] Темные фигуры будут выделяться на светлом фоне, светлые фигуры будут выделяться на темном фоне, ярко окрашенные фигуры будут выделяться на приглушенном фоне и так далее. В флуоресцентный Цвета, используемые для теннисных мячей и другого спортивного инвентаря, предназначены для того, чтобы они мгновенно выделялись на фоне практически любого естественного поля зрения.
  • Размер имеет сильное влияние на визуальную иерархию. Крупные элементы почти всегда привлекают внимание, если их можно распознать как цифры.
  • Выравнивание расположение форм относительно друг друга. Например, элементы в верхнем левом углу страницы часто видны первыми (по крайней мере, для тех читателей, которые привыкли к западным языкам), центр поля имеет видное место. Негативное пространство также можно использовать: фигура, изолированная среди большого количества белого пространства, будет выделяться больше, чем одна среди других фигур.
  • Характер включает несколько видов контрастов по форме. Например, сложные узоры привлекают больше внимания, чем простые или предсказуемые узоры, замысловатые формы привлекают больше внимания, чем обобщенные. Даже крупномасштабные узоры могут привлечь внимание, если они контрастируют с узором в остальной части поля зрения.

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

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

Заявление

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

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

Картография

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

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

UX-дизайн и поведенческий дизайн

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

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

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

  1. ^ а б "визуальная иерархия". Словарь ГИС. ESRI. Получено 2019-09-26.
  2. ^ Джексон, Ян. «Гештальт - теория обучения для образования в области графического дизайна». Международный журнал художественного и дизайнерского образования. Том 27. Выпуск 1 (2008): 63-69. Цифровой.
  3. ^ Петтерссон, Руна. «Информационный дизайн - принципы и рекомендации». Журнал визуальной грамотности. Том 29. Выпуск 2 (2010): 167-182. Цифровой.
  4. ^ Feldsted, CJ. Основы дизайна. Нью-Йорк: Pittman Publishing Corporation, 1950.
  5. ^ Тейт, А. (2018). Визуальная иерархия и макет. Свод знаний по географической информатике и технологиям (издание за 2 квартал 2018 г.), Джон П. Уилсон (ред.). DOI: 10.22224 / gistbok / 2018.2.4
  6. ^ а б Cugelman, B. Cugeman, R. et al. (2019) Психология цвета. AlterSpark. https://www.alterspark.com/color-psychology/visual-hierarchy
  7. ^ Джефф Готельф, Тест на прищур: как быстрое знакомство с дизайном может выявить его недостатки, Усабилла
  8. ^ Робинсон, Артур Х. Элементы картографии. 6-е изд., Wiley, 1995.
  9. ^ https://www.ordnancesurvey.co.uk/resources/carto-design/clear-visual-hierachy.html.
  10. ^ Слокум, Терри А. Глава 5 в Тематическая картография и геовизуализация, Пирсон, 2014.