UXPUB

UXPUB - сообщество из 2,963 дизайнеров и творческих людей

Место, где дизайнеры делятся опытом

Создать аккаунт Войти
Cover image for Руководство по проектированию дополненной реальности на мобильных устройствах (Часть 3)
Редакция
Редакция

Опубликовано • Обновлено

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

#ux

Эта третья публикация в серии статей, не пропустите часть 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

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

Положение

[caption id="attachment_42751" align="aligncenter" width="724"] Snapchat, Snow и Instagram[/caption]

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

Текст

iOS в портретном режиме, стикер местоположения Instagram, статистика Pokemon Go iOS в портретном режиме, стикер местоположения Instagram, статистика Pokemon Go

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

Иконки

Иконки Snapchat заполнены, обведены и также расположены внутри непрозрачного контейнера Иконки Snapchat заполнены, обведены и также расположены внутри непрозрачного контейнера

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

Индикаторы

[caption id="attachment_42754" align="aligncenter" width="400"] Приложение Volskwagen ссылается на сам автомобиль, House Craft сочетает в себе гизмо с индикатором[/caption]

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

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

[caption id="attachment_42756" align="aligncenter" width="675"] Overwatch от Blizzard[/caption] Интерфейс видеоигры имеет много общего с AR: обе среды имеют дело с активной, управляемой пользователем камерой. ​​Интерфейсы видеоигр являются динамичными и постоянно меняются, чтобы адаптироваться к потребностям пользователей с течением времени. Они также активно используют иконки и графические элементы, чтобы предупредить пользователя и сосредоточиться на окружающей среде. [caption id="attachment_42757" align="aligncenter" width="1644"] Примеры режимов смешивания, использующих темный и светлый фоны в Overwatch[/caption] Беря пример с видеоигр, дизайнеры могут рассматривать возможность добавления режимов смешивания к своим графическим элементам. Этот метод позволит пользователю по-прежнему видеть часть фона без полного перекрытия представления. Режимы смешивания могут также уменьшить визуальный вес фиксированного элемента. Примеры режимов смешивания

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

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

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

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


Перевод статьи Bushra

Обсуждение (0)