Поделиться через

Цвет в Windows

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

Совет

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

Цветовые режимы и темы

Изображение цветового героя

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

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

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

Акцентный цвет

Разнообразные элементы управления в режиме светлого

Различные элементы управления в темном режиме

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

Примеры

Откройте приложение коллекции WinUI 3 и просмотрите принципы цвета в действии

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

Цветовые принципы

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

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

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

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

Удобство использования

Иллюстрация контрастности

Контрастность

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

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

Иллюстрация освещения

Освещение

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

Иллюстрация для режима цветовой слепоты

Цветовая слепота

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

  • Last updated on