色彩在产品设计中的应用（四）
6. 色彩在界面设计中的作用
彩色文字会告诉用户可以点击的文字链接，而灰色的按钮则会让用户认为此按钮不可点击。
1）整体思考色彩在设计中的构成元素
图形化用户界面，用户在看到一个界面时，是一个由背景色、矩形按钮及图标ICON 设计、卡片等设计元素构成的。在设计
界面时，借助色彩可以直观的展示背景色、导航栏、状态栏和操作按钮等构成的设计元素，并让产品设计的界面的逻辑架构
和信息层级得到很好的展现。
如图所示，明确的模块内容和色彩，可以让用户更好的阅读内容，同时信息层级明确、排版都会很不错。
2）明确视觉层级关系
产品界面设计中，不同的内容应该呈现出不同的层级关系。例如，任务与背包间的同级关系，蚂蚁森林与内容间的丛属关系
等。
利用同色系、色彩之间的色相差异可非常直观的区分内容的层级关系，同时还可以通过色彩间的强对比突出关键内容。
如图所示，蚂蚁森林通过色彩的强弱区分视觉层级，绿色在视觉上层级最高，重要按钮与文字使用绿色，可以让画面内容的
层级关系更清晰明确。
3）突出产品风格
色彩的搭配可以直接反映出这种产品的风格和产品属性。例如，金融类 App 界面中常用的蓝色，工具类App 界面中常用的
蓝色等。
如图所示。左边金融 App 界面中的蓝色与右边美团买菜App界面中的多色图标的设计，都是通过色彩来营造产品氛围的，提
升用户体验设计感，展示产品设计中的功能。
4）色彩的对比
在界面设计中，色彩的对比形式丰富多彩。
5）色相对比
（1）同类色对比
使用同类色对比的优点是，可以营造出和谐统一的界面效果；在界面设计中，一些品牌格调比较鲜明的产品一般都使用同类
色对比。
如下图所示，产品设计的界面效果，整个界面基本贯穿使用了绿色这一种色相，并且仅通过调整绿色的明度和纯度来适应不
同的场景需求，产品格调令人记忆深刻。
（2）互补色对比
使用互补色对比的优点是，可以让画面更具张力，营造出视觉上的反差，吸引用户关注。常见的互补色有红色与绿色、黄色
与紫色、以及橙色与蓝色等。
因此，在使用互补色对比时，设计师通常需要遵循大调和，小对比的原则，即将一种颜色大面积使用，然后将其对比色局部
使用。同时，将明度相同、彩度很高的等量互补色搭配在一起，可以使界面看起来鲜明，如红色配绿色等。
黄色与紫色由于明度差距较大，不会产生刺眼的效果，因此黄色与紫色的对比搭配方式也经常被用到。
如图所示，App的界面设计的效果，在主色为紫色的情况下，将一些按钮设置为黄色，可以提升按钮的视觉层级，增强用户
的点击欲望。
6）纯度对比
使用纯度对比的优点是，让页面分清主次。若将比较重要的元素设置为纯度较高的颜色，则可以被人优先注意到。
如图所示为，不同纯度下 “小米金融” App设计，品类区的图标设计效果的对比。图标的颜色纯度都较高，界面信息层级都很
明确。
在纯色搭配中，纯度对比越弱，画面冲击力也越弱，画面效果较温和，适合长时间和近距离观看；纯度对比越强，画面越明
朗富有生气，画面表达越直观。
如图所示为：纯度强对比在插画中的应用效果。通过纯度的强对比表现，可以强化画面视觉的前后关系和主次关系，平衡画
面的视觉感受，突出主体物的表达。
7）明度对比
明度对比是指色彩的明暗程度的对比，也指色彩的黑白灰的对比。在心理学中，明度对比也称明暗对比或亮度对比。物体受
不同明度背景的影响，可以产生不同的视觉感受。灰色卡在白色背景下感觉变暗。在黑色背景下，感觉变亮了。
在明度对比中，黑色和白色是最强的对比组合，而黑色与深灰色、白色与浅灰色是较弱的对比组合。在同一色相、同一纯度
的颜色中混入的黑色越多，明度就越低；在同一色相、同一纯度的颜色中混入的白色越多，明度就越高。利用明度对比，可
展现出色彩的前后空间感、画面的层次感、体积感等。
明度对比越强，光感越强，界面的表达越明确主题。如下图所示。
明度对比合理，可以让信息层级展现更清晰和直观，提升用户的阅读效率和愉悦感。
视觉设计心理学，明度越低的物体越往后，明度越高的物体越靠前。在进行界面设计时，一般不能将深色卡片悬浮在浅色背
景上，不符合用户的视觉体验设计习惯。
如图所示，将白色卡片放在灰色背景上时，会感觉到灰色背景上的白色卡片，界面层次感很明确；微信读书的白色卡片的内
容在界面上属于最高层级，而灰色背景给人以后退的感觉。
8）面积对比
蓝色和黄色 1:1 的搭配，视觉感官不舒服。但是大面积的蓝色搭配一点黄色，就会有不错的视觉效果。
色彩搭配时，调整出合理的色彩面积比。色彩上的层次感，增加了节奏感，给用户带来画面的视觉冲击感。
如图所示，左边界面背景颜色中，蓝色面积占比比较大，主色调明显，黄色为辅助色，界面视觉较和谐舒适感。
界面设计中的用色，运用简约设计的风格，文字运用无彩色，重点的按钮等运用有彩色设计。
配色时，只需要着重考虑-不同色相的面积对比就可以了。例如：导航栏的面积较大，会用到品牌主题色。
