reticle for augmented reality app

reticle for wiARframe

Пользуясь софтом для создания сцен и объектов дополненной реальности (AR), заметил, что отсутствует важный элемент интерфейса — прицел (reticle).
Решил помочь разработчику :)


Задача: сделать прицел для приложения AR.

reticle for augmented reality app — Изображение №1 — Интерфейсы, Анимация на Dprofile

Первый подход к снаряду:

1. У прицела есть много состояний — базовое, готовность к взаимодействию, вращение объекта, его перемещение, масштабирование, короткая (1секунда)и долгая (3 секунды) фокусировки.
2. Прицел-кольцо отлично смотрится, чудесная идея, его можно при необходимости заполнять заливкой.
3. Большой прицел-кольцо легко будет заметен на объектах, не надо мельчить.
4. Надо вводить дополнительные элементы, стрелки и обводки, однозначно подсказывающие пользователю, что можно делать с объектом.
5. Нет, крупный прицел будет смотреться не очень, надо попробовать помельче.
6. Проблему контраста прицела на разном фоне буду решать его прозрачностью.
7. А может быть, добавить цветовое кодирование состояний прицела и сделать жизнь юзера поярче?
8. Как решать проблему перегруженности интерфейса при наведении на множество объектов с расстояния, к примеру, когда зашел в комнату, где объектов — десятки?


Первый подход оказался весьма плодотворным на разный дизайн прицелов и варианты его взаимодействия с объектами.

reticle for augmented reality app — Изображение №2 — Интерфейсы, Анимация на Dprofile

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

reticle for augmented reality app — Изображение №3 — Интерфейсы, Анимация на Dprofile

Параллельно рождались страшные варианты трекинга контуров объектов и ужас-ужас! какие-то обводки со штриховками. Посмотрите первое видео или следующее.

Третий подход:

1. Проработал и принял за основной вариант новый дизайн базового состояние  — прицел превращается в точку. Всегда контрастна, всегда видима.
2. Полупрозрачное кольцо вокруг прицела — осталось, как состояние готовности к взаимодействию.
3. Очень важное состояние — фокусировка в течении трех секунд — реализовал как прогресс-бар по окружности, подсказывает юзеру, что какое-либо взаимодействие произойдет уже вот-вот.
4. Состояние фокусировки, для разгрузки интерфейса предложил включать при подходе к объекту на расстояние один метр или ближе.
5. Протестировал плагином Sketch to VR разные размеры прицелов и элементов, определил оптимальные: точка — 8 px, кольцо — 24 px.

В итоге получилось три состояние прицела вместо семи, размеры и анимация прицелом протестировали на реальных пользователях — все отлично.


Будем собирать больше фидбека после окончательного внедрения в приложение и дорабатывать. А может быть и не придётся :)

reticle for augmented reality app — Изображение №4 — Интерфейсы, Анимация на Dprofile

Оценить

Добавить в коллекции...

От автора