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 创意 WooCommerce 社群的数千种优秀的配色组合。
 

 
  Paletton(http://paletton.com/)
 
  Paletton 类似于 Adobe Color CC,关键的区别在于您不仅限于了 5 个色调。当您有了主色并且想要使用更多的配色时,这个特性就很方便了。
 
  谷歌的 MDL Color Customizer(https://getmdl.io/customize/index.html)
 
  对于 Android 开发者来说,这是一个很好的工具。它允许多用户在 Android 应用上,灵活地组成主色及辅助颜色。
 

 
  结语
 
  颜色是 UI 设计的基石。在为 UI 界面配色时,请记住,没有错误的颜色。最重要的是您如何合理使用它们。多花点时间来建立一个对您的产品最有效力的配色方案,并在 UI 界面中合理地应用它。