Краткое руководство по разработке дополненной реальности для мобильных устройств (часть 3)

Эта статья является частью 3 продолжающейся серии, посвященной части 1 и части 2 и части 4.

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

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

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

ФОКУС 1: в реальном времени первый

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

ФОКУС 2: Сначала повествование

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

ФОКУС 3: Первый захват

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

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

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

1, 2, 3, 4, 5

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

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

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

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

цвет

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

Позиция

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

Текст

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

Иконки

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

индикаторы

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

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

Overwatch от Blizzard

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

Примеры режимов наложения на темном и светлом фоне в Overwatch

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

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

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

  • GUI (графический интерфейс пользователя): взаимодействие с данными с помощью графических и визуальных индикаторов.
    например, нажмите для отмены
  • HUD (Heads Up Display): Взаимодействие с данными, размещенными поверх неподвижного прозрачного дисплея.
    например, руководство по резервной камере.
  • VUI (голосовой интерфейс пользователя): взаимодействие с данными с помощью голоса или речи. например, прося Сири установить будильник
  • FUI (Future User Interface): будущая интерпретация взаимодействия с данными.
    например, визуальные эффекты Iron Man
  • TUI (Tangible User Interface): данные, на которые влияет взаимодействие с физическим миром.
    например, отслеживание ваших ежедневных шагов с помощью фитбита

В четвертой части я расскажу, что значит проектировать для 3D в AR.
Еще раз спасибо Девон Ко и Брендану Форду за помощь в редактировании и поддержку.