产品设计中的色彩把握可能便是设计的基础之一(组图)

小编介绍：一款好的产品不仅需要根据市场背景和用户需求进行更新迭代，更需要符合产品定位、美观、舒适的产品设计。产品设计的色彩把握可能是设计的基础之一。在这篇文章中，作者对色彩在产品设计中的运用进行了详细的介绍和梳理。相信看完对你会有帮助。

优秀的作品，用对颜色和色彩来提升品质感。

在界面设计上，配色比例让界面信息层次准确，便于用户阅读。

一、色彩基础知识

配色、排版和字体是视觉设计中的三个重要因素。这三个因素都会影响视觉设计的呈现方式。

在设计中，色彩是整个画面中最能影响用户体验情感的元素之一。让我们一起体验色彩的世界。

1.色彩基础

在设计和绘画艺术中，冷暖色分为三种色调：

暖色：红、橙、黄；冷色：青色、蓝色；中性：紫色和绿色相对中性。

冷暖色

在设计中要注意色环的比例、重量和位置，最终的视觉呈现要符合人们的视觉和心理舒适度。

冷色让人联想到大海、冰雪等，让人感到辽阔、平静、寒冷；暖色让人联想到太阳、篝火等，让人感到温暖和温暖。

三基色

传统艺术色彩的三基色是：红、黄、蓝。缩写为RGB、R（红）、G（绿）、B（蓝）。原色色纯度最高，最纯，最亮，可以用来混合大多数颜色，是一种加色模型。而其他颜色不能混入三基色。

二次色是两种原色的组合。例如，红色和黄色合成橙色，黄色和蓝色合成绿色，红色和蓝色合成紫色。

橙、绿、紫三色又称为“三副色”。

二次色是通过将原色与二次色或二次色和二次色混合而成的“三次色”。

多色是最丰富的颜色系列。二次色包括除原色和二次色外的所有颜色。因为它含有三基色，含有黑色成分，纯度低，复杂的颜色种类繁多，千变万化。例如：红色和紫色混合成紫红色，黄色和橙色混合成橙黄色。

补色/同色/对比色

互补色、均匀色和对比色，如下图所示。

冷/暖/无色

Cool/Cold & Warm是指心理上对颜色冷热的感觉。

颜色的冷暖感也称为冷暖属性。颜色的冷暖感是相对的，颜色的冷暖感是相对的。比如紫色和黄色，紫色中的红紫色偏暖，而蓝紫色偏冷。

（彩色）是指除彩色以外的其他颜色，常见的黑色、白色和灰色。明度从0到100不等，饱和度很小，接近0。

消色差是指金色、银色、黑色、白色和灰色。尝试在纯黑色中逐渐加入白色，使其从黑色、深灰色、中灰色、浅灰色到纯白色分为11级，变成明度渐变，制作明度色阶（也可以用对于色彩系统），亮度在 0° 到 3° 的颜色称为低调，4° 到 6° 的颜色称为中调，7° 到 10° 的颜色称为高调。

暖色和冷色的视觉感知如下图。

色彩的三要素：色相/纯度/明度

色相是指不同颜色的外观，与亮度和饱和度无关。在通常的用法中，色调由颜色的名称来标识，例如红色、橙色或绿色。

纯度通常是指颜色的鲜艳饱和度。颜色中颜色成分的比例越大，纯度越高。颜色成分的比例越小，纯度越低。当颜色融入白色时，纯度会降低。

明度是指颜色的明暗。

相同的颜色在强光下显得更亮，但在弱光下更暗和模糊。同一种颜色，深入不同的黑色或白色后，会产生不同层次的明暗。

黄色的亮度最高，蓝紫色的亮度最低，红色和绿色的亮度中等。同时，当一般纯度发生变化时，亮度也会发生变化。

色调、纯度和亮度。如下图。

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

彩色文本告诉用户哪些文本链接可以点击，而灰色按钮让用户认为该按钮不可点击。

1）从整体上思考设计中的色彩元素

图形用户界面，当用户看到一个界面时，它是由背景颜色、矩形按钮和图标ICON设计、卡片等设计元素组成的。在设计界面时，可以通过颜色来直观地显示背景色、导航栏、状态栏、操作按钮等设计元素，很好地展示产品设计界面的逻辑结构和信息层次。

如图，清晰的模块内容和颜色可以让用户更好地阅读内容，信息层次清晰，布局会很好。

2）清晰的视觉层次

在产品界面设计中，不同的内容应该呈现不同的层次关系。比如任务与背包的兄弟关系，蚂蚁森林与内容的集群关系等。

使用相同的色系和颜色之间的色相差异，可以直观地区分内容的层次关系，也可以通过颜色之间的强烈对比突出重点内容。

如图所示，蚂蚁森林通过颜色的强弱来区分视觉层次。绿色是最高的视觉层次，重要的按钮和文字使用绿色，让屏幕内容的层次关系更加清晰。

3）突出产品风格

颜色组合可以直接体现产品的风格和产品属性。<​​/p>

比如金融类APP界面常用蓝色，工具类APP界面常用蓝色。

如图所示。左侧金融APP界面的蓝色和右侧美团购物APP界面的多色图标，旨在通过色彩营造产品氛围，增强用户体验设计感，展示产品中的功能设计。

3.色彩对比

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

1）色相对比

相似的颜色对比

使用同色对比的好处是可以营造出和谐统一的界面效果。

在界面设计上，一些品牌风格鲜明的产品，一般会使用相同的颜色对比。

如下图所示，产品设计的界面效果基本使用绿色的色调贯穿整个界面，只调整绿色的亮度和纯度，以满足不同场景的需求，产品风格是难忘。

互补色对比

使用补色对比的好处是可以使画面更加强烈，营造视觉对比，吸引用户的注意力。

常见的互补色有红色和绿色、黄色和紫色、橙色和蓝色。

因此，设计师在使用补色对比时，通常需要遵循大和小对比的原则，即大面积使用一种颜色，然后局部使用其对比色。

同时，可以将相同数量的具有相同亮度和高色度的补色搭配在一起，使界面看起来明亮，例如红色和绿色。

由于黄色和紫色的亮度差异较大，不会产生刺眼的效果，所以也经常使用黄色和紫色的对比法。

如图所示，对于App的界面设计效果，在主色调为紫色的情况下，将部分按钮设置为黄色，可以提高按钮的视觉层次，增强用户的点击欲望。

2）纯度比较

使用纯度对比的好处是它允许页面被优先考虑。如果将更重要的元素设置为更高纯度的颜色，则可以首先注意到它们。

如图所示，不同纯度下“小米金融”App设计的分类区图标设计效果对比。图标颜色纯度高，界面信息层次非常清晰。

纯色搭配中，纯度对比越弱，图像冲击力越弱，图像效果越温和，适合长时间近距离观看；纯度对比度越强，图像越亮越鲜艳，图像表达越直观。

如图：纯色强烈对比在插画中的应用效果。通过纯度的强烈对比表现，可以强化画面的视觉脉络和主次关系，平衡画面的视觉体验，突出主体的表现力。

3）亮度对比

亮度对比是指颜色的明暗对比，也指颜色的黑、白、灰的对比。在心理学上，明度对比也称为明暗对比或明度对比。物体受不同亮度背景的影响，会产生不同的视觉感知。灰卡在白色背景上感觉更暗。在黑色背景下，感觉更亮。

在明度对比中，黑色和白色是对比最强的组合，而黑色和深灰色、白色和浅灰色是对比较弱的组合。

同色相、同纯度的颜色中混入的黑色越多，亮度越低；同色相、同纯度的颜色中混入的白色越多，亮度越高。利用亮度的对比，可以表现出色彩前后的空间感、画面的层次感、体积感等。

亮度对比越强，光感越强，界面表达的主题越清晰。如下图。

合理的亮度对比可以使信息层次显示更清晰直观，提高用户的阅读效率和愉悦度。

在视觉设计心理学中，亮度较低的物体在后面，亮度较高的物体在前面。在设计界面时，一般不能在浅色背景上悬挂暗卡，不符合用户的视觉体验设计习惯。

如图，将白卡放在灰底上时，会感觉到灰底上的白卡，界面层次感清晰；微信阅读的白卡内容属于界面上的最高级，而灰色的背景则给人一种退步的感觉。

4）面积对比

蓝色和黄色的 1:1 组合在视觉上很不舒服。但是大面积的蓝色配上一点黄色会有很好的视觉效果。

配色时，调整合理的色彩面积比例。层次感的色彩增加了节奏感，给用户带来画面的视觉冲击。

如图，左侧界面背景色中，蓝色区域占比较大，主色明显，黄色为辅助色，界面视觉更加和谐舒适。

界面设计中色彩的运用，使用简约设计的风格，文字不使用色彩，按键使用色彩设计。

配色时，只需要关注不同色调的区域对比即可。比如导航栏面积大，会使用品牌主题色。

4.颜色字符

1）冷暖色的运用

在界面设计中，冷色调会让用户感到沉稳、安全和高科技，所以在人工智能和社交产品的界面设计中比较常用。暖色调会给用户带来积极、喜庆、美味的感觉，因此常用于美食、母婴等产品界面设计。

电商应用界面采用暖橙色，为界面营造积极、活泼、愉悦的视觉氛围。

工具应用界面使用的蓝色为界面营造出沉稳的视觉氛围，这是配色的设计规则。

2）不同的颜色赋予产品不同的个性

白色的使用

白色代表纯洁、圣洁、信任和宁静、简单、优雅，是一种充满纯洁的颜色。白色被称为消色差，它与任何颜色都很和谐。大部分背景使用纯白色，如下图所示。

蓝色的使用

蓝色代表着广阔的天空、平静、诚实、希望和科技，是一种视觉上舒适的颜色。蓝色给人一种自由和平静的感觉。广泛应用于科技资讯、职场等品类的产品界面设计，如36氪、钉钉等工具类产品，如下图所示。

红色的使用

红色象征热情、喜悦、自信、斗志和活力。这是一种充满活力的颜色。常用于电商、新闻等需要营造活跃气氛的产品界面，如图。

橙色的使用

橙色是亲密而充满活力的。橙子具有增进食欲、刺激消费欲望的作用。橙色代表温暖、阳光、健康和快乐。因此，常用于社交服务和电商产品的界面设计，如淘宝产品、平安、滴滴出行、大众点评等产品。如图所示。

黄色的使用

黄色代表希望、温暖、青春、活力和乐观。它具有高亮度并且是鲜艳的颜色。常用于旅游或针对年轻人的目标用户的产品界面设计，如马蜂窝、OFO共享单车icon、好学习等产品设计，如图。

绿色的使用

绿色代表健康、安全、活力、青春，给人一种充满希望和温柔的色彩。因此，绿色强调安全感。如拉勾图标、种子习性、药用鹿等产品，如图所示。

紫色的使用

“紫色，高贵的颜色。略带忧郁和迷人的颜色，代表威望、深度和优雅。

在中国传统中，紫色代表圣人和皇帝的精神。例如，北京故宫也被称为“紫禁城”。这一切都源于古代对北极星的崇拜。

在西方，紫色也代表着尊贵，往往是贵族喜爱的颜色。这起源于古罗马帝国的提尔人，常用的紫色染料只有贵族才能穿。

在界面设计中，混合了暖红色和冷蓝色的紫色是一种极好的刺激色。网页以紫色为主色调，韵味十足，非常符合本次网页设计的定位。

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）关注色彩心理学

颜色对人类情绪和行为的影响，红色与生命、热情、自信和力量有关。绿色让人联想到健康、生活、青春和自然，蓝色让人联想到科技和未来。了解色彩心理学有助于我们为应用设计提供基础。

示例：网页使用蓝色作为主色调，传达一种年轻、亲密、感性的基调。

4）从大自然中汲取灵感

大自然拥有世界上最美的风景，蓝天，红色的朝霞，金色的麦穗，五颜六色的花朵。提取色彩并应用到设计中，完美搭配所呈现的和谐美感，瞬间打动人心。

5）可读性好

可读性好的界面旨在为用户提供优先且清晰的内容浏览。确保界面可读性需要在界面设计中采用对比鲜明的配色方案，例如在浅色背景上使用深色文本，在深色背景上使用浅色文本。

虾米音乐的主要功能入口、标签栏图标、按钮均采用高纯度橙色，与界面中的灰色文字形成良好的对比，提高界面内容的可读性。列表、图标和文本组合使浏览直观而高效。

6）控制颜色数量

颜色影响用户的心情和行为，注意优先级，心情影响用户的想法。

设计中有一句话：颜色不超过三种。即一个界面不要使用超过3种颜色组合，可以有主色、辅助色、点缀色。

颜色本身可以调节三种颜色的饱和度和明度，以匹配更丰富的颜色。例如：ANT，这将在文章的第四部分讨论。

7）颜色的使用尽量不要用纯黑和纯灰色

黑白之间的强烈对比会让用户感到生硬。但是在白色中添加一点蓝色和其他色调会使图片非常透明。

感受除黑白和无彩色以外的插画色彩的迷人价值。插画更能触动人的内心感受完美国际黄颜色代码，满足人性的情感需求。

和谐的色彩组合使界面看起来生动和谐。

8）柔和而集中的色彩

从用户的心理角度考虑，界面可以选择使用一些柔和的颜色，并调整其色调、饱和度、明度以匹配和谐的颜色。比如首页的核心功能图标用不同的颜色来呈现产品设计的年轻、时尚和韵律感。

多种颜色搭配，更能保证整体配色的和谐统一。

9）背景色与白卡颜色的对比

背景色是为了衬托内容，所以背景色是蓝色，白色作为背景的对比色来区分图片的视觉层次。

整个界面呈现柔和舒适的色彩设计。

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

自然界中有很多美丽的渐变色，比如晴朗天空中的蓝色渐变。美丽的渐变色取材于大自然，渐变不超过90度。画面更加和谐美丽。

在APP设计中，常见的UI配色包括单色配色、相邻配色、补色配色等配色。

单色搭配

单色搭配是指单一色系的搭配。它使用颜色的饱和度和亮度来形成视觉层次，并在整个应用程序中运行相同的颜色。通常，这种颜色来自品牌颜色。单色搭配的视觉风格整体不错。从而为用户呈现统一的感觉。

例如，在微信阅读的产品设计中，将主色调应用到关键元素上，带来人性化的品质体验。

相邻颜色匹配

相邻色组合是主色和相邻色的组合，可以在同色调中构建丰富的视觉层次感和质感。

例如：京东健康选择与绿色相邻的黄色和蓝色作为辅助色，赋予不同的功能含义，信息表达清晰，和谐统一感好，视觉趣味性强，色彩搭配柔和。

互补色

补色是由主色和其补色组成的两种颜色的组合，可以是相邻的颜色，如蓝色、黄色和橙色的组合。

这种组合不仅可以保持互补色的强烈对比，区分关键信息和次要信息，还可以增加视觉趣味，颜色看起来丰富多彩。

例如：36 Kr用蓝色作为主色，黄色作为辅助色应用到图标和标签上，然后选择黄色的相邻颜色橙色作为另一种辅助色，应用到不同的按键上信息。让用户更好地阅读产品的功能和内容。

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

夜间模式的功能用于用户体验，用户喜欢在深夜使用手机。例如：阅读资讯产品、理财产品等也会选择晚上阅读和使用。

当需要沉浸式关注工作内容时，建议使用深色模式完美国际黄颜色代码，可以帮助用户更加关注突出显示的内容和操作。

例如：百度网盘的界面设计，白天和晚上都有丰富的使用场景，所以需要支持夜间模式，保证用户体验的舒适度。

渐变色和谐，美观舒适，画面丰富，层次感好，可应用于图标设计、导航背板。

渐变色推荐网站：

该网站不仅有漂亮的渐变色，还有更多的格式可供选择，例如PSD、PNG，以及可以直接复制的CSS渐变代码，让设计师可以轻松使用这种配色方案。

平面设计配色网站推荐：

这个网站会定期更新一些平面设计中最流行的颜色组合，所有这些都很棒。

可以生成一组调色板的推荐网站：

上传一张你最喜欢的图片，然后根据这张图片自动生成一组调色板，非常实用。

三、近两年流行色赏析

权威趋势预测机构WGSN发布2020春夏流行色。

如果用一种颜色来形容这两个季节，那一定是绿色。

绿色代表自然、清新、活力和活力。

绿色是生命的颜色。大绿家族中的薄荷绿特别定位小清新，个性独特，辨识度高。

追波：Plant App，如下图。

在手机UI界面设计中，绿色用于手机产品设计的应用。

最近， 发布了其第 19 年的流行色——乐观和快乐的珊瑚色。

这种充满活力的珊瑚色“活力珊瑚色”已被选为 2019 年潘通年度色彩。

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

彩通色彩研究中心执行主任在声明中表示：

色彩是一种平衡镜头，我们通过它体验自然和数字现实，尤其是活珊瑚橘。消费者渴望人与人之间的互动和社交联系，而 Coral 以其人性化、令人振奋的品质触动了人们的心弦。

对于可以在任何社交媒体上流行的移动 UI 设计来说，橙色也是一种超饱和、充满活力的选择——因为橙色是自然界中一种美丽的颜色。

四、阿里ANT官网配色学习

蚂蚁色系分为两个层次：系统级色系和产品级色系。

1.系统级配色方案

Ant 的系统级配色方案也源于“自然”的设计价值。设计师通过对自然场景的抽象捕捉，结合蚂蚁的技术基因，形成了独特的12种颜色。

进一步，通过大量的观察，我捕捉到了自然光下不同颜色的变化规律，借助艺术中的素描思想，衍生出12种颜色。

中性调色板的定义是可读性、美学和可用性的平衡。

1）基本色板

Ant 的基础色板共有 120 种颜色，包括 12 种原色和派生色。这些颜色基本可以满足中后台设计的颜色要求。

Ant 的色板也有进一步扩展的能力。 After by and , with the laws of color , we have come up with a set of color tools. When there is a need for color , the only needs to the main color to rules, and then A full range of can be .

2）

black, white, and gray. It is used in the web of the and of Ant. of can make the page have a good and and help the . Ant's a total of 13 from white to black.

2. Color

Brand color is one of the most to and .

When , it is to the usage and scope of brand in the . the main color in the base color , we the sixth color from light to dark as the main color.

Ant's brand color is taken from the blue of the basic color . The : key , , , and other .

clear and , such as , error, , , link, etc.

The of needs to with the user's basic of .

We that under a , the be as as . Ant's color is shown in the :

Ant's color is used in the text part of the , in to the , , line, and other are also very . The of color needs to the dark and light , and the WCAG 2.0 .

Ant's color is in the way of when it hits the . The color is shown in the :

3. of Color in

The use of color is more based on the of , and . of is the key.

-level to an and work .

and URLs:

"Law and Logic"

" UI "

"ANT "

"Baidu ", etc.