Что можно добавить в 3D тур для повышения информативности?
Из этой статьи вы узнаете, какие расширения и модификации можно добавить в 3D тур, собранный на движке KRPano. Помимо добавления расширений в туре можно частично или целиком переработать дизайн оформления и элементы управления.
Содержание
- Главное меню управления
- Графические подсказки и их визуальное оформление
- Навигационные элементы и визуальное оформление
- Информационные подсказки
- Текстовые подсказки
- Подсказки с фотографиями
- Подсказки с видео
- Подсказки с аудио
- Подсказки с другими функциями
- Фирменный стиль и индивидуальный дизайн
Практически всегда располагается внизу экрана и опционально состоит из следующих элементов, каждый из которых можно убрать при необходимости:
- предыдущая панорама
- следующая панорама
- приблизить
- отдалить
- посмотреть вверх
- посмотреть вниз
- посмотреть влево
- посмотреть вправо
- свернуть превью панорам
- вернуться к первой панораме
- запустить/остановить автовращение
- открыть меню на весь экран
- свернуть меню
Может использоваться любая картинки или иконка, вы можете использовать стандартные варианты или предложить свой.
Обычно это пульсирующая кайма вокруг круглого элемента, анимация используется исключительно для привлечения внимания и отделения иконки от фона.
Это скорее декоративный элемент, так как разглядеть что-то на превью не позволяет его размер.
Этот вариант оформления позволяет выделить непосредственно тот элемент, к которому относиться подсказка. В большинстве случаев используется или в промышленных проектах или выставках/музеях.
Чуть более усложненный вариант предыдущей подсказки, иконка позволяет продемонстрировать "кликабельность" объекта и сделать его более явным - больше всего это актуально, когда форма контура получается слишком простой.
Пример: выставочный стенд Мастерпроф
Такие элементы управления предназначены для перехода между соседними панорамами, либо для быстрого перехода между панорамами, расположенными дальше "одного шага".
Горизонтальная или вертикальная галерея-список с миниатюрами 3D панорам.
Пример: фотостудия Lion
Вертикальный структурированный выпадающий список 3D панорам и групп панорам (этажи зданий, разделы экспозиций и т.п.).
Пример: Шоу-рум бытовой техники компании ASKO
Интерактивные элементы, которые обычно представляют собой стрелки или другие пульсирующие иконки, при нажатии которые осуществляются переходы между ближайшими панорамами в 3D туре.
Пример: Академия фигурного катания «Ангелы Плющенко»
Переход осуществляется в соответствии с запрограммированным в тур порядком панорам.
Пример: Академия фигурного катания «Ангелы Плющенко»
Функционал похож на предыдущий вариант, но главное отличие заключается в том, что кнопка "назад" отвечает за откат не в соответствии с заложенным в тур порядком, а в соответствии с историей перемещений зрителя между панорамами.
Пример: Академия фигурного катания «Ангелы Плющенко»
В большие, объемные или сложные по структуре виртуальные туры я рекомендую добавлять карту/план локации для упрощения навигации. Пользователю гораздо проще ориентироваться по плану чем переходить по стрелкам.
Пример: Шоу-рум бытовой техники компании ASKO
Логотипа может быть расположен как в углу интерфейса, так и внизу (в надире панорамы). Дополнительно логотип можно сделать кликабельными - при клике будет открываться сайт заказчика, обычно это страница контактов или страница с информацией о компании.
Иконки, кнопки, виджеты (hotspots) - интерактивные элементы, основная функция которых - это расширить информативность 3D тура.
Появляются при наведении курсора на иконку или нажатии левой кнопкой мыши при просмотре с компьютера или однократном нажатии (тап) при просмотре на мобильном устройстве.
На компьютере текст появляется над курсором при наведении на интерактивный элемент. При просмотре на мобильных устройствах текст появляется над иконкой при однократном тапе по ней.
Открываются при клике/тапе по иконке.
Пример: выставочный стенд Станкомаш
Помимо текста во всплывающем окне также можно добавить кнопку, которой привязывается соответствующая подсказке ссылка на сайт.
Пример: шоурум Zeiss
Дополнительно к фотографии можно добавить заголовок и текстовое описание.
Дополнительно к каждой фотографии можно добавить отдельный заголовок и развернутое текстовое описание.
Пример: выставочный стенд Станкомаш
Помимо текстовых и аудио модификаций в тур можно встроить видео, к примеру горящий камин, работающий телевизор, видео-пролеты от метро до входа в заведение, а также анимацию движения предметов, например раскладывание кровати трансформера, открытие/закрытие шкафа и т.п.
В большинстве случаев видео предоставляется заказчиком, но вы можете заказать создание видео для подсказок под ключ (оплачивается дополнительно).
При просмотре с компьютера, такие подсказки активируются наведением курсора или кликом левой кнопкой мыши, а на мобильных устройствах (смартфонах и планшетах) однократным кратковременным нажатием (тапом).
При клике на иконку во всплывающем окне открывает видео с Youtube.
Пример: выставочный стенд Станкомаш
Вставка видео осуществляется напрямую в панораму (горящий камин, работающий телевизор и т.п.). В этом случае обратите внимание, что вставить можно только прямоугольное видео единым контуром.
Пример: Музей Спорта в Москве
Это может быть речь, музыкальное сопровождение или звуки приборов/оборудования. Исходное аудио почти всегда предоставляется заказчиком, то вы можете дополнительно заказать озвучание вашего текста. Например, в проекте для StyleGarage для демонстрации улучшения шумоизоляции автомобиля звуковое оформление добавлено к панорамам? в которых поэтапно добавляются слои шумоизоляционного материала.
Старт аудиозаписи начинает при клике по соответствующей подсказке.
Аудиозапись запускается автоматически при начале просмотра и не прерывается при переходах между панорамами.
При переходе к другой панораме запускается соответствующая ей аудиозапись.
Все точно также как и с развернутыми текстовыми подсказками, просто вместо текста в результате взаимодействия с подсказкой в новой вкладке браузера открывается соответствующая страница сайта.
В новой вкладке
Во всплывающем окне
В этом случае верстка сайта должна быть адаптивной, иначе часть сайта не поместится во всплывающее окно (как в примере ниже).
При клике на иконку на весь экран открывает так называемая "плоская панорама" (фотография в высоком разрешении с возможностью увеличения).
Пример: выставочный стенд Мастерпроф
Например, в 3D тур по квартире с черновой отделкой для большей информативности можно добавить разметку габаритов помещения.
Пример: демо-тур
Форма для сборки контактов, в которую пользователь вводит свое имя, телефон и/или адрес электронной почты для связи с ним.
Внутрь тура можно добавить галерею товаров, например мебели - клиент гораздо охотнее купит мебель, которую, только что посмотрел в реализованном интерьере.
Минусом такой формы демонстрации товаров является обособленность проекта - в случае изменения ассортимента или цен у вас нет возможности самостоятельно внести изменения в проект, для этого придется оплачивать дополнительные услуги программиста.
Поэтому практически всегда проще добавить ссылку на страницу сайта с нужным разделом товаром, без дублирования информации и усложнения и удорожания проекта.
Пример: Магазин автосканеров
Почти все элементы стандартного дизайна: меню управления и интерактивные элементы - можно перекрасить в цвета вашего фирменного стиля. Также, на основе вашего ТЗ можно создать полностью новое меню и другие элементы, которые будут отрисованы дизайнером и встроены в тур.
Примеры проектов с индивидуальным дизайном:
- Производство компании Русклимат
- Завод «Totachi»
- Спортивный комплекс Олимпийский»
- Офис компании «Валеант»
- Выставочный стенд компании «Русклимат»
