Время прочтения: 3 минуты
Фото: Nathan Dumlao на Unsplash
Рассматривая любую карту, в большинстве случаев мы можем легко определить, нравится она нам или нет (хотя иногда не знаем, почему). Гораздо сложнее оценить это, когда создаешь что-то сам: смотришь на карту часами, выбираешь каждый символ и под конец не понимаешь, что выглядит хорошо, а что плохо… Чтобы научиться видеть разницу между эффективным и неэффективным визуалом, продолжим рассматривать идеи картографического дизайна и замечать их на понятных примерах.
Визуальная иерархия — это организация дизайна таким образом, что одни элементы выглядят более заметными и важными, чем другие. Она за долю секунды дает понять читателю относительную важность различных элементов на изображении. Хорошая визуальная иерархия — залог эффективного дизайна.
На карте визуальная иерархия должна соответствовать ее основным идеям. Какова цель карты? Какие элементы наиболее важны для достижения этой цели? Эти элементы стоит выделить, а вспомогательные элементы не должны перетягивать на себя внимание. Когда вы смотрите на карту, ваш взгляд первым делом обращается к элементу, который занимает самый высокий уровень в визуальной иерархии — убедитесь, что этот элемент передает цель карты.
Фигура и фон в визуальной иерархии
Одним из ключевых моментов визуальной иерархии является понимание отношения "фигура–фон". Наше восприятие делит любое изображение на две части: фигура — это отдельные элементы, которые визуально выделяются, и фон, пространство — остальная часть изображения. Одни элементы выделяются на переднем плане, а другие — на заднем, и то, что на переднем плане, мы воспринимаем как более важное.
При правильном отношении фигуры и фона основные элементы находятся на переднем плане и легко отделяются от фона. Здесь важную роль играет контраст цвета и яркости: чем слабее контраст на карте, тем хуже эффект фигуры-фона и тем менее эффективна общая иерархия. Для важных элементов используйте цвета, которые заметно отличаются от фона, особенно по яркости.
Контраст цвета и яркости позволяет разделить сушу и океан, а также выделить реки и надписи на фоне суши. Источник: Axis Maps
А здесь низкий контраст затрудняет выделение заметных элементов. Источник: Axis Maps
Интересно, что эффект фигуры-фона может запутать читателя даже при высоком контрасте. Такое случается при неустойчивом восприятии переднего и заднего плана, как, например, на известном изображении вазы Рубина или ее картографическом аналоге — карте штата Айдахо. На картах этот эффект может проявляться в виде инверсии между сушей и водой (особенно если использовать непривычный цвет воды), или, в более общем смысле, в тенденции воспринимать фон как более важный объект. Все это важно, потому что каждая доля секунды, когда читатель не может выделить на карте клавное, снижает эффективность карты.
Как показать визуальную иерархию
- Размер объектов и яркость цвета — основные визуальные переменные, на которые нужно обратить внимание для выделения иерархии. Более крупные объекты всегда притягивают взгляд и кажутся более важными, как и более темные объекты (на светлом фоне). Так что если элемент карты важен, сделайте его символ крупнее и/или темнее других.
- При выборе цветовой палитры помните, что одна часть спектра или отдельные цвета будут выделяться на фоне за счет контраста, и в идеале они должны представлять более важную часть данных.
- Ненаучный, но простой способ оценить визуальную иерархию — это уменьшить масштаб, отойти или прищуриться. Остаются ли важные элементы так же заметны?
Иллюстрация этого теста — важный элемент остается хорошо виден из-за размера и темного цвета
Еще один интересный момент: карта всегда существует на каком-то фоне: на странице сайта, на листовке или на слайде презентации. Скорее всего, ее окружают вспомогательные элементы: заголовок, текст, какие-нибудь графики. Визуальная иерархия выходит за рамки карты: все это окружение тоже должно иметь иерархию. Если карта — основной элемент страницы, она должна быть крупнее и заметнее.
Дизайн в картографии можно рассматривать как совокупность человеческих решений за картой. Это не только то, как выглядит карта, но и процесс выбора данных, каждый шаг ее создания, а еще процесс взаимодействия пользователя с картой. Если хотите, чтобы ваши идеи правильно поняли, не забывайте о визуальной иерархии.
Это адаптированный перевод текста "Visual Hierarchy", части руководства по картографии от Axis Maps. Материал распространяется под лицензией Creative Commons Attribution-NonCommercial-ShareAlike.
Автор: Юлия Федорова