Уровень 2 – Адаптивная оптимизация

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

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

Руководящие принципы

Разработайте приложение, которое будет адаптироваться ко всем размерам экрана и состояниям устройств.

Пользовательский интерфейс

Идентификатор руководства Идентификаторы тестов Описание
Адаптивные макеты T-Layout_Flow

Приложение имеет адаптивные макеты, разработанные для всех размеров экрана. Все макеты адаптивны (см. раздел «Переход на адаптивные макеты пользовательского интерфейса »). Реализация адаптивных макетов определяется классами размеров окна .

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

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

Создавайте многопанельные макеты (при необходимости), чтобы максимально эффективно использовать большое пространство экрана. См. раздел «Канонические макеты» .

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

UI_Вторичные_Элементы T-Layout_Flow

Модальные окна, контекстные меню и другие второстепенные элементы корректно форматируются на всех типах экранов и состояниях устройств, например:

  • Нижние листы не занимают всю ширину экрана на больших экранах. (Укажите максимальную ширину, чтобы избежать растягивания.) См. раздел «Поведение в листах: нижний» .
  • На больших экранах кнопки отображаются не на всю ширину экрана. См. раздел « Поведение кнопок» .
  • Текстовые поля и блоки не растягиваются на всю ширину на больших экранах. См. раздел « Поведение текстовых полей» .
  • Небольшие меню редактирования или модальные окна не занимают весь экран и максимально сохраняют контекст для пользователя. См. Меню .
  • Контекстные меню отображаются рядом с элементом, выбранным пользователем. См. раздел «Контекстные меню» в меню .
  • Навигационные направляющие заменяют панели навигации, обеспечивая лучшую эргономику на больших экранах. См. Навигационная направляющая .
  • Встроенные панели навигации обновлены и теперь имеют расширенные направляющие. См. Панель навигации .
  • Диалоговые окна обновлены до последней версии компонента Material Design. См. Диалоговые окна .
  • Изображения отображаются в надлежащем разрешении и не растягиваются и не обрезаются.
Touch_Targets T-Touch_Targets Минимальное расстояние между точками касания — 48dp. См. рекомендации по макету и типографике Material Design.
Drawable_Focus T-Drawable_Focus Состояние фокусировки создается для интерактивных пользовательских изображений. Пользовательское изображение — это любой визуальный элемент пользовательского интерфейса, не предоставляемый фреймворком Android. Если пользователи могут взаимодействовать с пользовательским изображением, оно должно быть доступно для фокусировки, когда устройство не находится в сенсорном режиме , и должно быть очевидно визуальное отображение состояния фокусировки.

Клавиатура, мышь и тачпад

Идентификатор руководства Идентификаторы тестов Описание
Навигация с помощью клавиатуры T-Клавиатура_Навигация Основные сценарии использования приложения поддерживают навигацию с помощью клавиатуры, включая навигацию с помощью клавиш Tab и стрелок. См. раздел «Создание более доступных приложений» .
Сочетания клавиш T-Клавиатура_Сочетания клавиш Приложение поддерживает сочетания клавиш для часто используемых действий, таких как выделение, вырезание, копирование, вставка, отмена и повтор. См. раздел «Совместимость ввода» .
Keyboard_Media_Playback T-Клавиатура_Воспроизведение_Медиа Клавиатура может использоваться для управления воспроизведением мультимедиа; например, клавиша пробела воспроизводит и приостанавливает воспроизведение.
Keyboard_Send T-Клавиатура_Отправить Клавиша Enter на клавиатуре выполняет функцию отправки в коммуникационных приложениях.
Keyboard_Exit T-Клавиатура_Выход Клавиша Esc на клавиатуре выполняет функцию выхода , которая завершает или отменяет действие, например:
  • Закрывает модальные окна, диалоговые окна, всплывающие окна и меню.
  • Очищает поисковый текст или снимает фокус поиска.
  • Отменяет фокус клавиатуры
  • Выход из полноэкранного режима видео, режима «картинка в картинке», полноэкранного режима или режима слайд-шоу.
  • Закрывает экранные элементы управления, такие как индикаторы выполнения или меню.
  • Отмена Далее / таймеры автовоспроизведения
  • Снимает выделение со всех выбранных элементов
  • Прерывает переименование/редактирование без сохранения.
  • Выходит из инструментов обрезки/преобразования и отменяет изменения.
Контекстные_меню T-Контекстные_меню Контекстные меню доступны при обычном щелчке правой кнопкой мыши или сенсорной панели (дополнительная кнопка мыши или дополнительное касание).
Content_Zoom T-Content_Zoom Содержимое приложения можно масштабировать с помощью колесика мыши (в сочетании с нажатием клавиши Control или Ctrl ) и жестов масштабирования на трекпаде.
Hover_States T-Hover_States Элементы пользовательского интерфейса, на которые можно наводить курсор, имеют состояние при наведении (где это уместно), указывающее пользователям мыши и трекпада на то, что эти элементы являются интерактивными.

Тесты

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

Пользовательский интерфейс

Идентификатор теста Идентификаторы руководящих принципов Описание
T-Layout_Flow Responsive_adaptive_layouts ,
UI_Вторичные_Элементы

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

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

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

T-Touch_Targets Touch_Targets Убедитесь, что сенсорные элементы сохраняют свой размер и положение, доступные для всех пользователей, и не скрыты или не заслонены другими элементами пользовательского интерфейса для всех размеров и конфигураций экрана. Для получения информации о доступности см. «Сканер доступности» .
T-Drawable_Focus Drawable_Focus На каждом экране приложения, содержащем интерактивный пользовательский рисунок, убедитесь, что этот рисунок можно сфокусировать с помощью внешней клавиатуры, D-pad или другого устройства, позволяющего фокусироваться на элементах пользовательского интерфейса. Убедитесь, что отображается визуальное отображение состояния фокусировки. Дополнительную информацию см. в разделе «Сенсорный режим» .

Клавиатура, мышь и тачпад

Идентификатор теста Идентификаторы руководящих принципов Описание
T-Клавиатура_Навигация T-Клавиатура_Навигация Навигация по элементам приложения, на которые можно навести фокус, осуществляется с помощью... Вкладка а также клавиши со стрелками на внешней клавиатуре.
T-Клавиатура_Сочетания клавиш Сочетания клавиш Используйте сочетания клавиш на внешней клавиатуре для выполнения действий выделения, вырезания, копирования, вставки, отмены и повтора.
T-Клавиатура_Воспроизведение_Медиа Keyboard_Media_Playback Используйте внешнюю клавиатуру для запуска, остановки, паузы, перемотки назад и вперед воспроизведения мультимедиа.
T-Клавиатура_Отправить Keyboard_Send Для отправки данных используйте клавишу Enter на внешней клавиатуре.
T-Клавиатура_Выход Keyboard_Exit

Используйте клавишу Esc на внешней клавиатуре для выхода . Убедитесь, что клавиша выполняет следующие действия (где это применимо):

  • Закрывает модальные окна, диалоговые окна, всплывающие окна и меню.
  • Очищает поисковый текст или снимает фокус поиска.
  • Отменяет фокус клавиатуры
  • Выход из полноэкранного режима видео, режима «картинка в картинке», полноэкранного режима или режима слайд-шоу.
  • Скрывает элементы управления на экране.
  • Отмена Далее / таймеры автовоспроизведения
  • Снимает выделение со всех выбранных элементов
  • Прерывает переименование/редактирование без сохранения.
  • Выходит из инструментов обрезки/преобразования и отменяет изменения.
T-Контекстные_меню Контекстные_меню Для доступа к контекстному меню интерактивных элементов используйте дополнительную кнопку мыши или сенсорную панель.
T-Content_Zoom Content_Zoom Используйте колесико мыши (в сочетании с клавишей Control , или Ctrl ) и жесты масштабирования на трекпаде для увеличения и уменьшения масштаба контента.
T-Hover_States Hover_States Наведите курсор мыши или трекпада на элементы пользовательского интерфейса, доступные для взаимодействия, чтобы активировать состояние наведения курсора на элемент.