Ваше мобильное приложение для Android с поддержкой 2D-графики или для больших экранов по умолчанию работает в режиме Android XR, отображаясь в виде 2D-панели в 3D-пространстве. Вы можете добавить захватывающие функции XR, чтобы улучшить существующее 2D-приложение для Android, превратив его из приложения для плоского экрана в динамичную 3D-среду.
При адаптации вашего Android-приложения для работы в XR учитывайте эти важные принципы.
- Пространственные возможности : Android XR предлагает вашему приложению широкий спектр пространственных функций, но вам не обязательно реализовывать каждую из них. Стратегически внедряйте те, которые дополняют визуальную иерархию вашего приложения, макеты и пользовательские сценарии. Рассмотрите возможность использования пользовательских окружений и нескольких панелей для создания по-настоящему захватывающего опыта. Обратитесь к рекомендациям по проектированию пространственного пользовательского интерфейса, чтобы определить оптимальную интеграцию пространственных элементов.
- Адаптивный пользовательский интерфейс : XR предоставляет вам гибкость в разработке просторного интерфейса, который плавно адаптируется к бесконечному холсту и окнам со свободным изменением размера. Одним из важнейших моментов является использование наших рекомендаций по дизайну для больших экранов , чтобы оптимизировать макет вашего приложения для этой обширной среды. Даже если ваше приложение сегодня предназначено только для мобильных устройств, вы все равно можете использовать привлекательные среды для улучшения пользовательского опыта, но интерфейс, оптимизированный для больших экранов, — один из лучших способов оптимизировать ваше приложение для Android XR.
- Фреймворк для пользовательского интерфейса : Мы рекомендуем создавать пользовательский интерфейс с помощью Jetpack Compose для XR. Если ваше приложение использует Views, ознакомьтесь с информацией о работе с Views в XR, чтобы узнать больше об использовании взаимодействия Compose при работе с Views, или оцените возможность работы напрямую с библиотекой Jetpack SceneCore.
- Публикация в Play Store : Чтобы убедиться, что ваше приложение с поддержкой XR доступно в Play Store:
- Рассмотрите возможность оптимизации вашего приложения, удалив все ненужные функциональные требования .
- Убедитесь, что ваше приложение не отключено от публикации XR-контента в консоли Google Play , чтобы предотвратить его исключение из результатов поиска в Play Store.
Советы по преобразованию 2D-компонентов пользовательского интерфейса в 3D.
Следуя этим советам, вы сможете значительно улучшить свое приложение, создав ощущение, что оно оптимизировано для XR.
- Приоритетное внимание уделяйте совместимости с большими экранами : убедитесь, что пользовательский интерфейс вашего приложения соответствует принципам дизайна для больших экранов , чтобы обеспечить оптимальную читаемость текста и контента в обширных средах XR.
- Используйте пространственные функции стратегически : определите ключевые моменты в пользовательском пути вашего приложения, где включение пространственных функций улучшит взаимодействие с пользователем и позволит воспользоваться уникальными возможностями платформы.
- Размещайте пространственные панели с учетом комфорта пользователя : при проектировании планировки с использованием пространственных панелей располагайте их на комфортном расстоянии от пользователя, чтобы избежать ощущения перегруженности или слишком близкого расположения.
- Используйте адаптивный пользовательский интерфейс для пространственных макетов : применяйте концепции адаптивного пользовательского интерфейса, такие как панели и постепенное отображение, чтобы эффективно разбить ваш макет на несколько пространственных панелей, оптимизируя представление информации.
- Используйте орбитеры для постоянных элементов и шаблонов : зарезервируйте орбитеры для постоянных и контекстных элементов пользовательского интерфейса, таких как навигация и элементы управления. Ограничьте использование орбитеров, чтобы сохранить ясность и избежать загромождения.
- Используйте пространственные возвышения с умом : применяйте пространственные возвышения к временным компонентам, которые остаются неподвижными и не прокручиваются вместе с содержимым. Избегайте возвышения больших областей, чтобы предотвратить визуальный дискомфорт и поддерживать сбалансированную визуальную иерархию.
Jetpack Compose for XR представляет новые компоненты, которые управляют улучшениями XR, избавляя вас от необходимости делать это самостоятельно. Например, вы можете использовать SpatialPopup и SpatialDialog для замены их 2D-аналогов. Эти компоненты отображаются как обычный 2D-интерфейс, когда пространственный интерфейс недоступен, и показывают пространственный интерфейс вашего приложения, когда это возможно. Использовать их очень просто: достаточно внести всего одну строку кода для замены соответствующего 2D-элемента интерфейса.
Преобразовать диалоговое окно в SpatialDialog
// Previous approach Dialog( onDismissRequest = onDismissRequest ) { MyDialogContent() } // New XR differentiated approach SpatialDialog( onDismissRequest = onDismissRequest ) { MyDialogContent() }
Преобразовать всплывающее окно в SpatialPopup
// Previous approach Popup(onDismissRequest = onDismissRequest) { MyPopupContent() } // New XR differentiated approach SpatialPopup(onDismissRequest = onDismissRequest) { MyPopupContent() }
Улучшение 2D-элементов пользовательского интерфейса
Если вы хотите улучшить пользовательский интерфейс с помощью более точного управления, мы предлагаем SpatialElevation , позволяющий поднять любой компонент вашего приложения на уровень выше пространственной панели по оси Z, который вы задали с помощью SpatialElevationLevel . Это помогает привлечь внимание пользователя, создать лучшую иерархию и улучшить читаемость, как показано в следующем примере.
// Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr). SpatialElevation(elevation = SpatialElevationLevel.Level4) { ComposableThatShouldElevateInXr() }
Основные моменты, касающиеся кода.
- Не следует создавать пространственные или приподнятые большие участки и плоскости, такие как днище и боковые панели.
- Не следует приподнимать элементы пользовательского интерфейса, которые прокручиваются вместе с содержимым.
Перенести 2D-компоненты на орбитальные аппараты.
«Орбитеры» — это плавающие элементы, которые обычно содержат элементы управления, с которыми пользователь может взаимодействовать. «Орбитеры» могут быть привязаны к пространственным панелям или другим объектам, таким как пространственные макеты. Они позволяют контенту занимать больше места и обеспечивают пользователям быстрый доступ к функциям, не загораживая основной контент.
Непространственная навигационная рельса
Пространственная (адаптированная к XR) навигационная рельса
Приведенный ниже пример кода показывает, как можно перенести 2D-компонент пользовательского интерфейса в орбитер.
// Previous approach NavigationRail() // New XR differentiated approach Orbiter( position = ContentEdge.Start, offset = dimensionResource(R.dimen.start_orbiter_padding), alignment = Alignment.Top ) { NavigationRail() }
Основные моменты, касающиеся орбитальных аппаратов.
- Орбитальные модули — это компоненты, предназначенные для прикрепления существующих элементов пользовательского интерфейса к пространственной панели.
- Ознакомьтесь с нашими рекомендациями по дизайну приложений для Android XR , чтобы определить, какие элементы следует перенести для орбитальных устройств, и каких шаблонов следует избегать.
- Мы рекомендуем адаптировать лишь несколько компонентов навигации, таких как боковая панель навигации, верхняя панель приложений или нижняя панель приложений.
- Орбитальные корабли не отображаются, если пространственный интерфейс не включен. Например, они не отображаются в домашнем пространстве или на таких устройствах, как телефоны, планшеты и складные устройства.
Перенесите 2D-компоненты в пространственные панели.
Пространственные панели являются основными строительными блоками пользовательского интерфейса приложений Android XR.
Панели служат контейнерами для элементов пользовательского интерфейса, интерактивных компонентов и иммерсивного контента. При проектировании можно добавлять такие компоненты, как орбитеры для управления пользователем, и пространственно приподнимать элементы пользовательского интерфейса, чтобы привлечь внимание к конкретным взаимодействиям.
Основные моменты, касающиеся кода.
- Ознакомьтесь с рекомендациями по дизайну приложений для Android XR , чтобы определить, какие элементы следует перенести в панели, и каких шаблонов следует избегать.
- Следуйте передовым методам размещения информационных панелей в пространстве:
- Панели должны располагаться в центре на расстоянии 1,5 м от глаз пользователя.
- Содержимое должно отображаться в центральной части поля зрения пользователя (41°).
- Панели остаются на месте, даже когда пользователь перемещается. Крепление доступно только для сквозного режима.
- Для панелей рекомендуется использовать закругленные углы с шагом 32 dp.
- Размер сенсорных мишеней должен составлять 56 знаков после запятой и не менее 48 знаков после запятой.
- Для обеспечения читаемости следует соблюдать контрастность, особенно если используется прозрачный фон.
- Следуйте принципам цветовой гаммы дизайна Android и используйте цветовую систему Material Design для реализации темных и светлых тем для вашего приложения.
- Используйте API пространственных панелей с существующими элементами пользовательского интерфейса.
Перенесите двухмерный пользовательский интерфейс на единую пространственную панель.
По умолчанию ваше приложение отображается в главном пространстве в виде одной панели. Узнайте, как переключаться между главным пространством и полным пространством . Чтобы перенести этот контент в полное пространство, вы можете использовать SpatialPanel .
Вот пример того, как это можно сделать.
if (LocalSpatialCapabilities.current.isSpatialUiEnabled) { Subspace { SpatialPanel( dragPolicy = MovePolicy(), resizePolicy = ResizePolicy(), ) { AppContent() } } } else { AppContent() }
Перенесите свой 2D-интерфейс на несколько пространственных панелей.
Для пользовательского интерфейса вашего приложения можно использовать одну пространственную панель или перенести 2D-интерфейс на несколько пространственных панелей. Если вы решите использовать несколько панелей, вы сможете позиционировать и вращать их (аналогично компоновке интерфейса в 2D). Вы начнете с четкого видения дизайна, а затем сможете использовать API пространственной компоновки интерфейса ( SpatialBox , SpatialRow , SpatialColumn , SpatialLayoutSpacer , SpatialAlignment ) и модификаторы подпространства для позиционирования и вращения панелей. При реализации нескольких панелей следует избегать некоторых ключевых шаблонов.
- Избегайте наложения панелей, которые могут помешать пользователю увидеть важную информацию.
- Избегайте перегрузки пользователя панелями.
- Избегайте размещения панелей в неудобных или незаметных местах. Например: панели, расположенные за пользователем, трудно заметить.
- Для получения более подробной информации о разработке пространственного пользовательского интерфейса ознакомьтесь с нашими полными рекомендациями .
Непространственный контент
Пространственное (адаптированное к XR) управление медиаконтентом внутри орбитального аппарата, разбитое на несколько пространственных панелей.
SpatialRow { SpatialPanel( SubspaceModifier .width(384.dp) .height(592.dp) ) { StartSupportingPanelContent() } SpatialPanel( SubspaceModifier .height(824.dp) .width(1400.dp) ) { App() } SpatialPanel( SubspaceModifier .width(288.dp) .height(480.dp) ) { EndSupportingPanelContent() } }
Проверьте наличие пространственных возможностей.
При решении вопроса о том, отображать ли конкретный элемент пользовательского интерфейса, избегайте проверки наличия определенных XR-устройств или режимов. Проверка устройств или режимов вместо проверки возможностей может вызвать проблемы, если возможности конкретного устройства со временем меняются. Вместо этого используйте LocalSpatialCapabilities.current.isSpatialUiEnabled для прямой проверки необходимых возможностей пространственного позиционирования, как показано в следующем примере. Такой подход гарантирует правильную адаптацию вашего приложения к широкому спектру XR-технологий без необходимости обновлений каждый раз, когда появляются новые устройства или изменяются возможности.
if (LocalSpatialCapabilities.current.isSpatialUiEnabled) { SupportingInfoPanel() } else { ButtonToPresentInfoModal() } // Similar check for audio val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled
Используйте окружение для изменения обстановки пользователя.
Если вы хотите создать ощущение погружения в ваше приложение, изменяя окружение пользователя, вы можете сделать это с помощью окружений. Добавление окружения в коде — это простое изменение, которое вы можете внести, не оказывая существенного влияния на существующий пользовательский интерфейс вашего приложения. Для получения дополнительной информации о настройке окружений обязательно ознакомьтесь с нашим полным руководством .
Добавить 3D-контент
Трехмерный контент, такой как 3D-модели и пространственное видео, может помочь создать более захватывающий опыт и улучшить пространственное восприятие. Ваше приложение сможет отображать трехмерный контент только при наличии пространственных возможностей, поэтому вам следует сначала проверить, доступны ли они.
Для добавления 3D-моделей , пространственного видео или пространственного звука обратитесь к соответствующему руководству.