本期翻译的文章来自 Zack Gehin，通过这篇文章，你将会了解到创建色板的技巧，从而帮助你成功的向用户传达你的产品性格。

设计师们通常会在用户界面上使用高亮的颜色和吸引眼球的调色板，从而使得产品看起来更加现代和清新。但是有没有人停下来想一想：自己创建的色板是不是很好的支撑了用户体验，符合用户模型，以及符合用户使用应用时的场景？

最近的新闻

上周，Atlasssian团队发布了充满生机的全新UI和品牌设计。Atlasssian和它的产品“Confluence”目前正以新的风格和调色板呈现在人们面前，文字则使用了Airbnb的字体“circular”。

明亮显眼，令人尖叫的艺术范，自然风格，几何型。但是这些对于开发者来说真的合适吗？

很明显，设计团队充分遵循了Spotify的设计系统，这本身没有什么错，但也不意味着就是正确的选择。在这个事件中，就像一个小丑打扮成一个书呆子和一个书呆子打扮成一个小丑。我很抱歉引用了一些老套的东西，但是真的。这难道不像是万圣节的打扮吗 ?

这是一个开发人员在网上调侃的反馈

“这颜色亮瞎了我的钛合金眼……”

我们不要总是想着让人眼前一亮，不要再为日常生活带来过多的色彩刺激，也不要让人感到不舒服。

让我们开始在颜色的选取上花一些时间，这是绝对值得的。 让我们给设计过程留足够的时间，以设计出一个和谐一致，并且可以通过实验检验的的调色板 。帮助人们可以正常使用我们的应用程序，并帮助人们使用我们的应用程序时感觉良好。

一个故事

上周，我和一位用户体验领导进行了聊了聊，我告诉他我是如何创建一个源自蓝色主色调的调色板的故事 。我发现最重要的是在应用程序被使用的环境中对调色板进行压力测试， 以验证调色板的可用性和情感吸引力。

下面是他告诉我的故事：

几年前，我们聘请了一个机构来升级我们的软件设计。 该机构带回来了一个和Spotify相似的惊人的暗黑主题。 团队中的每个人都很兴奋，感觉非常高大上，堪称完美。 公司庆祝用户界面更新的发布时，我们非常高兴，直到一个电话进来。在电话中，客户说：

“嘿，你的新颜色主题真的很丝滑......但是......你试过在外面用吗？”

建筑软件的用户环境是：办公大楼，建筑区外，甚至车辆中。 缺少在室外对调色板的测试导致了糟糕的体验。 该产品在用户最需要的环境中却完全无法使用， 真是一个漂亮的“三不沾”球。

不用说，这是一个昂贵的错误，这本可以通过环境测试而避免。

如何确保您的调色板实际上是真实醒目以及抓住重点的？

1.保证你的颜色通过可用性对比标准

WCAG 2.0可以帮助我们的设计师创造最佳体验。 让我们不要再忽略那些行业大神们投入了时间去创造的标准。 这种对比度检查器使你可以快速，轻松地验证您的颜色选择。 如果验证不能通过，那么就重新设计！

2.选择相同色系的不同深浅和色调

定义你的主色，比如蓝色

采取这种颜色，并生成其色阶和色调。 Colllor使这非常容易做到。

生成之后截图，然后找出一个色调来生成你的深色。 基于该颜色生成新的色调。

现在，在sketch中打开你的屏幕截图，并从每个刻度上的相同位置挑选颜色。

现在，你将会得到你的色板的第一个版本。

这将花费你很多时间。 当我为Widen Enterprises创建一个调色板时，花了40个小时来创建，测试和迭代。 最终结果很好的达到了我们的目标，准确的情感表达和可用性标准相匹配。 这是多么棒！一开始我们可能不会注意到这些，但是如果发现错误了，就会这样做。

说真的，这个过程非常简单。 以下是使用Colllor为应用程序系列创建的调色板示例。

从这里，我用主色蓝色创建一个了混合颜色的家族。 可以Adobe Color之类的工具来完成， 虽然这不是完美的 ，有多次的试错，但它会让你遥遥领先。

3.在多个环境中测试您的调色板

这是设计过程中最重要的步骤之一。 确定你的用户使用你应用程序的环境。

环境测试很简单，只需要将设备放在室外，白天或黑暗的房间里，任何人使用你的应用程序并自行测试！

如果有什么不对劲的，就去改正你的设计！

4.在不同的显示器上查看你的颜色

虽然我们中的许多人有幸使用最好的工具工作，但世界上大多数人不是。 对于我们来说，习惯使用视网膜和5k显示器是非常容易的。 让我们退后一步，拿出一个Windows笔记本电脑 ，低质量的显示器， 你可能会惊讶于你所看到的。

识别要测试的机器和显示器的一个好方法是从Google Analytics或您有权访问的分析工具中提取数据。

自己动手试试吧

留出充足的时间去设计一个合适的调色板， 带给你的用户一个舒适，合身，愉快的应用程序，使他们感到幸福，这是多么美妙的事情！