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