恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
关于配色(2)——配色流程
0.0°
2017-09-09 原创文章 经验/观点 举报 1358 6 6 0

配色流程和分析

一:配色流程


我们在做设计时,一般都是先确定版式,然后再调整配色。(可以先做成黑白稿,再配色)

刚开始的时候我也尝试过一边做版式一边做配色,很累,而且效率不高,最后可能全部推翻(血的教训)。所以说设计和绘画一样,不要一开始就抠细节。


流程:

Image title

二:配色步骤拆分

1:调性分析

    这个相当于项目分析,是非常重要的一步,如果这一步错了,那后面做的再怎么好都没用。比如说原始需求是要表现出强有力的感觉,而你表现出了小清新的感觉,那这个设计就不准确,因为没有达到设计的目的。


    我们要先做正确的设计。

    在开始设计一个东西时,我们的思维方式应该是:这个活动(或产品)应该用什么风格。而不是:这次设计我想用什么风格。因为你用什么设计风格别人并不关心,别人只关心这个设计达成的效果。所以说设计不要以自我为中心。

    在做调性分析时,可以看一些竞品,或与本次设计调性相似的产品,从这些设计中得到灵感。

    

    为什么配色也要找参考?

    看了很多色彩教程之后,我以为我可以不看参考单靠分析去配色,结果发现参考还是很重要的…为什么呢?比如说要做促销广告,我们都知道暖色是促销的,橙色或红色都可以。但事实上大家去看网上的促销设计,不止橙色和红色,还有紫色黄色,很多种搭配。也就是说一个调性不止一个搭配。如果我们只是脑子里想想的话,不容易得出结论,所以还是找相关参考,相互比较再确定。(说不定会有自己没发现的惊喜,毕竟自己的配色水平没那么高)


2:确定主色

    其实很多时候我都是主色辅助色一起确定的。主色的作用是烘托氛围,辅助色是为了平衡主色。(上一篇有说过,如果只有一种颜色的话人看了会疲劳)

     TIPS:我们经常会有一种错觉,以为主色是我们需要突出的颜色,其实不是的,主色是面积最大的,用来烘托气氛。很多时候突出的颜色是辅助色。

     就像下面这张图:主色是红色,但强调的却是黄色

Image title

3:确定辅助色

    确定辅助色的方法有很多种,可以看参考,也可以自己通过色彩理论来确定。但是用这个色彩一定要说得出理由才行。比如说是用补色呢,还是用相似色?为什用这种颜色?如果是比较活泼的作品,那可以用补色,看是否能突出主题。(当然,这个阶段即使确定了辅助色,也不一定是最终的,这个后面的“调整阶段”是很重要的)


4:调整

    确定主色和辅助色后,就进入到了调整阶段,这个阶段非常重要。

     因为即使确定了主色和辅助色,你的画面也不一定好看(设计的使命就是,不仅要准确的设计,还需要设计的好看

     有句话相信大家都听说过:只有难看的搭配,没有难看的颜色。

     举个栗子:

Image title

所以说如果你的配色不好看,千万不要怪主色选的不好,也不要怪辅助色,是你的搭配有问题…

再举个栗子:

Image title

那么如果觉得两个颜色在一起不好看,怎么去调整呢?


方法:

1:调整明度和饱和度

    建议先调整其中一个的明度饱和度,因为一个画面不可能有两个主角,总得有一个人让一让 >_<

    当然也可以两者同时调整。但两者同时调整时,要注意整个画面的调性是否会改变。就像上面的例子中,一不小心整个画面的调性就变了,双方同时变暗调时,就变得有质感了;双方同时变明调时,就变成小清新了。

Image title


2:救场王:黑白灰

    当你觉得两种或三种颜色配合的很好,但是总觉得画面有些别扭时,可以尝试使用黑白灰这些无色相的颜色,会给你带来意外的惊喜。


白色:很有透气感,简直屡试不爽。

Image title


Image title

灰色:灰色也是一种很好用的颜色。当白色显得有些廉价时,那这个时候就可以加点灰度进去;当黑色显得沉重闭塞时,可以用灰色代替。(在UI设计中文字的颜色一般为#333333,很少有纯黑的,因为一大片纯黑很不自然且太压抑,带点灰度读起来不累。)


建议:如果调整颜色的时候觉得画面好像有点满了,或者需要一点客观的颜色,可以尝试黑白灰。

(下一篇我会整理一些经典的颜色搭配,还会再总结一些关于黑白灰的用法)


总结:(对自己的要求)

1:知识积累:配色的时候要多思考,这样配色才有方向,有效率,而不是瞎调,需要积累理论知识。

2:审美积累:只有多看作品,才知道什么叫好的配色,这是前提。

Image title


更新:2017-09-09

收藏

6人已收藏

  • 6

    作品

  • 5

    粉丝

  • 25

    关注

  • 家装平台移动端界面+吉祥物
  • 关于配色(3)——经典颜色搭配
  • 猎头顾问 移动端设计
  • 关于配色(1)——认识和分析色彩
相关标签
配色教程经验ui

    猜你喜欢

      2017-09-09 原创文章 经验/观点 举报 1358 6 6 0

      关于配色(2)——配色流程

      0.0°

      你确定要举报关于配色(2)——配色流程

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年09月07日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      6
      6
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录