恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
总监说我配色丑,没想到真被我改好看了!!
122.4°
原创文章 / 经验/观点 / / 举报
20222 360 389 2

2021-07-26


欢迎大家关注我的UI中国,不知不觉七千多个粉丝啦,嘻嘻~~


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


我曾经也碰到过这个问题,在动手之前,或许脑海里会有个大致的色彩感觉。但实际上软件一操作,发现怎么配都很难配出特满意的色彩。

其实这种属于正常现象,更多的是经验层面的缺乏,只要多练习,慢慢的这种眼高手低的感觉就会越来越少。


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


审美跟积累很早之前的文章里头其实就说了,可以多建几个画板,把不同的色彩归类收集起来,分析这些色彩的饱和度及明度,逐渐感受到色彩的张力。


人有着很强的适应环境及学习能力,比如你在一个地方呆长了,其实口音也会越来越接近当地。

审美也是一样,只要你不断地去收集、积累那些真的很美的图片,那么你的审美也会发生改变,自然也会越来越高。

比如以前你认为这样的配色就很美,视觉冲击力强


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


审美提升上来了,其实剩下的就是靠大量的练习以及方法的积累。练习也很简单,无非是多做一些Redesgin,多做一些概念方案。

Dribbble上也有非常多的案例可以参考,比如下面这种


提升审美需要依靠点滴积累。

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



第一点:颜色不要花

有些同学总是认为配色嘛,肯定要多配几种颜色,才会美。

但其实错了,颜色配的越多,越显得脏乱,并且对设计师的色彩能力也要求越高,ta必须要把所有的颜色选到一个最大的公约数,搭配起来才能非常时尚。


一般能像上面这样的,能同时hold住三种颜色同时在一个画面上的,大多数也都是王者段位了。

如果自己作为青铜、白银级选手,我建议还是首先要从控制颜色的数量还是入手。

控制的不好,就是下面这个例子:


总结:控制色相数量,增加色彩明度梯制 

先把颜色的明度系数理解到位了,再理解不同色相带来的情绪。同一个画面色彩越多,越难掌控,而且也会让人视线越不知道放哪,产生一种烦躁焦虑感。

比如看看这些作品,高级都是因为色彩被控制的很好


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



第二点:不要脏

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

那么什么颜色会显得脏?带大家看几个辣眼睛的:


1、饱和度中性的重色 ❌


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


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


上面这几种辣眼睛的情况,咱们要尽量避免。

重色要么为偏灰色,要么带强颜色属性;中性色饱和度尽量需要往下收,收到直到比较温和为止;浅色的色彩尽量明快饱和度高一点,不要过灰,不然也会显得脏。

比如下面这些改好了的。


1、重色系 ✅


2、中性色 ✅


3、浅色系 ✅


再对比一下上面的几个辣眼睛色块,发现是不是差别还挺大。 

总结:根据颜色明度来控制颜色的饱和度


说到这儿,其实学过美术的同学应该都知道,这个跟画色彩作品差不多,亮部尽量多给一些鲜艳的色彩,中间层尽量灰下去,暗部色彩可以稍微丰富一丢丢。



第三点:颜色要有主次之分,什么是主色,什么是次色,要分清楚

在实际业务场景,非纯工具型应用,很难只用到一种色彩,因为不同的功能需要使用不同的色彩来进行区分。

因此大部分实际的界面设计需求当中,我们还是要用到两种到三种的色彩。


不过在搭配的时候,需要注意的是,颜色的主色跟次色一定要显而易见可以区分得清楚。

其中主色应该占据60%-70%及以上的面积,次色加在一起,不可超过主色的面积区域。


这样做的原因,也是为了防止眼睛失焦,导致审美疲劳。色彩越多,主次越难分清楚,眼睛对于信息的视觉需要越耗精力,所以自然看着不舒服。


总结:让页面的色彩主次显而易见。

这一点在室内的装潢上,也有讲究。

室内设计讲究的主次色搭配,黄金配色比例70% : 25% : 5%;


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


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


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



好的习惯也很重要

另外方法很重要,但习惯也不可忽视,所以还是得养成一些比较好的配色习惯,这样才能最快的成长,巩固自己对于配色的认知以及理解。

比如多收藏美图,提升审美。这点虽然很不起眼,但对于培养自己的审美,是有着绝大的好处的。在收藏了100个不同色彩的图板之后,相信你就能感受到其中的差距了。


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



颜色无非就那么几种,多吸一吸也不是啥坏事。

比如你现在要让我设计一个绿色界面的UI,我肯定会先去吸一下微信的绿色,跟360的绿色,然后结合这两个绿色,做一下微调,搭配出一个崭新的绿色。


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



理解色彩的情绪

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


这块其实也有一些方法,不过就不在本篇文章里讲了。

后面我也会单独写一篇关于情绪板的文章,如何根据业务特色,来搭配出具备情绪的色彩,传递出业务的内在价值。

关注公众号UX小学后,把咱们星标,这样就能接到及时推送了。



打包案例集合


肯定会有同学想问我,咱们这篇文章里这么多好看的设计作品,都是从哪来的?其实是咱们在视频号『设计新视界』上开了一期节目,叫做UI/UX设计趋势,每一期都会在全球各大平台上,精挑细选一些非常nice的作品。

这些作品对于提升自己的审美,增加参考标准很有帮助。

所以我为大家打包了一份,大概里面有两百多张我精挑细选的UI作品集合,用来收藏到自己的本地电脑里,平时没事打开看看,自然是非常合适的。



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



资源下载方式:


方法1:点击文末收藏旁边的的下载按钮,根据操作即可下载

方法2:微信手动搜索公众号『 UX小学 』,发送关键词『 UI案例打包 』

已超1000+人下载


PS:最近咱们跟阿里、腾讯的同学,一起建了个一线设计师微信交流群,感兴趣的同学,可以添加小哆啦微信号『 Dollam 』,备注『  UXD FANS  』加入!(只面向星标了公众号UX小学的粉丝 )

Powered by Froala Editor

微信公众号:UX小学

下载
收藏

360人已收藏

评分:

完整度:4星

启发性:4星

勤奋性:4星

排版布局:4星

推荐:
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

UX小学

我的微信:Dollam

  • 32

    作品

  • 7765

    粉丝

  • 0

    关注

  • PANTONE潘通 | 发布10款2021秋冬色彩标号
  • 怎么跟总监聊涨工资??我竟敢这么开口...
  • 总监说我作品丑,调了调确实好多了!!
  • 我设计的明明很好看了,可总监还不满意 ??

猜你喜欢

    UX小学

    UX小学

    我的微信:Dollam

    十佳文章人气明星助人为乐首页达人话唠
    • 7765

      粉丝

    • 3116.2

      人气

    • 7.1w

      颜值

    作品

      UX小学

      点赞:389

      收藏:360

      评论:2

      总监说我配色丑,没想到真被我改好看了!!

      你确定要举报总监说我配色丑,没想到真被我改好看了!!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年07月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      账号或密码错误

      发送验证码 120s 验证码错误

      登录

      可云端编辑的专业级UI设计工具

      立即体验