查看原文
其他

总监说颜色丑,我调了调确实好看多了!!

UI设计达人 2022-05-22

The following article is from UX小学 Author 小学鸭

很多同学,总是苦恼自己配不出高级、干净的颜色,虽然看了很多文章跟方法,但一看都会,一动手全废。

我曾经也碰到过这个问题,在动手之前,或许脑海里会有个大致的色彩感觉。但实际上软件一操作,发现怎么配都很难配出特满意的色彩。
其实这种属于正常现象,更多的是经验层面的缺乏,只要多练习,慢慢的这种眼高手低的感觉就会越来越少。

并且练的多了后,发现配色真的没那么难,只要有一点积累,有一点审美,稍微掌握一点方法,就能让自己在配色的能力上有个很大的改善。

审美跟积累很早之前的文章里头其实就说了,可以多建几个画板,把不同的色彩归类收集起来,分析这些色彩的饱和度及明度,逐渐感受到色彩的张力。
人有着很强的适应环境及学习能力,比如你在一个地方呆长了,其实口音也会越来越接近当地。
审美也是一样,只要你不断地去收集、积累那些真的很美的图片,那么你的审美也会发生改变,自然也会越来越高。
比如以前你认为这样的配色就很美,视觉冲击力强

但后面慢慢发现,原来这种平淡的才是惊艳之作,非常的耐看。

审美提升上来了,其实剩下的就是靠大量的练习以及方法的积累。练习也很简单,无非是多做一些Redesgin,多做一些概念方案。
Dribbble上也有非常多的案例可以参考,比如下面这种

提升审美需要依靠点滴积累。
而方法的积累,其实真的就是三点。只要把这三点掌握好了,配出来的颜色都不会太low,显得较为高级。

第一点:颜色不要花
有些同学总是认为配色嘛,肯定要多配几种颜色,才会美。
但其实错了,颜色配的越多,越显得脏乱,并且对设计师的色彩能力也要求越高,ta必须要把所有的颜色选到一个最大的公约数,搭配起来才能非常时尚。

一般能像上面这样的,能同时hold住三种颜色同时在一个画面上的,大多数也都是王者段位了。
如果自己作为青铜、白银级选手,我建议还是首先要从控制颜色的数量还是入手。
控制的不好,就是下面这个例子:

总结:控制色相数量,增加色彩明度梯制 
先把颜色的明度系数理解到位了,再理解不同色相带来的情绪。同一个画面色彩越多,越难掌控,而且也会让人视线越不知道放哪,产生一种烦躁焦虑感。
比如看看这些作品,高级都是因为色彩被控制的很好

再来几组比较花的,是不是就要掉档次的多?

第二点:不要脏。
好看的颜色会让人引起共鸣,不好看的颜色一眼都不想再看。脏脏的颜色会让人觉得这个东西不高级,不够养眼。

那么什么颜色会显得脏?带大家看几个辣眼睛的:
1、饱和度中性的重色 ❌

2、饱和度过高的中性色 ❌

3、饱和度过低的浅性色 ❌

上面这几种辣眼睛的情况,咱们要尽量避免。
重色要么为偏灰色,要么带强颜色属性;中性色饱和度尽量需要往下收,收到直到比较温和为止;浅色的色彩尽量明快饱和度高一点,不要过灰,不然也会显得脏。
比如下面这些改好了的。
1、重色系 ✅

2、中性色 ✅

3、浅色系 ✅

再对比一下上面的几个辣眼睛色块,发现是不是差别还挺大。
 总结:根据颜色明度来控制颜色的饱和度 
说到这儿,其实学过美术的同学应该都知道,这个跟画色彩作品差不多,亮部尽量多给一些鲜艳的色彩,中间层尽量灰下去,暗部色彩可以稍微丰富一丢丢。
第三点:颜色要有主次之分,什么是主色,什么是次色,要分清楚。
在实际业务场景,非纯工具型应用,很难只用到一种色彩,因为不同的功能需要使用不同的色彩来进行区分。
因此大部分实际的界面设计需求当中,我们还是要用到两种到三种的色彩。

不过在搭配的时候,需要注意的是,颜色的主色跟次色一定要显而易见可以区分得清楚。
其中主色应该占据60%-70%及以上的面积,次色加在一起,不可超过主色的面积区域。

这样做的原因,也是为了防止眼睛失焦,导致审美疲劳。色彩越多,主次越难分清楚,眼睛对于信息的视觉需要越耗精力,所以自然看着不舒服。
总结:让页面的色彩主次显而易见。
这一点在室内的装潢上,也有讲究。
室内设计讲究的主次色搭配,黄金配色比例70% : 25% : 5%;

70%的基础色,包括墙面、地板和天花板。一般情况下,同一空间的这三者颜色尽量控制在2种,最多不能超过3种(毕竟现在很多人喜欢涂一面有色的墙)

比如你发现这些很好看的室内设计图,都差不多是这样。从室内设计的装潢里找取配色灵感,也是不错的一些选择。

上面的这些,就是最重要的三个方法。把这三个方法掌握了,其实配色起来就容易多了,而且不容易犯错误。

另外,好的习惯也很重要
另外方法很重要,但习惯也不可忽视,所以还是得养成一些比较好的配色习惯,这样才能最快的成长,巩固自己对于配色的认知以及理解。
比如多收藏美图,提升审美。这点虽然很不起眼,但对于培养自己的审美,是有着绝大的好处的。在收藏了100个不同色彩的图板之后,相信你就能感受到其中的差距了。

另外在初期阶段,哪怕按照上面的方法去调整了。还是感觉自己配出来的颜色总是缺了点什么。那么不妨去吸一吸别人的颜色,在别人的颜色上借鉴。


颜色无非就那么几种,多吸一吸也不是啥坏事。
比如你现在要让我设计一个绿色界面的UI,我肯定会先去吸一下微信的绿色,跟360的绿色,然后结合这两个绿色,做一下微调,搭配出一个崭新的绿色。

毕竟是在巨人的肩膀上前行,自然也不会太差。

还有,理解色彩的情绪
最后一个,就是配色前的思考与判断也很重要,色彩的情绪需要与实际的场景想吻合。不要做出跟场景预期不符合的颜色,高端场景用大紫大绿不合适。

这块其实也有一些方法,不过就不在本篇文章里讲了。以后会单独写一篇关于情绪板的文章,如何根据业务特色,来搭配出具备情绪的色彩,传递出业务的内在价值。

最后,打包案例集合
肯定会有同学想问我,咱们这篇文章里这么多好看的设计作品,都是从哪来的?
所以我为大家打包了一份,大概里面有两百多张我精挑细选的UI作品集合,用来收藏到自己的本地电脑里,平时没事打开看看,自然是非常合适的。




一共有7期,每一期都有30张图左右,每张都是精挑细选下来的结果,所以效果非常高级。

💻 资源下载方法
文件已打包上传,为防止链接被和谐或者失效。打开公众号主页 → 输入框回复 “UI案例”即可获取最新下载地址。

主页君个人微信

添加主页君个人微信领取:大厂设计规范及组件库、免商中文字体、样机、作品集等



推荐阅读

(点击标题可跳转阅读)

你看起来像没做过设计一样!?我的作品集有70页,这算什么水平??老板总说我的设计太素,没设计感,我用这四招就给搞定了
回复 灵感 获取UI设计灵感合辑
点个 “ 在看” 好文不断

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存