Godzilla. 2018-10-15 网站建设

7条用于创建UI配色方案的实用技巧（二）

1.限制颜色的数量

　　将色彩应用于设计并平衡颜色间的关系也很重要。一般来说，你使用的颜色越多，就越难达到它们间的平衡。这就是为什么会建议在一个配色方案中使用有限数量的颜色。对于一些移动应用产品，你可以用一种主色来创造一些令人惊艳的产品。诀窍是使用主色的明暗变化。你可以通过降低亮度和增加饱和度来创造更暗的颜色变化，而更明亮的颜色可以通过增加亮度和降低饱和度来产生。看一看iOS版的Facebook App应用。这款应用的主要颜色是蓝色，在界面上使用蓝色作为主色。Facebook使用了蓝色的深浅变化颜色组合。

　　2.使用60%：30%：10%颜色比例规则

　　即使颜色数量很有限，也不易于创造出一个和谐的配色方案。许多设计师面临着色彩比例的问题，这在之前的移动应用程序的UX/UI设计提示的文章中就说过，也许合理分配UI界面中的颜色比例并非易事。

　　希望一个简单的颜色比例规则，即60%：30%：10%可以帮你创建一个适当的平衡。这项配色技术来自于室内设计行业。这条规则很容易把颜色平衡带入到构图画面中。配色应该遵循60%-30%-10%的比例，按照这条规则，你将拥有60%的主色，30%的辅助颜色，10%的强调颜色。

　　3.不要忽略可访问性的两个基本规则在UI设计的重要性

　　在创建UI界面时，设计师的首要目标是确保每个用户在使用产品时都有良好的的使用经验。当所有用户群体，包括有视觉障碍的人，都可以正常访问设计时，就能很好实现可行性。负责配色的设计师必须熟悉WCAG 2.1规则（https://www.w3.org/TR/WCAG/），并将实践融入到配色选择中。可访问性的两个基本规则应该应用于每个UI设计中：

　　● 当出现在有色背景上时，文本应该是清晰的。元素之间应该有足够的颜色对比，这样视力较低的用户就可以阅读文本了。设计师可以使用一些专门的工具，比如Webaim对比检查器来检查颜色对比的可识别性。

　　● 不要只依靠颜色来传达功能。运用文字说明与UI元素一起发生的事件，这将使界面也适合那些色盲用户使用。

　　配色工具

　　为了补充我们创建配色方案的快速指南，我们还提供了一些配色工具，在7条用于创建UI配色方案的实用技巧（一）中也有详细的介绍。它们可以简化创建特定的UI配色方案的步骤。

　　Coolors.co（https://coolors.co/）

　　Coolors.co是一个便捷的配色工具。你所需要做的就是锁定选定的颜色并按空格来生成调色板。或者，你可以上传一个图片，并从中制作一个调色板。该工具允许将颜色组合导出到不同的格式，比如SVG。

　　Adobe Color CC（https://color.adobe.com/zh/create/color-wheel/）

　　Adobe Color CC允许你使用一个色轮来创建一个配色方案。创建的方案可以导出到Adobe Photoshop中。它还提供了来自Adobe创意社区的数千种优秀的配色组合。

　　Paletton（http://paletton.com/）

　　Paletton类似于Adobe Color CC，关键的区别在于你不仅限于了5个色调。当你有了主色并且想要使用更多的配色时，这个特性就很方便了。

　　谷歌的MDL Color Customizer（https://getmdl.io/customize/index.html）

　　对于Android开发者来说，这是一个很好的工具。它允许用户在Android应用上，灵活地组成主色及辅助颜色。