

干货｜UI设计中的配色技巧与应用

全速研习社

2021-07-23

作为设计师，每天都要和色彩打交道，一个设计作品呈现在用户面前，首先映入眼帘的就是它的视觉展现，因此，色彩在设计中至关重要。无论是UI设计、平面设计、网页设计等最先考虑到的就是色彩，那么如何用色彩吸引用户的眼球呢？今天小编就给大家分享一下设计中色彩搭配的技巧与应用。

#色彩的性格

人们的生活中离不开色彩，除了美学之外，色彩是情感和联想的创造者。在掺入了人们的生活经验、思想感情、喜怒哀乐的情绪之后，色彩变得富有人情味和性格。不同的颜色会给带给人不同的情绪感受。因此，人们将不同的色彩赋予了不同的属性和功能。

红色和橙色会让人联想到热情、活泼、激情、时尚、青春、促销、喜庆等。黄色会让人联想到温暖、辉煌、希望、尊贵、财富等。绿色会让人联想到清新、健康、新鲜、自然、安全等。蓝色会让人联想到宁静、凉爽、和平、科技、未来等。粉色和紫色会让人联想到可爱、优雅、娇柔、温馨、浪漫等。

例如，Twitter的App界面就是采用了蓝色为主色，这种高纯度的蓝色传递出一种年轻、亲切和科技的感觉，这也直接映射了Twitter主要受众是年轻人。

#色彩的结合

一个被称为 “60-30-10 ”的简单规则可以帮助保持色彩平衡，无论是平面设计、网页设计、APP设计等，都需要遵循这个原则。60%的主色调，30%的次要颜色，和10%的强调色，这个公式之所以有效，是因为它能创造出一种平衡感，使视觉上看起来更加舒适自然，其使用方法也非常简单。

设计中的主色通常为产品的品牌色，运用在UI设计中的图标、按钮、背景、导航栏等元素中，是整个界面的视觉焦点。

如果一个页面中只有一个颜色，就需要运用辅助色衬托主色平衡视觉来避免颜色过于单一，同时当页面中的关键信息需要重点突出时也可以运用辅助色。主色的邻近色、互补色、分散互补色、三角对立色也都可以成为辅助色。

以上面网站为例，主色调是深蓝色，采用了蓝色的对比色橙色为辅助色，Banner上的按钮也采用了橙色。这样既打破了页面颜色过于单一的局面，也可以让一些重要信息有了视觉焦点，用颜色突出重点，给予用户以视觉引导。

#色彩的搭配方式

· 单色配色

单色搭配没有辅助色或点缀色，整体视觉非常简单干净，清晰明了。这种色彩搭配一般使用较少，常用在以下工具类的网页和App中。

· 渐变色主色配色

近几年来，渐变色为主色搭配是一种非常流行的设计，它打破了单色搭配画面视觉过于单一的局限性。渐变色让画面具备视觉吸引力，当眼睛感知到屏幕上的色调和明暗变化的时候，会有意识地注意到特定的色彩和视觉焦点。

· 邻近色配色

邻近色配色是由主色和邻近色的相似色系组成的搭配，这种配色色相彼此近似，冷暖性质一致，色调统一和谐，能够展现更丰富的视觉层次。美颜相机就是用了邻近色配色的方式，粉色的邻近色浅粉、浅紫色做为辅助色，颜色的性格也与产品的性质一致，完美了契合了App的用户定位和产品调性。

· 互补色配色

色相环中成180°角的两种颜色称为互补色，例如红色与绿色互补，蓝色与橙色互补，黄色与紫色互补。互补色搭配，可以增强画面的对比，使画面能够很显眼，从而突出重点信息，让人过目不忘。

· 分散互补色配色

分散互补色是指主色和互补色相邻的两个邻近色。例如蓝色的、黄色、红色、蓝色为主色而黄色是蓝色的补色、而红色为黄色的邻近色。如下面案例运用蓝色为主色，橙色为辅助色，以及红色为分散互补色，这样可以增强对比度，在区别画面信息的重要性的同时，使画面更有张力和活泼性。

· 三角对立色

三角色也是一组颜色。是通过在色环上创建一个等边三角形来取出的一组颜色，可以让作品的颜色很丰富。

#色调一致性

在设计中，色调统一尤为重要。一般情况下，UI设计中如果没有统一的色调，便会看起来杂乱无章，拉低用户的体验感。当遇到特殊情况时，以主色为主的情况下，页面的颜色也可以进行较少的颜色区分。

#良好的可续性

无论是做平面设计、网页设计、还是UI设计等，本质就是信息传达，因此，良好的可读性是传递信息、提高用户体验的关键。

例如图1在浅色背景的Banner下使用深色的文字，图2在深色背景下使用浅色的文字，在图三中主色是蓝紫色、辅助色是黄橙色，这张Banner的背景是深色的所以我们要用浅色文字，如果还想突出重要文字，就运用互补色和对比色，可以加大画面的对比让画面更突出更醒目。

色彩在UI设计中发挥着重要的作用，给予用户更为舒适的使用感受。设计师们需要考虑色彩设计的内容，区分开各个体系的颜色，将颜色更好地应用到各种设计中，以方便用户在界面模块中使用，增加用户使用的视觉冲击感。

图片来源于网络，侵删

文章参考：

https://www.zcool.com.cn/article/ZMTIyNjQxNg==.html

https://www.uisdc.com/develop-ui-color-system

https://www.sohu.com/a/216773550_750259

- END -

设计创造价值

点个“在看”不失联

【声明】内容源于网络

全速研习社

聚焦数字化领域，尤其专注视觉创意设计、应用开发板块，以技能解读、行业前沿信息发布、公司动态信息等内容为主，希望让热爱设计、开发等相关数字化人才获取专业信息、形成沟通交流平台！

内容 85

粉丝 0

全速研习社聚焦数字化领域，尤其专注视觉创意设计、应用开发板块，以技能解读、行业前沿信息发布、公司动态信息等内容为主，希望让热爱设计、开发等相关数字化人才获取专业信息、形成沟通交流平台！

总阅读23

粉丝0

内容85