Дизайн карты: как и почему

В сети можно найти достаточно материалов по созданию стилей карт (и на хабре в том числе), но в основном они показывают техническую сторону создания стиля в tilemill/mapbox studio. А вот с теорией дела обстоят гораздо хуже, в основном пишут о каких-нибудь отдельных аспектах дизайна, и то не всегда объясняют почему нужно делать так, а не иначе. В этой статье я постараюсь исправить эту ситуацию и поделиться опытом с начинающими картостроителями.

Всех интересующихся прошу под кат.

Начинать, как и всегда, нужно с постановки правильных вопросов. Зачем вам нужен собственный стиль? Кто целевая аудитория карты? Как стиль должен влиять на функциональность карты? После ответа на эти вопросы можно приступать непосредственно к проектированию стиля. Приведённые далее размышления справедливы для картостиля базовой подложки карты мира (как наиболее трудоёмкой) и не претендуют на истину в последней инстанции.

Итак, прежде всего карта — это данные, которые мы хотим показать пользователю. Данных этих много и между ними различные связи и не только пространственные. Так что первым делом необходимо построить смысловую иерархию данных: разбиваем все наши данные на слои и упорядочиваем согласно логике.

Изначально у нас пустой холст, иногда его принимают за мировой океан, поскольку добавлять данные об океанах не всегда целесообразно. Затем идут континенты, потом данные по землепользованию, потом водоёмы и так дальше. Хорошим ориентиром будет описание слоёв данных в Mapbox Streets. Особенно обратите внимание на слои с подписями, их очерёдность зачастую не совпадает с очерёдностью самих объектов. Так же заранее продумайте как могут пересекаться ваши слои: тоннели, мосты, эстакады и т.д. Для дорожной сети хорошим ориентиром является организация уровней в osm-bright. Ещё обратите своё внимание на железнодорожную сеть, трамваи и прочие виды транспорта, стоит ли их выделять в отдельные слои и как в этом случае поступать с пересечениями.

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

Пример

Имеется слой данных со всеми строениями города, если начать показывать его на средних зумах, то сильно увеличивается количество обрабатываемых данных, при этом большинство зданий будут слишком маленькие, то есть будут больше похожи на информационный шум, чем на полезную информацию. С другой стороны в этом же слое хранятся данные о торговых центрах, складах и других весьма больших зданиях, которые на средних зумах будут хорошими ориентирами. Поэтому нужно разбить здания на категории по занимаемой площади и показывать уже частями, в зависимости от зума.

Иерархия готова (по крайней мере первая её версия), данные разбиты на слои, и, наконец, можно приступить к выбору цветов, шрифтов и всего остального, что большинство обывателей и считают дизайном. Тут у нас в распоряжении два основных инструмента цвет и паттерны. С использование паттернов нужно быть умеренным, дабы не перегружать карту визуальным шумом. Да, не забывайте в каком формате в итоге будут тайлы вашего стиля, и учитывайте связанные с этим ограничения (количество цветов, прозрачность) в самом начале разработки.

Цвет

Тема восприятия цвета человеком очень обширна и неоднозначна, советую вам изучить её самостоятельно, в сети достаточно материалов на эту тему. Я же в дальнейшем буду опираться на ряд устоявшихся мнений. Во-первых, нужно использовать «правильную» цветовую модель, я обычно использую HSB/HSL. Во-вторых, с точки зрения визуального веса яркость наш главный инструмент, затем уже идут тон и насыщенность.

В соответствии с вышесказанным объекты разных уровней иерархии на карте должны быть, как минимум разной яркости. Это значит, что при приведении нашей карты к оттенкам серого, мы должны легко различать, например, главную дорогу от второстепенной. Вот несколько примеров.

Как видите на Яндекс-картах дела обстоят лучше чем в дефолтном стиле OSM.

А вот при наложении информации о пробках у Яндекса ломается иерархия, народ с нарушениями цветовосприятия давно уже жалуется, но увы…

На самом деле яркость не панацея, и всё дело в контрастности, а уж каким способом вы будете её достигать, дело ваше, главное чтобы это работало.

В текстовых редакторах есть светлые и тёмные темы, к картам такое деление тоже применимо (обычный и ночной режим отображения). Так вот, для светлой темы, где преобладают светлые цвета, более важные объекты лучше обозначать более тёмными цветами для увеличения визуального веса. В случае же тёмной темы обычно всё с точностью до наоборот.

При этом всегда нужно смотреть на контекст и учитывать известные фичи человеческого зрения.

Цветовое многообразие

Различных типов объектов на карте у нас очень много и цветов соответственно тоже. Как же решить какой цвет выбрать для того или иного типа объекта? Тут я могу дать следующие советы. Старайтесь разбить типы объектов на группы и внутри группы используйте близкие цвета.

Пример

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

Старайтесь использовать естественные (логичные) цвета, не стоит делать водоёмы розового цвета. Используйте устоявшиеся ассоциации.

Принципы гештальта

Итак, вы старались учитывать все особенности работы с цветом, но объектов так много, что голова идёт кругом, правила начинают вступать в противоречие друг с другом. Паника. Тут нам на помощь приходят принципы гештальта, усвоив их, можно гораздо точнее обозначать визуальный вес объектов и расставлять нужные акценты.

Советую прочитать все статьи Steven Bradley из цикла Design principles, и особенно внимательно эти: Design Principles: Connecting And Separating Elements Through Contrast And Similarity, Design Principles: Visual Weight And Direction.
Вооружившись новыми знаниями, приступайте к экспериментам, пробуйте разные варианты, и смотрите что работает лучше.

Подписи

Как не удивительно, важно чтобы они были контрастными, поэтому цвет шрифта обычно зависит от цвета подписываемого объекта. А ещё используют гало для большего контраста. Про сами шрифты ничего говорить не буду, тут смотрите что у других на ваш вкус/опыт.
Прописными буквами подписывают большие площадные объекты. Ага, как заголовки верхнего уровня, и да, межбуквенный интервал тоже можно увеличить. Иногда улицы подписывают прописными буквами, это делается чтобы подчеркнуть форму и границы улицы, но на мой взгляд для этих целей лучше использовать капитель. Приоритеты размещения подписи точечного объекта следующие: справа сверху, снизу справа, сверху слева, снизу слева. Для стран, где читают справа налево приоритеты соответствующим образом поменяются. Делайте разницу между уровнями подписей заметной, пару кеглей разницы должно хватить.

Да, знаете ещё что. Не забывайте про иерархию, наносим подписи в соответствии с приоритетами. Это касается и кегля и начертания. Не бойтесь, если для некоторых подписей не останется места, и не пытайтесь их втиснуть во что бы то ни стало.

Иконки

Иконки добавляются одним из последних слоёв, наряду с подписями. К этому моменту плотность информации на карте уже довольно большая. Но у иконок есть преимущество — мы можем задавать их форму. Есть несколько вариантов иконок: только изображение иконки и изображение иконки на шильдике (в рамке какой-либо формы). Так вот, разным группам объектов на карте можно сопоставлять иконки разного типа. Вспомните, как некоторые категории дорожных знаков задаются формой и цветом. Здесь можно поступить таким же образом. Если не стоит задача создавать уникальный набор иконок с нуля, то можно воспользоваться одним из готовых, например набором maki, кстати, для его модификации существует отдельный инструмент: makizushi.
После того как вы закончили с визуальной стороной вопроса, можно переходить к оптимизации стиля. Суть оптимизации в уменьшении количества запрашиваемых данных, необходимых для отрисовки метатайлов. Поэтому первым делом убираем все данные, которые нам по какой-то причине так и не пригодились. Убираем тестовые данные, ненужные атрибуты и т. д. Затем нужно добавить дополнительные ограничения по охвату, зуму и плотности подписей на ячейку условной пиксельной сетки. Это существенно уменьшит время отрисовки метатайлов. Почитать про это можно в мануале по PostGIS от Mapbox: postgis manual.
Если вы работаете с данными OSM, а скорее всего это так, то не забывайте о двух вещах. Во-первых, в данных есть ошибки, так что учитывайте это, делайте соответствующие проверки. Во-вторых, вы можете легко модифицировать данные: добавлять свои атрибуты, менять и добавлять геометрии, объединять собственные данные с данными OSM.
На этом всё, надеюсь статья будет полезной начинающим картографам-дизайнерам. Создавайте свои стили и делитесь результатами с друзьями миром и вместе наслаждайтесь созданной красотой =)

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

На этом всё. Изучайте правила, чтобы знать, как правильно их нарушать. Как на этой картинке про контекст =).

Всем удачи.

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.