Color

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

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

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

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

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

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

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

Themes

В приложениях Windows может использоваться светлая или темная тема. Тема определяет цвета фона, текста, значков и общих элементов управления приложения.

Светлая тема

Темная тема

По умолчанию тема приложения Windows — это предпочтения темы пользователя из Windows Параметры или темы устройства по умолчанию. Тем не менее вы можете задать тему специально для приложения Windows.

Изменение темы

Вы можете изменить тему, указав соответствующее значение свойства RequestedTheme в файле App.xaml.

<Application
    x:Class="App9.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App9"
    RequestedTheme="Dark">
</Application>

Удаление свойства RequestedTheme означает, что приложение будет применять системные параметры пользователя.

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

Тестирование тем

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

Кисти темы

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

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

Совет

Визуальный обзор доступных кистей темы см. в приложении коллекции WinUI 3: Цвета

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

Использование кистей темы

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

Например, эти шаблоны элементов для ListView демонстрируют использование кистей темы в пользовательском шаблоне.

<ListView ItemsSource="{x:Bind ViewModel.Recordings}">
    <ListView.ItemTemplate>
        <DataTemplate x:Name="DoubleLineDataTemplate" x:DataType="local:Recording">
            <StackPanel Orientation="Horizontal" Height="64" AutomationProperties.Name="{x:Bind CompositionName}">
                <Ellipse Height="48" Width="48" VerticalAlignment="Center">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="Placeholder.png"/>
                    </Ellipse.Fill>
                </Ellipse>
                <StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
                    <TextBlock Text="{x:Bind CompositionName}" Style="{ThemeResource BodyStrongTextBlockStyle}" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
                    <TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource TextFillColorTertiaryBrush}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Дополнительные сведения об использовании кистей тем в приложении см. в статье Ресурсы темы XAML.

Цветовая тема

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

Переопределение цвета элементов

Чтобы изменить цвет элементов, вставьте следующий код в app.xaml.

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="SystemAccentColor">#107C10</Color>
    </ResourceDictionary>
</Application.Resources>

Выбор цвета элементов

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

Палитра цветов элементов

Алгоритм цвета элементов в оболочке Windows создает светлые и темные оттенки цвета элементов.

Эти оттенки можно использовать как ресурсы темы:

• SystemAccentColorLight3
• SystemAccentColorLight2
• SystemAccentColorLight1
• SystemAccentColorDark1
• SystemAccentColorDark2
• SystemAccentColorDark3

Вы также можете получить доступ к палитре цветов элементов программными средствами с помощью метода UISettings.GetColorValue и перечисления UIColorType.

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

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAccentColor}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemAccentColorLight1}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemAccentColorDark1}"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

<Button Content="Button"></Button>

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

На приведенной ниже схеме показаны примеры различных светлых и темных оттенков цвета элементов и применения цветных типов на цветной поверхности.

Дополнительные сведения об использовании стилей для элементов управления см. в статье Стили XAML.

API цветов

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

<Button Background="MediumSlateBlue" Foreground="White">Button text</Button>

Вы можете создать собственные цвета из RGB- или шестнадцатеричных значений с помощью структуры Color в XAML.

<Color x:Key="LightBlue">#FF36C0FF</Color>

Вы также можете создать такой цвет в коде с помощью метода FromArgb.

Color LightBlue = Color.FromArgb(255,54,192,255);

Windows::UI::Color LightBlue = Windows::UI::ColorHelper::FromArgb(255,54,192,255);

Буквы "Argb" означают "альфа" (непрозрачность), "красный", "зеленый" и "синий" — четыре компонента цвета. Каждый аргумент может принимать значение от 0 до 255. Можно пропустить первое значение, чтобы использовать непрозрачность по умолчанию (255 или 100 %).

Примечание.

Если вы используете C++, вам необходимо создать цвета с помощью класса ColorHelper.

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

<ResourceDictionary>
    <SolidColorBrush x:Key="ButtonBackgroundBrush" Color="#FFFF4F67"/>
    <SolidColorBrush x:Key="ButtonForegroundBrush" Color="White"/>
</ResourceDictionary>

Дополнительные сведения об использовании кистей см. в статье Кисти XAML.

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

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

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

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

Освещение

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

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

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

Связанные

• Стили XAML
• Ресурсы темы XAML
• Коллекция WinUI 3 — цвета