设计师如何给UI界面配色 (二)

二、配色方案注意事项

考虑到第一章的一系列因素，下面我将提供一个简短的步骤清单，帮你为网页和移动端设备挑选合理的配色方案。

#1.明确界面设计的目标

如果你已经确定了界面的主要用途和要解决的问题，那么你在选择配色方案的时候会更合理。如果整个ui是文本驱动型的界面，（比如博客，新闻，或者电子阅读器等），浅色背景会让阅读更有效率。因为浅色让整个界面看起来更有呼吸感，能够让用户更专注于内容。另一方面，如果整个ui是视觉驱动型的界面，以图片为主，那么用深色的背景会更好一些，因为深色的背景衬托着明亮的色彩，会让整个图片看起来更突出，同时会让整个界面的布局看起来更时尚。

#2.分析你的目标受众

界定并分析你的目标受众是每个设计师在展开设计前必须要做的事情。了解你的潜在受众，并分析他们要想要从你的产品中得到什么，这将为你设计一个有用的，有吸引力的界面打下坚实的基础。中年人和老年人喜欢浅色背景为主的配色方案，因为他们可以从界面中很快地提取有用的信息。年轻人偏向暗色背景，因为看起来更时尚。青少年和孩子们喜欢色彩亮丽的配色方案并且夹杂一些有趣细节的界面。其实配色方案的选取最基本取决于产品的功能性和内容，但是如果产品要以用户为中心设计，在选取配色方案的时候，我们不妨考虑下目标受众的偏好。

#3.研究竞品

要记住，你的产品需要面临竞争激烈的红海。配色方案的选取会直接影响你的产品在竞争中是否足够突出，并且会影响用户初次使用的印象。花时间探索已有产品，知己知彼，才能百战不殆。

更多精彩图片 请登录

#4.测试

因为配色方案影响产品的可用性，并且决定界面是否有吸引力。所以每个设计方案都应该在不同分辨率的屏幕，和不同的条件下进行适当的测试。只有测试了才知道配色方案的优点和缺点，从而综合选出最有效的解决方案，给用户留下好的第一印象。

更多精彩图片 请登录

三、妥协的解决方案

一个配色方案的敲定到最后实现的时候并不是不可更改，灵活一点，依据具体情况做一些妥协的方案，说不定也还不错呢。我们来看看下边的例子。

#1.深色界面上的白色标签文本

如果你对深色界面情有独钟，想跟一波ios13的风，悄咪咪告诉你一个小技巧，利用浅色标签或者区块承载核心的文本信息，从而确保文本的可读性。在设计的时候，注意颜色的对比，这种处理方式让界面兼具可读性和美观度。

更多精彩图片 请登录

#2.给用户选择配色方案的机会

另一种方式是让用户自己选择颜色模式。这种方式对于用户更加友好，用户不仅可以根据不同的可用性问题，而且还可以根据个人的审美偏好去设定一个个性化的颜色方案。这种情况下，设计师和开发人员需要更多的时间来创建更多可选的配色方案。


四、总结

看到这里，相信大家对如何选择配色方案有了比较全面的认知了。有时候追下设计趋势是比较重要，但是我们还是要立足于产品和用户。无论是什么样的配色方案都要注意最终界面的可读性和易读性，合适的颜色对比度是建立可读性和易读性的基础，而对比度的选择要符合无障碍颜色对比度标准，谷歌设计规范推荐在文本内容与背景之间的对比度达到15.8:1的比例。这里推荐大家使用对比度测试工具，来测试对比是否符合标准。

https://uxpro.cc/toolbox/contrast-ratio/

更多精彩图片 请登录

Color Contrast Tools

学习了学习了~最近正在研究UI

好贴，感谢分享。