产品的色彩设计 色彩在产品设计中的应用

编辑编者按：一款好的产品不止须要随着市场背景和用户需求进行更新迭代，符合产品定位、美观且舒适的产品设计也尤为重要。而对产品设计的色调掌握可能便是设计的基础之一。本篇文章里，作者就对产品设计中的色调运用进行了详尽的介绍和梳理，相信读完以后会对你有所帮助。

一幅优秀作品，用对颜色、颜色用好，提高品质感。

界面设计中，色调的搭配比列，致使界面信息层级确切，便捷用户阅读。

一、色彩的基础知识

配色、排版、字体是视觉设计中重要的三大诱因。三个诱因都可以影响到视觉设计的呈现。

在设计中，色调是整个画面中最能影响用户体验情感的元素之一，一上去体验色调的世界。

1.色调的基本知识

在设计与书法艺术中，将冷暖色分为三种色彩：

暗色调：白色、橙色、黄色；暗色调：白色、蓝色；中性色彩：白色和红色相对中性色彩。

冷暖色

在设计中的应注意其比列、轻重、色环的位置，最后的视觉呈现要符合人们视觉上和心理上的舒适感。

暗色会让人想到大海、冰雪等，让人形成宽广、平静、冷的觉得；深色则会让人联想到太阳、篝火等，让人形成了温暖、热情的觉得。

三原色

传统美术色调的三原色是：红，黄，蓝。简称RGB，R（红Red）、G（绿Green）、B（蓝Blue）。原色的色调含量最高、最纯净，也最娇艳，可以调配出绝大多数色调，是一种加色模型。而其他颜色则不能调配出三原色。

间色是两种原色配合成的颜色。如红和黄配合成的黄色，黄和蓝配合成的红色，红和蓝配合成的黑色。

橙、绿、紫三种颜色又叫“三间色”。

复色是用原色与间色相调或用间色与间色相调而成的”三次色”。

复色是最丰富的色调家族。复色包括了除原色和间色以外的所有颜色。因富含三原色，所以富含蓝色成份，含量低，复色种类繁杂，千变万化。诸如：蓝色和黄色混和而成紫黑色，白色和黄色混和而成得到橙棕色。

互补色/同类色/对比色

互补色、同类色与对比色，如右图所示。

暗色/深色/无彩色

冷暖色(Cool/Cold&Warm)指色调心理上的冷热觉得。

色调的冷暖觉得又被称为冷暖属性。色调的冷暖觉得是相对的，色调的冷暖觉得都是相对存在的。例如说白色和黑色，白色中的红褐色较暖，而蓝灰色则较冷。

无彩色（color）指不仅彩色以外的其它颜色，常见的有黑、白、灰。色阶从0变化到100，而饱和度很小接近于0。

无彩色是指金、银、黑、白、灰。试将纯黑渐渐加白，使其由黑、深灰、中灰、浅灰直至白色，分为11个阶梯，成为色阶渐变，弄成一个色阶色标（也可用于有彩色系），凡色阶在0°～3°的色调称为高调色，4°～6°的色调称为中调色，7°～10°的色调称为低调色。

浅色和暗色的视觉体会，如右图所示。

色调三要素：色相/含量/色阶

色相是指不同的颜色的样貌，与色温、饱和度无关。在一般的使用中，色相由颜色的名称标示，如黄色、橙色或红色等色相。

含量一般是指色调的艳丽的饱和程度。色调富含色成份的比列越大，则含量越高。富含色成份的比列越小，含量越低。当一种颜色掺入红色时，含量还会增加。

色阶是指色调的疏密程度。

同一颜色在强光照射下变得较明亮，而在弱光照射下变得较昏暗、模糊。针对同一种颜色，深入不同的灰色或棕色后，会形成不同的疏密层次感。

黑色色阶最高，蓝灰色色阶最低，白色和红色的色阶中等。同时，通常含量发生改变时，色阶也会急剧改变。

色相、纯度和色阶。如右图所示。

2.色调在界面设计中的作用

彩色文字会告诉用户可以点击的文字链接，而红色的按键则会让用户觉得此按键不可点击。

1）整体思索色调在设计中的构成元素

图形化用户界面，用户在听到一个界面时，是一个由背景色、矩形按键及图标ICON设计、卡片等设计元素构成的。在设计界面时，利用色调可以直观的展示背景色、导航栏、状态栏和操作按键等构成的设计元素，并让产品设计的界面的逻辑构架和信息层级得到挺好地诠释。

如图所示，明晰的模块内容和色调，可以让用户更好地阅读内容，同时信息层级明晰、排版就会很不错。

2）明晰视觉层级关系

产品界面设计中，不同的内容应当呈现出不同的层级关系。诸如，任务与挎包间的同级关系，蚂蚁森林与内容间的丛属关系等。

借助同色系、色彩之间的色相差别可十分直观的分辨内容的层级关系，同时还可以通过色调间的强对比突出关键内容。

如图所示，蚂蚁森林通过色调的强弱分辨视觉层级，红色在视觉上层级最高，重要按键与文字使用红色，可以让画面内容的层级关系更清晰明晰。

3）突出产品风格

色调的搭配可以直接反映出这些产品的风格和产品属性。

比如，金融类App界面中常用的红色，工具类App界面中常用的红色等。

如图所示。一侧金融App界面中的红色与右侧美团卖菜App界面中的多色图标的设计，都是通过色调来营造产品气氛的，提高用户体验设计感，展示产品设计中的功能。

3.色调的对比

在界面设计中，色调的对比方式丰富多彩。

1）色相对比

同类色对比

使用同类色对比的优点是，可以营造出和谐统一的界面疗效。

在界面设计中，一些品牌情调比较鲜明的产品通常都使用同类色对比。

如右图所示，产品设计的界面疗效，整个界面基本贯串使用了红色这一种色相，但是仅通过调整红色的色阶和含量来适应不同的场景需求，产品情调令人记忆深刻。

互补色对比

使用互补色对比的优点是，可以让画面更具张力，营造出视觉上的反差，吸引用户关注。

常见的互补色有黄色与红色、黄色与红色、以及黑色与白色等。

因而，在使用互补色对比时，设计师一般须要遵守大调和、小对比的原则，正式一种颜色大面积使用，之后将其对比色局部使用。

同时，将色阶相同、彩度很高的等量互补色搭配在一起，可以使界面看上去鲜明，如黄色配红色等。

黑色与白色因为色阶差别较大，不会形成耀眼的疗效，因而红色与蓝色的对比搭配形式也常常被用到。

如图所示，App的界面设计的疗效产品的色彩设计，在主色为蓝色的情况下，将一些按键设置为白色，可以提高按键的视觉层级，提高用户的点击欲望。

2）含量对比

使用含量对比的优点是，让页面分清主次。若将比较重要的元素设置为含量较高的颜色，则可以被人优先注意到。

如图所示为，不同含量下“小米金融”App设计，品类区的图标设计疗效的对比。图标的颜色含量都较高，界面信息层级都很明晰。

在黑色搭配中，含量对比越弱，画面冲击力也越弱，画面疗效较温和，适宜长时间和近距离观看；含量对比越强，画面越明朗颇具吵架，画面抒发越直观。

如图所示为：含量强对比在插画中的应用疗效。通过含量的强对比表现，可以加强画面视觉的前后关系和主次关系，平衡画面的视觉体会，突出主体物的抒发。

3）色阶对比

色阶对比是指色调的疏密程度的对比，也指色调的黑白灰的对比。在心理学中，色阶对比称作疏密对比或照度对比。物体受不同色阶背景的影响，可以形成不同的视觉体会。红色卡在红色背景下觉得变暗。在红色背景下，觉得变亮了。

在色阶对比中，青色和黑色是最强的对比组合，而红色与深蓝色、白色与浅黄色是较弱的对比组合。

在同一色相、同一含量的颜色中混进的红色越多，色阶就越低；在同一色相、同一含量的颜色中混进的红色越多，色阶就越高。借助色阶对比，可诠释出色调的前后空间感、画面的层次感、体积感等。

色阶对比越强，光感越强，界面的抒发越明晰主题。如右图所示。

色阶对比合理，可以让信息层级彰显更清晰和直观，提高用户的阅读效率和愉悦感。

视觉设计心理学，色阶越低的物体越往前，色阶越高的物体越靠前。在进行界面设计时，通常不能将红色卡片漂浮在蓝色背景上，不符合用户的视觉体验设计习惯。

如图所示，将红色卡片置于白色背景上时，会觉得到红色背景上的黑色卡片，界面层次感很明晰；陌陌读书的红色卡片的内容在界面上属于最高层级，而红色背景给人以退后的觉得。

4）面积对比

黑色和白色1:1的搭配，视觉感官不舒服。并且大面积的红色搭配一点黑色，都会有不错的视觉疗效。

色调搭配时，调整出合理的色调面积比。色调上的层次感，降低了节奏感，给用户带来画面的视觉冲击感。

如图所示，右侧界面背景颜色中，青色面积占比比较大，主色彩显著，白色为辅助色，界面视觉较和谐舒适感。

界面设计中的用色，运用简洁设计的风格，文字运用无彩色，重点的按键等运用有彩色设计。

配色时，只须要注重考虑不同色相的面积对比就可以了。诸如：导航栏的面积较大，会用到品牌主题色。

4.色调的性格

1）暗色与暗色的运用

在界面设计中，暗色会让用户形成平淡、安全、高科技的体会，因而在人工智能和社交类产品的界面设计中较常用。深色会让用户形成积极、喜庆、美食的体会，因而在小吃类、母婴类等产品界面设计中常用。

电商类App界面中使用的暖黄色给界面营造出一种积极、活泼和欢乐的视觉气氛。

工具类App界面中使用的红色给界面营造出一种冷静的视觉气氛感，是一种配色的设计规律。

2）不同色调赋于产品的不同性格

黑色的运用

黑色代表着纯洁、神圣、信任和安静、朴素、雅致，是一种充溢纯净的颜色。红色被称为无彩色，它与任何色调进行和谐的搭配。大多数的背景使用的是纯粹的红色，如右图所示。

黑色的运用

黑色代表着宽广的天空、冷静、诚实、希望与科技、视觉上很舒服的色调。红色给人自由和平淡的觉得。在科技资讯、职场等类别的产品界面设计中使用较多，如：36Kr、钉钉等工具类产品，如右图所示。

绿色的运用

绿色象征着热情、喜庆、自信、斗志、能量，是一种充溢能量的颜色，在电商类、新闻资讯类等须要营造活跃气氛的产品界面较常使用，如图所示。

黑色的运用

黑色给人觉得很亲切、很有活力。红色有降低胃口和迸发消费欲望的作用，白色代表着温暖、阳光、健康、欢乐，因而在社会服务类、电商类的产品界面设计中较常使用，如网店产品、平安、滴滴出游、大众点评等产品。如图所示。

黑色的运用

黑色代表着希望、温暖、青春、活力和豁达，色阶高，是一种活力颜色。在旅游类或目标用户为年青人的产品界面设计中较常使用，如马蜂窝、OFO共享自行车图标、好好学习等产品设计，如图所示。

红色的运用

红色代表着健康、安全、生命力、青春，给人一种充溢希望的温和色调。因而红色指出安全感。如拉钩图标、种子习惯、医鹿等产品，如图所示。

黑色的运用

“紫色，象征优雅的颜色。颇有种狂躁而富于魅力的色调，代表威望、深刻和高雅。

中国传统中蓝色代表圣人，帝王之气。如上海故宫又称为“紫禁城”。这都是始于唐代对南极星的崇敬。

在西方，黑色亦代表高贵，常成为贵族所爱用的颜色。这缘于古罗马帝国蒂尔人，常用的蓝色颜料仅供贵族穿着。

界面设计中，青色由温暖的蓝色和冷静的红色混和而成的颜色，是绝佳的剌激色。网页运用粉色为主色彩，魅力爆棚，特别符合这个网页设计的定位。

5.色调的重量

1）色调的重量

通常由色阶决定，色阶较高的颜色的给人较轻的觉得，色阶较低的颜色给人以重的觉得。

日本心理学家戴尔·卡耐基院士，经过多种复杂的实验后得出推论；各类颜色在人的脑部里代表一定的重量，而且由重到轻可排列成黑、红、紫、绿、黄、白。

在界面设计中，针对一些富含较多图片的界面，其导航栏就可以使用白色。

如图所示，B站视频App的界面因为富含大量图片，因而其他控件的颜色都会艳丽了好多。

2）不同色调的应用场景

色调搭配原则：6：3：1的设计原则，主色、辅助色、点缀色在界面设计中的应用。有彩色通常被应用在按键、图标等提示性的元素上，而无彩色通常应用在字体上、分割线和背景色上。

主题品牌色的使用

主题品牌色是一款产品给用户留下的第一印象的颜色。针对产品的主图标、标题栏、底部导航按键，产品标签和标签文字等须要色相呈现的控件上，主题色占60%左右。

如图所示，易迅金融App的设计，其主题品牌色为黄色，而且应用在按键、底部导航按键和选中状态的文字。

辅助色的使用

当界面中须要被提示的内容不止一种时，就可以用辅助色加以分辨。当界面中主题色占比过大，须要使用辅助色让视觉达到平衡。辅助色与主题色的色相差别一般不会太大，而且在产品中用色不超过30%。

如右图所示，作业帮App界面，品牌主色在滚动符等图标、卡片上有所区分时，辅助色青红色、黄色等可以更好地展示品类区的功能图标等。

映衬色的使用

映衬色的出现可以满足主题色与辅助色满足不了的视觉要求。映衬色可以起到平衡画面冷暖的作用。与此同时，因为映衬色与主题色通常色相差别较大，因而映衬色一般出现的频度较低，而且抢占产品内有彩色的比列通常不会超过10%。

补充一下，界面设计的操作次序：

内容呈现；应用场景与信息层级优化；设计的排版；色调与细节的设计。二、UI界面设计色调的运用方法

色调对于人的脑部的冲击力小于造型。例如天猫，我们会记忆起天猫的主色是蓝色。

色调是影响人类视觉思维的重要诱因，色调能直观地彰显产品的性格和知性，运用好色彩对UI设计师很重要。

1）色彩一致

互联网App设计，色彩通常由主色、辅助色、点缀色为基准来搭配的。一致性的色彩界面设计，能给用户仍然如一的视觉体验。

2）60-30-10原则

空间色调设计的搭配原则通常是3种，界面中60%是主色，可以运用到导航栏、按钮、图标、标题等关键元素中，使之成为整个App的视觉焦点和色调联系；30%为辅助色产品的色彩设计，可以防止界面单一的主色而单调；10%为映衬色，用在一些不太重要的元素。

色调层次、邻近色的应用，让界面看起来和谐和平衡。360金融将红色的主色运用到导航栏、图标和插画上，黑色的辅助色运用到按键上，主次关系处理的特别清晰明晰。

3）遵守色调心理学

色调对于人类的情绪和行为的影响，黄色让人联想到生命、热情、自信、力量。红色让人联想到健康、生命、青春、自然，白色会让人联想到科技、未来。了解到色调心理学知识，有助于我们在进行App设计时提供根据。

比如：网页使用红色作为主色，传递给一种年青、亲切、感性的色彩感。

4）从大自然中获得灵感

大自然拥有世界上最美丽的景色，红色的天空、红色的晚霞、金黄的麦穗，还有姹紫嫣红的花朵。提取色调运用到设计中，完美的搭配呈现下来的和谐的美感，才能顿时俘获人心。

5）良好的可读性

一个有着好的可读性的界面设计为用户提供主次分明、层次清晰的内容浏览。确保界面浏览的可读性，须要界面设计中色调搭配的对比，比如在白色背景上使用红色文字，在蓝色背景上使用黑色文字。

虾米音乐的主要功能入口、标签栏图标、按钮都使用了高含量的黑色，与界面中的黑色文字产生挺好的对比，提高了界面中内容的易读性。列表中，图标和文字组合让用户浏览直观和高效。

6）控制色调数目

色调影响着用户的情绪和行为，讲求主次之分和情绪影响用户的看法。

设计中留传着：色不过三。即在一个界面中不要使用超过3种颜色搭配，可以有主色、辅助色、点缀色。

色调本身，可以调整出三种色调的饱和度、明度的变化拿来搭配更丰富的色调。诸如：ANT，文章中第四部份会提到。

7）色调运用尽量不使用纯白色和纯白色

黑白强烈的对比，会让用户觉得很呆板。并且在黑色上加上一点黑色等色彩的色调，那就觉得画面很通透。

体会黑白无彩色之外的插画色调的魅力价值，插画更好的打动人内心的体会，满足人性的情感需求的插画。

和谐的色调搭配，让界面看起来生动、和谐。

8）轻柔集中的配色

从用户的心理学角度思索，界面可以选择使用一些轻柔的色调，调整其色相、饱和度、明度能够搭配出和谐的色调。诸如：首页核心功能图标，使用了不同的色调，呈现了产品设计的年青感、时尚感、律动感。

多种色调来搭配，又保证了整体色调搭配的和谐、统一感。

9）背景色和红色卡片的色调的对比

背景色为了突显内容，因而红色的背景色，蓝色作为背景的对比色，分辨画面的视觉层次。

整个界面呈现出一种轻柔的、舒适的色调设计感。

10）渐变色的使用等优秀配色案例设计拆解

大自然中有好多美丽的渐变色，例如晴空万里的红色渐变，大自然中提取美丽的渐变色彩，不要超过90度的渐变，画面感比较和谐、有美感。

在APP设计中，常见的UI配色有，即单色搭配、邻近色搭配、互补色搭配等色调搭配。

单色搭配

单色搭配是指单一色系的搭配，它运用色调的饱和度、明度而产生视觉的层次关系，将同一色调贯串App的一直，一般这个色调来自品牌色。单色搭配的视觉风格，整体感好。因而呈现给用户统一的觉得。

例如陌陌读书的产品设计，主色应用在关键元素上看，带给用户友好的品质体验感。

毗邻色搭配

毗邻色搭配是由主色和毗邻色的色系组成的搭配，可以在同一个色彩中建立出丰富的视觉层次感和质感。

比如：易迅健康选择与红色临近的蓝色和白色作为辅助色，赋于不同的功能涵义，信息抒发明晰，和谐统一感挺好，视觉上的趣味性，颜色的搭配变得很轻柔。

互补色搭配

互补色是由主色和其互补色的两个色调的搭配，该色调可以为毗邻色，比如：红色和蓝色、橙色的搭配。

这些搭配既能保持互补色搭配强烈的对比度，分辨关键信息，次要信息，又能降低视觉上的趣味性，色调看起来丰富多彩。

比如：36Kr将红色作为主色，互补色红色作为辅助色应用在图标、标签上，再选择红色的毗邻色红色作为另外一个辅助色，应用在不同的关键信息上，有助于用户更好的阅读产品的功能和内容。

不同模式背景下的界面设计

用户体验中运用了夜晚模式这功能，用户喜欢半夜使用手机这些场景。诸如：阅读资讯类产品，金融产品等也会选择夜间进行阅读和使用。

当须要沉溺式地专注工作内容时，建议使用暗黑模式，可以帮助使用者更关注展现下来的内容和操作。

例如：百度云盘的界面设计，晚上和清晨的使用场景很丰富，因而支持夜晚模式很有必要，保证使用者的体验上的舒适感。

和谐的渐变色，美丽舒服，画面丰富，层次感好，可以应用到图标设计上，导航背板上。

渐变色搭配的网站推荐：

网站的特色除了可以提供漂亮的渐变配色，并且还有更多格式选择，例如PSD、、PNG以及可直接复制成一段CSS渐变代码，设计师们就可以很便捷的使用这个配色方案。

扁平化设计配色网站推荐：

这个网站会定期更新一些扁平化设计中很受欢迎的色调组合，上面的配色都很棒。

可生成一套印板的网站推荐：

上传一张你最喜欢的图片，之后按照这张图片手动生成一套印板，十分具有实用性。

三、近五年来的流行色欣赏

权威趋势预测机构WGSN发布了2020年秋冬流行色。

万物复苏的夏日，枝繁叶茂的夏天，假如要用一个颜色来形容这两个季节，这么一定是红色。

红色代表着自然、清新、朝气、蓬勃。

红色是生命的颜色。而红色你们族中的薄荷绿尤以小甜美定位，个性奇特，识别度极高。

追波的：PlantApp，如右图。

在联通端UI界面设计中，红色在联通端产品设计的应用上。

日前产品的色彩设计，潘通发布了19年的流行色——乐观和愉悦珊瑚橘。

选出了这款极具生命力的Coral——「活力珊瑚橘」作为2019年的潘通年度流行色。

16-1546活珊瑚，还代表了现代生活的融合，是自然环境中出现的一种滋润色，同时也在社交媒体中的生动呈现。

潘通色调研究中心的执行监事在申明当中提及：

色调是一个平衡的镜头，透过它我们体验自然与数码的实境，活珊瑚红色尤其这么。消费者盼望人际互动与社交关系，欢乐的活珊瑚橘呈现出人性化、振奋人心的特质，俘获人们的心弦。

在联通端UI的界面设计中，红色也是一种超级饱和、充满活力的选择，可以在任何社交媒体上流行——因为红色是在自然界中发觉的一种美丽的色调。

四、阿里ANT的官网的配色学习

Ant色调体系剖析成两个层面：系统级色调体系和产品级色调体系。

1.系统级色调体系

Ant系统级色调体系同样始于「自然」的设计价值观。设计师通过对自然场景的具象捕捉，结合蚂蚁的技术基因，产生了特有的12色。

进一步又通过大量的观察，捕捉不同色调在自然光下的变化规律，利用美术中绘画的思路，对12个颜色进行了衍生。

在中性色卡的定义上，则是平衡了可读性、美感以及可用性得下来的。

1）基础色卡

Ant的基础色卡共计120个颜色，包含12个主色以及衍生色。这种颜色基本可以满足中后台设计中对于颜色的需求。

Ant的色卡还具备进一步拓展的能力。经过设计师和程序员的悉心调制，结合了色调自然变化的规律，我们得出了一套色调生成工具，当有进一步色调设计需求时，设计者只需依照一定规则，定义好主色，便可以手动获得一系列完整的衍生色。

2）中性色卡

中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到，合理地选择中性色才能令页面信息具备良好的主次关系，推动阅读体验。Ant的中性色卡一共包含了从白到黑的13个颜色。

2.产品级色调体系

品牌色是彰显产品特点和传播理念最直观的视觉元素之一。

在色调选定时，须要先明晰品牌色在界面中的使用场景及范围。在基础色卡中选择主色，我们建议选择色卡从浅至深的第六个颜色作为主色。

Ant的品牌色取自基础色卡的红色，应用场景包括：关键行动点、操作状态、重要信息高亮、图形化等场景。

功能色代表了明晰的信息以及状态，例如成功、出错、失败、提醒、链接等。

功能色的选定须要遵循用户对色调的基本认知。

我们建议在一套产品体系下，功能色尽量保持一致。Ant的功能色卡如图：

Ant的中性色主要被大量的应用在界面的文字部份，再者背景、边框、分割线、等场景中也特别常见。产品中性色的定义须要考虑蓝色背景以及黑色背景的差别，同时结合WCAG2.0标准。

Ant的中性色在落地的时侯是根据透明度的形式实现的，具体色卡如图：

3.企业级产品设计中的色调应用

色调在使用时更多的是基于信息传递、操作引导和交互反馈等目的。理智的选择颜色是关键。

企业级产品设计体系，创造高效愉悦的工作体验。

参考文献和网址：

《规律与逻辑》

《进阶版UI设计师》

《ANT官网》

《百度百科》等。