Обложки приложений для домашнего экрана

1. Использование и внешний вид
   • Обложки приложений
   • Внешний вид
     • Пример смены контекста в зависимости от сценариев
     • Пример отображения статуса приложения
2. Описание типов обложек и рекомендации
   • Превью (скриншот активной страницы приложения) без кнопок быстрых действий
   • Превью с кнопками быстрых действий
   • Обложка по шаблону
   • Кастомная обложка
3. Анатомия компонента

Использование и внешний вид

Обложки приложений

Обложка — это визуальное представление приложения, работающего в фоновом режиме на домашнем экране ОС Аврора.

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

Внешний вид

Обложки имеют прямоугольную форму:

• для мобильных телефонов и планшетов в портретном режиме — это вертикально вытянутый прямоугольник;
• для ландшафтной ориентации планшета — это горизонтально вытянутый прямоугольник.

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

Иллюстрация, четко дающая понять пользователю, что это обложка приложения Камера	Элементы интерфейса, знакомые пользователю из приложения Календарь	Таймлайн и обложка альбома демонстрирует текущее состояние приложения Музыка

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

• текст;
• компоненты приложений (элементы списка, события из календаря);
• иконки и прочая графика.

Обложка может отображать разные сценарии и состояния одного приложения.

Пример смены контекста в зависимости от сценариев

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

В стандартном режиме отображается текущее время и кнопки быстрых действий «Установить будильник» и «Запустить секундомер»	В режиме секундомера отображается отсчёт времени и кнопки быстрых действий «Добавить круг» и «Пауза»	В режиме таймера отображается отсчёт времени и кнопки быстрых действий «Остановить» и «Пауза»

Пример отображения статуса приложения

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

Отображение статуса приложения — не добавлено ни одной учётной записи	Обложка в момент стабильной работы отображает количество непрочитанных писем	Обложка в случае возникновения ошибки демонстрирует уведомление о проблеме

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

Описание типов обложек и рекомендации

Существует несколько типов обложек:

1. Превью (скриншот активной страницы приложения) без кнопок быстрых действий.
2. Превью с кнопками быстрых действий.
3. Обложка по стандартному шаблону.
4. Кастомная обложка.

1. Превью (скриншот активной страницы приложения) без кнопок быстрых действий

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

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

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

Пример обложки со скриншотом для приложения Почта	Пример обложки со скриншотом для приложения Браузер	Пример обложки со скриншотом для приложения Настройки

2. Превью с кнопками быстрых действий

Аналогично предыдущему варианту, но с кнопками быстрых действий.

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

Пример обложки приложения Почта с быстрыми действиями «Написать письмо» и «Синхронизировать»	Пример скриншота приложения Браузер с быстрым действием «Новая вкладка»	Пример скриншота приложения Настройки с быстрым действием «Поиск»

3. Обложка по шаблону

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

Каждый из указанных в шаблоне элементов является необязательным.

1. Заголовок первого уровня (H1) демонстрирует наиболее важную информацию, чаще это число. В случае, если значение не помещается в выделенную область, текст уходит в прозрачность. Рекомендуется размещать в этом блоке только очень краткую и важную информацию, на которую необходимо сделать акцент. FontSize 60 pt × PixelRatio
2. Заголовок второго уровня (H2), чаще используется как пояснение в основному заголовку. Рекомендуемый размер – не более двух строк текста. Если текст не умещается, то текст в последней строке обрезается с добавлением в конце «…». FontSizeExtraSmall QtBold
3. Дополнительный текст (P1) — дополнительная информация. FontSizeTiny. Рекомендуемый размер – не более двух строк текста. Если текст не умещается, то текст в последней строке обрезается с добавлением в конце «…».
4. Иконка в размере IconSizeSmallPlus рядом с заголовком H1 поможет пользователю понять контекст.

Пример отображения температуры воздуха	Пример отображения времени	Пример отображения количества непрочитанных сообщений

4. Кастомная обложка

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

При разработке дизайна обложек важно учитывать:

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

Пример отображения списка	Пример отображения инфографики	Пример отображения шкалы времени	Пример отображения списка из составных элементов

Анатомия компонента

Обложка приложения обязательно содержит в себе:

• иконку (2) и имя (3) приложения;

• фоновую размытую иконку приложения (1), как дополнительный цветовой идентификатор (используется только в тёмных атмосферах).

• Контентная область (4) может быть заполнена на усмотрение разработчика (см. вышеописанные типы обложек). Элементы 5-8 относятся к стандартному шаблону обложки, каждый из этих элементов опционален.

• Блок быстрых действий (9) может содержать от 1 до 3 кнопок-иконок быстрых действий в размере Theme.iconSizeSmall из набора иконок типа icon-cover.

Тип обложки	Портретная ориентация	Ландшафтная ориентация
Default Template
Preview
Preview + QuickActions
Custom