网页设计之深度解析扁平化设计

     广州网站建设生活中处处可见扁平化设计作品，比如苹果手机，采用棱角分明的线条，加上苹果的部分应用设计界面，单色鲜明的对比，非常漂亮。不过一旦你深入去了解它的设计原理，你将会明白，扁平化设计不仅仅只是“看上去很美”。

　　扁平化设计是什么?

　　扁平化设计是极简主义的直系亲属，不过它更复杂和多样化一些。扁平设计既兼顾了极简主义的原则又可以应对更多的复杂性;通过去掉三维效果，这些设计将锐度和清晰度融为一体。本质上讲，扁平化设计有两个目的：

　　· 直面屏幕的限制，利用这些参数而不是掩饰它们。

　　· 将新的简洁性作为流线设计的出发点，使网站更快更实用。

　　但扁平化设计并不意味着任何涉及维度的元素都是不合适的。

　　扁平化设计回应了拟物化设计存在的问题

　　每个行为都有一个回应。在电子设计世界里，扁平设计部分作用就是回应拟物化设计。但扁平化设计不仅仅是一种艺术处理方式;它针对的是拟物设计带来的功能问题。

　　拟物设计是什么?

　　也许你对该词汇很陌生，拟物化是一种实践，它将现实实物的样子整合到设计中：将曾经的功能变成了装饰。当遇到新的电子概念，工具和应用时，该设计能引起用户的熟悉感。这种原理随处可见;塑料椅子复制了木质椅子的外形就是现实世界的一个好例子。

　　在电子世界，拟物主义与苹果的产品息息相关，这些产品提供电子世界拟物设计的绝佳例子。

　　拟物设计的问题

　　拟物设计背后的原理有很多内容，但在电子设计领域使用这些原理带来了很多的问题。比如，苹果控制面板中的模拟时钟比电子时钟更难读，点击计算器的按键要比用键盘输入花费更多的时间。坚持使用拟物设计产生了不少的问题：

　　· 由于一直使用与电子形式无关的设计标准，拟物化设计限制了创造力和功能性。

　　· 将拟物化元素与少维的元素相融合时，拟物元素看起来有些不一致，而且这些模仿并没多少逻辑。比如，苹果的找朋友应用就有一个看起来像缝合皮革的背景。但该元素与现实世界没有任何关联。

　　· 拟物化元素以无功能的装饰占用了宝贵的屏幕空间和载入时间

　　· 当与其他无拟物效果的元素组合时，拟物元素看起来有问题，这样就限制了整体设计和其他的元素的效果。

　　扁平化设计带来的解决方案

　　扁平化设计直面数字体验真正的限制，去掉了拟物设计强加的约束。正常情况下，屏幕上的任何物体看起来都不会有3D效果，所以为什么我们不去拥抱去掉花哨点缀后的美(更注重一些实用性的功能)。

　　扁平设计是拟物设计和简约设计的和谐统一

　　以下两点概括了扁平设计能够成为持久，全面设计策略的原因：

　　· 与之前模仿物理体验的设计不同，扁平设计专为屏幕体验而生。

　　· 这种天赋使它能在很多方面提升用户体验

　　扁平设计取得了简约设计和拟物设计的精华，并将这些元素融合为一体。类似与拟物设计，扁平设计看起来既友好又亲切。扁平设计通过展现清晰动人的界面来实现界面的友好性，而不是伪装或者扭曲界面来模仿熟悉的元素。类似于简约主义，扁平设计脱去了华丽的虚拟元素，只展现必要的功能，但它没有简约主义那样严格。

　　扁平设计是用户体验最完美的形式

　　扁平设计不仅统一了简约设计和拟物主义的设计目的，它有自己独特的可用性思想。通过脱去冗余的形式，它适用于快速加载的网站，简洁的代码和高适用性。它在每一类应用上都能展现自己的美;不论是桌面还是手机屏幕，扁平设计保持一如既往的清晰和适应。

　　扁平设计的高适应性

　　查看如上例子中的设计，我们就能看出这些应用是如何简单，漂亮地相互结合。微软选择与之前苹果主导的设计彻底划清界限，它决定使用更好的界面设计;在以上两个设计块中都采用了明亮的色彩块，整体的排版和图片看起来优雅大方。

　　扁平化设计是一种不使用任何额外效果的计方案，她不包括任何3D效果。这里没有很深的阴影、斜角、立体效果，没有渐变或者其它方法创建的凸出或者凹陷效果。图标和 UI 元素都是很鲜亮的，没有边缘效果和阴影。

　　扁平化设计就是这样 - 一切都是平的。

　　扁平化设计并不是完全没有效果的，她只是没有那些多余的「人造的」阴影和维度。越来越多的设计「几乎都是扁平的了」，他们的整体样子和观念都只包含很少的效果。

　　实现扁平化设计的一些技巧

　　扁平化的设计并不是让你忘掉所有的装饰效果。

　　关注颜色。扁平化设计经常使用很多鲜艳的色彩。从色块、图形、栏目条到版面，颜色都是一个关键的组成元素。考虑下从你的LOGO 到网站都使用彩色。扁平化的设计方案在只使用黑色和白色的情况下已经能够产生很好的效果，但是如果你使用更多的颜色将会营造出更好的视觉冲击力。

　　注意排版。文字是最基本的 - 他们传达信息，提供导航工具，告诉用户你的网站是做什么的。对文字进行有趣的、不同的排版 - 不要在这里使用 Arial 字体。为你的消息选择合适的字体。记住扁平化的设计方案经常是简洁和简约的，所以好好考虑使用什么样的排版方式。在方案中使用简单的无衬线字体你会得到很多变化和收获。或者，可以使用某种新的艺术字体做为一种设计元素，来给用户制造一些小惊，但是注意字型要简单。

　　关注文字。很多扁平化的设计为保持简单的流程和感觉只会包含很少的文字。所以注意你每一处的文字长度。

　　简单的用户界面和UI元素。点击按钮不需要过度设计和很复杂。只要元素具有确定意义，用途明确，他们就会发挥作用(效果)。这些可以以不同的形式来表现 色彩、轮廓线、区块，或者是使用不同的字体或图形。

　　创建层级。对于任何一个网站创建明显的层级感是很极其重要的。在扁平化设计里，用来吸引点击的技巧 - 表示阴影，渐变，斜角或者其它的效果应该尽可能的少。确信用户可以自己使用导航，并且不用考虑太多就能很轻松的使用你的网站。链接尽可能的清楚，不管是使用不同的颜色还是放在一个方框中，他们都要确保能被点击。

　　扁平化设计的命名

　　扁平化设计(flat design)是一个很有争议的名字。

　　争论的问题是这个名字并不能真实的表达出你所看到的。不同的公司和组织开始尝试使用其它的名字 - minimal design，honest design，甚至微软已经开始使用 authentically digital 这样的名字。

　　扁平化设计的灵感

　　现在在开发者或者设计师社区里有很多关于扁平化设计的讨论。在 Pinterest 和 Dribbble 网站上有不少这方面的资源，这些设计方案应该可以给你不少灵感，你可以考虑下在下个项目中使用他们。(注：Pinterest 网站自己并没有使用扁平化的设计)

　　结论

　　因为这种「简单」的特质，扁平化的设计方案只需要通过信息或者产品本身就能把自己的想法最好的传达出来。

　　简洁，清晰，简约。短小，精干，朴素。这种设计方案在小屏幕上能够很好的工作，特别是 APP 或者是手机上的设计，但是很多人发现这种设计在大屏幕上的效果也很好。Android和Windows Phone系统都在使用这种扁平化设计方案。

　　扁平化的设计其实是很难设计的，你只能去专注每一个细节。因为没有阴影和其它的效果去遮盖你的缺点。

　　扁平化设计同样能够在多色彩的方案中很好的工作。最常见的就是用很多明亮的颜色来进行设计，或者是在黑、白、灰这样的灰度色系中点缀一些这样的色彩。从另一方面来说，只使用黑色和白色也能实现一些扁平化的设计的。

　　如果完全使用扁平化的设计看起来有些吓人话，可以考虑在设计方案中适当的加入一些小的效果。

　　扁平设计的特点能使网站既实用又好看。它发现熟悉感对于用户体验来说非常重要，但它通过合理的方式创造这种感觉。同时，它能适应于新的发现，趋势和想法。

　　扁平设计使我们更靠近新的电子设计形式，即功能和美观的和谐统一的设计。