Пошаговая инструкция: создание первого VR-интерфейса за пять минут

Сооснователи дизайн-студии Kickpush Сэм Эпплби и Алекс Деруэтт рассказали, как применить опыт проектирования традиционных приложений к дизайну интерфейсов для виртуальной реальности.

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

Классификация VR-приложений

С точки зрения дизайнера каждое VR-приложение состоит из двух основных компонентов: среды и интерфейса.

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

Интерфейс — это набор элементов, с которыми пользователь взаимодействует, чтобы ориентироваться в среде и управлять своим опытом. В зависимости от сложности этих двух компонентов все VR-приложения можно расположить в двумерной системе координат.

В левом верхнем углу находятся симуляторы, такие как вышеупомянутый опыт катания на американских горках. У них очень развитая среда, но совершенно отсутствует интерфейс. Вас просто запирают в кабинке на всё время поездки.

В противоположном квадранте находятся приложения с развитым интерфейсом, но с минимальной или напрочь отсутствующей средой. В качестве примера можно привести домашний виртуальный экран Samsung Gear.

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

Свой первый VR-интерфейс мы создали для приложения Economist. Мы работали в сотрудничестве со студией Visualise. Наша команда разработала дизайн, а Visualise отвечала за контент и разработку приложения. Сегодня приложение Economist для Gear VR можно загрузить на сайте Oculus.

Процесс проектирования VR-интерфейса

Если рабочие процессы разработки мобильных приложений чётко осознаются большинством дизайнеров, то с процессами проектирования VR-интерфейсов ещё предстоит разобраться. Мы занялись этим, как только приступили к работе над нашим первым проектом.

Традиционные рабочие процессы на новой территории

Едва надев гарнитуру Samsung Gear VR, мы тут же отметили сходство её базовой динамики с традиционными мобильными приложениями: интерфейс помогает пользователям передвигаться по страницам. Из-за этого сходства отлаженные рабочие процессы мобильных приложений вполне можно использовать при разработке VR-интерфейсов. Пройдёмся по ним по порядку.

Прототипы

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

Визуальный дизайн

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

Карта

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

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

Настройка

Размер холста

Чем проще проблема, тем труднее за неё взяться. Когда смотришь на 360-градусную область, трудно даже сообразить, с чего начать. Как выяснилось, UX- и UI-дизайнерам легче сосредоточиться на конкретном участке общего пространства.

Чтобы применить рабочий процесс для мобильного приложения к разработке VR UI, нужно определиться с размерами «холста» (канваса). Для мобильных приложений этот размер определяется габаритами устройств: 1334 ? 750 пикселей для iPhone и примерно 1280 ? 720 пикселей для Android. А на определение подходящего размера для VR у нас ушло несколько недель.

На картинке снизу видно, как выглядит 360-градусная среда, если её развернуть. Такое представление называется равнопромежуточной проекцией. В виртуальной 3D-среде эти проекции располагаются вокруг сферы, моделируя реальный мир.

Полный размер проекции составляет 360 градусов в ширину и 180 градусов в высоту. Мы можем использовать это, чтобы определить пиксельный шаг: 3600 ? 1800.

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

Опираясь на исследование Майка Элгара об удобных зонах просмотра, мы можем отделить тот участок, где интерфейс будет иметь смысл. Область нашего интереса представляет собой одну девятую 360-градусной среды. Она размещается в центре этого равнопромежуточного изображения и занимает 1200 ? 600 пикселей.

Тестирование

Причина для того, чтобы использовать две области для одного экрана, кроется в удобстве тестирования. Выделение «UI View» помогает фокусироваться на самом интерфейсе и упрощает процесс разработки. «360 View» используется для предварительного знакомства с интерфейсом в VR-среде.

Чтобы получить реальное представление об искажении пропорций, нужно протестировать интерфейс с помощью VR-гарнитуры.

Инструменты

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

• Sketch.? Мы будем использовать Sketch для разработки наших интерфейсов и пользовательских сценариев. Если у вас его нет, можете загрузить пробную версию. Нам нравится работать с этой программой, но если вы предпочитаете Photoshop или что-то другое, ничего страшного.
• GoPro VR Player. Это программа для 360-градусного просмотра контента. Компания GoPro поставляет её бесплатно. Мы используем её для просмотра и тестирования наших разработок в контексте.
• Oculus Rift. Загрузив Oculus Rift в GoPro VR Player, мы можем тестировать дизайн в контексте.

Процесс проектирования шаг за шагом

Этот раздел представляет собой краткое руководство по разработке VR-интерфейса. Вместе мы за пять минут можем собрать простенький интерфейс.

Загрузите набор ассетов с отдельными элементами UI и фоновым изображением. Можете использовать собственные ассеты.

Установите «360 View»

Начнём с самого начала. Создадим область с 360-градусным обзором. Откройте в Sketch новый документ и создайте монтажную область 3600 ? 1800 пикселей.

Импортируйте файл под именем background.jpg и поместите его в середину этой области. Если вы используете свой собственный равнопромежуточный фон, убедитесь, что его пропорции — 2:1, а затем измените размер на 3600 ? 1800 пикселей.

Установите монтажную область

Как отмечено выше, «UI View» — это краткая версия «360 View». Она нужна, чтобы мы могли сфокусироваться на VR-интерфейсе. Создайте новую область 1200 ? 600 пикселей рядом с предыдущей. Затем скопируйте фон, который мы только что добавили к нашей области «360 View», и поместите его в центр. Не меняйте его. Нам нужно сохранить эту обрезанную версию фона.

Создайте интерфейс

Мы будем создавать интерфейс на холсте «UI View». Чтобы не усложнять задачу, выстроим в ряд несколько карточек-плиток. Можно просто взять файл tile.png в пакете ассетов и перетащить его в центр области «UI View».

Повторите ваши действия, чтобы получить ряд из трёх плиток. После этого возьмите kickpush-logo.png из пакета ассетов и поместите его между плитками.

Соедините и экспортируйте ваши холсты

Теперь немного повеселимся. Убедитесь, что в списке слоёв область «UI View» находится над «360 View». Поместите панель «UI View» в середину панели «360 View». Экспортируйте панель «360 View» в формат PNG — тогда «UI View» окажется сверху.

Протестируйте в VR

Откройте GoPro VR Player и перетащите туда экспортированную вами область «360 View» в формате PNG. Мышкой переместите это изображение на место превью 360-градусной среды. Готово.

Если у вас установлен Oculus Rift, GoPro VR Player должен его обнаружить, и тогда вы сможете сделать превью изображения с помощью вашего VR-устройства. Возможно, придётся повозиться с настройками экрана в macOS, это зависит от вашей конфигурации.

На что нужно обратить внимание

Низкое разрешение

Разрешение в VR-гарнитуре довольно плохое. Впрочем, это не совсем правда: оно такое же, как на вашем телефоне. Если вы поднесёте его на расстояние пяти сантиметров от ваших глаз, экран будет выглядеть размытым. Чтобы получить чёткое VR-изображение, для каждого глаза нужен экран размером 8К, то есть 15360 ? 7680 пикселей. Пока мы от этого далеки.

Читабельность текста

Из-за слабого разрешения экрана все изначально чёткие UI-элементы будут казаться зернистыми. Это затрудняет чтение текста и делает прямые линии ступенчатыми. Поэтому постарайтесь избегать использования больших текстовых блоков и UI-элементов, содержащих мелкие детали.

Последние штрихи

Карта

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

Motion-дизайн

Создать красивый пользовательский интерфейс UI гораздо легче, чем анимировать его. Попробуем сделать это с помощью двумерной перспективы, наших дизайнов в Sketch, а также Adobe After Effects и Principle. Хотя это ещё не трёхмерный результат, его можно использовать в качестве руководства для команды разработчиков. Да и клиентам будет легче понять наше видение на ранних этапах процесса.

Вы, наверное, думаете: «Ну да, это всё понятно, но ведь VR-приложения могут быть гораздо сложнее». Это действительно так. Но давайте подумаем о том, насколько далеко мы можем зайти, проектируя UX и UI для этой новой среды.

Как далеко могут зайти VR-интерфейсы

Заманчиво, но нереально

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

Давайте представим, что мы делаем приложение для очень крутого турагентства. Чтобы продажа тура проходила наиболее естественным образом, вы просите пользователя надеть гарнитуру и «переместиться» в ваш фешенебельный офис в Челси.

Теперь пользователю нужно выбрать то место, куда он хочет поехать. Он может взять журнал и перелистывать его, пока не найдёт самое привлекательное предложение. Или на вашем виртуальном столе будет собрана коллекция необычных предметов, и взяв один из них в руки, пользователь тут же «окажется» в связанной с ним стране.

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

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

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

?Да здравствует революция

Обычно новый формат продвигается ранними адептами — творческими людьми, новаторами нашего мира. С течением времени, по мере обучения и инвестиций этот формат становится доступным для более широкого круга потенциальных пользователей. Когда VR-гарнитуры станут более распространёнными, компании начнут изыскивать возможности интегрировать VR в свои технологии вовлечения покупателей.

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

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru.