作者：Aric   微博：@AricWorks   Instagram：aricwu  个人设计作品：http://www.ui.cn/user.php?id=29036

小编：小欣

      扁平化设计在一片争议声中悄然成为当下众多移动应用界面设计的主流风格，而鲜明的配色更是扁平化设计的一大亮点。今天我们很高兴邀请到资深设计师Aric来跟我们分享他的“好色”心得。来！让我们都成为好“色”之徒吧~！

一、在扁平化设计里面，配色要注意什么？

1.切忌把赏心悦目、形式感放在第一位。

       首先应该明确，好的配色在产品中的意义：让产品易用；让用户愉悦；定义视觉风格，传达品牌等。在拿到产品需求后，我们需要调查它的主要用户群体，分析其功能、信息架构，从而确定产品的配色基调。所以，在产品的视觉设计过程中，配色要跟着功能走，切忌把让赏心悦目、形式感放在第一位。 

2.让配色符合人们的预期 

       在生活中，当你提到海洋，人们会想到蓝色；当你提到阳光，人们会想到黄色；这些是大自然给人们留下的色彩印象。

       色彩还具有象征性，红色，热情；蓝色，冷静；黄色，温暖。这些都是人们通过现实生活中的色彩印象建立起的色彩感受。每一种色彩给人们留下的印象感受是不一样的，这些色彩印象可以帮助产品迅速建立用户认知。在我们在做设计时，需要根据这些符合人们认知的印象去设计，尽量让配色符合人们的预期。

3.配色不能杂乱，会增加用户的记忆负担。

       色彩就像音符一样，巧妙的组合才能谱出美妙的音乐，相得益彰。 相信大家都看过STEVE KRUG的“Don't Make Me Think”一书，要让一款界面看起来毫不费脑，切忌使用杂乱的配色。在产品的视觉设计中，除了对交互控件、字体等进行规范，配色应该规范、统一。建立有迹可循的配色规范，才能让信息结构层次分明，功能明确，让人们一目了然。

    比如说在移动APP设计中，首先确定主题色，然后确定链接、按钮、icon、点击状态等可以点击交互的色彩，一般和主题色相同。除此之外文字的配色规范也很重要，可点击的文字一般用主题色，其他的则按照重要程度用灰色系加以区分。最后确定背景色规范，背景色可以对内容模块的主次进行很好的区分。

如下图，instagram的配色规范：

       instagram的主题色是蓝色，主要的按钮、链接也是蓝色。其他的则以黑白灰相辅。

二、扁平化配色与拟物化配色的差异是什么？

       扁平设计的配色更倾向于纯色、色阶很小的渐进色。色彩更抽象，概括。

       拟物设计由于要模拟现实中的物，所以在配色上更接近于现实世界。但是在配色的基本原理上还是大同小异的。

三、你觉得iOS7的icon色彩运用得怎么样呢？

       ios7的icon整体配色非常棒，不管是从色彩的隐喻还是从美观角度。但相对于高饱和度的图标配色，我更倾向于柔和的、经久耐看的配色。

四、我了解到很多设计师习会用配色网站，但效果却一般，你有什么好技巧吗？

       配色网站会给出色彩组合，仔细观察分析，还是可以得到一些色彩的搭配规律。掌握色彩的属性、相互间的关系才是最重要的。

下面总结几种在APP设计中常用得配色方案：

1.一种彩色＋黑白灰，这是入门配色，也是经典配色，它可以很明确的让用户区分出信息的主次，引导用户进行主要功能的操作。

instagram

2.多种同色系彩色＋黑白灰： 

Mike | Creative Mints

3.多种对比彩色＋黑白灰

Fabio Basile

       但是我们要具体问题具体分析，根据实际的设计情景去使用它们。就像时尚杂志一样，它可以给你无数套好看的搭配套装。但具体怎样穿，还要根据天气、出席的场合、心情等因素去决定。

       UNIQLO RECIPE 是优衣库的一款食谱APP，教会你做出精美的菜肴同时，还教你怎样去穿衣服。通过厨师们的菜肴给厨师们搭配同色系的衣服，整个界面的配色也会根据衣服和食物的颜色去变化，配色非常大胆，但很协调舒适，让人有喜出望外的感觉。喜欢做菜的我对这款APP也是爱不释手，尤其是它的计时时钟，时钟的底盘是不断变化的食物，色彩根据食物的颜色，跳跃变化，计时音乐也取自于厨具的敲击，非常悦耳动听。 

五、可以说说你自己学习配色的过程吗？

       我的配色想法主要来自于以下几点：

       1.多看好的设计，培养自己的品味。生活中的设计无处不在，观察它们的配色，根据他们的使用场景去思考他们给你的感受。

       2.观察大自然，最美的色彩都在大自然里。不同时间段的天空、四季的花朵、植物，动物的花纹，等等，都可以教会我们色彩的基本搭配方法。基本的锻炼方法是拍照，我喜欢自然，在我的instagram(aricwu)里有很多自然的色彩。同时去享受生活，有时候食物也能带来灵感，最近在学着切果盘，仔细去研究一番，水果有最美的色彩。

       3.最后一点，也是最重要的一点：“多练习，多试错”。

六、网站配色与APP配色有没有区别？ 

       由于移动设备的兴起，网站不仅要在PC上有好的展现，在不同分辨率的移动终端上也是。但是配色大同小异，比如说，Path的网站在手机上显示，只是排版布局适应了屏幕，配色并没有变。

       从使用情景考虑，在移动终端的APP,也有可能会考虑移动的因素去安排配色。比如说对于地图导航APP，怎样让用户在开车、走动等场景，对路线清晰可见，这值得我们去思考。

七、请推荐五个你最爱用的颜色。

红，蓝，黑，白，灰，

八、就你的作品/最近的项目为例子 解析一下其中的配色思路

       现在进行的作品还处在保密中，不能公开。

       最近在学着切出好看的果盘，从中理解到了一些色彩搭配技巧，分享给大家，希望会对大家有所帮助 ；）

       我希望做一个丰富多彩，层次感丰富的果盘，所以需要考虑水果的属性，包括颜色、形状、面积大小。

       首先我们将水果进行色系分类：

       红色系里面深红色的葡萄偏暗，面积大，所以用来打底。草莓有好看的渐变色，还有绿色的花边梗，用来做果盘的裙边很不错，鲜红色的番茄可以对红色区进行提亮。

       红色水果摆放完毕后，接着将它的邻近色黄色系摆上，芒果切片，便于品尝同时，增加层次感，枇杷的核没有去掉，可以让细节更丰富。

       接下来将奇异果切片，梨分半，用绿色对整体进行提亮，让果盘很清爽。

       最后撒上蓝莓，做点缀，蓝莓和枇杷核都有深色、面积小这两个特点，可以在面积和色彩上与整体拉开，很适合做点缀用。

       虽然是第一次切果盘，但是很有乐趣，大家可以试一试；）

       这是第二个次，哈哈：

       小编后记：再次感谢Aric在百忙之中抽空来完成这篇访问，小编初学UI的时候，也是经常拿着作品请教Aric的，借此机会再次感谢！

       读完这篇文章，我最深刻的是Aric最后那招：【切水果】！！！虽然我也很想提高我的“色感”，但对于一个超级无敌忙（懒）的人来说，我是不可能每次都会打开ps老老实实的画图啦~所以Aric的这个方法真的很好！又可以吃又可以练习配色和构图（玩）~还可以拍照发朋友圈报骗骗赞欸~~~Yeah~！

       还有一点，不知道大家在设计移动应用的时候有没有这个习惯，就是在ps里面一边画，在手机里面一边看。因为电脑显示屏与手机是会有一些色差的，所以为保证用户在手机上也能看得舒服，我平时就会一边画一边看。那要推荐的神器就是Screen Runner(回到首页，点击“工具”就看到了，欢迎下载)还有Ps Play~