思路很重要!搞定完美配色方案应当思考的八个问题 - 优设网 - UISDC

思路很重要!搞定完美配色方案应当思考的八个问题

2016/04/22 14545评论区

create-color-perfect-combinations-1

编者按:配色的文章并不少,有的是关于趋势,有的则探讨技巧。那么要搞定一整套的配色方案,从头到尾应当注意哪些问题,又该拥有怎样的思路呢?今天的文章,就帮你解决这个问题。

不论是品牌设计还是网站设计,配色都是其中最关键也是最具有挑战性的组成部分。完美的配色方案并不是随便挑两个色彩就可以投入使用,实际上,优秀的配色背后有许多实用的规则在做支撑。今天的文章就从九个方面来帮你做好优秀的配色方案。

1、从色轮开始

我们从小就开始接触色轮,但是看起来很简单的色轮直到今天依然是设计师手中最实用的利器。色轮不仅仅是一系列色彩的简单组合,它暗含色彩之间的关系和规律,可以帮你构思配色,确定色彩之间的搭配是否协调。

color-wheel

色轮中包含了原色、间色和复色:

·原色:红色、黄色、蓝色
·间色:绿色、紫色、橙色
·复色:天蓝色、罗兰紫、玫瑰红、橘红色、黄绿色等

三原色想必大家都了解,值得注意的是,间色通常指的是两种原色混合而得出的色彩,所以它也叫第二次色。这样一来,复色也容易理解了,它是两种间色或者原色与间色呼喝而形成的色彩,所以它也有个名字叫做第三次色。

nifty-e1461151402186

接下来的环节就很重要了:如何将色轮上的色彩合理的搭配到一起。

·相似色:色轮上相邻的三种色彩搭配在一起
·互补色:色轮上来自不同两边完全相对的色彩是互补色
·分离互补色:挑选一种色彩,然后再在色轮左右两侧上挑选一组互补色加入进来
·双互补色:这是最难创建的互补色,你需要挑选一个原色,然后在色轮上挑选两对互补色与之进行搭配
·单色调:使用一种色彩和它的同色系色彩来搭配
·三色调:使用色轮上相互距离相同的三种色彩来搭配

绝大多数的配色工具会使用色轮来帮你挑选配色,相当省心。

2、黑色、白色和中性配色

挑选一两个明亮的色彩并不足以支撑整个配色方案,那些经常被人忽视的色彩可能占据整个设计的色彩中的绝大部分,它们就是以黑和白为代表的中性色。

checkland

中性色为其他色彩搭建了表现的舞台,让他们展现性格营造氛围。中性色更多的时候是在背景、细节上为整个项目营造出或冷或暖的氛围,让导航拥有更好的可用性,让排版的可读性更优秀,视觉上具备良好的引导性。

3、色调和色彩

spotify (1)

少有设计师直接在色轮上取色就直接拿来用的,因为绝大多数时候,配色是需要经过调整才能用的。这个时候,你就需要调整色彩、色度和色调这些属性:

·色彩:颜色+白色
·色度:颜色+黑色
·色调:颜色+灰色/白色/黑色

这些调整方式能改变色彩的饱和度,让你的配色方案变的不一样。完成基础的配色之后,通过改变色彩、色度和色调来扩充整个配色,这样确保了配色中的颜色都处于同一系,有增加了配色的丰富度。

4、谨慎跟随趋势

如你所知,每年隔三差五都会出几个“配色流行趋势”,就像时尚圈中的“流行色”一样。这些配色虽然看起来相当有意思,但是需要谨慎使用:如果要长期使用,可能并不那么好用。如果你真的想跟随某个趋势,最好经常使用,认真打磨,让它成为你的配色方案列表中的一员。

bump

一般情况下,你所创建的配色方案,应该是经得起时间考验,能一次又一次使用的(色彩是品牌形象和品牌识别的根本)。所以,最好是将一系列真正“属于你的”的配色方案,同时尚的趋势结合起来,最大化的使用。

5、避免彩虹式配色

色彩的使用应该是有节制的。你的配色方案中并不需要5种甚至10种色彩同时存在,最好的配色方案通常只是2~4种色彩的搭配。

data

为什么?每个色彩在整个设计中都有它的作用,而每个色彩都应该有各自发挥的空间,并且被人所注意到。太多的色彩聚合到一起,就只是颜色而已。好的设计和配色方案会让每种色彩具备它独有的作用与角色,让色彩各司其职,用户也更容易融入到整个设计中来,也更容易同网站进行交互和沟通。

6、为文本元素单独挑选色彩

uber (1)

当你思考色彩搭配的时候,文本元素应当使用什么样的色彩是非常值得你思考的。除非文本色彩被固定死了只能是黑白灰,那么你应当考虑一下文本的配色问题。

文本的色彩牵涉到各种问题,从色彩的可读性到页面的可用性、菜单的易用性,不一而足。当然,最需要考虑的还是文本的可读性的问题。文字需要在不同的背景下保持足够的对比度来确保它可读。一般而言,文本元素的用色可以是配色方案的一部分,也可以是单独挑选的色彩。

7、结合内容考虑配色

poignee

优秀的配色方案并不只是确保视觉上的一致性,会让内容和色调情绪上保持一致,尤其是在网站上。

这个道理并不难理解。以自然为主题的网站可能会使用绿色和棕色,而银行类的网站则大多使用让人信任的色彩,比如蓝色。网站有着怎样的立意?它要展现什么样的主题,传达什么样的情绪?在这样的构思之下,可以帮你更好的建立配色方案。

8、坚持遵循配色方案

think

当你创造出一套优秀的配色方案的时候,你会尽量将这个方案贯穿整个项目。这个时候,你应当建立一套规则,来确保整个配色能够系统化地贯穿到整个项目当中。这个过程中,你可能会思考下面的问题:

·你同时在处理色彩有哪些?
·哪些色彩是通过调节色彩、色调和色度而创造的?
·是否为文本设定单独的色彩?
·UI元素是否具备成系列的配色?
·能否在配色方案之外再单独加入独特的色彩?

【技多不压身的设计师才有高薪资!】

  1. 平面设计:《超赞!设计师完全自学指南》
  2. 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
  3. UI设计:《超实用新手指南!零基础如何自学UI设计?》
  4. 前端开发:《天猫高手来教你!零基础如何系统地学习前端开发?》
  5. 抠图技巧:《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》
  6. 配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》
  7. DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》
  8. 交互设计自学路径图:《零基础入门!给非科班生的自学路径图之交互设计篇》

原文地址:designmodo
原文作者:Nataly Birch
优设译文:@陈子木

yestone-uisdc-1

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量112万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/create-color-perfect-combinations

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 设计师干货 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 海报设计 用户体验设计 设计规范 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里