Windows 应用中的颜色

您所在的位置:网站首页 win10桌面软件字体怎么变颜色 Windows 应用中的颜色

Windows 应用中的颜色

2024-05-17 05:14| 来源: 网络整理| 查看: 265

Color 项目06/02/2023

使用颜色可在应用中向用户直观传达信息:颜色可用于指示交互性、针对用户操作提供反馈并保证应用界面的视觉连续性。

在 Windows 应用中,颜色主要由主题色和主题决定。 本文介绍如何在应用中使用颜色,同时介绍如何使用主题色和主题资源来让 Windows 应用可用于任何主题上下文。

颜色使用原则

有效地使用颜色。 谨慎地使用颜色突出显示重要元素时,颜色可帮助创建流畅直观的用户界面。

使用颜色指示交互性。 可选择一种颜色来指示应用程序中处于交互状态的元素。 例如,许多网页使用蓝色文本表示超链接。

可自定义颜色。 在 Windows 中,用户可选择要在其整个体验中显示的主题色和浅色/深色主题。 可选择按何种方式将用户的主题色及主题纳入应用程序,为用户提供个性化体验。

颜色具有文化性。 请考虑来自不同文化的人们对所用颜色的解读方式。 例如,蓝色在一些文化中象征着美德和保护,而在另一些文化中代表着哀悼。

主题

Windows 应用可使用浅色或深色应用程序主题。 主题将对应用背景、文本、图标和常见控件的颜色造成影响。

浅色主题

深色主题

默认情况下,Windows 应用的主题是 Windows 设置中的用户首选主题或设备的默认主题。 不过,你也可为你的 Windows 应用专门设置主题。

更改主题

可通过更改 App.xaml 文件中的 RequestedTheme 属性更改主题。

删除 RequestedTheme 属性意味着应用程序将使用该用户的系统设置。

用户还可以选择高对比度主题,该主题使用一块小型的对比色调色板,使界面的对比效果更明显。 在此情况下,系统将替代 RequestedTheme。

测试主题

如果不为应用请求主题,请确保用浅色和深色主题测试应用,保证在应用在任何情况下均可清晰显示。

主题画笔

常见控件自动使用主题画笔调整浅色和深色主题的对比度。

例如,下图演示了 AutoSuggestBox 使用主题画笔的方式:

提示

有关可用主题画笔的视觉概述,请参阅 WinUI 3 库应用: 颜色

WinUI 3 库应用包括大多数 WinUI 3 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用,或在 GitHub 上获取源代码

使用主题画笔

创建自定义控件的模板时,请使用主题画笔,而不是硬编码颜色值。 这样,应用可轻松适应任何主题。

例如,这些用于 ListView 的项模板演示了如何在自定义模板中使用主题画笔。

若要详细了解如何在应用中使用主题画笔,请参阅主题资源。

主题色

常见控件使用主题色表示状态信息。 默认情况下,主题色是用户在设置中选择的 SystemAccentColor。 但是,还可自定义应用的主题色来彰显你的品牌。

替代主题色

若要更改应用的主题色,请将以下代码放入 app.xaml。

#107C10 选择主题色

为应用选择自定义主题色时,请确保使用主题色的文本和背景拥有合适的对比度,以获得最佳的可读性。 若要测试对比度,可使用 Windows 设置中的颜色选取器工具,也可使用在线对比度工具。

主题色调色板

Windows Shell 中的主题色算法可生成主题色的浅色和深色底纹。

可访问用作主题资源的以下底纹:

SystemAccentColorLight3 SystemAccentColorLight2 SystemAccentColorLight1 SystemAccentColorDark1 SystemAccentColorDark2 SystemAccentColorDark3

还可通过 UISettings.GetColorValue 方法和 UIColorType 枚举以编程方式访问主题色调色板。

可将主题色调色板用于应用中的颜色主题。 以下示例介绍如何针对按钮使用主题色调色板。

在彩色背景中使用彩色文本时,请确保文本与背景之间具有足够的对比度。 默认情况下,超链接或超文本将使用主题色。 如果对背景应用主题色的不同变体,则应使用原始主题色的变体,从而优化彩色背景与彩色文本的对比度。

下图中的示例介绍了主题色的各种浅色/深色底纹,以及彩色类型应用到彩色表面的方式。

若要详细了解如何设置控件样式,请参阅 XAML 样式。

颜色 API

多个 API 可用于向应用程序添加颜色。 首先,Colors 类可实现广泛的预定义颜色。 可通过 XAML 属性自动访问这些预定义颜色。 在以下示例中,我们创建了一个按钮并将背景色属性和前景色属性设置为 Colors 类的成员。

Button text

可使用 XAML 中的 Color 结构通过 RGB 或十六进制值自行创建颜色。

#FF36C0FF

还可使用 FromArgb 方法通过代码创建相同的颜色。

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

“Argb”中的各字母分别代表 Alpha(不透明度)、红、绿和蓝,这四个部分共同组成一种颜色。 每个参数的值可介于 0 至 255 之间。 可选择忽略第一个值,此操作将默认选定 255 或 100% 的透明度。

注意

如果使用 C++,则必须使用 ColorHelper 类创建颜色。

Color 最常用作 SolidColorBrush 的参数,该参数可用于以单一纯色绘制 UI 元素。 通常在 ResourceDictionary 中定义这些画笔,以便画笔可重复用于多个元素。

若要详细了解如何使用画笔,请参阅 XAML 画笔。

可用性

对比度

确保元素和图像有足够的对比度来区分它们,不管主题色或主题如何。

考虑在应用程序中使用什么颜色时,应主要考虑可访问性。 请遵循以下指南,确保应用程序可供尽可能多的用户访问。

照明

请注意,环境照明的变化可能影响应用的可用性。 例如,黑色背景的页面在室外可能因屏幕眩光而变得不可读,而白色背景的页面则可能在黑暗的房间中难以阅读。

色盲

请注意色盲因素对应用程序的可用性造成的影响。 例如,红绿色盲用户将难以辨别红色和绿色元素。 大约 8% 的男性和 0.5% 的女性是红绿色盲,因此请避免单独使用此类颜色组合来区分应用程序元素。

相关 XAML 样式 XAML 主题资源 WinUI 3 库 - 颜色


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3