Если у вас есть приложение для Android и вы хотите сохранить его визуальный стиль, вы можете сохранить этот язык дизайна в Android XR. Для новых приложений или редизайнов рассмотрите возможность следования рекомендациям Material Design в отношении размера пользовательского интерфейса, доступности, типографики, цветовых схем и компонентов.
Мобильные 2D-приложения или приложения Android с большим экраном могут использовать возможности Full Space с минимальными дополнительными усилиями по разработке. Для повышения эффективности XR рассмотрите возможность пространственного распределения панелей и создания пространственного пользовательского интерфейса . Для более захватывающего взаимодействия с пользователем рассмотрите возможность добавления 3D-моделей и сред .
Если у вас есть или вы создаете приложение Unity, Open XR или WebXR , вы можете использовать любой язык дизайна по вашему выбору. Рекомендации по дизайну, предоставленные Material Design, помогут вам применить цвета, интервалы, масштаб, кнопки и типографику.
Как протестировать визуальный дизайн вашего приложения
Тестирование визуального дизайна вашего приложения имеет решающее значение для обеспечения комфортного и доступного пользовательского опыта. Вот как можно тестировать на разных платформах и средах XR.
Используйте эмуляторы, симуляторы и реальные устройства
- Если вы разрабатываете приложение для Android, протестируйте его на эмуляторе Android XR . Это поможет вам выявить потенциальные проблемы и быстро выполнить итерацию без физического устройства.
Контрольный список тестирования визуального дизайна
- Проверьте любые движения и анимацию, чтобы убедиться, что они не вызывают укачивания. Проверьте плавность переходов, стабильную частоту кадров и предсказуемость движения.
- Попробуйте сквозной режим в реальных условиях, чтобы виртуальные элементы сочетались с физическим окружением.
- Протестируйте свое приложение в различных условиях освещения, включая яркие и темные помещения.
- Проверьте читаемость текста на разных расстояниях и под разными углами.
- Оцените цветовую гамму на доступность и комфорт.
Соберите отзывы пользователей
Проведите пользовательское тестирование, чтобы выявить области, требующие улучшения. Привлекайте пользователей с разным уровнем опыта XR и зрительными способностями для получения комплексной перспективы.
Цели в Android XR
В приложении XR целью является та область, на которую можно нажимать или указывать, с которой взаимодействуют пользователи. Мишени большего размера повышают точность, комфорт и удобство использования. Чтобы сделать ваше приложение доступным, следуйте целевым рекомендациям Material Design . Они будут работать с приложениями Android, Unity, OpenXR и WebXR. Если ваше приложение уже соответствует рекомендациям Material Design, ваши целевые размеры соответствуют минимальным, хотя оптимальным является 56dp.
Все интерактивные элементы пользовательского интерфейса должны учитывать:
- Рекомендуемый целевой размер: 56 x 56 dp или больше.
- Визуальные возможности: 48 x 48 dp или больше.
- Смещение между целевой и визуальной доступностью: 4dp.
- Для точного взаимодействия цели указателей разных элементов пользовательского интерфейса не должны перекрываться.
Обязательно добавьте состояния наведения
Для повышения доступности добавьте состояния наведения и фокуса в дополнение к базовым интерактивным состояниям для интерактивных компонентов. Состояния наведения могут быть полезны для всех и особенно важны для пользователей, которые полагаются на ввод указателя для выбора элементов пользовательского интерфейса.
Состояния наведения играют важную роль в обеспечении функции отслеживания глаз в системе. Однако, если отслеживание взгляда включено, состояния наведения недоступны приложению, чтобы защитить конфиденциальность пользователя и предотвратить обмен данными. Система будет отображать состояние выделения, видимое только пользователю, чтобы указать, с какими компонентами пользовательского интерфейса можно взаимодействовать.
Расстояние между целями
Material Design рекомендует расстояние не менее 8 dp между целями, включая кнопки. Такое расстояние гарантирует, что пользователи смогут легко различать интерактивные элементы и избегать случайного выбора.
Конкретное расстояние между кнопками может варьироваться в зависимости от их контекста и размера. Некоторые факторы, которые следует учитывать:
- Размер кнопки . Для более крупных кнопок может потребоваться больше места между ними, чтобы обеспечить четкость изображения.
- Группировка кнопок . Кнопки, которые функционально тесно связаны, могут быть сгруппированы ближе друг к другу, тогда как несвязанные кнопки должны иметь большее разделение.
- Макет : общий макет экрана может влиять на расстояние между кнопками. Например, кнопки на панели инструментов могут быть расположены ближе, чем кнопки в диалоговом окне.
Размер и масштаб панели
Android XR создан, чтобы сделать ваше приложение удобным, разборчивым и доступным для широкой аудитории. Для оптимальной работы Android XR использует значение 0,868 dp-to-dmm.
Если вы используете панели, ваше приложение XR, скорее всего, будет находиться дальше от пользователя, чем физический экран. Предположим, что пользователь носит гарнитуру. Для оптимального комфорта разместите основной контент в поле зрения 41°, чтобы пользователям не приходилось двигать головой для взаимодействия.
Рекомендации
- Панели имеют закругленные углы 32dp. Вы можете переопределить это значение по умолчанию.
Поведение глубины панели
- Домашнее пространство : приложения запускаются на расстоянии 1,75 метра от пользователя, и разработчики не могут это изменить.
- Полное пространство : по умолчанию приложения запускаются в том же положении, в котором они находились в домашнем пространстве. Вы можете использовать пространственную логику для размещения панелей в зависимости от положения пользователя, хотя мы рекомендуем расстояние запуска 1,75 метра.
Когда приложение находится на расстоянии 1,75 метра от пользователя :
- 1024dp воспринимается как 1556,24 миллиметра.
- 720dp воспринимается как 1093,66 миллиметра
- 1 метр в физической реальности = 1 метр в XR
Кнопки и значки
Если у вас есть существующее приложение для Android, вам не нужно разрабатывать специальные компоненты для Android XR. Следуйте рекомендациям Material Design для кнопок и значков . Если у вас есть приложение Unity, OpenXR или WebXR, вы можете оставить свои кнопки и значки как есть или вдохновиться Material Design.
Если вы решите создать свои собственные кнопки или значки, выберите простые формы, чистые линии, базовые формы и ограниченную цветовую палитру. Избегайте слишком детализированных дизайнов. Сделайте их масштабируемыми и разборчивыми при различных разрешениях и расстояниях просмотра. В целях доступности обеспечьте достаточный контраст между компонентом и его фоном и предоставьте текстовые описания или подсказки для пользователей с программами чтения с экрана или другими вспомогательными технологиями.
Цвета
Android XR использует цветовую систему Material Design, чтобы обеспечить единообразный и визуально привлекательный интерфейс. Чтобы создать иммерсивный визуальный стиль, адаптированный к XR, проектируйте с достаточным контрастом, выбирайте сбалансированную палитру, используйте цвета, доступные для людей с нарушениями цветового зрения, и избегайте резких комбинаций, которые могут вызвать напряжение глаз или дезориентацию.
Темные и светлые темы в XR
Используйте темные и светлые темы, как в мобильном приложении Android. Пользователи могут переключаться между темными и светлыми темами в Android XR, выбирая визуальный стиль, который лучше всего соответствует их индивидуальным предпочтениям.
Узнайте больше о цветовых схемах Material Design .
XR-типография
Разборчивость шрифта имеет решающее значение для комфортного взаимодействия с пользователем в XR. Мы рекомендуем использовать параметры масштаба шрифта с размером шрифта 14 dp или больше и толщиной шрифта нормальной или выше для улучшения разборчивости.
Чтобы создать простое в использовании приложение, рассмотрите возможность следовать рекомендациям по типографике Material Design .
Лучшие практики типографики в XR
- Размер для переменных расстояний . Помните, что пользователи будут перемещаться и просматривать текст из разных мест. Убедитесь, что размер шрифта достаточно велик, чтобы его можно было прочитать на расстоянии.
- Расположите текст в естественном поле зрения пользователя : это позволит избежать чрезмерных движений головы и напряжения шеи.
- Учитывайте глубину и масштаб . Используйте сигналы глубины и масштаб для создания иерархии в трехмерном пространстве.
- Убедитесь, что текст читается на фоне пользователя : более толстый шрифт обеспечивает больший контраст. Отрегулируйте в зависимости от цветов, освещения и сложности окружающей среды.
- Используйте адаптируемую типографику . Панели могут располагаться слишком близко, слишком далеко и под неудобными углами обзора для пользователя.
- Ограничьте текст, прикрепленный к движущимся объектам : это может вызвать укачивание.
Доступная типографика в XR
- Выбирайте шрифты, обеспечивающие разборчивость . Отдавайте предпочтение шрифтам с четкими формами букв небольшого размера и на больших расстояниях.
- Используйте регистр предложений . Текст предложений легче читать, чем текст в верхнем регистре.
- Ограничьте длину строки . Стремитесь к более коротким строкам, чтобы улучшить читаемость.
- Выбирайте доступные цвета . Используйте цветовые комбинации, понятные пользователям с различиями в цветовом зрении.
- Избегайте переполненности : дайте тексту достаточно места для передышки.
- Разрешить масштабирование текста . Разрешите пользователям настраивать размер текста в соответствии со своими индивидуальными потребностями.