Главная > Web-дизайн, Разное > Карты в современном веб-дизайне: подборка и примеры

Карты в современном веб-дизайне: подборка и примеры


12 мая 2010, 15:15. Разместил: Mysterious Master
Гео-таргетинг активно дискутировался в 2009 году. С распространением смартфонов, поддерживающих GPS, карты все больше и больше становятся доступными обычным людям. Но как же быть веб-дизайнерам и разработчикам, которые тоже были бы не прочь воспользоваться преимуществами людей, которые имеют доступ к гео-таргетингу и картам? В этой статье мы поговорим о различных тенденциях, конвенциях и о возможном будущем интерактивных карт в режиме он-лайн.

Основополагающие карт в режиме он-лайн

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

Это не урок картографии, но здесь важно понимать назначение карт в современном веб-дизайне. Давайте рассмотрим основные важнейшие задачи карт:

1. Навигация и направление
2. Знакомство с тенденциями и отношениями на географическом уровне
3. Отображение интересных локаций

Интерактивные карты

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

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

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

Нет необходимости в истории

На обычных печатных картах, обычно есть сноска с объяснением использованных символов. Контекстуальные окна обычно заменяют эту сноску в он-лайн картах. Вместо того, чтобы переносить взгляд на отдельную сноску, человек может просто навести курсор на интересующую его точку и узнать детальную информацию о месте. Для того, чтобы посмотреть это в деле, посетите карту «America’s Best Adventures», которая представлена ниже:

Карты в современном веб-дизайне: подборка и примеры

Клик по точкам вызывает контекстуальное окно.

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

Основные типы навигационных карт

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

Бурение (Drill-Down)

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

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

Карты в современном веб-дизайне: подборка и примеры

Временная шкала (Timeline)

Временная шкала показывает временной прогресс на карте. Шкале необязательно представлять время как таковое. Основной целью является отображение взаимосвязи между метриками шкалы и содержанием карты.

Карты в современном веб-дизайне: подборка и примеры

Увеличение (Zoom)

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

Карты в современном веб-дизайне: подборка и примеры

До и После

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

После недавнего происшествия на Гаити, издательство New York Times использовали такого рода снимки для создания интерактивной карты, на которой отображены последствия разрушений. В результате мы получили наглядное отображение последствий землетрясения в столице Гаити - Порто-Пренс.

Карты в современном веб-дизайне: подборка и примеры

Точка интереса

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

Odopod продвинули эту идею на шаг вперед, разместив фотографию своего офиса на лицевой части карты на странице с контактами. Теперь нужное здание можно найти гораздо проще.

Карты в современном веб-дизайне: подборка и примеры

Карты как информационный инструмент

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

Карты на сайте канала National Geographic отображают нам то, насколько интерактивными могут быть карты и как с их помощью можно отобразить всемирные тенденции. В карте Earth Pulse есть меню с одной из сторон, посредством которого отображения информация о населении, вырубке леса и уровню потребления мяса.

Карты в современном веб-дизайне: подборка и примеры

Из мира политики

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

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

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

Карты в современном веб-дизайне: подборка и примеры

Как только выборы закончились, все данные опросов были заключены в карты. Одной из наиболее интересных версий была карта Washington Post, которая разбивалась на разные округи. В карте использовался Flash для отображения полного вида тенденций выборов на 360 градусов. Результаты отдельных кампаний были суммированы и эффективно отображены в отдельных изображениях.

Карты в современном веб-дизайне: подборка и примеры

Эти карты пришли на смену инфографике. Различия лишь в способе представления и дизайне. В карте Washington Post, данные были непосредственно связаны с конкретной областью. А также, данные были ответственны лишь с контекстом той области, в которой они были собраны. 30-летний голосующий в Калифорнии может значительно отличаться от 30-летнего голосующего в Нью-Йорке.

Нетрадиционные варианты карт

Хотя и большая часть в этой статье относятся к физическому месторасположению, не нужно думать, что этого и нужно держаться. Географические карты – это не единственное предназначение интерактивных онлайн-карт. Карты можно использовать для предоставления более абстрактных данных. GOOD демонстрирует нам это в своей презентации «Roadmap to Harmony». Результат получился как логичным, так и достаточно креативным.

Карты в современном веб-дизайне: подборка и примеры

«Roadmap to Harmony» ломает представление о географических картах.

Будущее локаций

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

Такие сервисы как Foursquare и Gowalla уверяют нас в том, что карты и локации также являются частью повседневной жизни пользователей смартфонов. Например, Twitter очень оперативно расширяет свой API, чтобы включить туда данные о локациях. Информация о том, где вы находитесь в данный момент, может иметь ошеломительные последствия. Это может привести к тому, что веб-сайты смогут собирать данные и преобразовывать эту информацию в карты с отображением движения и развития.

Карты в современном веб-дизайне: подборка и примеры


Карты действий

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

Карты в современном веб-дизайне: подборка и примеры

Карты, основанные на людях

Очень скоро GPS для определения пути и зданий останется в прошлом. Теперь мы сможем наблюдать страницы контактов дизайнеров, на которых будет красоваться надпись «Найдите меня прямо сейчас», перейдя по которой, вы получите GPS-данные о местонахождении. Игрок NFL Чэд Джонсон (Ochocinco) уже перевел этот уровень взаимодействия на новую ступень.

Подборка карт в веб-дизайне

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

Карты в современном веб-дизайне: подборка и примеры

Интерактивная карта дальнейшего развития Innovista – объемный проект Университета Южной Каролины.

Карты в современном веб-дизайне: подборка и примеры

Оксфордский отель внес свое месторасположение в содержимое.

Карты в современном веб-дизайне: подборка и примеры

EveryBlock городские новости посредством маркеров интереса.

Карты в современном веб-дизайне: подборка и примеры

Преувеличенная генерация месторасположения здания.

Карты в современном веб-дизайне: подборка и примеры

KNI используют карты для отображения местонахождения студии.

Карты в современном веб-дизайне: подборка и примеры

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

Карты в современном веб-дизайне: подборка и примеры

Поиск баров.

Карты в современном веб-дизайне: подборка и примеры

На этой карте отмечены маршруты известных экспедиций.

Карты в современном веб-дизайне: подборка и примеры

Карта, разработанная с помощью jQuery для поиска вакансий учителя.

Карты в современном веб-дизайне: подборка и примеры

Интерактивная карта World of Warcraft.

Создавайте все сами

Вы когда-нибудь пытались найти способы разработки карты проекта? Хотя, в наше время HTML5 и javascript уже достаточно заполонили мир, Flash-альтернативы, по типу amMaps, до сих пор способны предложить самое лучшее решение по созданию интерактивных карт. Почти каждая карта упомянутая в этой статье может быть сделана посредством такой (или очень похожей) системы.

Карты в современном веб-дизайне: подборка и примеры

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