Дизайн, брендирование и дополнительные модификации виртуального тура





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


Содержание 

  1. Базовые элементы виртуального тура
  2. Простые дополнительные элементы
  3. Сложные модификации 

Базовые элементы виртуального тура

Основное меню управления туром

Практически всегда располагается внизу экрана и опционально состоит из следующих элементов:

  1. Предыдущая панорама
  2. Следующая панорама
  3. Приблизить
  4. Отдалить
  5. Посмотреть вверх
  6. Посмотреть вниз
  7. Посмотреть влево
  8. Посмотреть вправо
  9. Свернуть превью панорам
  10. Запустить/остановить автовращение
  11. Открыть меню на весь экран
  12. Свернуть меню

меню управления 3D туром

Пример: 3D тур по передвижной телевизионной станции

Список панорам с их миниатюрами

Горизонтальная или вертикальная галерея-список 3D панорам, из которых состоит 3D тур.

миниатюры панорам

Пример: фотостудия Lion

Структурированный список панорам

Вертикальный структурированный выпадающий список разделов и 3D панорам.

структурированное меню 3D тура

Пример: 3D тур по передвижной телевизионной станции

Кнопки для перехода между соседними панорамами

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

иконки для перехода между 3D панорамами

Пример: завод «Totachi»

Простые дополнительные элементы виртуального тура

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

Иконки с текстовыми подсказками

На ПК появляются поверх или над иконкой при наведении курсора, на мобильных из-за отсутствия курсора устройствах для оптимизации работы требуют навыков программирования.

Всплывающие окна с текстом, графикой и фотографиями

Появляются при нажатии на иконку левой кнопкой мыши и однократном нажатии (тап) при просмотре на мобильных устройствах.

Пример: завод «Totachi»

Переход на сайт

При нажатии на иконку левой кнопкой мыши или однократное нажатие (тап) при просмотре на мобильных устройствах.

Подсказка с выделением предмета по контуру

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

При наведении/нажатии на выделенный элемент могут быть реализованы следующие элементы:

  1. Текстовые подсказки - появляются над объектом при наведении курсора
  2. Всплывающие окна с текстом - появляются при нажатии на объект левой кнопкой мыши (однократное нажатие (тап) при просмотре на мобильных устройствах)
  3. Всплывающие окна с фотографией и подписью - появляются при нажатии на объект левой кнопкой мыши (однократное нажатие (тап) при просмотре на мобильных устройствах)
  4. Переход на сайт при нажатии на объект левой кнопкой мыши (однократное нажатие (тап) при просмотре на мобильных устройствах)

подсказки с обводкой в 3D туре

Пример: посмотреть

Логотип компании

В оформление 3D тура можно добавить логотип компании или другую картинку, логотип обычно размещается в следующих местах:

  • в углу экрана
  • в полу панорамы
  • в потолке панорамы

логотип в 3D туре

Пример проекта с логотипом: офис «Пеликан-Авто Škoda»

Галерея с фотографиями

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

галерея фотографий в 3D туре

Пример: офис «Пеликан-Авто Škoda»

Музыка и звуковое сопровождение

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

Пример проекта с музыкой: офис «Пеликан-Авто Škoda»

Разметка габаритов помещения

Для большей наглядности в 3D панорамах можно разметить габариты помещений.

Пример подсказок с размерами помещений: демо-тур

Сложные модификации виртуального тура,
требующие работы программиста

Карта локации или план помещения с отметками панорам

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

Пример проекта с планом локации: Спортивный комплекс «Олимпийский»

Форма обратной связи

Форма для сборки контактов, в которую пользователь вводит свое имя, телефон и/или адрес электронной почты для связи с ним.

Галерея товаров

Внутрь тура можно добавить галерею товаров, например мебели - клиент гораздо охотнее купит мебель, которую, только что посмотрел в реализованном интерьере.

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

Пример 3D тура с галереей товаров: Салон «Гармония Кухонь»

Анимация и видео

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

Фирменный стиль и индивидуальный дизайн

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

индивидуальный дизайн 3D турабрендирование 3D тураиндивидуальный дизайн виртуального турабрендирование виртуального тура

Примеры проектов с индивидуальным дизайном:

1. Завод «Totachi»
2. Спортивный комплекс Олимпийский»
3. Офис компании «Валеант»
4. Выставочный стенд компании «Русклимат»

Евгений Галанин

Фотограф интерьеров и архитектуры.
Делюсь личным и профессиональным опытом. Провожу фотосъемки интерьеров и архитектуры в Москве и других городах

comments powered by HyperComments