Акриловый материал

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

Важные API: класс AcrylicBrush, свойство Background, свойство Window.SystemBackdrop, класс DesktopAcrylicBackdrop

Акрил и система проектирования Fluent Design

Система Fluent Design позволяет создавать современные и эффективные пользовательские интерфейсы, которые отличаются яркостью, глубиной, движением, материальностью и масштабированием. Акрил — это компонент системы проектирования Fluent Design, добавляющий физическую текстуру (материал) и глубину в приложение. Дополнительные сведения см. в разделе Fluent Design — Материал.

Типы акриловых смесей

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

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

Избегайте слоев нескольких акриловых поверхностей: несколько слоев фонового акрила могут создавать отвлекающие оптические иллюзии.

Когда использовать акрил

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

Временные поверхности

• Используйте акрил для фона во временных элементах пользовательского интерфейса.

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

По умолчанию многие элементы управления XAML отображают акрил. MenuFlyout, AutoSuggestBox, ComboBox и аналогичные элементы управления со всплывающими окнами с автоматическим закрытием используют акрил при открытии.

Поддержка пользовательских интерфейсов и вертикальных панелей

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

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

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

Удобство использования и адаптируемость

Акрил автоматически адаптируется к разнообразным устройствам и контекстам.

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

• Когда пользователь отключает эффекты прозрачности в параметрах > Персонализация > Цвета.
• При активации режима экономии батареи.
• Когда приложение выполняется на низком оборудовании.

Кроме того, только фон акрила заменит свою прозрачность и текстуру на сплошной цвет.

• Когда окно приложения на рабочем столе деактивируется.
• Когда приложение работает на Xbox, HoloLens или в режиме планшета.

Вопросы разборчивости

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

Применение акрила в приложении

Сведения о применении фонового акрила или акрила в приложении, включая создание пользовательских акриловых кистей, более подробную информацию см. в статье Apply Mica or Acrylic materials in desktop apps for Windows 11.

Что рекомендуется и что не рекомендуется делать

• Используйте акрил на временных поверхностях.
• Распространите акрил на как минимум один край вашего приложения, чтобы обеспечить бесшовный опыт, плавно интегрируясь в окружение приложения.
• Не помещайте акрил рабочего стола на большие фоновые поверхности вашего приложения.
• Не размещайте несколько акриловых панелей рядом друг с другом, так как это приводит к нежелательной видимой шве.
• Не размещайте цветный текст над акриловыми поверхностями.

История создания акрила

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

Состав акрила: фоновые элементы, размытие, режим наложения 'исключение', цвет и оттенок, шум.

Примеры

Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из Microsoft Store или просмотрите исходный код GitHub.

Связанные статьи

Общие сведения о Fluent Design