6.3 颜色用法

颜色用法

颜色有助于表达层级、建立品牌形象、赋予意义以及表明元素状态等。

目录

层级

品牌

意义

状态

层级

在Material Design中，颜色可将注意力吸引到界面中的特定元素上。当元素的颜色与周围环境形成对比时会显得格外突出，用户也就会明白它的重要性。由于颜色主题各异——从醒目和明亮，到朴素与柔和——有很多不同的方法都能表现颜色的重要性。

例如，黑色图标放在白色背景中时会非常显眼，多色卡片置于单色卡片附近时往往能引入注目。

表面对比

为了突出重要事件，元素间应使用相对强烈的对比颜色。

紫色背景与白色表面的强烈对比突出了列表选项——这个旅游应用的重点功能。

颜色和形状

颜色和形状的同时改变可加强元素的视觉表现。使用这种强调来表明某些事件已被选中或需要立刻引起关注。

弯曲的左上角和粉红色的纸片表明它们已被用户选中。

限制颜色

通过限制应用程序中颜色的使用，使运用颜色的区域受到更多的关注，例如文本、图像、和类似按钮的独立元素。

由于这个产品内容色彩丰富，黑色浮动操作按钮与鲜明的颜色形成强烈的对比，使其更加醒目。

灰色调面板最适合突出图片和文字。

品牌

品牌可以使用颜色来增强其表现力。可在重要时刻使用品牌色，通过多种方式使之与特定操作或信息相关联。

品牌色的应用可以大胆强烈，也可以细微复杂，或介于两者间。品牌对色彩独特的运用方式应反映在应用程序中。

颜色的大胆使用

那些希望传达能量和兴奋感的品牌通常以大胆的方式使用颜色。他们的应用程序在保证内容的可读性和可用性的同时，也应该表现出同样的方式。

1. 这个教育应用程序以充满活力的方式使用了大胆、饱和的品牌色（黄色、蓝色和品红），与品牌精神相符。

2. 这个烹饪应用程序的对颜色和文字的大胆使用方式，使其充满能量和兴奋，同时也保持了可读性和可用性。

即使是色彩朴素的品牌，也能以大胆、欢快的方式使用颜色。

启动页

启动页是大胆用色的好时机。

新手上路

在引导新用户期间使用颜色，可以将内容与品牌关联起来。

功能发现

通过使用颜色来引导用户的关注焦点可以突出新功能，确保用户能够注意到。

颜色的含蓄使用

品牌可以用含蓄的方式使用颜色，不管那是否意味着传达复杂性，突出内容，或者以其他方式匹配内容。当含蓄地使用颜色时，也应确保交互区域和状态变化保持清晰可见。

1. 这个财务app使用少量颜色来显示信息，例如图表中的数据。通过这种颜色使用方式将信息与品牌色相关联起来。

2. 这个新闻app少量使用了辅助色（紫色），使之在使用的地方能突出显示。这样的颜色使用方式可使相关内容成为页面中最重要的元素。

通过将品牌色植入到占位符加载、进度条显示或者状态改变表达等时刻中，可巧妙地维持品牌的展示。

占位符UI

占位符UI在内容载入时出现。在这儿加入品牌色可让用户意识到，即使在加载时他们也仍处于这个应用程序中。

进度条

进度条是融合品牌色的一个不明显但很有效的地方，它们将应用程序的功能与品牌紧紧地联系在了一起。

状态变化

状态变化可微妙地加强品牌展示。

意义

颜色可以表达出不同UI元素的意义。例如，一个天气应用程序可以通过不同的颜色来表明当前天气状况，一个导航应用程序可以通过将道路显示为红色或者绿色来表明交通状况。

1. 天气应用程序的颜色与天气状态相匹配

2. 导航应用程序使用颜色来标明交通状况

一致性和场景

颜色在一个产品中应该被一致地使用，即使场景发生变化，同样的颜色也应代表类似的事件。同时也应当注意颜色在当地文化中的意义。例如，警告在一些风俗中通常用红色表示，但有些地方并不一样。

日期选择在对应的紫色背景中用红色表示，将品牌的主色（红色）与选择旅行日期相关联。

错误示例（红色）

鉴于红色是品牌色，不要将其用作传达出错状态。

正确示例（绿色）

选择可替代的警告色，不要使用品牌色。

状态

颜色可以提供应用程序及其组件和元素相关的状态信息。包括：

• 元素和组件的当前状态，例如按钮是否可用

• 应用程序、组件以及元素的状态变化

由于细微的颜色变化可能会被忽视，所以指示状态改变的颜色应该是明显的。最好用多种方式来表示状态的改变，例如显示一个图标或者移动一个元素。

表明交互

为突出一个特定的交互，可在用户已经完成的交互内容上使用强烈的对比颜色，而相对未操作的内容则无变化。

该图的颜色处理表明用户正与其进行交互。

表明选择

要突出已选的元素，请在这些元素上使用对比强烈的颜色。

这个列表中使用带品牌色的折角来表明已选邮件。

*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考