ТВ-навигация

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

Принципы

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

Эффективный

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

Предсказуемый

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

Интуитивный

Сделайте навигацию достаточно простой, чтобы она беспрепятственно поддерживала распространенные модели поведения пользователей. Не усложняйте ее, добавляя ненужные уровни навигации.

Контроллеры

Контроллеры выпускаются в самых разных стилях, от минималистичных пультов дистанционного управления до сложных игровых контроллеров. Все контроллеры оснащены крестовиной (D-pad), а также кнопками Select, Home и Back. Остальные кнопки различаются в зависимости от модели.

Образец удаленного
Рисунок 1. Пример пульта дистанционного управления телевизором.

D-пад
Основной способ навигации на телевизоре — это крестовина (D-pad), которая включает в себя аппаратные кнопки направления вверх, вниз, влево и вправо. Крестовина переключает фокус с одного объекта на ближайший объект в направлении нажатой кнопки.

Выберите кнопку
Выбирает на экране элемент, находящийся в фокусе.

Кнопка «Домой»
Перенаправляет пользователя на главный экран системы.

Кнопка «Назад»
Предоставляет пользователям возможность вернуться к предыдущему виду.

Кнопка микрофона
Вызывает либо Google Ассистента, либо голосовой ввод.

Навигация с помощью D-pad

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

Фреймворк Android автоматически обрабатывает направленную навигацию между элементами макета, поэтому вам, как правило, не нужно ничего дополнительно делать для вашего приложения. Однако следует тщательно протестировать навигацию с помощью D-pad контроллера, чтобы выявить любые проблемы с навигацией.

Следуйте этим инструкциям, чтобы проверить корректную работу системы навигации вашего приложения с D-pad на телевизоре:

  • Убедитесь, что пользователь с D-pad контроллером может перемещаться ко всем видимым элементам управления на экране.
  • Для прокручиваемых списков с фокусом убедитесь, что кнопки «вверх» и «вниз» на D-pad прокручивают список, а кнопка «выбрать» выбирает элемент в списке. Убедитесь, что пользователи могут выбрать элемент в списке и что список продолжает прокручиваться после выбора элемента.
  • Обеспечьте простоту и предсказуемость переключения между элементами управления.

Изменить направление навигации

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

В следующем примере кода показано, как определить следующий элемент управления, который получит фокус для объекта макета TextView :

<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />

В таблице ниже перечислены все доступные атрибуты навигации для виджетов пользовательского интерфейса Android:

Атрибут Функция
nextFocusDown Определяет следующее представление, которое получит фокус при прокрутке страницы вниз.
nextFocusLeft Определяет следующее представление, которое получит фокус при перемещении пользователя влево.
nextFocusRight Определяет следующее представление, которое получит фокус при перемещении пользователя вправо.
nextFocusUp Определяет следующее представление, которое получит фокус при перемещении пользователя вверх.

Чтобы использовать один из этих явных атрибутов навигации, установите значение равным android:id другого виджета в макете. Убедитесь, что порядок навигации настроен как цикл, чтобы последний элемент управления возвращал фокус к первому.

Обеспечьте четкую направленность и отбор.

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

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

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

<!-- res/drawable/button.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/button_focused" /> <!-- focused -->
    <item android:state_hovered="true"
          android:drawable="@drawable/button_focused" /> <!-- hovered -->
    <item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>

Приведенный ниже пример кода XML-разметки применяет предыдущий список изображений к Button :

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />

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

Навигация с помощью кнопки «Назад»

Для обеспечения единообразия работы приложений на платформе убедитесь, что поведение кнопки «Назад» соответствует этим рекомендациям.

Используйте предсказуемое поведение кнопки «Назад».

Для обеспечения простой и предсказуемой навигации, при нажатии пользователем кнопки «Назад» на пульте дистанционного управления, возвращайте его к предыдущему пункту назначения.

Изображение, иллюстрирующее последовательность навигации при использовании верхней панели навигации.
Рисунок 2. Схема работы с использованием верхней навигации.
Изображение, иллюстрирующее последовательность навигации при использовании боковой навигации.
Рисунок 3. Схема движения с использованием боковой навигации.

Если пользователь переходит из пункта меню к карточке в середине страницы, а затем нажимает кнопку «Назад», результат зависит от того, использует ли приложение верхнюю или левую навигацию:

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

Убедитесь, что кнопка «Назад» не блокируется экранами подтверждения или не является частью бесконечного цикла.

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

Не.
Избегайте блокировки выхода. Позвольте пользователям выходить из приложения без подтверждения.


Скриншот, демонстрирующий зацикливание навигации.
Рисунок 5. Цикл навигации

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

Не отображайте кнопки «Вверх» или «Назад».

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

Скриншот, на котором видна экранная кнопка «Назад».
Рисунок 6. Мягкая задняя кнопка

Не.

При необходимости отобразите кнопку отмены.

Если единственными видимыми действиями являются подтверждение, отмена или покупка, рекомендуется добавить кнопку «Отмена» , которая возвращает на предыдущую страницу:

Скриншот, на котором видна кнопка «Отмена» на экране.
Рисунок 7. Кнопка «Мягкая отмена».

Делать.

Реализовать функцию возврата к предыдущей странице.

В целом, фреймворк Android хорошо обрабатывает навигацию назад, как и использование D-pad. При использовании компонента Navigation можно поддерживать различные графы навигации. Иногда может потребоваться реализовать пользовательское поведение, например, сброс фокуса при нажатии кнопки «Назад» в начало длинного списка.

ComponentActivity , базовый класс для FragmentActivity и AppCompatActivity , позволяет управлять поведением кнопки «Назад» с помощью метода OnBackPressedDispatcher , который можно получить, вызвав getOnBackPressedDispatcher() .

Для получения дополнительной информации см. раздел «Предоставление настраиваемой навигации назад» .

Элементы управления воспроизведением на телевизоре

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

Навигация по вкладкам в режиме реального времени

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

Воспроизведение без трения

Бесперебойное воспроизведение обеспечивается при переходе по любой прямой ссылке на прямой/линейный канал в Google TV и Android TV через приложение.

Пользователи, переходящие по прямой ссылке на канал Live/Linear в Google TV и Android TV, должны попадать непосредственно к воспроизведению канала без каких-либо блокирующих или задерживающих экранов в целевом приложении. Вход в систему, регистрация, рекламные видеоролики и другие задержки не допускаются.

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

Кроме того, если переход по прямой ссылке на канал занимает несколько секунд, допускается отображение фирменной символики канала и/или сервиса. Однако продолжительность отображения должна быть равна времени загрузки канала (и примерно соответствовать среднему времени загрузки каналов в приложении).

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

Прямая обратная связь

Когда пользователи запускают приложение по прямой ссылке на вкладке Live, а затем нажимают кнопку «Назад», они должны вернуться на вкладку Live одним нажатием кнопки «Назад», независимо от прошедшего времени. Такое прямое возвращение требуется для всех прямых ссылок на вкладке Live на Google TV и Android TV.

Глубокие ссылки во вкладке Live отличаются добавленным параметром: ?exit_on_back=[true|false] . Приложения должны анализировать этот параметр, чтобы определить, было ли приложение запущено из вкладки Live. Если exit_on_back имеет значение true , приложения должны реализовать поведение прямого возврата назад.

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

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

Повторные нажатия кнопки «Назад» должны приводить пользователя в корневую папку приложения, а затем обратно на Google TV или Android TV, без каких-либо бесконечных циклов. Для получения дополнительной информации см. раздел «Предсказуемое поведение кнопки «Назад»» .

Фиксированное место отправления

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

Глубокие ссылки имитируют ручную навигацию.

При создании прямых ссылок или при ручном переходе к определенному пункту назначения пользователи могут использовать кнопку «Назад», чтобы вернуться к исходному пункту назначения, независимо от того, создают ли они прямые ссылки или переходят к нужному разделу вручную.

Скриншоты, демонстрирующие прямую ссылку на страницу с подробной информацией внутри приложения. Нажатие кнопки «Назад» переводит на главный экран этого приложения, а повторное нажатие кнопки «Назад» возвращает на исходный экран.
Рисунок 8. Прямая ссылка на страницу с подробной информацией.

Глубокая ссылка из другого приложения в одно и то же приложение имитирует ручную навигацию. Например, если пользователь переходит непосредственно на страницу с подробной информацией в приложении Moviestar с Google TV, а затем нажимает кнопку «Назад», он попадает на главную страницу приложения Moviestar.

Четкий путь ко всем элементам, на которые можно сделать фокус.

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

Пример фокусируемой навигации
Рисунок 9. Регулировка фокусировки.

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

Пример фокусируемой навигации
Рисунок 10. Регулировка фокусировки.

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

Оси

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

Пример осей навигации
Рисунок 11. Перемещение.

Делать.
По вертикальной оси можно перемещаться по категориям, а по горизонтальной оси — просматривать элементы внутри каждой категории.

Пример осей навигации
Рисунок 12. Перемещение.

Не.
Избегайте сложных и вложенных иерархий компоновки.