AR-інтерфейси та розширені шари

1) Що таке AR і «розширені шари»

Augmented Reality (AR) - накладення цифрового контенту на реальний світ в реальному часі.
Розширені шари (AR-layers) - логічні рівні поверх камери/сцени: анотації, навігація, 3D-об'єкти, підказки, аналітика, системні статуси. Вони керують тим, що показувати, де в просторі, як взаємодіяти і коли приховувати.

Ключова мета AR-UX: додати сенс середовищу, а не «замінити» реальність. Кожен шар повинен відповідати на запитання користувача: "Що це таке? Де це? Що далі"

2) Де застосовувати AR

Навігація та орієнтація: покажчики напрямків, стрілки на місцевості, підсвічування входів.
Навчання/підказки в контексті: «накладені» інструкції, покроковий монтаж/налаштування.
Вітрини та примірки: візуалізація об'єктів у розмірі 1:1 (меблі, пристрої).
Ігри та квести: якірні об'єкти, місії, лут в локації.
Сервіс/інспекція: виділення зон ризику, чек-листи поверх обладнання.
Маркетинг/івенти: AR-банери, AR-купони в реальному просторі.

Для iGaming кейсів - обережно: використовуйте AR як навігацію та візуальні підказки, а не як вплив на ігровий процес (комплаєнс/відповідальна гра).

3) Таксономія розширених шарів

1. Annotation layer (підписи/ярлики): назви, статуси, ціни/посилання.
2. Guidance layer (навігація): стрілки, треки, «хлібні крихти» в просторі, промені-підказки.
3. Object layer (3D-об'єкти/аватари): моделі з фізикою, якорями, налаштуваннями LOD.
4. Interaction layer (контролі): ручки трансформації, «гарячі точки», радіальні меню.
5. System layer (сервіс): калібрування, трекінг-якість, статус освітлення/плану.
6. Safety layer (безпека): кордону, попередження зіткнень, «no-spawn» зони.

Шари проектуються як композиції: система може тимчасово підвищувати пріоритет Guidance над Annotation (наприклад, при навігації).

4) Просторові основи: якоря, масштаб, оклюзія, світло

• Планарні (підлога, стіл), ізометричні (поверхні), об'єктні (впізнавані форми), гео-якоря (координати).
• Показуйте стан трекінгу: нестійкий → стійкий (зміна прозорості/іконки).
• Масштаб: завжди стартуйте з реального (1:1) або позначайте масштаб явно (лінійка/тінь).
• Оклюзія: переконлива AR вимагає коректного «перекриття» реальними об'єктами (depth/people occlusion). Якщо ні - використовуйте м'які тіні і «підкладку-ауру», щоб об'єкт «сів» в сцену.
• Освітлення і тіні: підлаштовуйтеся під реальне світло, тінь - м'яка і прив'язана до площини.
• Стабільність: уникайте «дребезга» - згладжуйте позу якоря (фільтри, інерція).

5) Взаємодія: жести, погляд, голос, хаптика

Мобайл-AR

Жести: tap (вибір), drag (переміщення по площині), pinch (масштаб), twist (ротейт), long-press (меню).
Помічники: промінь-курсор, «липкі» прив'язки до кутів/ребрам.
Хаптика: легкий «тік» при фіксації якоря/стикуванні.

Гарнітури/спатіальні пристрої

Погляд/курсор + жест «пінч/air tap».
Голос: короткі команди («закріпити», «показати шляхи», «скинути»).
Просторові кнопки: великі, мінімум 44 × 44 px при еквіваленті відстані, з «білбордингом» до користувача.

Правило: на критичних кроках дублюйте введення (жест + кнопка + голос).

6) Інформаційна та візуальна ієрархія

Золоте правило AR-шарів: мінімум UI, максимум контексту.
Читайте сцену: якщо користувач рухається швидко, зменшуйте щільність анотацій і підвищуйте контраст навігації.
Фреймінг: тримайте на екрані не більше 3-5 об'єктів з високим візуальним пріоритетом.
Дистанція читання: великий текст в 2-3 м, дрібний - не ближче 0. 5 м; завжди використовуйте «плашку» для читання.
Переходи: плавні поява/зникнення (120-200 мс), «прилипання» до площини при виході з поля зору.

7) Стани та фідбек AR

Калібрування: "Знайдіть площину... повільно поводьте камерою". Покажіть прогрес/підказки.
Прив'язка/посилення якоря: «Поверхня знайдена», «Якір закріплений».
Помилка трекінгу: «Недостатньо світла/камера закрита/занадто близько». Пропонуйте дії: «Увімкнути підсвічування», «Відступити на 50 см».
Успіх: легка хаптика + зелений індикатор.
Завантаження/стрімінг 3D: скелетон-контейнер/проста проксі-форма, прогрес%.

8) Доступність (A11y) і комфорт

Великі цілі взаємодії, високий контраст плашок і тексту.
Альтернативи введення: кнопка на екрані, голос, спрощені пресети позицій.
Зниження заколисування: плавні рухи камери, обмеження паралаксу, повага'reduce motion'.
Озвучування статусів: «Якір закріплений», «Маршрут оновлено».
Обмеження когнітивного навантаження: не більше однієї складної дії за раз; режим «фокус» (глушить другорядні шари).

9) Локалізація та мультирегіони

Тексти в i18n-ключах; запас довжини на DE/TR.
Одиниці виміру і валюти - локальні (м, см; UAH, EUR).
Варіативні жести і голос: враховуйте локальні команди/вимови.
«Білбординг» ярликів - до користувача, RTL-варіанти вирівнювання.

10) Конфіденційність, безпека, комплаєнс

Камера = персональні дані. Роз'яснюйте мету захоплення, зберігання, TTL.
On-device первинна обробка; маскування осіб/номерів при лозі.
No-record режим: відключення збереження відео/кадрів.
Зони безпеки: не спавніть об'єкти у дверях/сходах; попереджайте про рух поруч.
Для iGaming маркетингу: не розміщуйте AR-елементи в місцях з обмеженнями (закони/вік).

11) Продуктивність і якість

Бюджети сцени: трикутники, текстури (розміри/формат), draw calls; LOD/ impostors.
Освітлення: baked/ fake shadows; уникайте дорогих динамічних джерел.
Мережа: прогресивне завантаження 3D (GLB/DRACO/meshopt), кешування.
Батарея/нагрів: утримуйте FPS стабільно; при перегріванні знизьте частоту оновлення/якість.
Діагностика: індикатор трекінгу, FPS-оверлей (dev), логи якорів.

12) Патерни компонування AR-шарів

12. 1 Навігація в приміщенні

Guidance: стрілки на підлозі, «хлібні крихти» -метки кожні 3-5 м.
Annotation: назва мети, відстань і час.
Safety: попередження про сходи/закриті зони.
Взаємодія: жест «tap» на мітці → подробиці/альтернатива маршруту.

12. 2 Навчальний оверлей (інструкція)

Object: 3D-тінь інструменту/деталі в місці установки.
Guidance: поетапне підсвічування зони (step 1/3).
Interaction: «Далі/Назад», голос «Готово».
Feedback: «Встановлено правильно», хаптика + зелене кільце.

12. 3 Примірка/візуалізація 1:1

Anchor: пошук підлоги/столу → «приземлення» з тінню.
Controls: ручки масштаб/обертання, сітка 10 см, снап до стін.
A11y: кнопка «Скинути позицію», «Зробити світліше».
Perf: низькополі, змінні матеріали.

13) Метрики AR-UX

Anchor success rate (частка стійких якорів), Time-to-anchor.
Placement accuracy (середня помилка позиціонування).
Task success/Time-on-task за сценарієм.
Stability score (дрейф/« дребезг »).
Drop-off на етапах калібрування/завантаження.
Nausea/comfort score (опитування), скарги на заколисування.
Battery drain / session length.

A/B-ідеї: вид підказок при калібруванні, форма стрілок, контраст плашок, тіні vs без тіней.

14) Тестування «в реальному світі»

In-situ: тестуйте там, де буде використовуватися (світло, фактури, шум).
Діапазон пристроїв: слабкі/сильні, різні камери/ФОВ.
Варіативні сцени: полірована поверхня vs шорстка; яскраве сонце vs сутінки.
Edge-кейси: дзеркала/скло, повторювані патерни (килими), вузькі коридори.
Сліпі зони: частковий детект площини, негативні кути, швидка ходьба.

15) Анти-патерни

«UI-захаращення»: ярлики на кожному об'єкті → перевантаження.
Відсутність статусу трекінгу і калібрування (користувач не розуміє, що «тремтить»).
Мікрошрифт на 2-3 м без підкладки (нечитаєме).
Різкі телепорти об'єктів при втраті якоря.
Складні жести без альтернативи кнопкою/голосом.
Відсутність «стоп/приховати» для AR-шарів.
Ігнорування приватності камери і законів локації.

16) Чек-листи

Перед релізом сцени

• Якоріння стабільно; показано статуси трекінгу.
• Текст читаємо на 2-3 м, є плашки/оклюзія/тіні.
• Контролі: tap/drag/pinch/rotate + альтернатива (кнопка/голос).
• Safety-зони і no-spawn області налаштовані.
• A11y: великі цілі, високий контраст, «reduce motion» врахований.
• Локалізація та одиниці вимірювання коректні.
• Perf: LOD, стислі текстури, стабільний FPS.
• Приватність/логи: згода, маскування, TTL.

Діагностика UX

• Time-to-anchor ≤ 5 c в типовій сцені.
• Anchor success ≥ 90% при нормальному освітленні.
• Drop-off на калібруванні ≤ 10%.
• Скарги на заколисування <5%.

17) Міні-гайд по контенту і microcopy для AR

Калібрування: «Плавно поводьте камерою, щоб знайти поверхню».
Прив'язка: "Поверхня знайдена. Торкніться, щоб поставити об'єкт".
Підказка жестів: "Зведіть пальці, щоб зменшити. Поверніть двома пальцями, щоб розвернути".
Навігація: "Ідіть до мітки. Залишилося 12 м".
Помилка: "Недостатньо світла. Увімкніть підсвічування або підійдіть до вікна".
Вихід: «Приховати AR-шари »/« Повернутися до камери».

18) Дизайн-система для AR (розширення стандартної DS)

• `scale. minReadableDistance`, `label. backplate. opacity`, `shadow. softness`, `anchor. snapThreshold`, `occlusion. enabled`.
• Компоненти: ARBadge, ARLabel, ARHandle, ARIndicator, ARPathNode.
• Патерни: ARPlacement, ARNavigation, ARInstruction.
• Документація: гайди по калібруванню, жестам, статусам трекінгу, приклади microcopy.

19) Приклади «до/після»

Навігація без статусів → зі статусами

До: стрілки «тремтять», користувач втрачається.
Після: індикатор «Поганий трекінг» + порада «сповільнитися», стрілки зменшують щільність, з'являється лінія-стежка.

Примірка без тіні → з тінню і сіткою

До: об'єкт «ширяє», незрозумілий масштаб.
Після: м'яка тінь, сітка 10 см, снап до стіни → реалізм і впевненість.

Перевантажений текст → читані плашки

До: 6 анотацій різного кольору на 2 м.
Після: 2-3 ключові плашки з фоном та іконкою, решта - за запитом.

20) Швидкий старт (план впровадження)

1. Сценарій → шар: визначте, що вирішує AR (навігація? інструкція? примірка?).
2. Прототип (mid-fi → AR-proto): фальш-3D/відео-оверлей → рання перевірка.
3. Модель/контент: оптимізуйте 3D (полігони/текстури/LOD).
4. Калібрування/якоря: стабільність перш «краси».
5. Польові тести: світло/поверхні/рух.
6. А11у/безпека/приватність: чек-листи і політика.
7. Метрики та телеметрія: якоря, стабільність, успіх завдань.
8. Ітерації/роллаут: канарний запуск по пристроях і сценах.

Підсумкова шпаргалка

Контекст перш UI: показуйте тільки потрібні шари.
Стабільні якоря, реальний масштаб, тіні і оклюзія - основа довіри.
Мультиввод: жести + кнопка + голос, явні статуси.
Комфорт і A11y: великі цілі, високий контраст, менше руху.
Приватність камери і safety-зони - за замовчуванням.
Міряйте якоря і стабільність, тестуйте в реальних умовах, оптимізуйте контент.

Потрібно - підготую AR-патерни під ваші сценарії (навігація в приміщенні, навчальні оверлеї, примірка 1:1) з microcopy, AR-tokens і чек-листами для вашої дизайн-системи.