Увеличение уровня в Windows

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

Совет

В этой статье описывается применение языка Fluent Design к приложениям Windows. Дополнительные сведения см. в разделе Fluent Design — Элементы оформления.

Возвышенность

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

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

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

Окно приложения

Окно
Значение высоты: 128
Ширина штриха: 1

Модальное диалоговое окно

Диалоговое окно
Значение высоты: 128
Ширина штриха: 1

Всплывающее меню

Всплывающее окно
Значение высоты: 32
Ширина штриха: 1

Подсказка для поля со списком

подсказка
Значение высоты: 16
Ширина штриха: 1

Область пользовательского интерфейса, содержащая несколько областей содержимого

карточки
Значение высоты: 8
Ширина штриха: 1

Поле со списком

Элемент управления
Значение высоты: 2
Ширина штриха: 1

Пустая область пользовательского интерфейса

Слой
Значение высоты: 1
Ширина штриха: 1

Элементы управления в Windows 11 изменяют свою высоту и контур, чтобы указать состояние. Интенсивность отрисованной тени изменяется в зависимости от темы при равенстве значений.

Кнопка в состоянии по умолчанию

Отдых
Значение высоты: 2
Ширина штриха: 1

Кнопка в состоянии наведения указателя мыши

Наведение
Значение высоты: 2
Ширина штриха: 1

Кнопка в состоянии нажатия

Нажато
Значение высоты: 1
Ширина штриха: 1

Наслоение

Окно приложения с одной областью содержимого

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

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

Примечание.

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

Windows 11 использует двухуровневую систему для приложений. Эти два уровня создают иерархию и обеспечивают ясность, сохраняя внимание пользователей на том, что самое важное.

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

Тени

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

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

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

Чтобы узнать, как реализовать тени с помощью ThemeShadow и DropShadow в приложении, см. статью "Тени" в приложениях Windows.