Эта третья публикация в серии статей, не пропустите часть 1 и часть 2

AR управляется поведением и взаимодействием

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

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

Определение основного фокуса опыта

Определение основного фокуса опыта

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

Пример: приложение Ikea Place

При первом опыте в реальном времени успех зависит от взаимодействия пользователя с 2D или 3D контентом.
Этот тип опыта наиболее распространен в коммерческих приложениях. Пользователям часто необходимо предварительно просмотреть продукт, чтобы лучше понять его. Они могут размещать, манипулировать или просматривать контент

Фокус 2: Первый опыт повествования

Пример: Pokemon Go

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

Фокус 3: Capture First

Пример: Instagram

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

Проектирование

Дизайнеры должны создавать элементы, которые не зависят от окружающей среды и работают со всеми оттенками и уровнями контраста.

Проектирование AR

1, 2, 3, 4, 5

В AR мы, по сути, располагаем данные в режиме съемки камеры. Мы не контролируем то, что показывает камера, и должны проектироваться соответственно.
Хорошей практикой является предварительный просмотр и тестирование интерфейса с различными фоновыми изображениям и видео по мере разработки дизайна.

Тень может гарантировать, что светлые элементы интерфейса не потеряются при столкновении с чем-то ярким
Тень может гарантировать, что светлые элементы интерфейса не потеряются при столкновении с чем-то ярким

Текущие наблюдения

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

Цвет

Градиентный заголовок в Instagram, цвет бренда IKEA в качестве цвета акцента, цвет предупреждения Pokemon GO
Градиентный заголовок в Instagram, цвет бренда IKEA в качестве цвета акцента, цвет предупреждения Pokemon GO
  • Белый цвет — наиболее распространенный цвет текста, иконок и направляющих.
  • Некоторые приложения имеют дополнительные виньетки или градиенты в верхнем и нижнем колонтитулах, чтобы сделать фиксированные элементы четче.
  • Цвета брендов используются экономно или вообще не отображаются в режиме камеры.
  • Цвета системы за пределами цветов бренда могут использоваться для указания на ошибки, предупреждения или завершенные состояния. Например, красное предупреждение при слишком близком приближении к объекту.
  • Непрозрачные цвета обычно зарезервированы для кнопок призыва к действию, таких как триггеры, которые могут быть скрыты рукой пользователя.

Положение

Руководство по проектированию дополненной реальности на мобильных устройствах (Часть 3)
Snapchat, Snow и Instagram
  • Фиксированные элементы обычно располагаются сверху и / или снизу экрана. Это позволяет пользователю сфокусироваться на центре камеры и композиции.
  • Дополнительные подсказки и элементы, которые не фокусируются на содержании, остаются ближе к низу. Например, карусели и дополнительные опции.

Текст

iOS в портретном режиме, стикер местоположения Instagram, статистика Pokemon Go
iOS в портретном режиме, стикер местоположения Instagram, статистика Pokemon Go
  • Текст обычно используется как подпись или ярлык, написанный шрифтом без засечек, поскольку его легче читать.
  • Текст чаще всего белого или желтого цвета, если только это не цвет фона.
  • Текст обычно имеет непрозрачный или полупрозрачный контейнер для улучшения удобочитаемости.
  • Текст без контейнеров обрабатывается мягкими тенями и / или тонким штрихом.

Иконки

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

Индикаторы

Руководство по проектированию дополненной реальности на мобильных устройствах (Часть 3)

Руководство по проектированию дополненной реальности на мобильных устройствах (Часть 3)
Приложение Volskwagen ссылается на сам автомобиль, House Craft сочетает в себе гизмо с индикатором

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

Режимы смешивания

Руководство по проектированию дополненной реальности на мобильных устройствах (Часть 3)
Overwatch от Blizzard
Интерфейс видеоигры имеет много общего с AR: обе среды имеют дело с активной, управляемой пользователем камерой.
​​Интерфейсы видеоигр являются динамичными и постоянно меняются, чтобы адаптироваться к потребностям пользователей с течением времени. Они также активно используют иконки и графические элементы, чтобы предупредить пользователя и сосредоточиться на окружающей среде.
Руководство по проектированию дополненной реальности на мобильных устройствах (Часть 3)
Примеры режимов смешивания, использующих темный и светлый фоны в Overwatch
Беря пример с видеоигр, дизайнеры могут рассматривать возможность добавления режимов смешивания к своим графическим элементам. Этот метод позволит пользователю по-прежнему видеть часть фона без полного перекрытия представления. Режимы смешивания могут также уменьшить визуальный вес фиксированного элемента.

Примеры режимов смешивания

Типы пользовательских интерфейсов дополненной реальности

AR может проявляться в разных интерфейсах. Ниже перечислены общие аббревиатуры для некоторых из них:
Типы пользовательских интерфейсов дополненной реальности

  • GUI (графический интерфейс пользователя): взаимодействие с данными через графические и визуальные индикаторы.
    Например, нажатие для отмены
  • HUD (Heads Up Display): взаимодействие с данными, расположенными на фиксированном прозрачном дисплее.
    Например, направляющие на камере заднего вида.
  • VUI (голосовой интерфейс пользователя): взаимодействие с данными посредством голоса или речи. Например, просьба Siri установить будильник
  • FUI (интерфейс будущего): Будущее интерпретации взаимодействия с данными.
    Например, интерфейс костюма Железного человека
  • TUI (Материальный интерфейс пользователя): Воздействие на данные посредством взаимодействия с физическим миром.
    Например, трекинг пройденного расстояния с помощью Fitbit

В четвертой части я объясню, что значит проектировать для 3D в дополненной реальности.
Спасибо Devon Ko и Brendan Ford за редактирование и поддержку.