Kolor w systemie Windows

System Windows wykorzystuje kolor, aby ułatwić użytkownikom skoncentrowanie się na swoich zadaniach, wskazując hierarchię wizualizacji i strukturę między elementami interfejsu użytkownika. Kolor jest kontekstowo adekwatny i używany do zapewnienia uspokajającej podstawy, delikatnie wzbogacając interakcje użytkowników oraz podkreślając istotne elementy tylko wtedy, gdy jest to konieczne.

Tryby kolorów

System Windows obsługuje dwa tryby kolorów lub motywy: jasny i ciemny. Każdy tryb składa się z zestawu neutralnych wartości kolorów, które są automatycznie dostosowywane w celu zapewnienia optymalnego kontrastu.

Zarówno w trybie jasnym, jak i ciemnym, ciemniejsze kolory wskazują na powierzchnie tła o mniejszym znaczeniu. Ważne powierzchnie są wyróżnione jaśniejszymi i jaśniejszymi kolorami. Aby uzyskać więcej informacji, zobacz warstwowanie i elewacja.

Kolor wyróżniający

Kolor akcentu służy do wyróżniania ważnych elementów w interfejsie użytkownika i wskazywania stanu interaktywnego obiektu lub kontrolki. Wartości kolorów akcentu są generowane automatycznie i zoptymalizowane pod kątem kontrastu zarówno w trybach jasnych, jak i ciemnych. Kolory wyróżniające są używane oszczędnie do wyróżniania ważnych elementów i przekazywania informacji o stanie elementu interaktywnego.

Przykłady

Aplikacja z galerii WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Kolor w aplikacjach systemu Windows

Kolor zapewnia intuicyjny sposób przekazywania informacji użytkownikom w aplikacji: może służyć do wskazywania interakcyjności, przekazywania opinii do akcji użytkownika i zapewniania interfejsowi poczucia ciągłości wizualnej.

W aplikacjach systemu Windows kolory są określane głównie kolorem wyróżniającym i motywem. W tym artykule omówimy, jak używać kolorów w aplikacji oraz jak wykorzystać kolor akcentu i zasoby motywu, aby aplikacja systemu Windows była użyteczna w każdym kontekście motywu.

Zasady dotyczące kolorów

Tematy

Aplikacje systemu Windows mogą używać jasnego lub ciemnego motywu aplikacji. Motyw ma wpływ na kolory tła aplikacji, tekstu, ikon i typowych kontrolek.

Motyw jasny

Motyw ciemny

Domyślnie motyw aplikacji systemu Windows jest preferencją użytkownika z ustawień systemu Windows lub motywem domyślnym urządzenia. Można jednak ustawić motyw specjalnie dla aplikacji systemu Windows.

Zmienianie motywu

Motywy można zmienić, zmieniając właściwość RequestedTheme w pliku 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>

Usunięcie właściwości RequestedTheme oznacza, że aplikacja będzie używać ustawień systemowych użytkownika.

Użytkownicy mogą również wybrać motyw o dużym kontraście, który używa małej palety kontrastujących kolorów, co ułatwia wyświetlanie interfejsu. W takim przypadku system zastąpi żądany motyw.

Motywy testowania

Jeśli nie zażądasz motywu dla aplikacji, upewnij się, że aplikacja jest testowa zarówno w jasnych, jak i ciemnych motywach, aby upewnić się, że aplikacja będzie czytelna we wszystkich warunkach.

Pędzle tematyczne

Standardowe kontrolki automatycznie używają pędzli z motywów i, aby dostosować kontrast dla jasnych i ciemnych motywów.

Na przykład poniżej przedstawiono ilustrację sposobu użycia pędzli motywu AutoSuggestBox:

Przykład kontroli pędzli motywów

Używanie pędzli motywów

<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>

Aby uzyskać więcej informacji na temat używania pędzli motywów w aplikacji, zobacz Zasoby motywu.

Kolory wyróżniające

Typowe kontrolki używają koloru wyróżniającego do przekazywania informacji o stanie. Domyślnie kolorem akcentu jest SystemAccentColor, który użytkownicy wybierają w swoich ustawieniach. Można jednak również dostosować kolor wyróżniający aplikacji, aby odzwierciedlać markę.

Zastępowanie koloru akcentu

Aby zmienić kolor wyróżniający aplikacji, umieść następujący kod w pliku app.xaml.

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

Wybieranie koloru wyróżniającego

Jeśli wybierzesz niestandardowy kolor wyróżniający dla aplikacji, upewnij się, że tekst i tła używające koloru wyróżniającego mają wystarczający kontrast w celu uzyskania optymalnej czytelności. Aby przetestować kontrast, możesz użyć narzędzia do wybierania kolorów w ustawieniach Windows lub możesz skorzystać z tych internetowych narzędzi do analizy kontrastu.

Paleta kolorów wyróżniających

Algorytm koloru akcentu w powłoce systemu Windows generuje jasne i ciemne odcienie koloru akcentu.

Te odcienie są dostępne jako zasoby motywu, oznaczone jako :

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

Możesz również programowo uzyskać dostęp do palety kolorów akcentu za pomocą metody UISettings.GetColorValue i wyliczenia UIColorType.

Możesz użyć palety kolorów wyróżniających do kolorowania motywów w aplikacji. Poniżej przedstawiono przykład użycia palety kolorów wyróżniających na przycisku.

<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>

W przypadku używania koloru tekstu na kolorowym tle upewnij się, że istnieje wystarczający kontrast między tekstem a tłem. Domyślnie hiperłącze lub hipertekst będą używać koloru akcentu. W przypadku stosowania odmian koloru akcentu do tła należy użyć odmiany oryginalnego koloru wyróżniającego, aby zoptymalizować kontrast koloru kolorowego tekstu na kolorowym tle.

Na poniższym wykresie przedstawiono przykład różnych jasnych/ciemnych odcieni koloru akcentowego oraz jak kolorowe litery mogą być stosowane na kolorowej powierzchni.

Aby uzyskać więcej informacji na temat kontrolek stylów, zobacz style XAML.

Kolor API

Istnieje kilka interfejsów API, których można użyć do dodawania koloru do aplikacji. Najpierw klasa Kolory , która implementuje dużą listę wstępnie zdefiniowanych kolorów. Dostęp do nich można uzyskać automatycznie za pomocą właściwości XAML. W poniższym przykładzie utworzymy przycisk i ustawimy właściwości tła i koloru pierwszego planu na elementy członkowskie klasy Colors.

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

Możesz utworzyć własne kolory na podstawie wartości RGB lub z wartości szesnastkowych, korzystając ze struktury Color w języku XAML.

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

Możesz również utworzyć ten sam kolor w kodzie przy użyciu metody FromArgb .

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

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

Litery "Argb" oznacza Alfa (nieprzezroczystość), Czerwony, Zielony i Niebieski, które są czterema składnikami koloru. Każdy argument może wahać się od 0 do 255. Możesz pominąć pierwszą wartość, która da domyślną nieprzezroczystość 255 lub 100% nieprzezroczyste.

Najczęstszym zastosowaniem Color jest użycie jako argument dla SolidColorBrush, który może służyć do malowania elementów interfejsu użytkownika jednolitym kolorem. Te szczotki są zwykle definiowane w ResourceDictionary, dzięki czemu mogą być ponownie używane dla wielu elementów.

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

Aby uzyskać więcej informacji na temat używania pędzli, zobacz pędzle XAML.

Użyteczność

Powiązane

• style XAML
• zasoby motywu XAML
• Galeria WinUI 3 — kolory