Material Design Color usage 颜色用法

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

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

目录

层级品牌意义状态

层级

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

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

表面对比

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

ovnietjqwg1.png插图

颜色和形状

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

3gdqvqqlxcb.png插图(1)

限制颜色

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

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

awdbgltou2k.png插图(2)

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

failghq01hf.png插图(3)

品牌

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

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

颜色的大胆用法

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

tklzqkooqia.png插图(4)

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

启动页

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

ydbddghgn1z.png插图(5)

新手上路

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

uhswwy3amga.png插图(6)

功能发现

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

gy0sqxhs0nm.png插图(7)

颜色的含蓄用法

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

gw24fmafebi.png插图(8)

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

占位符UI

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

进度条

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

0nvpjazkjj1.png插图(9)

状态变化

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

unngrmqnkoh.png插图(10)

意义

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

zxoecywabnr.png插图(11)

一致性和场景

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

uazce3p414p.png插图(12)

cf2xxkzw0lb.png插图(13)

状态

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

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

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

表明交互

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

ikv5gbiuec3.png插图(14)

表明选择

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

ctvicl0f5nn.png插图(15)

原文地址:Material Design

译者:招财鱼

人已赞赏
UI设计

Material Design Text legibility 文本可读性

2020-10-13 22:04:51

UI设计

一个圆角的设计思考

2020-10-13 22:04:53

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