1.2　UI设计配色的基本步骤

产品UI给用户留下的第一印象，既不是界面中丰富的内容，也不是合理的版式布局，而是界面的色彩。色彩的视觉效果非常明显，一个UI设计成功与否，在某种程度上取决于设计师对色彩的运用和搭配，配色决定了UI带给用户的第一印象。

1.2.1　明确产品定位与目标

为UI选择合理的配色方案之前，首先需要明确该产品的定位与目标，确定UI的核心功能和主要组成元素，这样才能更加合理地选择配色方案。

产品存在的意义在于能够满足用户的特定需求。例如，微信解决了用户在相隔万里却又想亲密沟通的交流需求；微博满足了平凡用户与明星在同一个平台也可以享有明星般关注的社交心理需求；美食类App则解决了用户足不出户享有美食的需求。产品的核心价值就是为用户解决特定的需求，也可以理解为产品的核心竞争力就是满足用户的特定需求。因此在开始进行UI设计前，首先要对产品的核心功能定位有一个足够的认识。

如果所开发的产品是以文字信息为主（如新闻、社交类App或者电子书），这样的产品UI比较适合使用浅色调的背景颜色，因为界面内容的可读性占据用户体验的首要位置。

◆　案例分析

图1-11所示是一个电子书App界面设计，使用白色作为界面背景颜色，搭配界面中接近黑色的深灰色文字，信息内容的表现非常清晰，便于用户阅读。界面底部的功能操作图标和操作按钮使用了高饱和度的蓝色，使界面整体表现明亮、清爽，界面内容具有很高的可读性。

电商类App也经常使用白色作为界面的背景颜色，因为白色能够有效凸显界面中产品色彩的表现，使产品图片和产品信息看起来更加直观、清晰。图1-12所示是一个生鲜商品电商App界面设计，使用白色作为界面背景颜色，使界面中各种蔬菜水果图片的表现非常清晰、直观，局部点缀高明度的黄色功能图标和按钮，有效突出了功能操作选项。

如果所开发的产品需要在视觉上具有很强的吸引力，那么产品UI选用深色调的背景更加合适。深色调背景虽然显得很厚重，但是由于其吸收了界面中其他元素的光，更有利于表现非文字形式的内容。产品的内容不仅与文字相关，还包括图标、图像、符号和数字等，它们都属于内容的范畴。此外，深色背景会给产品营造出一种特有的神秘感和奢华感，能够从更深的层次来反映内容。

◆　案例分析

图1-13所示是一个奢侈品电商App界面设计，使用黑色作为界面的背景颜色，在界面中搭配无彩色的灰色块及白色的文字，并且界面设计非常简洁，整体给人带来强烈的高档与奢华感。购物车等功能操作图标则使用棕色表现，在界面中显得特别突出。

图1-14所示是一个旅行日志分享App界面设计，使用明度和饱和度都比较低的深灰蓝色作为界面背景颜色，给人一种宁静、沉稳的印象。界面中搭配接近白色的浅灰色文字，使用高饱和度的青色点缀重点功能图标，视觉表现效果非常清晰、突出，同时也使得界面整体能够保持深色背景给人带来的沉稳感。

1.2.2　确定目标用户群体

通过分析产品的目标受众群体，往往能够让设计师更清楚需要先做什么，后做什么。了解潜在用户，掌握他们想从所设计的网站或者App中获得什么，这样才能为设计出可用、有用且具有吸引力的UI奠定坚实的基础。

中老年人更加喜欢以浅色为主的配色方案，这样的界面对中老年人而言更加直观，也更易于导航。年轻人更加喜欢深色背景的界面设计，因为其表现更加时尚、现代。青少年和儿童喜欢欢快、明亮的界面，一些有趣的细节设置也可以很好地吸引低年龄段用户的关注。以目标受众群体为中心进行设计，可以让设计决策更加明晰。

◆　案例分析

使用浅色背景能够凸显界面中的内容，也符合人们的阅读习惯。图1-15所示是一个健康管理App界面设计，使用高明度的浅蓝色作为界面背景颜色，在界面中搭配白色文字，并且重点信息内容使用白色背景选项卡突出显示，色调明亮、柔和、舒适，给人的感觉温馨而自然。

图1-16所示是一个餐饮美食App界面设计，使用黑色作为界面背景颜色，搭配白色文字和高饱和度黄色功能操作按钮和菜单选项，与黑色背景形成强烈的对比，使得界面的表现时尚且富有动感，这样的界面设计深受年轻用户的喜爱。

图1-17所示是一个针对儿童早教的App界面设计，使用白色作为界面背景颜色，高饱和度的黄色作为界面的主题色，使界面的表现效果更加欢乐、活泼。界面中的功能图标使用了不同颜色的卡通风格进行表现，使界面充满了童趣，特别能够吸引低龄儿童的关注。

1.2.3　分析竞争对手

市场环境下，必须要面对许多同类型产品的竞争，需要对市场上同类型的产品进行调研分析，掌握哪些设计方案已经被竞争者所使用，应该放弃已经被竞争对手使用过的设计方案。否则结果可能是，等到产品已经进入测试阶段，即将上线，才发现市场上已经有了一个极其类似的产品。因此，对市场进行调研，在产品研发早期阶段就可以放弃一些过时无用的设计方案，避免无用功。

配色方案的选取会直接影响产品在竞争中看起来是否足够突出，会影响用户初次使用时是否愿意与之互动。花费时间去探索已有的同类竞争对手的产品，能够节省很多时间和精力。

◆　案例分析

图1-18所示是一个家居产品App界面设计，使用浅蓝色作为界面背景颜色，界面中多处使用高饱和度的蓝色和洋红色进行搭配，与同样高饱和度色彩的产品相呼应，体现出产品的时尚与现代感，白色与高饱和度色彩的搭配使界面表现更加富有现代感和个性感。

图1-19所示是一个动物保护App界面设计，该App界面打破了惯用的白色或深色背景，而是使用低饱和度的灰棕色作为界面背景颜色，搭配纯白色的文字，表现出大自然的泥土气息，局部点缀黄色的功能图标，与背景形成对比，表现效果独具个性。

1.2.4　产品测试

基于用户群体、可用性、吸引力等不同因素确定配色方案的大概方向后，每个设计方案都应该在不同的分辨率、不同的屏幕及不同条件下进行适当的测试。在将产品投放市场之前，不间断的测试会揭示出配色方案的强弱。如果设计方案的效率低下，可能会给用户留下不好的第一印象。

◆　案例分析

图1-20所示是一个响应式食品宣传网站UI设计，使用白色作为界面的背景颜色，表现出清新、自然的视觉风格，使得界面中的商品表现更加直观。在界面局部使用高饱和度的黄色作为点缀，突出重要信息的表现，并且该网站UI在不同的设备中浏览都能够获得很好的视觉效果，从而保证了界面视觉效果的统一表现。