Пространственный интерфейс

При создании дифференцированного приложения Android XR вы можете использовать пространственный пользовательский интерфейс, чтобы размещать контент в физической или виртуальной среде пользователя. Вы можете разделить приложение на пространственные панели, орбитеры и добавить пространственное возвышение (подробнее описано на этой странице). Вы также можете включить в дизайн пространственное видео.

Пространственные панели

Пространственные панели – это основные элементы приложений Android XR. С их помощью вы можете создавать уникальные XR-приложения, контент которых будет выходить за пределы экрана и заполнять пространство вокруг пользователя. Пространственные панели служат контейнерами для элементов интерфейса, интерактивных компонентов и иммерсивного контента.

Приложение Android XR с северным сиянием и заснеженной горой. Три меню управления пользователями находятся в орбитерах. Они расположены выше основной панели: слева, справа и снизу.

Как масштабируется и перемещается интерфейс

Размер пространственных панелей автоматически корректируется в зависимости от расстояния до пользователя. Такое динамическое масштабирование гарантирует, что элементы пользовательского интерфейса останутся разборчивыми и интерактивными при просмотре с разных расстояний. Размер остается неизменным между 0,75 метра и 1,75 метра. Затем коэффициент масштабирования увеличивается на 0,5 метра на метр, и элементы будут казаться меньше.

Чтобы избежать конфликтов с системным интерфейсом, не выходите за пределы перемещения панели по умолчанию:

  • Минимальная глубина: 0,75 м от пользователя.
  • Максимальная глубина: 5 метров от пользователя.

Пользователи могут увеличивать или уменьшать пространственную панель, чтобы ее было хорошо видно на любом расстоянии. Когда пользователь перемещает пространственную панель, Android XR автоматически масштабирует ее размер.

Размеры пространственных панелей

Android XR позволяет сделать приложение удобным, понятным и доступным для широкой аудитории. Для оптимальной работы система использует коэффициент 0, 868. При просмотре в гарнитуре приложение будет казаться пользователю дальше, чем на телефоне или планшете, поэтому для удобства использования оно должно быть больше.

В полном пространстве минимальный размер пространственной панели не ограничен, а максимальный составляет 2560 x 1800 dp из-за физических ограничений.

Визуализация пользователя, который находится на расстоянии 1,75 м от приложения XR.

Где размещать пространственные панели

В полном пространстве вы можете определить размещение панелей как в сквозном, так и в виртуальном режиме. Когда пользователи переключаются из домашнего пространства в полное, элементы остаются на том же месте, если вы не задали для них другое положение.

Пользователь смотрит на приложение XR. Уровень глаз на 5 градусов ниже центра панели.

Разместите центр панели на расстоянии 1,75 м от линии взгляда пользователя. Разместите вертикальный центр панели на 5° ниже уровня глаз пользователя, чтобы обеспечить максимальный комфорт, поскольку пользователи склонны смотреть вниз.

Пользователь смотрит на панель, которая находится в центре его поля зрения и занимает 41 градус.

Для оптимального комфорта размещайте контент в центральной зоне обзора пользователя (41°). Это обеспечит хорошую видимость и сведет к минимуму необходимость в чрезмерных движениях головы или тела.

Пользователь может перемещаться в пространстве, а пространственные панели будут оставаться на месте.

В Android XR есть готовые шаблоны взаимодействия, которые упрощают разработку и позволяют пользователям легко управлять элементами. Пользователь может перемещать элементы, чтобы адаптировать их к своему личному пространству. Вы можете настроить поведение при перемещении и изменении размера.

Чтобы пользователям было проще размещать элементы интерфейса относительно реальных объектов, вы можете разрешить им закреплять пространственную панель в определенном месте, например на полу, стуле, стене, потолке или столе. Закрепление доступно только в режиме сквозной передачи.

Чтобы пользователям было проще ориентироваться, вы можете разрешить им закреплять пространственную панель в определенном месте реального мира, например на полу, стуле, стене, потолке или столе. Закрепление доступно только в режиме сквозной передачи.

Создайте собственный пространственный макет

Вы можете разбить приложение на несколько пространственных панелей в любом макете, который вы выбирать. API пространственного интерфейса не ограничивают количество панелей. Они включают в себя возможность создавать макеты со строками и столбцами, а также плоскими и изогнутыми строками. Позиции пространственных панелей могут быть конкретными или произвольными. Подробнее о том, как разрабатывать пространственные макеты пользовательского интерфейса…

Человек смотрит на три панели, расположенные рядом друг с другом в ряд

Плоский макет строк

Человек смотрит на три плоские панели, расположенные рядом друг с другом по дуге, причем внешние правая и левая панели находятся ближе к нему.

Изогнутый макет

Человек смотрит на три плоские панели разных размеров, расположенные в произвольных позициях, причем крайние правая и левая панели находятся дальше от него.

Произвольная раскладка

Пространственные видео

Пространственные видео могут добавить вашему контенту объем и эффект погружения. Вы можете использовать их в своих проектах в виде моноскопических или стереоскопических видео, отображаемых на плоских, полусферических (180°) или сферических (360°) поверхностях.

Орбитальные аппараты

Орбитеры – это плавающие элементы интерфейса, которые обычно используются для управления контентом на пространственных панелях и других объектах, к которым они привязаны. Они позволяют контенту занимать больше места, а пользователи могут быстро получить доступ к функциям, пока основной контент остается видимым. Orbiters позволяют интегрировать существующие компоненты интерфейса или создавать новые.

Используйте орбитеры только в случае необходимости и с учетом потребностей и намерений пользователей. Большое количество пространственных элементов интерфейса может привести к утомлению от контента и перегрузить пользователей чрезмерным количеством конкурирующих действий. Рекомендуется адаптировать несколько ключевых компонентов навигации, таких как панель навигации или панель навигации.

Непространственная панель навигации из Material Design в Home
Space

Непространственная панель навигации из Material Design в Home Space.

Пространственная панель навигации из Material Design в полном пространстве

Панель навигации в пространстве из Material Design в полном пространстве

Непространственная панель навигации из Material Design в Home
Space

Непространственная панель навигации из Material Design в Home Space

Пространственная панель навигации из Material Design в полном пространстве

Пространственная панель навигации из Material Design в полном пространстве

Правила

  • Настройте отступы панели, чтобы определить ее положение в процентах или в зависимости от размера экрана.
  • Определите смещение орбитальных аппаратов. Рекомендуемое визуальное расстояние – 20 dp.
  • При необходимости отрегулируйте высоту орбитального аппарата, используя уровни пространственной высоты. По умолчанию они приподняты на 15 dp по оси Z.
  • Размер может быть фиксированным или гибким при изменении размера панели.
  • Определите, нужно ли динамически расширять орбитер, чтобы он соответствовал контенту.

Шаблоны проектирования, которых следует избегать

  • Не перекрывайте орбитер более чем на 50% его размера.
  • Не размещайте орбитальные панели слишком далеко от пространственной панели.
  • Не используйте абсолютные координаты X или Y.
  • Не используйте слишком много орбитеров.

Пространственная высота

Когда вы добавляете пространственную высоту к компоненту, он отображается над пространственной панелью по оси Z. Это помогает привлечь внимание пользователя, создает лучшую иерархию и улучшает читаемость.

Уровень пространственной высоты Компонент DP
0 Не назначено .1dp
1 Орбита 16 dp
2 Не назначено 24 dp
3 SpatialPopup 32 dp
4 Не назначено 40dp
5 SpatialDialog 56 dp

Диалоговое окно Material Design в приложении на большом экране

Диалоговое окно Material Design в приложении для больших экранов

Диалоговое окно с пространственным возвышением в Android XR

Раскрывающееся меню Material Design в приложении для большого экрана

Раскрывающееся меню Material Design в приложении для большого экрана

Раскрывающееся меню с высотой в Android XR

Шаблоны проектирования, которых следует избегать
  • Не используйте пространственное звучание или подъем для больших областей и плоскостей, таких как нижние и боковые экраны.
  • Не поднимайте элементы пользовательского интерфейса с прокручиваемым контентом.

Разрабатывайте крупные целевые размеры

В XR-приложении цель – это область, с которой взаимодействуют пользователи. Android XR соответствует рекомендациям по целевым объектам Material Design. Мы советуем использовать более крупные целевые объекты, чтобы повысить точность, удобство и простоту использования.

Подробнее о целях и состояниях при наведении в XR…

Как сделать типографику доступной

Разборчивость шрифта критически важна для удобства пользователей в XR. Для улучшения читаемости рекомендуется использовать варианты масштаба шрифта с размером шрифта 14dp или больше и насыщенностью шрифта обычной или выше.

Если ваше приложение соответствует рекомендациям Material Design, оно уже оптимизировано для Android XR. Вы можете определить типографику нового приложения на основе Material Design.

Подробнее о типографике в XR…

Используйте компоненты и макеты Material Design

При разработке приложения Android XR используйте библиотеку компонентов Material Design и адаптивные макеты. Эти интерактивные строительные блоки помогают ускорить разработку, чтобы вы могли сосредоточиться на основных функциях и инновациях.

Material Design для XR улучшает компоненты Material 3 и адаптивные макеты с помощью пространственного поведения пользовательского интерфейса. Это поможет сделать приложение более нативным для платформы и оптимизировать его размер.

Вы также можете сделать пространственными существующие компоненты интерфейса, поместив их в орбитеры и применив пространственное возвышение, как описано на этой странице.

Коллаж из элементов Material 3 Design Kit Скачайте Material 3 Design Kit, чтобы начать.