Автор оригинала: Victor Gerard Temprano.
Мне нравятся карты. Много. Вот почему я построил Компания вокруг интерактивной конструкции карты И я закажу новые карты каждую неделю. Я думаю, что карты – увлекательный способ показать данные, и вы действительно можете эмоционально повлиять на людей.
Но как вы должны разработать свои карты? А как насчет интерфейса, который построен вокруг них?
Ну, это то, что я здесь. Мой обширный опыт должен быть в состоянии помочь вам разобраться в некоторых вопросах. И оставьте свои советы и трюки в окне комментариев тоже!
Очевидно, это будет общий подход, с большим количеством места для исключения. Но я надеюсь, что это даст вам начать прыжок в вашей карте.
Некоторые исходные ноты
Давайте выберемся с пути: средние пользователи не очень компетентны в Интернете. Или, по крайней мере, вы должны предположить, что. Не делайте обратное и предполагайте, что ваши пользователи будут знать, как использовать онлайн карту. Многие не будут знакомы с ними, и, возможно, даже не понимают, что вы можете прокрутить, чтобы увеличить (большую часть времени).
Все, что очень интерактивный, как карта, трудно для пользователей. Вам нужно подумать о том, как ваша бабушка (без преступления для Techie Grandas!) Может реагировать, если она приземлилась на карте. Где бы она смотрела, что бы она нажимала и заинтересовала?
Получите своих друзей, чтобы проверить свою карту в определенные моменты во время вашего процесса проектирования. Больше всего, убедитесь, что вы глубоко подумали о том, что вы действительно пытаетесь общаться с вашей картой. Это больше для красоты или для функции? Его дизайн должен отражать его цель.
Карта Базовые слои
Теперь я хочу, чтобы я мог бы поговорить с большой длиной об этом, но этот пост больше о Интерактивный Дизайн карты, не чисто графическая карта дизайн карты. Создание красивых базовых слоев и укладки пользовательских карт в таких инструментах, как студия MapBox, принадлежит царстве дизайнеров карты и графических художников. Однако там есть несколько хороших ресурсов, чтобы указать вам:
https://gis.stackexchange.com/questions/3083/what-makes-map-beautiful http://www.esri.com/news/arcuser/0112/make-maps-people-want-to-look-at.html https://www.gislounge.com/ten-things-to-consider-wcen-making-a-map/
Я лично не люблю карты, которые ставит тяжелый акцент на улицах или там, где есть тонны имена, пересекающиеся. Если карта может показать, что я ищу, и мало что еще больше, это идеально. Это должно быть то, что это искусство, с информацией, которую вы пытаетесь пересмотреть.
Изготовление искусства спрашивает много программистов, я знаю – именно поэтому мои карты обычно просто используют Стили Mapbox по умолчанию Отказ Если вы не уверены, тогда просто подключите и играйте с MapBox. Или грязные руки в студии. (Если вы эксперт по стирку Mapbox, я бы тоже хотел встретиться с вами!)
Дизайн интерфейса без карты
Интерфейс вокруг вашей карты так же важен, как сама карта. Обычно сложные карты имеют несколько фильтров или функций поиска. Есть несколько дизайнерских соображений, чтобы иметь в виду.
- Уменьшите панели до абсолютного минимального размера, возможно, выглядят хорошо. Это означает вырезание дополнительного текста, имея несущественным «расширенным» параметрам, открытым на щелчке, и убедившись, что ваши девсы не продлеваются мимо, где ваш контент заканчивается. Дайте своим пользователям тонн пространства, чтобы насладиться картой и понять это!
- Модали полезны, но используйте их только при необходимости. Они разбивают поток, который у вашего пользователя есть с картой, если только они не сделаны очень элегантным и аккуратным способом (маленькие, с меньшими затенением фона).
- Не будьте слишком инновационные – пользователи уже пытаются взаимодействовать с вашей картой, а ваши фильтры или панели должны никогда не быть помехой. Проведите время, спрашивая пользователей, как сделать их более интуитивными, и посмотрите, как ваши друзья используют сайт и посмотрите, что они делают не так. Сделайте простое поле поиска или раскрывающееся меню, а не последнюю непристойную вещь.
- Исследуйте, насколько различные панели непрозрачности и цвета и небольшие коробки могут заставить ваши панели чувствовать себя встроены в интеграцию на вашу карту. Мне нравится небольшой край с тенью 1px и полупрозрачный белый фон, обычно!
- Мобильные устройства нужно иметь место. Добавьте слайд-в панели и оставьте карту как можно более открытыми, практически без постоянных панелей.
Еще несколько соображений в общем дизайне интерфейса:
- Если ваша карта не является полным экраном, одно из самых важных соображений – это то, хотите ли вы, чтобы вы могли позволить увеличению прокрутки увеличения на карте. Могут ли ваши пользователи получить «застрял», пытаясь прокрутить мимо вашей карты? Если ваши мобильные пользователи должны прокрутить, убедитесь, что сделайте карту меньше, чем высота экрана!
- На более технической карте для специалистов, большинство из этих советов менее важны, но все еще хорошо, чтобы сделать все понятно на первый взгляд
Маркеры карты и всплывающие окна
Это самая большая часть в этом посте – основной зоне дизайна. Прежде чем мы начнем, я заметил всего несколько дней назад (12 февраля), что Google только что обновила свой маркер API Maps Maps по умолчанию Google Maps в прошлый понедельник. Мне нравится новый.
Хорошо, верно? Я думаю, что это гораздо более современный и чистый и дружелюбный.
По умолчанию не страшные, когда речь идет об использовании ваших маркеров. Вот как выглядят несколько разных основных маркеров:
Есть огромное количество сайтов в Интернете, где вы можете найти значки маркеров. Они были в основном PNGS, так как многие из нас были проблемы с использованием SVGS назад в день. Теперь маркеры SVG очень просты в создании и добавлении с помощью любого сопоставления API, так что открыло нам огромный мир значков.
Более того, каждая библиотека отображения позволяет вставить HTML Div для маркера (если вы сделаете это правильно – спросите меня), что означает, что вы также можете использовать такие вещи, как Fontawesome или Glyphicons для маркеров. Так что вы определенно не короткие на вариантах.
https://www.flaticon.com/ https://thenounproject.com https://mapicons.mapsmarker.com/ (Постарайтесь избегать использования, вид старого)
Когда дело доходит до всплывающих окон, настройка сильно варьируется – некоторые очень маленькие (этикетки), а другие огромные (списки недвижимости). Как правило, почти все всплывающие стили по умолчанию в сопоставлении API-адреса выглядят OK-ISH:
Вы можете восстановить их – с различной степенью сложности, конечно.
Общий принцип – сохранить всплывающие окна очень лаконичные, только один на экране одновременно и у меня есть небольшая тень, чтобы «поднять» их с карты. Немного треугольника, указывающая на то, где и всплывающие якоря являются стандартными. Старайтесь быть максимально аккуратной и аккуратной, и удалите любые поля и прокладывайте, что вам это не нужно. Не стесняйтесь использовать изображения и шрифты заголовка в всплывающем окне.
Если есть несколько типов маркеров, либо легенда должна сделать ее мгновенно очистить, что такое, что или маркеры должны иметь какую-то идентификационный значок, встроенный в них.
Маркеры кластеризации это отличная идея. Вы можете на заказ стиль кластеров, который проходит долгий путь, если у вас есть этот дизайн, интегрированный с вашими маркерами. Но тогда люди, кажется, наслаждаются занятыми картами, поэтому попробуйте без кластеризации тоже.
Еще несколько заметок
- Попробуйте играть с анимированием ваших маркеров, используя CSS. Используйте анимацию ключевой кадры и сделайте их непрозрачность мерцает немного или выделите, вы хотите, чтобы пользователь нажимал.
- Внимание на небольшие детали, такие как границы-радиус, цвет теней и отношения шрифта с картой, очень важны в всплывающих окнах
- По умолчанию просто отлично, если вы сосредоточены на функциональности! Никто не заботится, если ваша карта немного уродливая. Каждый используется для просмотра и использования по умолчанию, и они часто являются лучшим выбором.
Что бы вы ни делали, не ходите за борт в гиперразделке все. Я знаю, что я сказал, что внимание на небольшие детали важно, но главный момент – на самом деле достичь замечательной простоты дизайна, не преодолеть ваше мышление. Если вы сомневаетесь, отстаивайте и вернемся позже, или просто вернитесь по умолчанию и назовем его в день.
Цвета формы
Несколько замечаний о многоугольниках и полиэтилентном стиле:
- Меньшие штрихи и легкая полупрозрачность великолепны с полигонами; эффекты зависания должны меняться непрозрачность. Для уникального эффекта зависания, получайте непрозрачность, чтобы выцветать в использовании Settimeouts!
- Если вы рисуете полилинии (например, маршруты вождения), попробуйте анимировать их! Продлить полилинию с помощью координаты каждые 10 мс
- Если у вас есть всплывающие окна, убедитесь, что они появляются, где пользователь нажимает, не В центре многоугольника/полилинии
С полилиниями и многоугольниками, не бойтесь сумасшедших цветов и развлекаемся с взглядом. Люди, кажется, любит занятый внешний вид сжиженной карты, а многие цвета могут быть очень привлечены.
Заключение
Я пытался познакомить вас с некоторыми из самых простых, простых принципов, которые я разработал в свое время, работая со многими различными сопоставленными проектами. Нет сомнений в том, что карты сложны, но они также очень участвуют и немедленно привлекают людей.
Если вы когда-нибудь проиграли относительно того, что делать, посмотрите некоторые из крупных сопоставленных компаний в Интернете. Как они разрабатывают свои карты? Google Maps имеет простой, но необязательно сложный интерфейс со своей картой (раскрывающиеся, слайд-в Divs). MapBox сохраняет вещи простыми и статичными вокруг карты. Проверьте, что делают другие и копируют эту функциональность, а не изобретать колесо.
Больше всего – Сделайте свою карту, не кто-то еще! И дайте мне знать, когда вы делаете, потому что я хотел бы увидеть это.