Layerpin logo
Создать карту

Маркеры против фигур: выбор правильного элемента карты

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

LP

Команда Layerpin

7 мин чтения
Карта с точными маркерами и обозначенными границами территорий.

Основное правило: баллы за пункты назначения, области за территорию.

Самая распространенная ошибка на интерактивных картах - чрезмерное использование маркеров для крупных географических зон или, наоборот, рисование крошечных фигур для точечных объектов. Выбор правильного элемента карты существенно определяет, насколько быстро посетители воспримут ваш макет.

Используйте Маркерные булавки, когда местоположение представляет собой одну отдельную точку: входные ворота, информационный киоск, живописную смотровую площадку, часть оборудования или определенный стол. Булавка-маркер отвечает на вопрос: 'Где именно находится эта вещь?'

Используйте Фигуры (многоугольники и прямоугольники), если местоположение занимает измеримую физическую площадь: участок розничного магазина, жилой земельный участок, офисное крыло, парковку или охраняемую парковую зону. Форма отвечает на вопрос: 'Каковы границы, площадь и объем этого пространства?'

  1. 1
    Оцените, нужно ли посетителю найти точную координату или понять ограниченную область.
  2. 2
    По умолчанию используются маркеры для точек интереса, занимающих менее 5 % площади области просмотра.
  3. 3
    По умолчанию для комнат, зданий, земельных участков и зон используются многоугольники или прямоугольники.

Когда использовать полилинии, соединители и пользовательские линии

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

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

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

  1. 1
    Выберите инструмент «Полилиния» для путей, границ, маршрутов и инженерных каналов.
  2. 2
    Используйте соединители выносок в местах с большим скоплением людей, чтобы аккуратно смещать метки.
  3. 3
    Отрегулируйте толщину линии (от 2 до 6 пикселей) и образец штриха, чтобы различать разные типы путей (например, сплошная линия для основных коридоров, пунктирная для аварийного выхода).
Интерактивная навигационная карта с указанием отметок рядом с линиями и зонами многоугольных маршрутов.

Освоение стиля фигуры: непрозрачность, границы и контраст.

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

Установите непрозрачность заливки фигуры по умолчанию от 15% до 30%. Эта тонкая размывка выделяет территорию, сохраняя при этом читабельность архитектурных деталей. Соедините его с четкой сплошной рамкой размером от 1,5 до 2,5 пикселей контрастного оттенка.

При наведении курсора и выделении увеличьте непрозрачность до 40–50 % и утолщите границу, чтобы обеспечить четкую интерактивную обратную связь. Layerpin позволяет вам устанавливать собственные цветовые токены, которые напрямую соответствуют рекомендациям вашего бренда.

  1. 1
    Непрозрачность базовой заливки должна быть низкой (15-25%), чтобы фоновые карты оставались полностью видимыми.
  2. 2
    Используйте четкие цвета обводки, которые будут выделяться как на светлом, так и на темном фоне.
  3. 3
    Настройте заметное наведение и выбранные состояния для плавной интерактивной обратной связи.

Гармоничное сочетание маркеров и фигур

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

Установите единое правило взаимодействия: если щелчок по многоугольнику открывает его информационную карточку аренды, щелчок по дочерним булавкам внутри него должен открывать определенные карточки продавца. Убедитесь, что дочерние булавки имеют более высокий z-индекс, чтобы на них можно было легко нажимать внутри периметра многоугольника.

Используйте панель управления слоями Layerpin, чтобы изменить порядок элементов и заблокировать формы фона, предотвращая случайные ошибки во время редактирования.

Layerpin logo

Готовы создать интерактивную карту?

Создайте карту приватно, проверьте вид для посетителей и опубликуйте её, когда всё готово. No credit card needed.

Начать бесплатно