扁平化 on Victor42

别让扁平化设计平淡无奇

hi@victor42.work (Victor42) — Sun, 20 Dec 2015 21:12:00 +0000

[国外设计第115期]

早在2013年iOS7发布以来，扁平化设计就轰动了互联网世界。从那以后，它就持续发扬光大，并且发展出数量惊人的变种。

随着带有扁平化色彩的Google Material design规范的推出、卡片式设计的广泛采用、还有排山倒海的极简化趋势——似乎在可预见的未来，扁平化设计会成为主宰风格。

正如2015与2016年的网页设计趋势一书所描述的，扁平化设计正在进化：

“最初的扁平化设计是严格的扁平，极少有强调，注重极简设计。近来我们则看到了更多吸引眼球的元素，例如阴影与着色的暗示。尽管纯粹的扁平主义者会反对，但设计圈接纳了它，它与其他流行的设计模式能够有效结合。”

以往波澜不兴的风格发生突变，引发了一连串有趣的问题。

如果它是如此的流行，那如何与众不同地将它运用在自己作品中呢？你要的是扁平化设计，而不是平淡无奇。巧妙的运用，与粗劣的复制，这之间有何区别？

本文讲的正是这个。我们看看扁平化是如何进化的，怎样能使你的设计引领潮流。

长投影

我们所谈论的设计应当是扁平的，但阴影能产生纵深感，虽然这似乎有点违反直觉。

但这些细微元素能为设计增添一丝情调，又不至于太引人注目。实际上，他们仍然可以算作留白的一部分，虽然他们从技术上说确实是一种视觉元素。

毕竟，没有光哪来阴影？

更重要的是，长投影为画面增加了一种反差元素，使得整个视觉体验变得有吸引力。要达到想要的效果，甚至投影都不必那么长。

请看：

图片来源：Kikk.be

柔和的色彩和短投影呈现出一种美妙的视觉元素，并不会抢了页面导航和主要信息的风头。请留意这些阴影如何令画面明亮起来。也使得图像仿佛脱离了页面。投影、扁平化的内容区域、还有柔和色彩这三者的结合，与网站上的动画元素融合得非常好。

说到颜色，应该很容易引出我们下一项扁平化特性。

色彩运用：鲜明色彩与辅助色

色彩是扁平化设计的重要能力之一。

明亮、积极的色调，成就了许多扁平化的设计，用以弥补视觉表现力上的欠缺。扁平化设计中的投影装饰，看起来跃然纸上，为设计增添了鲜活和动感。这与其他动态视觉元素能够很好配合，例如视觉差滚动和CSS动画。

图片来源：Spotify

而且，这些明亮的色彩能作为一种辅助色，用在柔和的背景上。这似乎成为了一种标准的未来趋势。就像这样：

图片来源：Takeit

深色背景上的亮色图片绝对足够给人留下深刻印象。强烈对比的视觉元素，更是与如今的扁平化趋势形成完美的配合。通过简单或夸张的手法来突出事物，其中也包括字体。

简单/夸张的字体

如今的“扁平”字体通常由单一字体组成，或者是两种非常接近的字体。这一点造就了易读、易辨识且默默无闻的字体。这正是关键所在。

你不希望字体分散注意力。如果字母带有过多的风格与个性，就会阻碍用户的阅读流程。

图片来源：Cienne

最好的做法是“隐形的设计”，换句话说，就是做出让用户不会注意到的设计。因为每当他们留意设计，就会丧失沉浸式的体验。

当然，你也可以走另一个极端。在处理极简式界面时，你得调整所加入的元素。在空白背景上使用大的粗体字，可以为界面的文案营造出独特的语境。如果界面没有其他任何视觉元素，你就必须呈现出某种美感，而且能用的也只有字体和颜色。

图片来源：Truthlabs

幽灵按钮

要做到漫不经心——甚至如空气般透明——那我们就得花点功夫来谈谈幽灵按钮。

你能一眼就找出下图中的幽灵按钮吗？它们并不显眼，这正是关键。透明按钮给用户一种暗示，导航项未必会从下层的视觉重点上抢夺注意力。

结论

总而言之，扁平化设计的元素与其演化的成果，全在于吸引注意力。

无论是使用浮夸的背景或焦点图等视觉元素，还是极力克制，只用文字或导航提示——背后思想都是相同的。使用少量元素，按照极简方式排布，在页面上创造出对比，正确引导用户的注意力。

扁平化是潮流中的先行者。究其原因，是因为设计师能够通过各种方式，在简单的界面内体现多层次的复杂性。

我预料扁平化设计会作为一种趋势，求新求变，持续演进。同时保持最核心的简洁，使它引领潮流。

要了解更多扁平化设计与其他优秀的网页设计趋势，请看这本180页的2015与2016年的网页设计趋势。

原文链接：http://studio.uxpin.com/blog/how-to-prevent-flat-designs-from-falling-flat/

作者信息： Zack Rutherford Zack Rutherford is a UX Design Writer at UXPin. His work has been published in UX Mag, awwwards, and Speckyboy.

扁平设计之争

hi@victor42.work (Victor42) — Sat, 31 Aug 2013 23:23:33 +0000

[国外设计第8期]

不可否认，扁平设计目前是设计界的宠儿

它无处不在。不仅仅是扁平设计，现在也包括类扁平设计

关于这种风格的有效性与用途的争论如火如荼。这种极度时髦的设计风格在激发着每个人的观念。让我们回退一步，看看辩题双方和扁平设计的利弊

支持者：扁平设计很时髦

扁平设计非常时髦，但是它会持续多久？

如果你是追赶潮流的设计师，却没尝试过扁平设计，现在正是时候搭上扁平设计这班车。采用这种风格的项目（并且用得恰到好处），在各种博客中随处可见，包括我们这个，有助于提升你的设计

而且，跟随潮流而设计，乐趣无穷

反对者：它只是种潮流

时髦的另一面，是你永远不知道它能流行多久

我们已经能看到，趋势正在从纯扁平设计向类扁平设计或长影扁平设计转变

如果你频繁改版你的网站或APP，时尚的设计也许适合你。如果你要一个网站经久不衰，请考虑不那么“潮”的东西

支持者：简单的移动界面

简洁的移动端设计，是扁平设计应用中的绝佳例子

一些令人印象深刻的扁平界面设计被应用在功能简单的APP上。巨大的按钮在移动设备上容易点击，不需要再放大来寻找链接

反对者：可用性值得商榷

当涉及到某些复杂的用户体验时，扁平设计就会变得单调

并非所有用户都喜欢这种界面风格，他们有时会不知道该点击哪里

Norman Nielsen Group的一项分析指出，扁平设计风格会干扰可用性，因为用户有时不知道什么是可点击的。而且，扁平设计的项目总倾向于更低的“信息密度”来保持简洁

支持者：明亮的用色可以烘托氛围

也许只是我个人感觉，但扁平设计看起来让人愉快。所有这些明亮鲜艳的颜色都令人爱不释手，创造了一种积极、迷人的氛围

Flat UI Colors，一个展示和帮助设计师使用扁平配色的网站，是个非常好的氛围提升工具

看看这些色调，它们都温暖而友好。即使深色也是基于暖色设计

由于扁平设计通常包含很多颜色，引发更多积极的联想。谁会说彩虹是阴郁的呢？

反对者：配色困难

在一个项目中你用的颜色越多，就越难将它们恰当地搭配起来

创造一个协调的配色方案本身就是一个挑战，如果你再加4、5种甚至更多颜色，它会变得更加棘手。成功运用扁平配色的设计师，都倾向于坚持统一饱和度和亮度，来设计一致的外观，使得颜色的选择有迹可循

支持者：聚焦精美的字体

扁平设计的一个优势，是漂亮字体的聚焦作用

除去了装饰，字体确实在扁平设计项目中蓬勃发展。从精美装饰性字体，到简洁的非衬线字体，漂亮的字体是优秀的扁平设计的关键组成之一

在我个人看来，投影效果有点糟蹋字体。有趣的字体与大胆的配色之间形成的强烈对比，令人印象深刻、精神振奋

反对者：糟糕的字体变得更明显

正因为扁平设计有助于聚焦优秀的字体，它也能放大糟糕的字体。（看看苹果预发布iOS7时遭受的所有诟病，比如那极细的主字体，现在这个设计决策已经被修正了）

扁平设计冒失起来简直无法饶恕。选用什么都会有某种程度的戏剧性，难以掩盖字体的不完美

如果你对于字体的组合和选择不在行，那么扁平设计可能不是你的最佳选择

支持者：视觉表达简洁鲜明

扁平设计的本质是简洁和鲜明。这是使它美观的重要特征之一

这种风格使用很多高对比特征，包括颜色、字体，和大胆的总体设计，保持段落简洁易读。按钮和其他UI元素通常设计成基本的几何图形，尽管边角也会用到圆形

反对者：它会看起来太简陋

取决于使用者的不同，扁平设计也被部分人评价为“过于简陋”

用扁平设计传达复杂的视觉信息会很困难

扁平设计的另一项反对声音，是用户界面工具太朴素。拟物化设计的支持者表示，增加一些具象的装饰可以让工具更易用。坦白说，这得看内容

在极度简洁的界面设计中，视觉层级也是一项需要重点考虑的内容。什么是最重要的？你如何通过视觉强调它？

支持者：扁平设计摒弃令人厌烦的装饰

没有什么比一眼就看出设计者对项目充满厌倦更糟的了

这些本末倒置的花哨装饰包含了太多阴影效果、古怪的动画，或者根本就是显得多余的随机效果

正因为扁平设计简洁的本质，这些约束可以促使设计者忠于这种风格的本质完成项目

反对者：有些装饰还是不错的

并非所有装饰都不好

在设计纯扁平项目的时候，它确实极大地限制了能够为你所用的技巧

结论

没有一种设计风格是完美的。为你的每个项目量身定制地设计，才能使得外观和所要传达信息的感觉风格相吻合

设计不仅仅是某样东西看起来如何。它也关乎易用性和功能。优秀的设计总是易用的

原文链接