Интерактивные карты, используемые в макетах веб-сайтов

1. Детали пользовательской карты
2. Визуализация данных
3. Полные динамические веб-приложения
4. Создание карт для сайтов
5. закрытие

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

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

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

Детали пользовательской карты

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

Мой самый любимый пример можно найти на сайте портфолио Роги Кинг ,

Если вы прокрутите вниз до нижнего колонтитула, вы увидите небольшую карту с векторными точками вдоль западного побережья и среднего запада Соединенных Штатов. Наведите указатель мыши на любой из этих пунктов, чтобы получить динамически анимированную подсказку с некоторыми дополнительными подробными сведениями о жизни и работе Роги.

Этот интерактивный дизайн карты ведет себя как личный контакт, добавленный на сайт. Это не служит жизненной цели, но эстетически приятно и потрясающе.

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

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

Визуализация данных

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

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

Взять, к примеру, Страница иммиграционного обозревателя с сайта New York Times. Вы можете выбрать любую группу со всего мира и узнать, где они преимущественно проживали в Америке с 1880-х до начала 2000-х годов.

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

Разработчики могут стать еще более креативными с онлайн-API, такими как Google Maps. Рассмотрим Открыть карту оплаты который перечисляет близлежащие зарядные станции для электромобилей.

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

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

Визуализация данных в сети выросла как на дрожжах. Карты - это лишь один из многих успешных методов демонстрации графики с динамическим контентом.

Полные динамические веб-приложения

Некоторые веб-сайты прошли путь превращения инфографики в чистые веб-приложения HTML / CSS / JS. Другой творческий прием - создавать карты, которые следуют аналогичным образом.

Сообщения для сайта Японии отличный пример. У него нет основной навигации, потому что нет никаких других страниц за пределами самой карты.

Сообщения со всего мира каталогизируются на веб-сайте и публикуются онлайн с точками данных. Карта основана на Google и стилизована с помощью Google Maps API. Он был построен в поддержку Японии после 3/11 землетрясение что произошло еще в 2011 году.

Еще один довольно подробный, но изысканный пример - Целевая страница карты AirBnb , Сначала проигрывается небольшое видео, но его можно пропустить прямо на самой карте.

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

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

Создание карт для сайтов

Создание собственной карты с нуля займет годы и потребует много кода. К счастью, есть готовые решения и API, которые помогают сократить это время до нескольких дней или пары недель.

Мой любимый веб-приложение MapBox который может работать как на веб, так и на мобильных платформах.

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

Но Mapbox не просто помогает вам создавать карты, которые выглядят великолепно. Это также инструмент для точного определения близлежащих мест с ценными ресурсами на основе поисковых запросов, адресов или чего-либо еще. Если у вас есть терпение, чтобы пройти их инструменты разработчика тогда небо действительно предел с Mapbox.

альтернативно jVectorMap это полностью бесплатное решение, построенное на рендеринге JavaScript, SVG и / или VML. Он поддерживает все основные браузеры, включая IE6 +, что является невероятным достижением для динамических карт.

Конечно, у jVectorMap есть немного более крутая кривая обучения, это идеальный инструмент для разработчиков, которые не хотят ограничивать себя онлайн-платформой.

закрытие

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

Для большего количества идей дизайна пользовательского интерфейса проверьте эти связанные должности: