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

1. Основы онлайн-карт
2. Интерактивные Карты
3. Легенда не требуется
4. Drill-Down
5. График
6. Увеличить
7. До и после
8. Достопримечательность
9. Из политического мира
10. Нетрадиционные карты
11. Карты, ориентированные на людей
12. Витрина карт в веб-дизайне
13. Построй свой собственный

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

Основы онлайн-карт

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

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

1. Навигация и направления,
2. Показать отношения и тенденции географически,
3. Показать достопримечательности.

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

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

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

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

Легенда не требуется

На традиционных печатных картах легенда служит переводчиком для используемых символов. Контекстные окна устраняют необходимость в легендах на многих онлайн-картах. Вместо того, чтобы ссылаться на объяснение символа на полях, пользователь просто нажимает на точку, чтобы узнать о ней больше. Результатом является меньшее количество шагов и меньшее движение глаз для достижения той же цели. Чтобы продемонстрировать, насколько интуитивно понятным этот вид действий стал для веб-пользователей, попробуйте Лучшие приключения Америки »Карта ниже:

Нажатие на точку вызывает контекстное окно.

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

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

Drill-Down

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

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

График

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

Увеличить

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

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

До и после

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

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

Достопримечательность

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

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

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

Карты на веб-сайте National Geographic показывают, как интерактивные карты можно использовать для отображения мировых тенденций на основе собранных данных. Например, на карте «Пульс Земли» есть меню, которое позволяет пользователям отображать информацию на основе таких показателей, как население, потребление мяса и вырубка лесов.

Из политического мира

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

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

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

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

Здесь карты имеют тенденцию перекрываться (или даже превращаться) в инфографику. Разница в презентации и дизайне. На карте «Вашингтон пост» информация была непосредственно привязана к определенной области . Таким образом, данные будут иметь отношение только к контексту, в котором они были собраны. 30-летняя женщина-избиратель в Калифорнии - это не то же самое, что 30-летняя женщина-избиратель в Нью-Йорке.

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

Хотя большинство карт в этой статье посвящены физическим местам, не думайте, что вы должны придерживаться этого. Географические карты - не единственный вид карт. Карты также могут быть использованы для изучения более абстрактной информации, в отличие от статическая инфографика , ХОРОШО иллюстрирует это своим « Дорожная карта к Гармонии Презентация. Результат является одновременно логичным и вдохновляющим.

«Дорожная карта к гармонии» ломает форму карт, основанных на местоположении.

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

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

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

Карты, ориентированные на людей

Полагаться только на GPS для определения местоположения зданий скоро может уйти в прошлое. Мы можем начать видеть контактные страницы дизайнеров веб-сайтов, у которых есть раздел «Найди меня здесь сейчас» с GPS-координатами? Игрок НФЛ Чад Очоцинко уже взял этот уровень взаимодействия к совершенно новый уровень , И ничто не мешает обычному человеку тоже прыгнуть на борт (несмотря на проблему конфиденциальности).

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

Мы покрыли много вопросов сегодня. В представленной ниже подборке вы найдете больше примеров карт для вашего вдохновения . Благодаря Шаблон Нажмите сделать процесс поиска по элементу дизайна относительно безболезненным (хотя в нем еще нет раздела карты). Многие из приведенных ниже примеров были извлечены оттуда и из других мест.

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

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

EveryBlock отображает новости города в виде маркеров достопримечательностей.

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

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

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

Грубое руководство по поиску баров.

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

JQuery-карта открытых вакансий школьного учителя.

Интерактивная карта вымышленного World of Warcraft.

Построй свой собственный

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

Если вы ищете альтернативу, отличную от Flash, Carsonified недавно опубликовал замечательный пример использования jQuery для интерактивного отображения, который объясняет этот процесс. Знаете ли вы о каких-либо других интернет-картографических системах, о которых должны знать дизайнеры? Поделитесь ссылкой в ​​комментариях ниже.

Дальнейшее чтение на SmashingMag:

Похожие

Комментарии