Дизайн строки заголовка

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

Стандартный дизайн

В этом разделе описываются рекомендации по проектированию и поведение частей стандартной строки заголовка.

Панель

Design

• Стандартная строка заголовка имеет высоту 32px.
• Фон строки заголовка по умолчанию — Mica, однако мы рекомендуем, чтобы строки заголовков смешивались с остальной частью окна, если это возможно.
• Заголовки помогают пользователям различать, когда окно активно и неактивно. Все элементы строки заголовка должны быть полупрозрачными, если окно неактивно.
• Цвета строк заголовка должны настраиваться при переходе пользователей на темы высокой контрастности или между светлыми и темными режимами.
  • Для высококонтрастных тем приложения должны использовать класс SystemColors для определения правильного цвета элементов пользовательского интерфейса, чтобы обеспечить превосходный опыт использования высокой контрастности.

Поведение

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

Значок

Design

• Размер значка окна составляет 16 пикселей на 16 пикселей.
• Разместите значок на расстоянии 16px от левого края в LTR или от правого края в RTL.
  • Если кнопка "Назад" присутствует, поместите значок окна 16 пикселей справа от кнопки "Назад".
• Значок окна должен быть по вертикали в строке заголовка. Например, если высота строки заголовка составляет 32px, верхние и нижние поля — 8 пикселей.

Поведение

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

Заголовок

Design

• Поместите заголовок окна на расстоянии 16 пикселей от значка окна или кнопки "Назад".
  • Если ни значок, ни кнопка "Назад" не присутствуют, поместите заголовок окна на расстоянии 16 пикселей от левого края в LTR или от правого края в RTL.
• Заголовок окна должен использовать переменную пользовательского интерфейса Segoe (если она доступна) или шрифт пользовательского интерфейса Segoe.
• Заголовок окна должен использовать текст стиля заголовка (см. инструкцию по типу XAML).
• Заголовок окна может быть усечен, и многоточие добавляется, если ширина окна меньше длины элементов заголовка. Кнопки значка и заголовка (min, max и close) всегда должны быть полностью видимыми.

Поведение

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

Элементы управления субтитрами (свернуть, развернуть, восстановить, закрыть)

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

Design

• Используйте эти значки для кнопок:
  • Иконка свернуть: E921 ChromeMinimize
  • Значок увеличения: E922 ChromeMaximize
  • Значок восстановления: E923 ChromeRestore
  • Значок закрытия: E8BB ChromeClose
• Значки для кнопок развертывания и восстановления имеют округленные углы.
• Кнопки на панели заголовка имеют подложки с полным заливом.
• Кнопки заголовка реагируют на состояние покоя, при наведении указателя мыши, при нажатии, активные и неактивные состояния.

Дополнительные шаблоны проектирования

Кнопка "Назад"

Design

Рекомендуемый значок кнопки назад: E830 ChromeBack

• Если присутствует кнопка "Назад", она должна быть помещена слева от заголовка приложения или комбинации значка/заголовка (в LTR).
• Кнопка "Назад" реагирует на состояние покоя, наведение курсора, нажатие, активные и неактивные состояния.
• Кнопка "Назад" должна быть размером 16x16 пикселей и вертикально центрирована в строке заголовка. Кнопка должна иметь полную обратную панель.
• Кнопка "Назад" должна быть 16 пикселей от левой границы в LTR или правой части границы в RTL и 16 пикселей от следующего элемента слева или справа от него.

Поиск (Search)

Design

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

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

Люди

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

Вкладки

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

Следующие шаги