如何成功运用扁平化设计与色彩趋势

我们在Designmodo上已经聊了很多有关扁平化设计趋势的内容。

之前瞎说了很多，也给大家展示了大量不错的 示例 ，还开发了一套 免费的用户界面 以供大家下载并运用于自己的项目。

但是如果你想自己动手，则要注意这一趋势中最为重要的一个部分就是色彩。

扁平化设计温故知新

扁平化设计技巧，是指使用简单的效果（或省去某些效果）来打造不包含三维属性的设计方案。在扁平化设计项目中，不采用阴影、斜面、浮雕和渐变等效果。

有的人觉得扁平化设计外观很简单，但其实做起来很复杂。扁平化设计外观简单、直接，让用户一目了然，因此正日渐成为移动端用户界面以及web设计的流行趋势之一。

有关扁平化设计趋势的更多内容请见 Designmodo早先的文章 。

制定调色板

在颜色方面，扁平化设计可以采用各种各样的颜色，但一般来说设计师倾向于大胆的亮色。

扁平化设计在颜色方面的另一出众之处，在于设计师能够将调色板从简单的一种两种颜色扩展到三种、四种乃至更多种颜色。其大多数选择都采用了明亮饱满的色调，并有时使用这种色调对称灰色或黑色。

就颜色和扁平化设计而论，很多有关色彩搭配的传统规则都被设计师抛出了脑外以求让调色板能够拥有更多色彩。

但是，我们在扁平化设计和颜色选择方面越来越多的看到了色调和饱和度的搭配。虽然设计师可能会选择使用不少的阴影，但同时也会将不同的阴影对比审查看颜色是否够深、颜色组合属于主要组合还是次要组合、是否来自不同的色调或者颜色中包含的黑白组合是否较多。

在颜色方面，扁平化设计方案的趋势通常是超高的饱和度、明亮、比较复古或单调。倒并不是说这些是唯一的办法，但随着趋势的演化，这些风格已成为最为流行的风格。

亮色

亮色通常是扁平化设计的标志性特征，因为其能够带来一种很独到的感觉。明亮的色彩在亮色和暗色背景上一般都能够适用，并能够形成对比感同时吸引用户。对于扁平化设计来说，其可谓是最为流行的颜色趋势。

如何着手？

FlatUICoors.com  上提供了很多扁平化设计流行色调的新手示例。从亮蓝色和绿色到黄色橙色，这些颜色能够完美地呈现出我们眼中的颜色和趋势。这个网站是个绝佳的出发点，你可以在网站上免费选择下载不同的色值。

Designmodo在其近期发布的 Flat UI Free 工具包中对这一亮色设计进行了进一步的解读，并使用相同的亮色色调打造了一个很棒且使用简单的界面轮廓包。这一扁平化且风格十足的图标可适用于各种不同的项目，而且还提供了颜色样本（如果你是色彩搭配新手，那就有福了）。

亮色扁平化设计的调色板中很少采用严格的主色调，例如纯红色、蓝色和黄色一般很少见，取而代之的是更加丰富的混合色。

如果你想在扁平化设计方案中搭配自己选择的亮色，请注意一定要保持简单。选择色泽与饱和度相似的颜色。另外我们也为你提供了几个颜色样本以供你入门。

亮色颜色样本：尝试一下使用上面这些颜色组合或者任意混搭来打造自己的扁平化调色板。这些颜色在白色或黑色背景上都能达到最大的冲击力。

流行颜色：蓝色、绿色和紫色

复古 颜色

复古颜色方案对于扁平化设计项目来说也是一个潮流之选。

复古颜色的饱和度较低，但在亮色背景上添加了不同的色泽，并添加了白色让其显得更加淡雅。其外观虽然不具有蜡笔画的感觉，但明显表现出了老派风格。复古颜色方案通常包含很多橙色和黄色，有时也会采用红色或蓝色。

对于扁平化设计，复古颜色方案中常见主色和次色的区别以求让颜色更加柔和。

复古颜色样本：复古颜色在作为主色调独立使用时效果最佳。与图像或哑色搭配也能达到绝佳效果。

流行颜色：橙色、桃红色或紫红色调以及深蓝色

单色

单色方案 搭配扁平化设计正在迅速流行。这一色彩方案依靠单色及黑白色营造明亮而独特的色彩感。

大多数单色方案都采用底色外加两到三种浅色调实现效果。目前最为流行的颜色貌似是蓝色，但很多设计师也选择以黑色（也有灰色）外带红色等彩色按钮或行动呼吁作为底色。

另一种办法是使用细微的色差实现单色效果。例如，如果你以蓝色为主色，可以添加一些绿色色调打造蓝绿色方案。

单色技巧是目前尤其流行的移动端和应用设计技巧。

单色颜色样本：与其他调色板一样，单色方案同样需要使用对比。混合色调，让每个不同的“颜色”区别于主色。从全色（100%）及50%色调开始，然后是20%和8%。

Popular colors:  Blues, grays and greens

流行色：蓝色、灰色、绿色
结论

扁平化设计趋势的关键之一就是要新颖、有趣。你的项目应该要注意这两点。

你的调色板应该与项目色调相吻合，能够让用户知道如何使用你的网站并且外观有趣。在设计扁平化颜色方案时，不要局限于传统的颜色搭配规则，跳出自己的常识。

翻译： 蒋灿

原文地址：http://designmodo.com/flat-design-colors/