Студия Classic ENGLISH   Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамыСтудия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы
Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы

 Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы  На главную

 Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы  О студии

 Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы  Мультимедиа

 Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы  Виртуальные туры

 Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы  3d панорамы

 Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы  Видеосъёмка

 Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы  Фотосъёмка

 Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы  Дизайн

 Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы  Создание сайтов

 Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы  Наши награды

 Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы  Наши заказчики

 Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы  Наши статьи

 Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы  Обучение
 Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы  Готовые решения

Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы
 Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы Главная >> Наши статьи >> Архитектура и дизайн виртуального тура
Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы
Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы
РАЗДЕЛ
Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы
Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы
Студия Classic -фотосъемка, видеосъемка, виртуальные туры, сферические панорамы
ПРИМЕРЫ НАШИХ ПАНОРАМ


НАШИ СТАТЬИ




ОБЪЯВЛЕНИЯ

Объявляется набор на мастер-классы по созданию сферическихъ панорам и виртуальных туров.
Подробнее »»





НАШИ ССЫЛКИ







СЧЕТЧИКИ








Архитектура и дизайн виртуального тура.

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

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

Параллельно этому происходил процесс популяризации самой панорамной фотографии. Общество, наконец, оценило достоинства этого формата представления данных и, как следствие, вырос спрос на отдельные панорамы и туры. Упрощение процесса съемки и сшивания панорам, и появление визуальных редакторов для создания туров, привело в панорамную фотографию множество людей никогда не слышавших об архитектуре компьютерных приложений. А так же менеджеров, не подозревающих, что за словами панорамная фотография скрывается область, возникшая на стыке фотографии, программирования, компьютерного дизайна и зачастую требующая знаний во многих смежных областях, таких как 3D моделирование, кино, звукорежиссура и пр. Естественно, что при этом появилось множество туров, содержащих грубейшие ошибки именно с точки зрения проектирования, архитектуры и дизайна.

Вместе с тем панорамная фотография и продукты, созданные на ее основе, являются участниками очень жесткого компьютерного рынка, предъявляющего в настоящий момент к приложениям очень высокие требования. Есть хороший английский термин: - usability - с хорошим переводом - удобство пользования, и более раскрученный рекламный термин - комфортное приложение. Ошибки на уровне архитектуры и дизайна делают приложение не комфортным, отталкивая от него конечного пользователя, и сводя на нет всю проделанную работу. Это, а так же ряд особенностей свойственных только виртуальным турам, как компьютерным приложениям, послужило поводом к написанию этой статьи.

Начнем с расстановки приоритетов. Создание виртуального тура можно условно разбить на несколько составляющих:

1. Планирование виртуального тура
2. Разработка архитектуры тура
3. Создание панорам (съемка и сшивка).
4. Разработка дизайна тура.
5. Программирование.
6. Сборка виртуального тура, насыщение информацией.
7. Публикация.

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

Начинать работу нужно с этапа планирования. Еще до съемок вы определяете: для чего нужен виртуальный тур, на какую аудиторию он будет рассчитан, для каких устройств и с какими операционными системами он должен быть доступен, какая сопутствующая информация и в каких форматах помимо панорам должна содержаться в туре, сколько панорам необходимо и достаточно для выполнения поставленных задач, будет ли ваша система закрытой или открытой. На этом этапе проще всего работать с помощью бумаги и ручки. Вы пока не касаетесь технической стороны вопроса, за тем исключением, что вам надо знать возможности программ, чтобы не запланировать технически не осуществимых вещей (или сложно осуществимых, что бывает иногда дорого). Обратите внимание, что именно в этот момент определяется для каких устройств, и операционных систем вы будете публиковать тур. Функциональные возможности устройств разные, и они иногда по-разному реализуются. Вы можете запланировать либо создание различных разделов для разных устройств, что соответствующим образом меняет объем работы, либо создание единого тура для всех устройств, отказавшись от каких-то специфических функциональных возможностей. Стоит так же задуматься, что будет, если вам потребуется расширить виртуальный тур, добавив в него новые панорамы или информацию.

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

Архитектура виртуального тура - это система организации всего объема информации: панорам и сопутствующих файлов, и создание навигации между ними, с учетом удобства пользователя.

Разработка архитектуры это тоже "бумажный" этап. Пока еще рано задумываться о дизайне или программировании. Прежде, вам надо проанализировать, как вам организовать информацию. Для этого проще всего взять лист бумаги и проделать следующее. Разбить всю информацию на отдельные блоки. Проанализировать, как эти блоки взаимодействуют между собой. В какие группы можно эти блоки объединить. Как осуществлять переход между блоками. Какая информация является главной, какая второстепенной и на каком этапе. Что увидит конечный пользователь. Что нужно сделать, чтобы он не затерялся между информацией.

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

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

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

Если ваш тур состоит из двух-трех панорам, то проблем с навигацией и структурой не возникает. Но если панорам семь-восемь и более необходимо задуматься о разделении информации по разделам, и о том, что в зависимости от шагов, которые нужно предпринять, чтобы ее получить, эта информация будет разделена на разные уровни. Обычно выделяют первый (top level), второй, третий и т.д. уровни информации. Разбивать информацию глубже, чем на три уровня, не рекомендуется. Это связано с "правилом трех кликов", которое гласит, что пользователь должен совершить не более трех действий, чтобы добраться до любой информации в приложении. Если действий нужно совершить больше, то информация рискует быть никогда не просмотренной. Соответственно навигация между уровнями может быть: вертикальной (от первого ко второму, к третьему и т.д.), горизонтальной (от первого к первому, от второго ко второму и т.д.) и перекрестной (в любых сочетаниях, но без потери понимания, где пользователь находится, и куда он попал). Верхний уровень всегда является наиболее важным. Это то, что пользователь увидит при первой загрузке виртуального тура.


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

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

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

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

После того, как вы разобрались со структурой, можно разрабатывать дизайн виртуального тура.

Для большинства людей создать дизайн означает "сделать красиво". На самом деле это не совсем так. Понятие красоты относительно. Четкому критерию не поддается. У одного человека может быть один вкус, у второго другой, заказчик может иметь весьма странные фантазии, а пользователь совсем не иметь образования. Основная задача дизайна сделать приложение удобным, интуитивно понятным и простым в использовании. При этом оформление элементов может быть любым, если оно не противоречит тоновому и цветовому наполнению экрана и функциональности. Вы можете эпатировать вкус публики, если считаете себя достаточно способным дизайнером для этого. Или создавать классический строгий стиль. Единственное, что надо помнить: в условиях жесткой конкуренции, разработка фирменного стиля отдельного тура, фирменного стиля вашей студии, или дизайна в фирменном стиле заказчика, без сомнения оправдают себя. Использование стандартного оформления тура добавляет ему минус.

На момент начала разработки дизайна желательно закончить съемку панорам. Особенностью виртуального тура с точки зрения дизайна является то, что практически всегда подложкой для различных элементов служат панорамы. Они могут сильно отличатся между собой по тоновому и цветовому соотношению, по расположению цветных и контрастных пятен, по освещенности и пр. Поэтому дизайн лучше начинать разрабатывать на основе уже имеющихся панорам. Например, чтобы не обнаружить после завершения работы, что ваши элементы просто не видны на цветном ковре лежащем в помещении. Вы можете либо создавать универсальный дизайн, подходящий для всех панорам. Либо создавать дизайн, подходящий для определенного типа панорам (для летних или зимних на улице, для помещения, для сумрачного собора и пр.). Либо делать свой дизайн, подходящий только для данного тура. Нужно помнить, что внутри тура, при переходе между разделами должно соблюдаться стилистическое единство в оформлении разделов. Дизайн начинается с прорисовки экранов. Для начала необходимо схематично, в виде блоков, разместить на экране все элементы управления, включая кнопки навигации, управления панорамой, вызова помощи, текста, видео и пр. Очевидно, что для каждого раздела виртуального тура набор кнопок управления будет различен. Поэтому надо прорисовать отдельно экран для каждого раздела (уровня). Уже на этом этапе, размещая группы элементов на экране, вы стараетесь уравновесить их и друг относительно друга, и относительно панорамы. Вы так же подбираете их оптимальный размер. И занимаетесь общим цвето-тоновым решением.

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

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

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

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

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

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

P.S.

Для начала, давайте обратимся вот к такому примеру:



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


Сразу видно, насколько "тяжелым" делает данная надпись весь дизайн. Правильнее было бы сделать следующим образом (т.е. убрать широкую полосу, видимо отказаться от логотипа и саму надпись сделать небольшим, изящным шрифтом):



Другой пример, с использованием того же стандартного блока элементов управления


Музейный интерьер, в котором вокруг полигонального хотспота, не убрана стандартная обводящая белая обводка. Очень распространенная ошибка. Так и хочется воскликнуть: "Да уберите же вы, наконец, эти белые полигональные хотспоты!" Полигональные хотспоты - это очень удобная вещь, но пора уже научиться их настраивать.

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



Следующий пример.

Панорама с использованием еще одного стандартного блока вывода элементов управления (стандартного - не потому что он включен в стандартный комплект программы, а просто часто у кого встречается). Очень легкого и изящного (респект дизайнеру). Над ним раскрыта "тяжелая" полоса с иконками для перехода между панорамами. При создании полосы допущено сразу две ошибки.


Одна касается дизайна. Посмотрим опять схему. На схеме сразу видно явное нарушение баланса:


Правильнее было бы размещать полосу сбоку, уравновесив левую полосу пятном справа:


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


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

Вот еще один пример виртуального тура, с навигацией по иконкам.


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



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

Алексей Гриф,
Наталия Коварская.

(Авторы статьи занимаются съемкой панорам и разработкой мультимедийных приложений с 1999 года. Создавали виртуальные экскурсии по крупнейшим музеям России. Неоднократные победители Всероссийских и международных конкурсов мультимедийных дисков, так же удостоены специального Приза Академии наук и специального приза журнала "Мир ПК". В 2008 г. диск "Государственный Эрмитаж. Полная 3-мерная экскурсия" на Всероссийском конкурсе мультимедийных приложений был признан лучшим мультимедийном диском России за 13 летнюю историю существования конкурса. В настоящее время, занимаются разработкой приложений для мобильных устройств, преподаванием и съемкой игрового кино.)


Екатерининский дворец

     

Русский музей

     

3d pano - переходите по ссылке и вращайте!




НАШИ МУЛЬТИМЕДИЙНЫЕ ДИСКИ


           

Посмотреть другие диски »»


©1998-2018 Студия Classic