翻译丨网页设计的新趋势:类扁平(附PDF下载)

在拟物（skeuomorphic）风格时代崛起，扁平风格以简约的方式风靡数年。然而，它也在大众口味的变化和技术进步中变化着。

类扁平（Ryan Allen解释为“扁平2.0”）与过去的完全扁平风格已经青出于蓝而胜于蓝。

iPhone iOS 6&iPhone 6 Apps

受瑞士国际主义风格的简约风格影响，扁平化从不同媒介及年代吸收营养。在这篇文章中，我们将看到这种风格的7种特点。

这些特点可以为特定优点单独使用，也可以合并起来有一个更大的扁平风格。但是开始你的“扁平之旅”之前，清楚扁平风格的优点和缺点也是非常重要的。

优点

• 有利于响应式设计

• 提高系统和导航的易用性

• 结构化布局和清晰化视觉，提高视觉成熟度

• 加快加载时间

• 简单的排版加强可读性

  图片来源：christmas-joy

缺点

• 不容易做好

• 简洁的风格会削弱指示性

• 容易出现无聊的风险

• 由于普遍性而显得无个性

如何使用？1底纹

在扁平2.0时代，阴影增加了深度和复杂性而不会牺牲简约的特性使得扁平化更具吸引力。在《网页设计趋势2015-2016》所述，这是扁平化设计的新补充，使得旧风格有了新活力。

Image Source: Duffy & Partners

虽然过去几年有过更长、更深的阴影，但最近这种趋势变得更加微妙。图片中Duffy & Partners的产品是非常少和不显眼，但是还是增加了一点额外的视觉兴趣。

3动态颜色

为了弥补视觉效果，扁平化设计包含了动态色彩，尤其是鲜艳的色彩。这些有能量的色彩的碰撞避免了单个元素组合出现的沉闷现象。

Image Source: CSS Conference EU.

这些有活力的色彩从一开始就有了最具识别性的特征。上述网站CSS Conference 采用了传统扁平方式，并使用了柔软和快乐的颜色。因为颜色的使用如此重要， Flat UI Colors 已经帮你收藏了最有效的色板。

5简单的排版

一如既往的，扁平化设计的排版保持简单和易于阅读——使用无衬线字体和统一的线条宽度。

Image Source: Intercom.

如上所例，字体并不需要强调，而且文字非常容易阅读。这就让用户把注意力放在有趣的图片上。

由于它强调可读性，其受欢迎程度渗透到其他需要简约设计的领域。我们可以看到这种扁平设计文本使用大幅图片、超大文本、文字居多的网站。

6幽灵按钮

最近时髦的一个设计元素是幽灵按钮（ghost button）：它与扁平设计非常搭配，并不引人注意，但是仍然可以识别为按钮。

Image Source: SCEATT.

按钮内的文本增加了注意效果。幽灵按钮的极少注意力属性适合扁平效果，并使得其最显著特性之一。相对与本文的其他属性，幽灵按钮几乎可以使用在其他任何风格。

8极简主义

扁平化设计与极简主义一起可以使用许多原则，例如易用性与简洁性。

Image Source: Pelican Books.

虽然看起来它看起来很容易，但是极简主义远比看起来复杂。更少的元素意味着必须更考究的设计。

11图标化

由于屏幕上显示的只有最基本的元素，图标需要更多的细节和灵气（flair）使得设计更有趣。

Image Source: Stash Flat Icons.

图标变得越来越大，可以容纳更多细节，并成为一个网页元素表达的支柱。如上所例，Stash Flat Icons，每个图标风格都已蕴藏在其中：明亮的色彩，卡通风的设计，还有足够多的细节。

12突出色彩（Accent Colors）

扁平化设计的传统颜色并不会完全过时。扁平化设计确实以更明亮的色彩方式标准化了。

Image Source: C2s.

在单一的背景上呈现鲜艳的颜色，给予设计师更多控制权，更需要充分思考给与舍。

特别是基本色，白与黑色使得鲜艳颜色脱颖而出。

结论

扁平化设计慢慢影响到其他的网页设计风格中，而且混合设计已经像其他单一风格一样变得流行。如果你想使用扁平化设计，不要犹豫的使用其中一种或两种所述特点：这些特点可以使你的风格脱胎换骨。

想知道更多扁平化设计技巧，以及更多9个扁平设计趋势，免费下载185页的《网页设计趋势2015-2016》，了解来自阿迪达斯、苹果、谷歌、范思哲等公司的实例。

PDF地址：
http://pan.baidu.com/s/1bn4sTP1（英文版，也可仅作观赏），也可在公众号回复“PDF”直接进入

原文地址：
http://speckyboy.com/2015/08/05/almost-flat-design-web-trend/，

译者：饭特稀，转载请注明出处。欢迎分享、转发、点赞。