风格样式

颜色

质感设计的配色灵感来源于沉寂环境中的鲜明色调、浓厚的阴影与明亮的高光，并参考了当代建筑、路标、人行横道以及运动场馆。设计者也应由此激发出令人意想不到且栩栩如生的颜色。

功能作用

表明层级

颜色能够传达内容间、层面间重要性的相对差异，为界面划分层次结构。

对比明显的颜色强调了应用栏与浮动操作按钮，突出了页面导航与核心操作。

无彩的系统栏与应用栏使用使色彩丰富的专辑贴片得以凸显，弱化了用户对系统栏的注意。

传达意义

颜色能够传达屏幕上各元素的含义。

界面颜色反映了该网站的危险程度。

界面颜色反映了天气状况。

提示状态

颜色能够提示元素当前的状态或状态的变更。若要以特定颜色指示状态变化，那么应该选取对比明显的颜色，以引起用户足够的注意力和辨识力。

颜色差异辅助表示开关状态差异。

通过颜色表示与突出当前日期。

展现品牌

在特定的情境、内容中使用品牌色，能使品牌形象与这些信息或操作相关联。

品牌色与应用的主要功能相联系。

品牌色的复现加深了用户对品牌的印象。

配色系统

主题色

在界面或组件中施用最广泛的有彩色被称为主题色。若未配置特定的附属色，主题色同样可以承担附属色的功能。

更亮或更暗的主题色变体可以用来增强层面或其它元素之间的对比度。

运用多种主题色的明暗变体制造层面间的对比。

附属色

用以强调特定界面元素并区分于主题色的颜色被称为附属色，此色可以是主题色的互补色或相似色。附属色应斟酌使用，与界面其它颜色形成足够的对比，而不应简单的为主题色的明暗变种。

附属色也可以是暗淡的，而并不一定要是鲜艳的。

附属色凸显了高级计算面板与其中的内容。

文本与字符色

通过变化文本、图标等内容的不透明度，既能使其颜色与背景颜色达到舒适的对比度，又能借由明暗关系理顺视觉层级。

对于处在亮色背景或暗色背景上的无彩文本与字符，质感设计为其划分了四个默认的不透明度阶层，以帮助实现界面信息的视觉分层，通常来说：

  • 标题、正文、可使用的图标按钮（暗色背景下）处于显明阶层；
  • 补充说明、可使用的图标按钮（亮色背景下）处于显示阶层；
  • 提示文本、被禁用的按钮处于隐示阶层；
  • 分隔线处于隐默阶层。
对比度阶层 不透明度
显明 87%
显示 54%
隐示 38%
隐默 12%
对比度阶层 不透明度
显明 100%
显示 70%
隐示 50%
隐默 12%

色彩主题

情境主题

在不同的情境中可以对不同的界面施用多种配色方案，但需能与现有的色彩主题紧密结合在一起，共同维持应用各界面的一致性。

为不同界面定制色彩主题帮助用户定位特定界面。

明暗主题

为界面配备亮色与暗色主题有助于在不同光照环境下提高用户的阅读舒适度。

无论是亮色主题还是暗色主题，都必须保证界面元素对比度的舒适，既不因对比过强而令用户感到刺眼，又不因对比过弱而使用户无法看清。

处于亮色主题的应用程序。

处于暗色主题的应用程序。

质感设计提供了默认的明暗主题配置。

  • 灰 300#E0E0E0
  • 灰 100#F5F5F5
  • 灰 50#FAFAFA
  • 白#FFFFFF
  • 黑#000000
  • 灰 900#212121
  • 灰 850#303030
  • 灰 800#424242

默认亮色主题

默认暗色主题

实际运用

主题色通常铺张在较大的层面上丰富界面表现力或强调层面，而附属色用以点缀、强调较小的层面或内容片段。

附属色的施用对象一定是独特的。

对大面积背景可以施用主题色，对需要强调的小面积按钮可以施用附属色。

主题色同样能点缀界面，附属色被施用在独特的按钮上。

正确

利用主题色或附属色强调特定文本。

错误

大段的彩色文本容易造成视觉疲劳。

预设色表

质感设计由设定基础的主题色开始，根据光谱由明到暗将此预设色表补充完整并加以调谐。此色表既可直接取用，亦可作为参考调配出新的品牌色。通常主题色的色号为 500，其它色号的颜色则为附属色。