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