Создайте своё приложение для очков искусственного интеллекта (AI Glasses) с помощью фреймворка Jetpack Compose Glimmer UI для дополненной реальности, работающей с очками искусственного интеллекта. Jetpack Compose Glimmer — один из первых фреймворков пользовательского интерфейса, оптимизированных для прозрачных дисплеев и форм-фактора очков искусственного интеллекта.
1. Определите пути пользователя
Сосредоточьтесь на критически важных пользовательских взаимодействиях (CUJ), совместимых с принципами визуального восприятия, характерными для очков с искусственным интеллектом. Это можно реализовать с помощью минимального пользовательского интерфейса или звука, позволяя пользователю оставаться в контексте происходящего. Чтобы найти возможности, рассмотрите возможность создания точек входа в вашем текущем приложении, которые выиграют от использования очков.
Например, пользователь может воспользоваться преимуществами пошаговых пешеходных инструкций, которые помогут ему добраться до места назначения, не отвлекаясь от дороги.
Выбранный пользователем маршрут должен также учитывать принципы безопасности, комфорта и производительности. Например, не выбирайте задачи, которые требуют использования камеры в течение неоправданно длительного времени или нарушают конфиденциальность.
Узнайте об основополагающих принципах .
Делать
Не
2. Свернуть и перевести
Для пользовательского интерфейса режима отображения начните с CUJ из вашего основного приложения:
Оптимизируйте макеты для фокусировки : макеты отдают приоритет важной информации, сокращая количество действий и визуальных элементов для сохранения фокусировки пользователя.
Используйте глубину для иерархии : глубина используется для указания приоритета элементов.
Проектирование снизу вверх : при создании макетов начинайте снизу, располагая компоненты по направлению вверх.
Перевод визуальных компонентов : для отображения очков ИИ используйте компоненты Jetpack Compose Glimmer и шаблоны макетов.
Подробнее о компонентах и представлении приложения читайте здесь.
Оптимизированные компоненты
B. Контур и выделение : цвет контура оптимизирован для обеспечения контрастности. Использование выделения обеспечивает визуальную выразительность и может использоваться для обозначения некоторых типов ввода.
C. Форма : используется более плавная форма, что улучшает обзорность за счёт уменьшения остроты углов и повышения комфорта. Цвет на поверхности: цвет содержимого на поверхности — белый, что обеспечивает максимальную контрастность на фоне окружающего мира.
D. Типографика : типографская шкала Glimmer использует небольшой набор усовершенствованных стилей основного текста и заголовка, которые оптимизируют кернинг, размер и начертание для оптимальной читаемости и разборчивости.
E. Иконография : использование округлых материальных символов согласуется с округлой шкалой типографики.
3. Аудиопоток и подсказки
Создайте диалог с помощью аудио. Хотя аудио должно занимать значительную часть вашего приложения AI Glasses, не перегружая пользователя, необходимо также учитывать возможность использования только аудио на некоторых устройствах. Это можно сделать, создав схему взаимодействия, описывающую только аудио. Отмечайте взаимодействия и обратную связь с помощью звуковых подсказок и диалогов.
4. Элементы управления вводом карты
Обязательно определите, какие действия нужно выполнить для управления устройством и жестов. Можно начать с преобразования базовых взаимодействий с приложением, таких как касание, в касания трекпада.
5. Рассмотрите SysUI
Учитывайте другие системные интерфейсы.
Ваше приложение будет отображаться на главном экране и в других системных функциях, например, в уведомлениях (если они используются). Они могут отображаться на системной панели.
6. Дополнительные штаты
Ваше приложение будет сталкиваться с различными ситуациями на очках с искусственным интеллектом, такими как проблемы с подключением или разрешениями. Учитывайте эти различные состояния как в вашем основном приложении, так и в приложении для очков.
Обязательно запросите разрешения на использование функций устройства.
Помните, что вам необходимо учитывать эти факторы с помощью визуального интерфейса и звука. Например, предоставьте звуковую обратную связь, чтобы сообщить пользователю о необходимости пройти процедуру получения разрешения на мобильном устройстве или озвучить ошибки.
