色彩Color

主角圖像

色彩可提供直覺的溝通資訊方式給您應用程式中的使用者:色彩可用來指出互動性、提供意見反應給使用者動作,以及讓您的介面產生視覺延續性。Color provides an intuitive way of communicating information to users in your app: it can be used to indicate interactivity, give feedback to user actions, and give your interface a sense of visual continuity.

在 UWP 應用程式中,色彩主要由輔色及佈景主題來決定。In UWP apps, colors are primarily determined by accent color and theme. 在本文中,我們會討論如何在應用程式中使用色彩,以及如何使用輔色及佈景主題資源,讓您的 UWP 應用程式可用於任何佈景主題背景。In this article, we'll discuss how you can use color in your app, and how to use accent color and theme resources to make your UWP app usable in any theme context.

色彩原則Color principles

以有意義的方式使用色彩。Use color meaningfully. 謹慎使用色彩來醒目提示重要元素,可以協助建立流暢、直覺的使用者介面。When color is used sparingly to highlight important elements, it can help create a user interface that is fluid and intuitive.

使用色彩來表示互動性。Use color to indicate interactivity. 最好選擇一種色彩來表示您應用程式中的可互動元素。It's a good idea to choose one color to indicate elements of your application that are interactive. 例如,許多網頁使用藍色文字來表示超連結。For example, many web pages use blue text to denote a hyperlink.

色彩是個人的。Color is personal. 在 Windows 中,使用者可以選擇在他們的體驗中要反映的輔色和淺色或深色佈景主題。In Windows, users can choose an accent color and a light or dark theme, which are reflected throughout their experience. 您可以選擇如何將使用者的輔色及佈景主題整合到應用程式中,以提供個人化的體驗。You can choose how to incorporate the user's accent color and theme into your application, personalizing their experience.

色彩是與文化有關的。Color is cultural. 請考慮您使用的色彩會如何被來自不同文化背景的人解讀。Consider how the colors you use will be interpreted by people from different cultures. 例如,在某些文化中,藍色代表美德和保護,但在其他文化中代表服喪。For example, in some cultures the color blue is associated with virtue and protection, while in others it represents mourning.

佈景主題Themes

UWP 應用程式可以使用淺色或深色應用程式佈景主題。UWP apps can use a light or dark application theme. 佈景主題會影響應用程式的背景、文字、圖示和通用控制項The theme affects the colors of the app's background, text, icons, and common controls.

淺色佈景主題Light theme

淺色佈景主題

深色佈景主題Dark theme

深色佈景主題

根據預設,您的 UWP 應用程式佈景主題是 Windows 設定中使用者的佈景主題喜好設定,或裝置的預設佈景主題 (也就是 XBox 上的深色)。By default, your UWP app's theme is the user’s theme preference from Windows Settings or the device's default theme (i.e., dark on XBox). 不過,您可以設定適用於 UWP 應用程式的佈景主題。However, you can set the theme for your UWP app.

變更佈景主題Changing the theme

您可以透過變更 App.xaml 檔案中的 RequestedTheme 屬性來變更佈景主題。You can change themes by changing the RequestedTheme property in your App.xaml file.

<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 屬性表示您的應用程式將會使用使用者的系統設定。Removing the RequestedTheme property means that your application will use the user’s system settings.

使用者也可以選取高對比佈景主題以使用色彩種類少的對比色,讓介面更容易分辨。Users can also select the high contrast theme, which uses a small palette of contrasting colors that makes the interface easier to see. 在此情況下,系統將會覆寫您的 RequestedTheme。In that case, the system will override your RequestedTheme.

測試佈景主題Testing themes

如果您未要求適用於您應用程式的佈景主題,請務必在深色和淺色佈景主題中測試您的應用程式,以確保您的應用程式在任何情況下都清晰可見。If you don't request a theme for your app, make sure to test your app in both light and dark themes to ensure that your app will be legible in all conditions.

注意:在 Visual Studio 中,預設 RequestedTheme 是淺色,因此您必須變更 RequestedTheme 以測試兩者。Note: In Visual Studio, the default RequestedTheme is light, so you'll need to change the RequestedTheme to test both.

佈景主題筆刷Theme brushes

通用控制項會自動使用佈景主題筆刷來調整深色和淺色佈景主題的對比。Common controls automatically use theme brushes to adjust contrast for light and dark themes.

例如,以下說明 AutoSuggestBox 如何使用佈景主題筆刷:For example, here's an illustration of how the AutoSuggestBox uses theme brushes:

佈景主題筆刷控制項範例

佈景主題筆刷適用於下列目的:The theme brushes are used for the following purposes:

  • Base 適用於文字。Base is for text.
  • Alt 是 Base 的反轉。Alt is the inverse of Base.
  • Chrome 適用於最上層元素,例如瀏覽窗格或命令列。Chrome is for top-level elements, such as navigation panes or command bars.
  • List 適用於清單控制項。List is for list controls.

Low/Medium/High 表示色彩濃度。Low/Medium/High refer to the intensity of the color.

使用佈景主題筆刷Using theme brushes

建立自訂控制項的範本時,請使用佈景主題筆刷,而非硬式編碼色彩值。When creating templates for custom controls, use theme brushes rather than hard code color values. 如此一來,您的應用程式可以輕鬆地適應任何佈景主題。This way, your app can easily adapt to any theme.

例如,這些 ListView 的項目範本會示範如何在自訂範本中使用主題筆刷。For example, these item templates for ListView demonstrate how to use theme brushes in a custom template.

具有圖示的雙行清單項目範例

<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 BaseTextBlockStyle}" Foreground="{ThemeResource SystemControlPageTextBaseHighBrush}" />
                    <TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

如需在應用程式中使用佈景主題筆刷的詳細資訊,請參閱佈景主題資源For more information about how to use theme brushes in your app, see Theme Resources.

輔色Accent color

通用控制項可使用輔色來傳遞狀態資訊。Common controls use an accent color to convey state information. 根據預設,輔色是使用者在他們的設定中選取的 SystemAccentColorBy default, the accent color is the SystemAccentColor that users select in their Settings. 不過,您也可以自訂應用程式的輔色,以反映品牌。However, you can also customize your app's accent color to reflect your brand.

視窗控制項

使用者選取的強調標題 使用者選取的輔色user-selected accent header user-selected accent color

自訂強調標題 自訂品牌輔色custom accent header custom brand accent color

覆寫輔色Overriding the accent color

若要變更您應用程式的輔色,請更換 app.xaml 中的下列程式碼。To change your app's accent color, place the following code in app.xaml.

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

選擇輔色Choosing an accent color

如果您為您的應用程式選取自訂輔色,請確保使用輔色的文字和背景具有足夠對比,以獲得最佳可讀性。If you select a custom accent color for your app, please make sure that text and backgrounds that use the accent color have sufficient contrast for optimal readability. 若要測試對比,您可以使用 Windows 設定中的色彩選擇器工具,或者也可以使用這些線上對比工具To test contrast, you can use the color picker tool in Windows Settings, or you can use these online contrast tools.

Windows 設定自訂輔色選擇器

輔色調色盤Accent color palette

Windows 殼層中的輔色演算法會產生輔色的淺色和深色色調。An accent color algorithm in the Windows shell generates light and dark shades of the accent color.

輔色調色盤

這些色調可用佈景主題資源 存取:These shades can be accessed as theme resources:

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

您也可以使用 UISettings.GetColorValue 方法和 UIColorType 列舉,以程式設計方式存取輔色調色盤。You can also access the accent color palette programmatically with the UISettings.GetColorValue method and UIColorType enum.

您可以使用輔色調色盤,在您的應用程式中進行色彩佈景主題設定。You can use the accent color palette for color theming in your app. 以下是如何在按鈕上使用輔色調色盤的範例。Below is an example of how you can use the accent color palette on a button.

套用至按鈕的輔色調色盤

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

在彩色背景上使用彩色文字時,請確定文字與背景之間有足夠對比。When using colored text on a colored background, make sure there is enough contrast between text and background. 根據預設,超連結或超文字會使用輔色。By default, hyperlink or hypertext will use the accent color. 如果您套用輔色的變化至背景,您應該使用原始輔色的變化以在彩色背景的彩色文字上獲得最佳對比。If you apply variations of the accent color to the background, you should use a variation of the original accent color to optimize the contrast of colored text on a colored background.

下圖顯示輔色的各種淺色/深色色調範例,以及如何在彩色表面上套用彩色類型。The chart below illustrates an example of the various light/dark shades of accent color, and how colored type can be applied on a colored surface.

色彩上的色彩

如需控制項樣式設定的詳細資訊,請參閱 XAML 樣式For more information about styling controls, see XAML styles.

色彩 APIColor API

有數個可用來增加應用程式色彩的 API。There are several APIs that can be used to add color to your application. 首先是 Colors 類別,可實作預先定義色彩的大型清單。First, the Colors class, which implements a large list of predefined colors. 這些都可使用 XAML 屬性自動存取。These can be accessed automatically with XAML properties. 在以下範例中,我們建立按鈕並設定背景和前景色彩屬性為 Colors 類別成員。In the example below, we create a button and set the background and foreground color properties to members of the Colors class.

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

您可以使用 XAML 中的 Color 結構,從 RGB 或十六進位值建立自己的色彩。You can create your own colors from RGB or hex values using the Color struct in XAML.

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

您也可以使用 FromArgb 方法,在程式碼中建立相同的色彩。You can also create the same color in code by using the FromArgb method.

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

字母「Argb」表示 Alpha (透明度)、紅色、綠色和藍色,色彩的四個元件。The letters "Argb" stands for Alpha (opacity), Red, Green, and Blue, which are the four components of a color. 每個引數的範圍為 0 到 255。Each argument can range from 0 to 255. 您可以選擇省略第一個值,如此會提供 255 的預設不透明度,亦即 100% 不透明。You can choose to omit the first value, which will give you a default opacity of 255, or 100% opaque.

注意

如果您使用 C++,則必須使用 ColorHelper 類別建立色彩。If you're using C++, you must create colors by using the ColorHelper class.

Color 的最常見用途是做為 SolidColorBrush 的引數,可使用單一純色來繪製 UI 元素。The most common use for a Color is as an argument for a SolidColorBrush, which can be used to paint UI elements a single solid color. 這些筆刷一般定義在 ResourceDictionary 中,因此可重複使用於多個元素。These brushes are generally defined in a ResourceDictionary, so they can be reused for multiple elements.

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

如需如何使用筆刷的詳細資訊,請參閱 XAML 筆刷For more information on how to use brushes, see XAML brushes.

界定系統色彩的範圍Scoping system colors

除了在應用程式中定義您自己的色彩之外,您也可以使用 ColorPaletteResources 標記,將系統化色彩的範圍設定到整個應用程式上任何想要的區域。In addition to defining your own colors in your app, you can also scope our systematized colors to desired regions throughout your app by using the ColorPaletteResources tag. 此 API 不僅可讓您透過少數幾個屬性設定,同時為大量控制項設定色彩及佈景主題,還提供了一般無法透過手動定義自訂色彩取得的系統優勢:This API allows you to not only colorize and theme large groups of controls at once by setting a few properties, but also gives you many other system benefits that you wouldn't normally get with defining your own custom colors manually:

  • 使用 ColorPaletteResources 設定的任何色彩不會影響高對比Any color set using ColorPaletteResources will not effect High Contrast
    • 這表示不需要任何其他設計或開發成本,就可讓您的應用程式更平易近人Meaning your app will be accessible to more people without any additional design or dev cost
  • 藉由在 API 上設定一個屬性,即可輕鬆地將色彩設定為淺色、暗色或這兩個佈景主題上的普遍色彩Can easily set colors to Light, Dark or pervasive across both themes by setting one property on the API
  • ColorPaletteResources 上設定的色彩會套用到所有也使用該系統色彩的類似控制項Colors set on ColorPaletteResources will cascade down to all similar controls that also use that system color
    • 在您維護品牌外觀時,這可確保您應用程式有一致的色彩內容This ensures that you will have a consistent color story across your app while maintaining the look of your brand
  • 可影響所有的視覺狀態、動畫和不透明度變化,且無須重新製作範本Effects all visual states, animations and opacity variations without needing to re-template

如何使用 ColorPaletteResourcesHow to use ColorPaletteResources

ColorPaletteResources 是一項 API,可將資源的範圍位置告知系統。ColorPaletteResources is an API that tells the system what resources are being scoped where. ColorPaletteResources 必須使用 X:key,而這可以是三個選項的其中一個:ColorPaletteResources must take an x:Key, that can be one of three choices:

如果您想在其中一個主題中有不同的自訂外觀,設定該 x:Key 可確保您的色彩適當地變更為系統或應用程式的佈景主題。Setting that x:Key will ensure that your colors change appropriately to the system or app theme, should you want a different custom appearance when in either theme.

如何套用已設定範圍的色彩How to apply scoped colors

透過 XAML 中的 ColorPaletteResources API 設定資源範圍,可讓您取用我們佈景主題資源庫中的任何系統色彩和筆刷,並可在頁面或容器的範圍內將其重新定義。Scoping resources through the ColorPaletteResources API in XAML allows you to take any system color or brush that's in our theme resources library and redefine them within the scope of a page or container.

例如,如果您已在方格中定義兩種系統色彩 - BaseLowBaseMediumLow,然後在頁面上放置兩個按鈕:一個在該方格內,一個在該方格外:For example, if you defined two system colors - BaseLow and BaseMediumLow inside a grid, and then placed two buttons on your page: one inside that grid, and one outside:

<Grid x:Name="Grid_A">
    <Grid.Resources>
        <ColorPaletteResources x:Key="Default"
        BaseLow="LightGreen"
        BaseMediumLow="DarkCyan"/>
    </Grid.Resources>

    <Buton Content="Button_A"/>
</Grid>
<Buton Content="Button_B"/>

Button_A 會是套用的新色彩,而 Button_B 仍看起來像是我們的系統預設按鈕:You would get Button_A with the applied new colors, and Button_B would remain looking like our system default button:

按鈕上已設定範圍的系統色彩

不過,由於我們所有的系統色彩都會套用到其他控制項,設定 BaseLowBaseMediumLow 將會影響到按鈕以外的項目。However, since all our system colors cascade down to other controls too, setting BaseLow and BaseMediumLow will affect more than just buttons. 在此案例中,如果 ToggleButtonRadioButtonSlider 等控制項放在上述範例方格的範圍內,則也會受到這些系統色彩變更的影響。In this case, controls like ToggleButton, RadioButton and Slider will also be effected by these system color changes, should those controls be put in above example grid's scope. 如果您想要將系統色彩變更的範圍設定為「僅限單一控制項」 ,可以藉由在該控制項的資源內定義 ColorPaletteResources,來達到此目的:If you wish to scope a system color change to a single controls only you can do so by defining ColorPaletteResources within that control's resources:

<Grid x:Name="Grid_A">
    <Button Content="Button_A">
        <Button.Resources>
            <ColorPaletteResources x:Key="Default"
                BaseLow="LightGreen"
                BaseMediumLow="DarkCyan"/>
        </Button.Resources>
    </Button>
</Grid>
<Button Content="Button_B"/>

所做的事情基本上跟之前完全一樣,但現在加入方格中的任何其他控制項將無法接收色彩變更。You essentially have the exact same thing as before, but now any other controls added to the grid will not pick up the color changes. 這是因為這些系統色彩的範圍只限於 Button_AThis is because those system colors are scoped to Button_A only.

巢狀範圍資源Nesting scoped resources

以巢狀架構設定系統色彩也是可行的,只要將 ColorPaletteResources 放在您應用程式版面配置標記內的巢狀元素資源中即可:Nesting system colors is also possible, and is done so by placing ColorPaletteResources in the nested elements' resources within the markup of your app layout:

<Grid x:Name="Grid_A">
    <Grid.Resources>
        <ColorPaletteResources x:Key="Default"
            BaseLow="LightGreen"
            BaseMediumLow="DarkCyan"/>
    </Grid.Resources>

    <Button Content="Button_A"/>
    <Grid x:Name="Grid_B">
        <Grid.Resources>
            <ColorPaletteResources x:Key="Default"
                BaseLow="Goldenrod"
                BaseMediumLow="DarkGoldenrod"/>
        </Grid.Resources>

        <Button Content="Nested Button"/>
    </Grid>
</Grid>

在此範例中,Button_A 中會繼承 Grid_A 資源中定義的色彩,而巢狀按鈕會繼承 Grid_B 資源中的色彩。In this example, Button_A is inheriting colors define in Grid_A's resources, and Nested Button is inheriting colors from Grid_B's resources. 因此,這表示放在 Grid_B 的任何其他控制項會先檢查或套用 Grid_B 的資源,然後再檢查或套用 Grid_A 的資源,如果頁面或應用程式層級上未定義任何色彩,最後就會套用我們的預設色彩。By extension, this means that any other controls placed within Grid_B will check or apply Grid_B's resources first, before checking or applying Grid_A's resources, and finally applying our default colors if nothing is defined at the page or app level.

這適用於任何數目的巢狀項目,只要其資源有色彩定義即可。This works for any number of nested elements whose resources have color definitions.

ResourceDictionary 的範圍Scoping with a ResourceDictionary

除了容器或頁面的資源外,您也可以在 ResourceDictionary 中定義這些系統色彩,然後再以平常合併字典的方式在任何範圍上將其合併。You are not limited to a container or page’s resources, and can also define these system colors in a ResourceDictionary that can then be merged at any scope the way you normally would merge a dictionary.

MyCustomTheme.xamlMyCustomTheme.xaml

首先,您會建立 ResourceDictionary。First, you would create a ResourceDictionary. 然後將 ColorPaletteResources 放置在 ThemeDictionaries 中,並覆寫目標系統色彩:Then place the ColorPaletteResources within the ThemeDictionaries and override the desired system colors:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestApp">

    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
            <ResourceDictionary.MergedDictionaries>

                <ColorPaletteResources x:Key="Default"
                    Accent="#FF0073CF"
                    AltHigh="#FF000000"
                    AltLow="#FF000000"/>

            </ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>        
    </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>

MainPage.xamlMainPage.xaml

在包含您版面配置的頁面上,直接在您需要的範圍上合併該字典:On the page containing your layout, simply merge that dictionary in at the scope you want:

<Grid x:Name="Grid_A">
    <Grid.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="MyCustomTheme.xaml"/>
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
    </Grid.Resources>

    <Button Content="Button_A"/>
</Grid>

現在,所有資源、佈景主題和自訂色彩都可放在單一 MyCustomTheme 資源字典上,並且可設定任何需要的範圍,您不必擔心配置標記中會有其他雜亂的資訊。Now, all resources, theming, and custom colors can be placed in a single MyCustomTheme resource dictionary and scoped where needed without having to worry about extra clutter in your layout markup.

其他定義色彩資源的方式Other ways to define color resources

ColorPaletteResources 也允許以包裝函式的形式 (不是線性函式) 直接在自身中放置系統色彩及進行定義:ColorPaletteResources also allows for system colors to be placed and defining directly within it as a wrapper, rather than in line:

<ColorPaletteResources x:Key="Dark">
    <Color x:Key="SystemBaseLowColor">Goldenrod</Color>
</ColorPaletteResources>

可用性Usability

對比圖

對比Contrast

請確定不論輔色或主題為何,元素和影像都有足夠的對比來讓人區別這些項目。Make sure that elements and images have sufficient contrast to differentiate between them, regardless of the accent color or theme.

考慮要在應用程式中使用的色彩時,協助工具應是主要考慮。When considering what colors to use in your application, accessibility should be a primary concern. 請使用下列指導方針,確保應用程式可盡可能供越多使用者存取。Use the guidance below to make sure your application is accessible to as many users as possible.

對比圖

光源Lighting

請留意,環境光源中的變化可能會影響應用程式的可用性。Be aware that variation in ambient lighting can affect the usability of your app. 例如,可能會因為螢幕反光而無法在外閱讀背景為黑色的頁面,而在黑暗的房間查看背景為白色的頁面則可能會很痛苦。For example, a page with a black background might unreadable outside due to screen glare, while a page with a white background might be painful to look at in a dark room.

對比圖

色盲Colorblindness

請留意,色盲可能會影響您應用程式的可用性。Be aware of how colorblindness could affect the usability of your application. 例如,紅綠色盲的使用者將難以區別紅色和綠色元素。For example, a user with red-green colorblindness will have difficulty distinguishing red and green elements from each other. 大約 8% 的男性和 0.5% 的女性是紅綠色盲,因此請避免將這些色彩組合用做為應用程式元素之間的唯一區別方法。About 8 percent of men and 0.5 percent of women are red-green colorblind, so avoid using these color combinations as the sole differentiator between application elements.