В этом документе описаны различные шаблоны проектирования и идеи, которые помогут вам начать работу с видом с воздуха . Необходимо тщательно продумать то, как вы представляете вид с воздуха своим клиентам, чтобы убедиться, что вы видите хороший уровень взаимодействия с продуктом, а ваши клиенты видят его ценность.
Aerial View добавляет на ваш сайт визуально привлекательный компонент, показывающий вид на недвижимость и окрестности с высоты птичьего полета.
Когда пользователи видят недвижимость в 3D, они могут лучше понять ее местоположение и размер. Это также помогает подчеркнуть особенности объекта, такие как бассейн, хозяйственные постройки или большой двор, в дополнение к близлежащим объектам, таким как дороги, водоемы, горы или парки.
Повышение вовлеченности
Вид с воздуха станет ошеломляющим фактором для ваших клиентов, и чтобы увидеть все преимущества, контент должен быть максимально простым для обнаружения. В этом разделе мы поговорим о некоторых шаблонах проектирования реализации Aerial View, позволяющих достичь этой цели.
Видеоориентация
Важно учитывать ориентацию экрана устройства, на котором загружается видео с воздуха. Показ видео в альбомной ориентации на мобильном устройстве может быть неприятным для пользователя, особенно в полноэкранном режиме. Отображая видео с неправильным соотношением сторон для устройства, вы потратите впустую значительную часть площади экрана.
Видео с высоты птичьего полета предоставляются в альбомной и портретной ориентации .
Ниже приведен пример разницы при запуске Aerial View на мобильном устройстве в рекомендуемой и нерекомендуемой ориентации:
Встроенная ховеркарта
При отображении нескольких объектов недвижимости в представлении поиска недвижимости полезно добавить встроенные hovercards для отображения видео с видом с воздуха с дополнительной информацией об объекте, такой как адрес и цена, наложенными сверху. Это позволяет пользователям быстро и легко получить представление о объекте без необходимости переходить на страницу сведений о объекте.
В примере ниже показан маркер, представляющий комплекс Googleplex в Маунтин-Вью. При наведении курсора на этот маркер появляется карточка с изображением объекта с высоты птичьего полета.
Событие onClick можно добавить как к маркеру, так и к встроенной hovercard, чтобы перенаправить пользователя на страницу сведений о свойстве. Это позволяет пользователям легко узнать больше об объекте и решить, подходит ли он им.
Создайте сказочный опыт для своей собственности
Если вы хотите создать по-настоящему захватывающий опыт для потенциальных покупателей, вы можете продемонстрировать свою недвижимость с помощью истории, сочетающей фотографии и видео с высоты птичьего полета. Это можно создать аналогично карусели изображений, используя сочетание HTML, CSS и JavaScript.
В приведенном выше примере мы включили видео с видом с воздуха на один из слайдов со ссылкой внизу для просмотра более подробной информации об объекте недвижимости. Эта кнопка должна перенаправить пользователя на страницу сведений о недвижимости.
Вот как это работает:
- Выберите свои фотографии. Выберите различные фотографии, которые подчеркнут лучшие особенности вашего объекта.
- Создайте видео с видом с воздуха.
- Объедините свои фотографии и видео в историю.
- Поделитесь своей историей. Поделитесь своей историей с потенциальными покупателями на своем веб-сайте или в маркетинговых кампаниях по электронной почте.
Создав атмосферу истории для своей витрины, вы сможете привлечь внимание потенциальных покупателей.
Запуск вида с воздуха при загрузке страницы
В исследованиях UX Google мы видим, что наибольшая вовлеченность пользователей происходит, когда 3D-представление загружается по умолчанию. Поскольку это новый и интересный форм-фактор, мы хотим загрузить его, как только клиент захочет просмотреть подробную информацию о объекте. Говоря о стоимости, если вы получаете видео с высоты птичьего полета через API, с вас будет взиматься плата. После запроса видео рассмотрите возможность автоматического воспроизведения, чтобы ваши пользователи увидели преимущества.
Анти-шаблон: скрытие вида с воздуха за кнопкой считается анти-шаблоном, поскольку заставляет пользователей делать дополнительный шаг для просмотра трехмерного изображения. Это может расстраивать, а также может привести к тому, что они упустят преимущества 3D-вида или ошибочно примут вид с воздуха за статический контент.
Рекомендуется загружать вид с воздуха по умолчанию, когда клиент хочет просмотреть подробную информацию о объекте недвижимости. Это обеспечит отличный пользовательский опыт и поможет им принять обоснованное решение относительно объекта недвижимости. При разработке автоматического воспроизведения имейте в виду, что размер видео с видом с воздуха составляет более 30 МБ, и у некоторых пользователей оно может загружаться медленно.
Если на вашей странице есть карусель изображений, видео с видом с воздуха можно включить в качестве основного элемента, что позволит вам легко интегрировать 3D-изображения в существующий дизайн веб-сайта.
Размещение кнопок для загрузки 3D-изображений легко реализовать, но это может снизить вовлеченность. Карты Google по умолчанию загружают 3D-изображения. Например, когда вы ищете Эмпайр-стейт-билдинг, трехмерное изображение загружается автоматически, и вы можете увидеть частичный вид изображений, все еще находясь в трехмерном виде. Это отличный способ предоставить пользователям более захватывающий и увлекательный опыт.
Дизайн кнопки
Если вы решите использовать кнопку для доступа к виду с воздуха, важно учитывать следующее:
- Местоположение : кнопку следует сгруппировать с другими кнопками, связанными с отображением, чтобы пользователи знали, что она связана с местоположением объекта.
- Переход : переход к видео должен быть плавным и плавным. Если на странице уже есть раздел, в котором отображаются изображения, карты и просмотр улиц, то видео с видом с воздуха должно отображаться в том же разделе.
- Выделение : поскольку это будет новое дополнение на странице, полезно выделить кнопку тегом «новая функция» или миниатюрой неподвижного изображения видео.
- Выделение : кнопка должна иметь средний или высокий акцент, так как нажатие на нее будет выполнять заметное действие. В Google Material Design есть несколько рекомендаций по созданию кнопок с разным уровнем акцента.
Вот несколько дополнительных советов по созданию эффективной кнопки вида с воздуха:
- Используйте ясный и краткий язык. Кнопка должна быть четко обозначена, чтобы пользователи знали, что она делает.
- Используйте крупный и разборчивый шрифт. Кнопка должна быть достаточно большой, чтобы пользователи могли ее легко увидеть и нажать.
- Используйте контрастный цвет. Кнопка должна быть другого цвета, чем окружающий текст и фон, чтобы она выделялась.
- Используйте призыв к действию. Кнопка должна содержать четкий призыв к действию, например «Посмотреть видео с воздуха» или «Посмотреть видео».
Рекомендации по отображению
Загрузка видео
Возможно, вы захотите принять во внимание более медленные соединения, отображая предварительный просмотр неподвижного изображения видео и загружая все возможности при взаимодействии с пользователем, например onClick. Помимо видео с видом с воздуха у вас также будет доступ к миниатюре, которую можно использовать для этого.
У вас также будет доступ к видео в разных разрешениях, поэтому их можно использовать стратегически, чтобы минимизировать время, которое пользователь должен потратить на ожидание загрузки контента при разных скоростях соединения.
Атрибуция логотипа
При реализации вида с воздуха вы должны убедиться, что соблюдаете все условия, включая указание логотипа. Подробности смотрите на этой странице .
Заключение
Мы надеемся, что эта статья вдохновила вас на размышления о том, как вы хотели бы реализовать вид с воздуха на своем веб-сайте с высокой вовлеченностью пользователей.
Важно подумать о том, как ваш пользователь найдет контент и в каком формате будет наиболее подходящим его отображать. Также полезно учитывать тип устройства, на котором будет воспроизводиться видео, особенно ориентацию экрана и скорость соединения пользователя. .
Следующие шаги
Рекомендуемое дальнейшее чтение:
- Повысьте точность ввода адреса в режиме просмотра с воздуха.
- Документация по продукту с видом с воздуха
Авторы
Google поддерживает эту статью. Первоначально его написали следующие участники.
Основной автор:
Хенрик Валв | Инженер по решениям платформы Google Maps