Панель приложения

1. Использование
2. Рекомендации
3. Примеры использования
4. Взаимодействие с Панелью приложения
   • Нажатие на элементы управления
   • Выбор элемента жестом быстрого доступа к контекстным действиям
   • Сворачивание Панели управления
5. Основное
   • Положение на странице
     • Панель приложения и Многопанельный режим
     • Фон и разделитель
     • Наполнение и варианты компоновки
   • Заполнитель (Spacer) и группы элементов управления
6. Элементы управления и навигации
   • Заголовок и подзаголовок (Title)
     • Заголовок. Состояние в покое
     • Заголовок и подзаголовок. В покое
     • Кликабельный заголовок. В покое и в фокусе
     • Кликабельный заголовок и подзаголовок. В покое и в фокусе
   • Кнопки (Button)
     • Кнопка-иконка в Панели управления. Состояние в покое
     • Кнопка-иконка в Панели управления. Состояние в фокусе
     • Текстовая кнопка. Состояние в покое
     • Текстовая кнопка. Состояние в фокусе
     • Кнопка “иконка+текст”. Состояние в покое
     • Кнопка “иконка+текст”. Состояние в фокусе
   • Поисковая строка
     • Комбинации и отступы
     • Поисковая строка. Состояние в покое
     • Поисковая строка. Состояние в фокусе
   • Контекстная подсказка
7. Жест быстрого доступа к контекстным действиям
   • Использование
   • Механика

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

Основной функцией компонента является возможность управлять содержимым страницы.

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

Элементы управления можно формировать в группы. Для разделения групп используется заполнитель (Spacer). Заполнители могут быть как фиксированной ширины, так и равномерно заполнять собой свободное пространство. Подробнее о заполнителях в соответствующем разделе, а об элементах управления — в блоке Панель приложения. Элементы управления.

Рекомендации

Рекомендуется использовать Панель приложения для управления контентом страницы и выполнения действий, связанных с текущей страницей.

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

• AppBar может содержать в себе заголовок и подзаголовок (в том числе с аватаром);
• AppBar может управляться специальным жестом быстрого доступа к контекстным действиям (далее “жест вытягивания”).

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

Заголовок — важная часть страницы, так как он помогает пользователю быстро определить своё местоположение в приложении. Компонент AppBar допустимо использовать в качестве заголовка, исключая при необходимости из него элементы управления. Рекомендуется использовать краткие заголовки и подзаголовки, чётко определяющие назначение страницы, таким образом остаётся достаточно пространства для элементов управления и визуально не перегружается компонент. Возможно использование компонента без заголовка, в случае, если контекст страницы явно указывает пользователю, где он находится.

Панель может скрываться со страницы, например при прокрутке контента. Используя скрываемую Панель приложения нельзя забывать и об обратном поведении — пользователь всегда должен иметь возможность вызвать её из скрытого состояния. По умолчанию верхнюю панель всегда можно вызвать жестом быстрого доступа, дополнительные способы раскрытия Панели приложения на усмотрение разработчика (например обратная прокрутка или нажатие по области содержимого).

Примеры использования

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

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

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

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

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

Взаимодействие с Панелью приложения

Есть два способа взаимодействия с элементами компонента — нажатием на сам элемент или специальным жестом быстрого доступа к контекстным действиям в удобной области экрана (только для верхнего позиционирования).

Нажатие на элементы управления

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

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

С описанием работы жеста быстрого доступа к контекстным действиям (далее “Жест”) можно ознакомиться в соответствующем разделе.

Появление всплывающего меню отлично демонстрирует разницу в поведении системы на активацию кнопки жестом и нажатием по ней.

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

Сворачивание Панели управления

Компонент может скрываться (сворачиваться) при прокрутке содержимого и разворачиваться (активацией Жеста или при обратной прокрутке).

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

Планшетный интерфейс в многопанельном режиме — AppBar’ы не скрываются при пролистывании контента.

Пример скрытия панели приложения при прокрутке контента в интерфейсе смартфона.

Основное

Положение на странице

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

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

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

Панель приложения и Многопанельный режим (AppBar & SplitView)

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

При управлении панелью жестом быстрого доступа в многопанельном режиме (SplitView), все панели приложения условно объединяются в один и управление жестом происходит сразу по всем панелям.

Наполнение и варианты компоновки

Фон и разделитель

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

Если в компоненте используется фон, то он всегда распространяется и на статусную строку.

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

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

Примеры использования.

	Панель управления с разделителем без фона.
	Панель управления с фоном в монохромном режиме.
	Панель управления со стандартным фоном.

Заполнитель (Spacer) и группы элементов управления

Элементы управления могут объединяться в группы и равномерно распределяться внутри компонента при помощи заполнителей (Spacer).

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

Ниже приведено несколько примеров расположения элементов управления и их групп.

Две группы элементов и один заполнитель.

Две группы элементов с фиксированной шириной заполнителя.

Заголовок + 2 группы элементов с автоматическим и фиксированным заполнителями.

Заголовок заданной ширины + 2 группы элементов.

Элементы управления и навигации

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

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

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

Заголовок и подзаголовок (Title)

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

Максимальная ширина блока: все доступное пространство за вычетом иных элементов в AppBar. Если заголовок длинный и занимает всё свободное пространство до иных элементов панели, то между заголовком и элементами должен быть установлен минимальный отступ PaddingMedium.

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

Блоку Заголовок можно задать предпочтительную ширину.

В блок аватара допустимо помещать:

• изображения;
• иконку;
• небольшие текстовые метки;
• заливку фона контейнера.

Возможности редактирования блока аватара:

• изображения — смена изображения;

• иконка — смена иконки;

• текстовые метки — смена цвета и размера шрифта (не рекомендуется использовать шрифт менее FontSizeTiny и вписывать текстовые метки, состоящие из более чем 3-х символов);

• заливка фона — смена цвета;

• смена радиуса скругления блока.

Заголовок. Состояние в покое

Располагается только в левой части AppBar.

Вертикальное выравнивание: по центру.

Заголовок и подзаголовок. В покое

Располагается в блоке Title под основным заголовком также слева.

Вертикальное выравнивание блока “Заголовок+подзаголовок”: по центру.

Пример использования в AppBar.

Кликабельный заголовок. В покое и в фокусе

Кликабельный заголовок и подзаголовок. В покое и в фокусе

Пример использования в AppBar.

Кнопки (Button)

Кнопка-иконка в Панели управления. Состояние в покое

Используются иконки размера smallPlus (48х48).

Можно располагать где угодно, по желанию.

Вертикальное выравнивание: по центру.

Основной цвет иконки: Primary.

Пример использования.

Кнопка-иконка в Панели управления. Состояние в фокусе

При нажатии или выборе жестом быстрого доступа подсвечивается фон контейнера.

Пример использования.

Текстовая кнопка. Состояние в покое

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

Пример использования.

Текстовая кнопка. Состояние в фокусе

При нажатии или выборе жестом быстрого доступа подсвечивается фон контейнера.

Пример использования.

Кнопка “иконка+текст”. Состояние в покое

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

Пример использования.

Кнопка “иконка+текст”. Состояние в фокусе

При нажатии или выборе жестом быстрого доступа подсвечивается фон контейнера.

Пример использования.

Поисковая строка

Поисковая строка в Панели приложения может быть только в изначально развёрнутом виде и только одна. Поисковая строка может быть как растянута на всю ширину AppBar (или всю свободную его часть), так и иметь фиксированную ширину. Не рекомендуется делать поле поиска менее 300dp в ширину, чтобы введённый поисковый запрос был виден пользователю. По умолчанию поле поиска используется без какого-либо фона. Использование стандартного фона опционально.

Комбинации и отступы

Поисковую строку допустимо размещать рядом с другими элементами — кнопками, заголовком. Элементы можно также группировать. Размещая строку поиска совместно с другими элементами, важно отделять их друг от друга заполнителями размером не менее PaddingMedium.

Пример комбинации заголовка, поискового поля и кнопки в группе.

Пример комбинации заголовка, поискового поля в его минимальном размере и кнопок в группе.

Поисковая строка. Состояние в покое

Поисковая строка без фона.

Поисковая строка с фоном.

Пример использования.

Поисковая строка. Состояние в фокусе

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

Поисковая строка без фона.

Поисковая строка с фоном.

Пример использования.

Контекстная подсказка

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

Также возможно добавить вызов подсказки по долгому нажатию элемента управления — подсказка появляется при долгом нажатии и постепенно затухает спустя 3 с.

Пример использования в Панели приложения.

Жест быстрого доступа к контекстным действиям

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

Жест быстрого доступа к контекстным действиям разработан преимущественно для взаимодействия с Панелью приложения. Этот жест позволит “дотянуться” до самых труднодоступных элементов в компоненте практически из любой точки экрана.

Жест доступен в любом приложении, где применяется верхняя Панель.

При управлении элементами Панели жестом быстрого доступа в многопанельном режиме SplitView, все элементы условно объединяются в группу и управление жестом происходит сразу по всем элементам.

Механика

Жест работает следующим образом:

1. Активация жеста происходит скольжением одним пальцем сверху вниз по любой боковой грани экрана.

   

2. Скольжение влево/вправо: позволяет не отрывая пальца продолжить взаимодействие с интерактивными элементами. Переключение между элементами управления происходит не отрывая пальца от экрана.

   

3. При отрыве пальца от экрана происходит активация элемента управления, находящегося в фокусе.

   

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