reticle for wiARframe
Пользуясь софтом для создания сцен и объектов дополненной реальности (AR), заметил, что отсутствует важный элемент интерфейса — прицел (reticle).
Решил помочь разработчику :)
Решил помочь разработчику :)
Задача: сделать прицел для приложения AR.
Первый подход к снаряду:
1. У прицела есть много состояний — базовое, готовность к взаимодействию, вращение объекта, его перемещение, масштабирование, короткая (1секунда)и долгая (3 секунды) фокусировки.
2. Прицел-кольцо отлично смотрится, чудесная идея, его можно при необходимости заполнять заливкой.
3. Большой прицел-кольцо легко будет заметен на объектах, не надо мельчить.
4. Надо вводить дополнительные элементы, стрелки и обводки, однозначно подсказывающие пользователю, что можно делать с объектом.
5. Нет, крупный прицел будет смотреться не очень, надо попробовать помельче.
6. Проблему контраста прицела на разном фоне буду решать его прозрачностью.
7. А может быть, добавить цветовое кодирование состояний прицела и сделать жизнь юзера поярче?
8. Как решать проблему перегруженности интерфейса при наведении на множество объектов с расстояния, к примеру, когда зашел в комнату, где объектов — десятки?
2. Прицел-кольцо отлично смотрится, чудесная идея, его можно при необходимости заполнять заливкой.
3. Большой прицел-кольцо легко будет заметен на объектах, не надо мельчить.
4. Надо вводить дополнительные элементы, стрелки и обводки, однозначно подсказывающие пользователю, что можно делать с объектом.
5. Нет, крупный прицел будет смотреться не очень, надо попробовать помельче.
6. Проблему контраста прицела на разном фоне буду решать его прозрачностью.
7. А может быть, добавить цветовое кодирование состояний прицела и сделать жизнь юзера поярче?
8. Как решать проблему перегруженности интерфейса при наведении на множество объектов с расстояния, к примеру, когда зашел в комнату, где объектов — десятки?
Первый подход оказался весьма плодотворным на разный дизайн прицелов и варианты его взаимодействия с объектами.
Второй подход: упростить все, что не является кольцом и добавить прицелам элементы, родом из прошлого века.
Очевидно, что второй подход оказался неудачным :)
Очевидно, что второй подход оказался неудачным :)
Параллельно рождались страшные варианты трекинга контуров объектов и ужас-ужас! какие-то обводки со штриховками. Посмотрите первое видео или следующее.
Третий подход:
1. Проработал и принял за основной вариант новый дизайн базового состояние — прицел превращается в точку. Всегда контрастна, всегда видима.
2. Полупрозрачное кольцо вокруг прицела — осталось, как состояние готовности к взаимодействию.
3. Очень важное состояние — фокусировка в течении трех секунд — реализовал как прогресс-бар по окружности, подсказывает юзеру, что какое-либо взаимодействие произойдет уже вот-вот.
4. Состояние фокусировки, для разгрузки интерфейса предложил включать при подходе к объекту на расстояние один метр или ближе.
5. Протестировал плагином Sketch to VR разные размеры прицелов и элементов, определил оптимальные: точка — 8 px, кольцо — 24 px.
2. Полупрозрачное кольцо вокруг прицела — осталось, как состояние готовности к взаимодействию.
3. Очень важное состояние — фокусировка в течении трех секунд — реализовал как прогресс-бар по окружности, подсказывает юзеру, что какое-либо взаимодействие произойдет уже вот-вот.
4. Состояние фокусировки, для разгрузки интерфейса предложил включать при подходе к объекту на расстояние один метр или ближе.
5. Протестировал плагином Sketch to VR разные размеры прицелов и элементов, определил оптимальные: точка — 8 px, кольцо — 24 px.
В итоге получилось три состояние прицела вместо семи, размеры и анимация прицелом протестировали на реальных пользователях — все отлично.
Будем собирать больше фидбека после окончательного внедрения в приложение и дорабатывать. А может быть и не придётся :)
