Material Design Color usage 颜色用法

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

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

目录

层级品牌意义状态

层级

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

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

表面对比

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

Material Design Color usage 颜色用法插图

颜色和形状

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

Material Design Color usage 颜色用法插图1

限制颜色

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

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

Material Design Color usage 颜色用法插图2

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

Material Design Color usage 颜色用法插图3

品牌

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

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

颜色的大胆用法

那些希望传达能量和兴奋感的品牌通常会大胆地使用颜色。它们的app在保证内容可读性和可用性的同时,也应反映出同样的效果。

Material Design Color usage 颜色用法插图4

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

启动页

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

Material Design Color usage 颜色用法插图5

新手上路

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

Material Design Color usage 颜色用法插图6

功能发现

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

Material Design Color usage 颜色用法插图7

颜色的含蓄用法

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

Material Design Color usage 颜色用法插图8

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

占位符UI

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

进度条

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

Material Design Color usage 颜色用法插图9

状态变化

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

Material Design Color usage 颜色用法插图10

意义

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

Material Design Color usage 颜色用法插图11

一致性和场景

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

Material Design Color usage 颜色用法插图12

Material Design Color usage 颜色用法插图13

状态

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

元素和组件的当前状态,例如按钮是否可用应用程序、组件以及元素的状态变化

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

表明交互

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

Material Design Color usage 颜色用法插图14

表明选择

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

Material Design Color usage 颜色用法插图15

原文地址:Material Design

译者:招财鱼

人已赞赏
UI设计

Material Design Text legibility 文本可读性

2020-10-13 22:04:51

UI设计

一个圆角的设计思考

2020-10-13 22:04:53

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索