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