引言
《懂点设计》已经上线一个月,吸引了许多小伙伴的订阅。当然也还有很多小伙伴还在观望和犹豫中:《懂点设计》到底讲了些什么?小编将会不定期精选部分内容,在公众号里放出,如果大家觉得可以给你们带来帮助,那就快快订阅吧!
本次精选了《懂点设计》第7期内容:给你点颜色看看,Box为大家讲讲关于配色的那些事。
作为无所不能的设计师,“色色”的事情怎么能没做过呢?毫无疑问,在设计中,配色是非常关键的一环,科学研究表明,人类大脑中首先感受到的是颜色,然后才是形状和其它内容。上帝说,要有光,于是便有了光。有了光,才有了各种各样的颜色。
颜色几乎是视觉冲击的第一要素,颜色的选择,在某种程度上决定了观看者的第一印象。所以说,合适的颜色是设计作品的基础,在这个基础上,才慢慢有特定的调性。本期《懂点设计》的主人公即是——颜色。
配色的重要性
其实颜色不仅是在设计中至关重要,它在我们的生活中也扮演着重要角色。
比如我们约了车,跟司机联系的时候 一般都会先说自己穿了什么颜色的衣服,而不会是什么牌子的衣服,或是什么脸型等等,因为颜色总是比其他元素先一步被人的大脑接受进而产生反应。
再比如在封建社会,黄色都是帝王家使用的,平常老百姓要是用黄色被抓住可就完了,这里的颜色代表着身份、地位。当然这是在中国。在欧美文化里就没有这方面的意思,反而是紫色代表着权力,在欧洲权贵里,衣服上有个紫边,就已经很嘚瑟了。另外,还有我们的国旗、红领巾、锦旗、中国结等等都是红色,这也代表了我们国家的一种特色,而在欧美国家红色反倒代表着不祥之兆血腥,例如redhands血腥的手,redfigure赤字。
在设计中同样也是有深入人心的代表性的。淘宝的橙色、京东的红、微信的绿等等,这些颜色都不是随便拍脑袋就决定的,而是会根据产品的属性、定位等因素进行分析。
配色失败的案例
我们经常听人说,红配绿,赛XX。其实色彩这个东西很神奇,它跟时代、文化、地域、构图结构和明度搭配都有关系。所以色彩是一件设计作品表达文化、时代、情感。在运用的时候就要考虑到这些东西。红配绿在中国有着浓浓的时代背景,在传统文化中大量的使用这种配色,导致在现代文化里变得格格不入。
大家可以想想在欧美国家,什么时间出现红配绿最多? 在西方文化中,红绿蓝配色是宗教文化的产物,很多哥特式教堂中的彩色玻璃、壁画中大量的使用这三种颜色的大块拼接。所以红配绿在西方最多的时候是在圣诞节,绿色的圣诞树、红色的圣诞老人、五颜六色的礼物。
每到圣诞节的时候,各种电商网站的设计师就要挑战红配绿了。当然其他配色也能表达。所以留意那些优秀的节日设计作品,是咱们必须要经常做的事情。
15年百度手机输入法主题设计大赛的一等奖就是一副红配绿的作品,叫赏金猎人,控制的非常不错,做的区域清晰,简单易用。
(box在颜色上踩过的坑)
▼▼▼▼
“我以前画画,考色彩的时候,老师给我们放了一个白色的石膏像,下面有几个干瘪都发黑的柑橘。画白色的东西也不是第一次画,主要是感受环境色和整体的灰色调子的把控,问题不大。橘子的颜色也按照实际的颜色搞了,结果成绩出来并不好,到后来清华美院出了那年的优秀试卷画册,才终于了解到,大量的优秀试卷都非常敢用颜色,把干瘪发黑的橘子也画的非常的鲜亮,而且石膏像的暗部处理的色彩也很丰富。或许五彩斑斓的黑色就是从这里来的吧。后来在写实图标盛行的年代,学会提炼色彩,提炼物体的特征,放大他们的色彩、形体特征,才是真正的艺术表达。
上学时,我在学校里接过一个手册排版的活,是关于一家儿童教育的项目,那时候没啥项目经验,有个活珍惜的很。我就在网上找了好多参考,也没有跟甲方过多沟通,就直接结合自己的思路去做了,版式参考了一套非常漂亮,且很商务的案例。做完以后自我感觉非常良好,于是拿去给甲方看,因为甲方是一个好朋友介绍的,所以也不太好意思跟我直说原因,说了一堆要改的细节,并且还给了好多例子。按照他的要求,我翻来覆去的改,还是不行。最后他直接给了我一个他认为好的册子,说,你就照着这个风格做,配色也按照这个来走。我拿过来一看,就大致明白对方的意思了。其实对方就是想让我把页面搞活泼一些,色调鲜亮一些。所以后来做东西就很长记性了:
1、不要盲目的拿过来就做,要问清对方提出这个需求的核心目的。
2、对于配色和风格,每个行业都有自己的风格调性,要抓住行业特征和用户心理预期。
”
(插入一则嘉宾静电的故事)
▼▼▼▼
“我比较挫败的事是有人说我的设计稿“脏”,因此“脏”这个字已经成为我从业过程中的黑历史了。当时其实是有点不服气的,凭什么说我作品脏啊,我电脑显示器一天擦好几遍行不行。后来经过一同事指点,他告诉我一小窍门:一定不要用明暗跨度比较大的渐变色,否则那真是脏到汰渍都洗不白的。最简单直接的例子,大家可以试试,做一个图形填充渐变色,起始色用白色,结束色用纯黑色,嗯,这感觉真是妙不可言。其实说白了就是两种明暗对比太大的颜色做渐变过渡造成的,将这种跨度尽可能的调小,脏的感觉就会减弱。
”
(你说的是这个吗,静电大大)
配色的技巧
配色中的门道还是挺深的。很多设计师虽然做设计有些年头,审美也还不错,但基本上还是比较上手一些自己擅长的配色风格,有时候想自己弄个漂亮的配色方案,经常是来回折腾个几个小时才感觉OK。所以,真正游刃有余的配色,确实需要很长时间的经验积累。经常临摹,并留意配色,会在这块上起到的作用非常大。
其实在设计中,色彩的运用主要分两大部分:应用色彩,搭配色彩。
应用色彩主要是色彩含义的了解,就像前面提到的中西方对色彩的理解偏差一样。另外就是使用场景。例如工具软件或网站适合哪种场景,社交类、金融类、教育类、儿童类、游戏类等等。搭配色彩则是色彩结构认知,三原色、三间色,色彩之间的关系,以及利用配色表掌握集中配色规律。
分享两个配色的歪门邪道,不可泄露~
第一个,收集和提炼配色。这里主要有2个方面:
一是直接收集使用成熟的配色,例如UI中国就是用的flatUI这套配色。这个配色也有个专门的网站就叫flatUIcolors.com,还有windows的 Metro风格中的配色。大家在临摹作品的时候也要留意收集一些漂亮的配色,最好将几种灰度的颜色牢记在心,随时可以调用。这个方法就在于积累和训练。不少培训机构也是主推这种方法。
二是提炼颜色。其实我们在配色的时候往往都是关注目标用户及需求方性质来确定配色基调的,例如儿童类的,就要鲜艳明快一些,例如一些数据类科技类的,颜色就要沉稳专业一些,例如娱乐类的,配色就要丰富绚丽一些,等等。这是配色的大方向。确定好大方向和风格后,可以搜索一些相关的图片,包括壁纸、网页截图等等,按照占比大小,提炼出一组颜色。这个需要一定的经验积累。(Box在《懂点设计》里分享了几个网站,将图片拖进去,就可以自动生成色块。想知道是啥网站吗?订阅《懂点设计》吧,你懂的)
第二个,制作和利用配色表。其实所谓的配色表,有很多种,最常见的就是色环,用色环作为配色的辅助工具会让配色变得简单一些,只要掌握方法,是可以将另外一种颜色的选择缩小到你可以控制的范围。目前常用的配色方法有:
主导色加类似色,例如Twitter。
主导色加中差色,例如Facebook里面的偏纯色的草绿色就是中间色。
主导色加对比色,YouTube就是个很明显的案例,主导色是红色,按钮、链接都是蓝色就是对比色。
基本上就是这三种类型。主导色可以分出两种明度不同颜色来作为辅助色,或是用中性色例如各种阶梯的灰色。当然,对比色也可以。不过在这里想给大家强调的是,在整个网站中,不宜使用三种主色系以上的颜色来配色,除非你想做Metro的色块形式,或是用色彩来渲染气氛。三种主色系也不易扩展太多邻近色进行辅助。
这个方法如果想看详细的,可以访问UI中国上一位阿里的设计师整理的【如何高效利用色彩配色表】。
另外建议大家了解一下颜色的原理,前面提到,上帝说要有光,因此有了光。光是产生颜色最根本的来源,小时候玩过的一个游戏,把一面小镜子放到阳光直射下的水盆中,阴影处就会出现彩虹。试着盯着正午的太阳看看?太阳是什么颜色呢?当光线足够强,就会变成纯白色。当没有光线时,周围就是一片黑色。
这几个现象我们可以几个名词来定义,色相,明度,饱和度。
色相就是指红橙黄绿青蓝紫的各色颜色,明度直接理解为光照强度即可,而饱和度可以指颜色的纯度。大家试着打开Photoshop中的“色相/饱和度”面板,理解就更直观了。
为啥大家都不喜欢大红色配大绿色呢?因为在设计过程中,在色环上完全的互补色或者邻近色,饱和度或者明度甚至面积差不多的情况下,对比过于强烈,容易让人不适,也会产生“平庸”或者“俗气”的感觉。
所以在用互补色的时候,注意不要大面积同时铺两种颜色,尝试将一种颜色的饱和度降低,减少使用面积,或者加入其它颜色来点缀,效果就不一样了。因此,红配绿这种说法也是有办法去调合的,并不是绝对不能用。另外,对于初学者来说,可以借助网络上存在的现成色板或者配色方案来调色,其实这也算是个临摹的过程。颜色的使用是设计过程中非常难掌握的部分,抛开各国文化,情绪,心理学的影响,有时候说凭感觉也不为过。大家可以尝试在平时多提升对颜色的敏感度和审美,慢慢的,你就可以给别人一点颜色看看了。
怎么样?本篇干货是否为你解答了一些配色上的困惑呢?
如果对我们的内容感兴趣,点击“阅读原文”,订阅《懂点设计》吧!每周一、三、五,将会为大家分享超多干货!
版权声明:如有侵权请联系我们
2、本站永久网址:https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
源码村资源网 » 微信app色彩搭配(微信的色彩怎么调)
1 评论