Проектируйте для больших экранов с самого начала

Устройства Android выпускаются в различных форм-факторах — телефоны, планшеты, складные устройства, устройства ChromeOS — которые имеют широкий диапазон размеров экрана. Android поддерживает множество режимов отображения, включая многооконный, многодисплейный, свободную форму и «картинка в картинке». Складные устройства могут находиться в различных состояниях или положениях, например, в виде стола или книги.

Рассмотрите различные варианты использования вашего приложения, когда начнете его проектировать. Например:

  • Устройства с большим экраном предоставляют пользователям больше возможностей для взаимодействия с контентом вашего медиаприложения различными способами.

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

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

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

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

Сделайте свое медиа-приложение адаптивным по умолчанию

Избегайте проблем с взаимодействием пользователей с вашим мультимедийным приложением, сделав макет приложения адаптивным для телефонов, планшетов, складных устройств и устройств ChromeOS.

Ваше приложение должно быть отзывчивым, чтобы учитывать различные размеры дисплея, ориентации и форм-факторы. Адаптивный макет изменяется в зависимости от доступного ему пространства дисплея. Для получения дополнительной информации см. Поддержка различных размеров дисплея .

Проектирование в соответствии с рекомендациями

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

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

В рекомендациях определен комплексный набор требований к качеству для большинства типов приложений Android.

Уровень 3:

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

Макет приложения может быть не идеальным, но оно работает в полноэкранном режиме или в полнооконном режиме в многооконном режиме. Оно не имеет формата letterbox и не работает в режиме совместимости. Приложение обеспечивает базовую поддержку внешних устройств ввода, включая клавиатуру, мышь и трекпад. Для получения дополнительной информации см. раздел Готовность к большому экрану .

Уровень 2:

Здесь ваше приложение реализует оптимизацию макета для всех размеров экрана и конфигураций устройств, а также расширенную поддержку внешних устройств ввода. Подробности см. в разделе Оптимизировано для большого экрана .

Уровень 1:

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

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

Оптимизированные макеты

Воспользуйтесь увеличенным пространством больших экранов без почтовых ящиков (из-за ограничения ориентации) или растяжения. Оптимизируя макет вашего приложения для медиа и социальных сетей, вы расширяете охват своего приложения и создаете лучший пользовательский опыт на всех форм-факторах больших экранов — планшетах, складных устройствах и устройствах ChromeOS — а также поддерживаете все размеры телефонов.

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

Медиа-макеты

Сделайте свое приложение более удобным для использования, внедрив макеты, специфичные для медиа, для списка-детали, ленты и поддерживающей панели. Для получения информации о макетах MDX, Flutter и Compose см. Ресурсы макетов .

  • List-detail: Разработка вашего приложения с интерактивным медиабраузером позволяет пользователям просматривать различные медиа во время просмотра или прослушивания. Заголовки медиа отображаются рядом с воспроизводимым видео- или аудиофайлом. Если ориентация устройства меняется, макет list-detail реагирует на сохранение состояния приложения. Чтобы узнать больше, см. Макеты list-detail .

  • Лента: Макет ленты размещает эквивалентные элементы контента в настраиваемой сетке для быстрого и удобного просмотра большого объема контента, например музыкальной ленты или киоска фильмов и ТВ в вашем приложении. Для получения дополнительной информации см. Макеты ленты .

  • Вспомогательная панель: с первичными и вторичными областями отображения ваше приложение может встроить вспомогательную панель для контекста, релевантности или ссылки, например, прокручиваемый список похожих названий, опубликованных обзоров или дополнительных работ тех же художников или актеров. Для получения дополнительной информации см. Вспомогательные макеты панелей .

Для тщательно подобранной коллекции макетов медиа посетите раздел Галерея медиа .

Макеты для социальных сетей

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

  • List-detail: Идеально подходит для приложений обмена сообщениями, менеджеров контактов или файловых браузеров. Например, ваше приложение может отображать список разговоров рядом с подробностями, чтобы оставаться в курсе последних сообщений. Для получения дополнительной информации см. Макеты List-detail .

  • Лента: Обычными компонентами в этом стиле макета являются карточки и списки. Например, создайте коллаж из постов в гибком формате сетки или используйте размер и положение, чтобы привлечь внимание к заметным постам. Пользователи могут быстро просматривать большие группы контента. Для получения дополнительной информации см. Макеты ленты .

  • Поддержка панели: приложения поиска и справки или приложения для повышения производительности могут выиграть от этого стиля макета. Он держит инструменты создания контента под рукой для пользователя. Например, ваше приложение может позволить пользователям настраивать параметры, получать доступ к цветовым палитрам, применять эффекты и мгновенно видеть изменения. Для получения дополнительной информации см. Поддержка макетов панелей .

Для тщательно подобранной коллекции макетов социальных сетей посетите страницу Галерея социальных сетей .

Лучшие практики для приложений мультимедиа с большим экраном

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

Ориентация и изменение размера

Если ваше медиа-приложение объявляет ограничения по ориентации и изменению размера, Android активирует режим совместимости. Хотя режим совместимости гарантирует, что ваше приложение ведет себя приемлемо, удобство использования значительно снижается, а пользовательский опыт страдает.

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

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

Сочетания клавиш

На большом экране чаще используются сочетания клавиш физической клавиатуры, такие как «Пуск», «Стоп», «Пауза», «Перемотка назад» и «Вперед», что обеспечивает единообразие взаимодействия пользователя с клавиатурой.

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

Поддержка предварительного просмотра камеры

С большими экранами у вас может быть больше проблем с растяжением, обрезкой и поворотом. Поэтому вы не можете предположить, что размер предварительного просмотра камеры — это то, что пользовательский интерфейс в вашем медиа-приложении фактически отображает.

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

Для получения дополнительной информации см. Предварительный просмотр CameraX или Предварительный просмотр Camera2 .

Складные позы

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

С включенными в ваш план разработки складными позами ваше приложение становится доступным для большего количества устройств и оказывает более широкое влияние. Вы расширяете медиа-опыт для пользователя способами, которые другие устройства не могут сделать без складных поз. Для получения дополнительной информации см. Складные позы .