移动应用程序设计中的色彩

在设计新的应用程序时，通常很难确定一个效果很好的配色方案，因为有无数种可能的颜色组合。在本文中，我们将介绍与应用中颜色相关的最重要的要点。我们将介绍传统的配色方案模式（单色，类似，互补），不严格基于任何一种模式的自定义颜色组合，我们还将学习如何为支持可用性的应用选择颜色和对比度。

· 如何选择有效的配色方案

创建配色方案时，需要考虑许多因素，包括所在地区的品牌颜色和颜色关联。

· 多少种颜色合适

保持颜色组合简单将有助于您改善用户体验。一个简单的配色方案不会让人眼前一亮，但可以让您的内容更容易理解。相反，在太多地方拥有太多颜色会使得页面混乱，不易阅读。

研究人们如何使用Adobe Color CC表明，大多数人首选的是在只需要两到三种颜色依靠简单的色彩组合。

· 如何创建方案

那么，如何选择那两种或三种颜色？色轮可以提供一些帮助。

有许多预设的配色方案标准可以使创建新方案更容易，特别是对于初学者。

· 单色

单色方案是最简单的颜色方案，因为每种颜色都取自相同的基色。单色可以很好地融合在一起，产生舒缓效果。

单色方案在视觉上非常容易阅读，尤其是蓝色或绿色色调。

图片来源：Adobe Color CC

如上图所示，该方案看起来干净而优雅。

· 类似

类似的配色方案是根据相互之间没有突出的相关颜色创建的; 一种颜色用作主色，而其他颜色用于辅助色彩。

虽然这个方案相对容易实现，但诀窍在于决定使用哪种颜色的活力，因为它会被夸大。例如，Clear是一个手势驱动的待办事项应用程序，它使用类似的颜色来直观地确定当前任务集的优先级。

图片来源：Adobe Color CC

而冥想应用程序Calm使用蓝色和绿色的类似颜色来帮助用户感到轻松和平和。

图片来源：Adobe Color CC

· 补充

颜色并不总是相互矛盾; 互补色是相反的颜色。

它们形成鲜明对比，可以用来吸引用户的注意力。使用补充方案时，重要的是选择主色并使用其互补色来表示对比。例如，当人眼看到一个充满不同绿色色调的物体时，一点点红色会很好地突出。

使用互补色是让事物脱颖而出的最简单方法。

· 自定义配色方案

创建自己的配色方案并不像许多人想象的那么复杂。在中性色调中添加明亮的强调色是最容易制作的色彩方案之一，也是最具视觉冲击力的色彩方案之一。

图片来源：Adobe Color CC

白色画布和冷色灰色，搭配蓝色调，构成Dropbox配色方案。

· Adobe Color CC让您的生活更轻松

Adobe Color CC，以前称为Kuler，可以非常轻松地选择颜色。调色板上的每种颜色都可以单独修改或选择为基色，只需点击几下即可。

可以保存选项板并将其直接添加到库中。此外，网站上提供了许多由社区创建的出色配色方案。

· 颜色对比的影响

通常，UI上的色彩对象或区域不是孤立显示的，而是与另一个彩色对象或区域相邻或叠加。这会产生对比效果。对比是一种颜色与另一种颜色分开的方式。正确使用后，它可以通过在屏幕上清晰地分割元素来减少眼睛疲劳并集中用户注意力。

高对比度是指颜色容易彼此分开。低对比度是他们不这样做的时候。

· 对比度和文本可读性

色彩对比是色彩理论对设计可用性至关重要的一个领域。设计师经常喜欢使用低对比度技术，因为低对比度使事物看起来美丽和谐。然而，美丽并不总是最好的可读性。当您在文本中使用颜色时，请注意将两个具有低值对比度的颜色彼此相邻放置可能会使您的文本难以阅读。在移动屏幕上尤其如此，其中用户经常在户外设备上或在明亮的地方导致屏幕眩光。

这些文本行难以阅读由于背景颜色过于靠近。

确保元素之间有相当多的对比。这真的不是那么难——你需要做的就是检查对比度。对比度表示颜色与另一种颜色的差异。

这些文本行遵循颜色对比度建议，并且与其背景颜色相比清晰可辨。

图标或其他关键元素也应使用上面推荐的对比度。

左：图标不遵循颜色对比度建议。右图：图标遵循颜色对比度建议，并且对其背景清晰可辨。

· 对比度和用户注意力

除了建立可读文本外，对比度还可以将用户的注意力吸引到屏幕上的特定元素。通常，高对比度是重要内容或关键元素的最佳选择。因此，如果你希望用户查看或点击某些内容，使其脱颖而出！例如，用户更有可能点击与其背景形成鲜明对比的号召性用语按钮。

总结

我们几乎没有涵盖色彩理论来增强你的UI设计的色彩知识。磨练你的色彩使用技巧是一项持续的努力。如果你想学习如何创建漂亮，实用的配色方案，只需要多加练习和大量用户测试。