饭世钢5分钟设计手册——UI配色

色彩,说多了都是泪。

它极难掌握,一不小心就会矫枉过正。设计之初,由于种种原因——品牌、情感、喜好,经常会选择了对比较为强烈的颜色,往往给人一种不够自然的感觉。但却因为自己沉浸其中,并未察觉。

这时,就应该静下心来,从基本原理与情感设计出发,提醒自己专注颜色本身的效用与情感,使自己运用颜色的技法更加调和。在你有所疑虑的时候,不妨尝试“缩小”视角,专注于需要吸引用户注意的按钮等需要强调的元素上。

大自然,可以说是所有创作的源泉。和谐在其中孕育,那就从设计的角度成为一名大自然的搬运工吧——将这种自然的和谐转化到数字世界,转化到自己的设计之中。无论你现在在干什么——紧张地加班还是穿梭在拥挤的人流,于风中摇曳的树木花朵无意中被你瞥见,散发出别样的气息,你的呼吸平缓下来,氧气在鼻腔聚集,头脑清醒,身体激活,心情舒畅,打了鸡血,继续干活。感同身受、不言自明、潜移默化,我们都在追求这样的设计。在我们绞尽脑汁的时候,“自然”自然而然地做到了。那么,为何不从拥有自然和谐之美的苍穹、云朵、日落、花草中寻觅色彩,为我所用呢?


从基础开始

原色、间色、复色(见上一篇手册“色轮”)

颜色的掌握并非易事,但是也没有所谓的“选错颜色”,关键是你怎么使用、怎么同其他颜色配合。一般前辈都会建议先从间色、复色开始练习,这类颜色相比原色不扎眼、更淡雅,所以也不容易出错。

原色、间色、复色.png

下面的颜色是iOS原生的,鲜亮活泼,是按钮、图标、被激活状态的绝佳选择。

iOS Colors.jpg

如果对颜色的运用不是很熟练,那就尝试最低程度地使用有彩色,着重增加被激活状态元素的吸引力,这并不是所谓的下下策,“少即是多”,看看iOS是怎么做的。

颜色激活界面.jpg

数字世界的颜色模式

Hue色调,Saturation纯度(饱和度),Brightness明度与Alpha透明度

学习色彩,最重要的是学习色彩的基本性质。在数字世界,有多种表示颜色的模式,很多人使用的是如RGB、CMYK等颜色模式。但是将颜色分解为红绿蓝来解释,是难以理解的。相对来说,HSBA模式是较容易掌握的一种。色调、纯度、明度、透明度本身就是色彩的性质,便于理解也便于实操。


配色方法

单色配色法

进行配色时最常用的方法是挑选一个主色,然后在其上添加10%-50%透明度的白或黑色图层,组成一套配色方案。对于那些初学者来说,围绕一个主色进行设计是一个明智的选择。“少即是多”是永远是设计中的黄金法则。

单色配色.png

通过叠加白/黑图层获得同色系颜色,增加了层次,相得益彰。慢慢熟练之后,便可手动调整纯度和明度(这就是HSBA模式的优势),只要将它们保持在一个色系,你就能得到完美协调的单色配色了。

为主色叠加图层.jpg

近似色配色法

近似色配色法就是选取同主色相近的颜色组成一套配色方案。此时,我们往往会去参考色轮。近似色尤其适合软件内容过于单调乏味的情形。使用相似的颜色可以提供视觉上的变化,活跃界面的氛围。

近似色配色.png

通过调整Hue值(加减30~50),你也可以得到近似色配色。

互补色配色法

互补色配色法就是选取对比相对较强烈的颜色进行配色,这一方法也较难掌握。在色轮中,互补色其实就是一组呈180度相对的颜色。我们常说的“红配绿”就是一组互补色。由于对比强烈,能够瞬间激活界面的气质,但却很容易产生视觉上的刺激与疲劳,应谨慎使用。一般将滑块滑块移动颜色条一半的距离即可得到互补色。

互补色.jpg

为了降低对比,还可以通过降低饱和度、增加明度等方法来进行调和。


互补色配色.png

高亮低纯配色法

可以说,高亮度/低纯度的无彩色是颜色中最重要的一个色系。无彩色本身色调调和,不会使设计显得沉重。过多使用有彩色会降低软件的可用性,而无彩色非常善于韬光养晦,并不会过多地吸引用户的注意,并能够很好地服务于产品内容的展示。那么高亮低纯配色就是借助无彩色的优势进行配色。获得高亮低纯的色调只需将S值调到接近于0,再将B(Brightness)调至接近白或者黑即可。

无彩色配色.png

其它蹊径:艺术作品

设计无处不在,色彩往往是艺术的点睛。站在一件作品面前,我们首先被吸引的就是它对于色彩的表现与运用。所以,当你被某个艺术作品所折服时,不如多做一件事——将它保存下来,从中提取出艺术家所使用的颜色,组成自己的配色方案。

走向大师之路:自制配色

自制配色对于设计来说是最佳的方法,但是对色彩把握的要求较高。借助色轮等工具选取配色,必然缺少对产品内在调性的把握,缺乏“精确度”。另一方面,“信手拈来”也会增加了损失品牌契合与可用性的风险。所以,根据自身对产品、品牌的理解进行配色其实才是最佳的设计之路。

在配色的学习中,经验的积累至关重要。学习观摩优秀的作品,是初学者成长的必经之路。我们不仅仅是需要欣赏,更要分析作品,分析出用了哪些颜色,是原色、间色还是复色。只有这样,才可以站在前辈的肩上快速起步。在下面这一作品中,设计者将相似色与无彩色结合进行设计。主色(淡绿)用来高调显示当前动作;辅色(深绿)用来调和主色,并增加变化。明暗有致的两种无彩色用作背景色服务于内容展示的同时,又衬托出有彩色,使整个设计和谐有序。

例.png

工具

Adobe Color

Adobe Color是一款非常智能的配色工具,它可以识别图片中的主色调,甚至是复杂背景中的配色。不光如此,它不仅可以智能生成“鲜艳”、“明快”、“温和”、“深厚”等配色方案,还可以根据你设置的聚焦点定制自己的配色方案。这些配色还可以通过Adobe Cloud自动同步到你的Photoshop等其它Adobe产品中。但工具只是辅助,它并不是完美的。不过,它足以给我们提供很大的帮助——通过一些调整,我们从喜爱的图片中提取出满意的配色方案。

Adobe Color.png

Sip

色彩的灵感就在你身边。当你遇到优秀的摄影、设计时,绚烂的色彩永远是吸引眼球的第一原因。那时,请不要偷懒,也别站在那里,赶紧拍下来、截个图,提取其中的颜色,你的配色也就出来了。

下个Sip(https://itunes.apple.com/ca/app/sip-color/id934379679?mt=8),现在就做好准备吧。

Sip.jpg

Dribbble(https://dribbble.com

Dribble中每个作品都附带color palette(.aco)。甚至可以按照颜色搜索作品。


稳妥的中性配色方案

虽然主色容易提取,背景色、字体颜色却并非如此,可谓差之毫厘,谬以千里,细微的变化便会对整体界面感觉产生或好或坏的重要影响,需要细致的调整和不断的实践。下面是一些经过实践检验的中性色调界面设计。

蓝色能让人联想到天空与海洋,是一种令人感到舒适的颜色。当用户看到蓝色,会产生一种神清气爽、平静可靠的感觉。并且,蓝色能和大多数颜色进行配搭。

蓝.jpg

界面设计中需要避免纯黑。这也和手机屏幕本身的黑色有关。

如果你要是用灰色,那就确保其B值要么低于30%,要么高于70%。普通的灰色调一般会显得比较呆板,显得与其它颜色不够协调,所以尽量避免使用。

灰.jpg
还有,对比要鲜明

色彩不应成为可读性、清晰性的障碍。舒适阅读的沉浸体验需要对比。为了对比优良,用黑对白,淡蓝对深蓝,高明度对低明度。

设计也需要调试。做个实验,设置好字体,然后调整背景的B值,当B值处于中间调时,就会发现文字失去了可读性。

实验.png
实验.png

自制配色

除了蓝色系和灰色系,你还可以根据自己的需要定制配色,自制配色极具探索性,也会更加冒险,如果觉得这样做就不要担心效果,多实践多对比才能出好结果,说不定还有惊喜等待着你。

颜色工具可以调整HSBA属性。在确定主色后,修改H值以单色配色、近似配色、互补配色的顺序挑选辅色。然后,微调S值、B值获得明快的主次对比。

当你想寻找同主色的相似色作为辅色时,你就需要调整色调了,前辈的经验是,移动整个色条一半的长度更容易找到合适的配色。

颜色工具.png

深色系/浅色系UI

有时你不得不为了打造品牌或可用性在深色系与浅色系之间徘徊,就像任何电子阅读器都会要求有夜间模式一样,精致小巧的Apple Watch的黑色背景也有可读性这方面的考虑。

浅色系UI设计指南

1 内容应比背景明亮,Hover、Active状态的元素最好是“点亮”而不是“变暗”。
2 注意不要过度使用有彩色。过多的颜色反而会分散用户的注意力,降低可用性。恰当将你的有彩色使用在按钮和高亮状态的元素上。
3 避免使用中性灰度的颜色。通常,亮白色的最佳B值范围在90-100%之间。

中度灰与亮白.png

深色系UI设计指南

1 不要使用纯黑。纯黑会使细节丧失,并且纯黑与白色的对比过于强烈。
2 如果执意使用,记得用深灰色去缓和高对比。
3 如使用了蓝色,就要避免使用灰色。相比深灰,深蓝色更能制造出和谐的效果。

深蓝底.png

最后,颜色的文化内涵

此外,在某些背景下,颜色还具有特定的内涵。比如,红色意味着破坏性的操作,绿色则表示开启的、有积极意味的状态,蓝色通常用以显示可跳转的链接,而不可点击的操作都是用灰色填充。在使用这些颜色的时候,我们要特别注意不要对用户造成误导。例如,我们不应将“删除”按钮填充为绿色。

慎重使用有特殊含义的颜色.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容