Ваше 2D-приложение для мобильных устройств или больших экранов Android по умолчанию работает в Android XR и отображается как 2D-панель в 3D-пространстве. Вы можете добавить в свое 2D-приложение для Android функции XR, чтобы сделать его более привлекательным и перевести с плоского экрана в динамичную 3D-среду.
При переносе приложения Android в XR учитывайте следующие важные принципы:
- Пространственные возможности. Android XR предлагает широкий спектр пространственных функций, которые можно добавить в приложение. При этом вам не обязательно реализовывать все возможности. Используйте те, которые дополняют визуальную иерархию, макеты и пути пользователей в вашем приложении. Чтобы создать эффект присутствия, добавьте в видео собственные фоны и несколько панелей. Чтобы определить оптимальный способ интеграции пространственных элементов, ознакомьтесь с руководством по дизайну пространственного интерфейса.
- Адаптивный интерфейс. XR позволяет создавать просторные интерфейсы, которые легко адаптируются к бесконечному холсту и окнам с изменяемым размером. Один из самых важных аспектов – оптимизировать макет приложения для большого экрана, следуя нашим рекомендациям по дизайну. Даже если ваше приложение предназначено только для мобильных устройств, вы можете использовать привлекательные среды, чтобы улучшить взаимодействие с пользователем. Однако оптимизация интерфейса для больших экранов – один из лучших способов подготовить приложение к Android XR.
- Фреймворк для создания интерфейса. Мы рекомендуем использовать Jetpack Compose для XR. Если ваше приложение использует Views, ознакомьтесь с информацией о том, как работать с Views в XR, чтобы узнать больше о взаимодействии Compose с Views, или попробуйте работать напрямую с библиотекой Jetpack SceneCore.
- Публикация в Google Play. Чтобы проверить, можно ли найти ваше приложение с поддержкой XR в Google Play:
- Попробуйте упростить приложение, убрав ненужные требования к функциям.
- Убедитесь, что в Google Play Console для вашего приложения не отключена публикация на устройствах XR. В противном случае оно не будет показываться в результатах поиска в Google Play.
Советы по преобразованию 2D-компонентов интерфейса в 3D
Следуя этим советам, вы сможете сделать так, чтобы ваше приложение выглядело оптимизированным для XR.
- Обеспечьте совместимость с большими экранами. Убедитесь, что интерфейс вашего приложения соответствует принципам дизайна для больших экранов. Это поможет обеспечить оптимальную читаемость текста и контента в обширных XR-средах.
- Используйте пространственные функции стратегически. Определите ключевые моменты на пути пользователя, в которых пространственные функции помогут улучшить взаимодействие с приложением и использовать уникальные возможности платформы.
- Размещайте пространственные панели с учетом удобства пользователя. При создании макета с пространственными панелями размещайте их на комфортном расстоянии от пользователя, чтобы они не казались слишком близкими или навязчивыми.
- Используйте адаптивный интерфейс для пространственных макетов. Применяйте концепции адаптивного интерфейса, такие как панели и постепенное раскрытие, чтобы эффективно разделить макет на несколько пространственных панелей и оптимизировать представление информации.
- Используйте орбитеры для постоянных элементов и шаблонов. Оставляйте орбитеры для постоянных и контекстных элементов интерфейса, таких как навигация и элементы управления. Ограничьте использование орбитеров, чтобы не перегружать экран.
- Используйте возвышение с умом. Применяйте пространственное возвышение к временным компонентам, которые остаются неподвижными и не прокручиваются вместе с контентом. Не выделяйте большие области, чтобы не вызывать дискомфорт и сохранить сбалансированную визуальную иерархию.
Jetpack Compose для XR содержит новые компоненты, которые управляют улучшениями XR, поэтому вам не нужно этого делать. Например, вы можете использовать SpatialPopup и SpatialDialog вместо их 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( alignment = OrbiterAlignment.TopStart( edgeOffsetType = OrbiterEdgeOffsetType.OuterEdge, offset = DpVolumeOffset(x = dimensionResource(R.dimen.start_orbiter_padding)) ) ) { NavigationRail() }
Основные сведения об орбитальных станциях
- Орбитеры – это компоненты, предназначенные для прикрепления существующих элементов интерфейса к пространственной панели.
- Чтобы узнать, какие элементы нужно перенести в орбитеры и каких шаблонов следует избегать, ознакомьтесь с рекомендациями по дизайну приложений для Android XR.
- Мы рекомендуем адаптировать только некоторые компоненты навигации, например панель навигации, верхнюю панель приложения или нижнюю панель приложения.
- Орбитеры не показываются, если пространственный интерфейс не включен. Например, они не будут показываться в режиме "Ограниченное пространство" и на таких устройствах, как телефоны, планшеты и складные устройства.
Как перенести 2D-компоненты на пространственные панели
Пространственные панели – это основные элементы интерфейса приложений Android XR.
Панели служат контейнерами для элементов интерфейса, интерактивных компонентов и контента с эффектом погружения. При разработке можно добавлять такие компоненты, как орбитеры для элементов управления, а также пространственно выделять элементы интерфейса, чтобы привлечь внимание к определенным взаимодействиям.
Ключевые моменты
- Чтобы узнать, какие элементы нужно перенести на панели и каких паттернов следует избегать, ознакомьтесь с руководством по дизайну приложений для Android XR.
- Следуйте рекомендациям по размещению пространственных панелей:
- Панели должны появляться на расстоянии 1,5 м от глаз пользователя.
- Контент должен находиться в центре зоны обзора пользователя (41°).
- Панели остаются на месте, когда пользователь перемещается. Закрепление доступно только для сквозной передачи.
- Используйте рекомендуемые системой скругленные углы размером 32 dp для панелей.
- Области прикосновения должны быть не менее 48 dp и не более 56 dp.
- Следите за коэффициентом контрастности, чтобы текст был читаемым, особенно если вы используете прозрачный фон.
- Следуйте принципам дизайна Android и используйте цветовую систему Material Design, чтобы реализовать светлую и тёмную темы для своего приложения.
- Используйте API пространственных панелей с существующими элементами интерфейса.
Как перенести 2D-интерфейс на одну пространственную панель
По умолчанию приложение показывается в главном пространстве на одной панели. Подробнее о том, как переключаться между домашней и полной чат-группами… Чтобы перенести контент в Full Space, можно использовать SpatialPanel.
Вот пример того, как это можно сделать.
if (LocalSpatialCapabilities.current.isSpatialUiEnabled) { Subspace { SpatialPanel( modifier = SubspaceModifier.movable().resizable(), ) { 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-контент только при наличии пространственных возможностей, поэтому сначала нужно проверить, доступны ли они.
Чтобы добавить 3D-модели, пространственное видео или пространственное аудио, следуйте инструкциям в соответствующем руководстве.