浅谈扁平化设计

扁平化设计风格带给受众的是一种干净、简洁的设计情绪。这种设计风格现在已经得到了大量的应用。那么什么是扁平化设计呢？扁平化设计是指放弃渐变、阴影、高光等拟真视觉效果，从而更加简单直接的将信息展示出来。

一、扁平化设计的五大特点
1、拒绝特效
扁平化设计概念最核心的地方就是放弃一切装饰效果，诸如阴影、透视、纹理、渐变等等能做出 3D 效果的元素一概不用。所有的元素的边界都干净俐落，没有任何羽化、渐变或者阴影。这一设计趋势极力避免任何拟物化设计的元素，这导致这一设计风格在其它平台有时候显得突兀，前景图片、按钮、文本和导航栏与背景图片格格不入，各成一派。

　　因为这种设计有着鲜明的视觉效果，它所使用的元素之间有清晰的层次和布局，这使得用户能直观的了解每个元素的作用以及交互方式。如今从网页到手机应用无不在使用扁平化的设计风格，尤其在手机上，因为屏幕的限制，使得这一风格在用户体验上更有优势，更少的按钮和选项使得界面干净整齐，使用起来格外简单。
　　

2、仅使用简单的元素

　扁平化设计通常采用许多简单的用户界面元素，诸如按钮或者图标之类。设计师们通常坚持使用简单的外形（矩形或者圆形），并且尽量突出外形，这些元素一律为直角（极少的一些为圆角）。这些用户界面元素方便用户点击，这能极大的减少用户学习新交互方式的成本，因为用户凭经验就能大概知道每个按钮的作用。

　　此外，扁平化除了简单的形状之外，还包括大胆的配色。但是需要注意的是，扁平化设计不是说简单的搞些形状和颜色搭配起来就行，它和其他设计风格一样，是由许多的概念与方法组成的。
　　

3、注重排版

　由于扁平化设计的使用特别简单的元素，排版就成了很重要的一环，排版好坏直接影响视觉效果，甚至可能间接影响用户体验。

　　字体是排版中很重要的一部分，和其他元素相辅相成。想想看，一款花体字在扁平化的界面里得有多突兀。下图是一些扁平化网站使用无衬线字体的例子。无衬线字体家族庞大分之众多，其中有些字体会在特殊的情景下会有意想不到的效果。但注意，过犹不及，不要使用那些极为生僻的字体，因为保不齐它就把你带进坑里了。
　　

4、关注色彩

扁平化设计中，配色貌似是最重要的一环，扁平化设计通常采用比其他风格更明亮、炫丽的颜色。同时，扁平化设计中的配色还意味着更多的色调。比如，其他设计最多只包含两三种主要颜色，但是扁平化设计中会平均使用六到八种。

　　而且扁平化设计中，往往倾向于使用单色调，尤其是纯色，并且不做任何淡化或柔化处理（最受欢迎的颜色是纯色和二次色）。另外还有一些颜色也挺受欢迎，如复古色（浅橙、紫色、绿色、蓝色等）。
　　

5、极简主义

设计师要尽量简化自己的设计方案，避免不必要的元素在设计中出现。简单的颜色和字体就足够了，如果你还想添加点什么，尽量选择简单的图案。扁平化设计尤其对一些做零售的网站帮助巨大，它能很有效的把商品组织起来，以简单但合理方式排列。

二、扁平化设计方法
1、元素
按钮

当使用边框，梯度和下阴影来创建一个按钮，就是使得这些元素在背景与内容中很显眼。这使按钮很好辨认为一个可以点击的元素。

当创建一个扁平的按钮，你就不能应用这些细节，所以我们的焦点应该放在布局的组织和颜色的差异上。当然，你只要你能保持按钮的扁平外观，你也可以使用斜边和阴影，但是你会想使这些控件变得尽可能的简洁。

表格

在扁平设计里，表格是一个关键的元素。文本区域，输入栏和下拉栏都不能按照它们默认的做法插入阴影。如果你想完全地控制这些元素，你可以使用一个支持主题的插件，比如uniformjs并应用你想要的主题样式，甚至可以自己创建一些主题。

字体

字体是扁平化设计里非常重要的元素。由于界面更加简洁，你可以使用字体帮你创建你期望的风格和基调。你可以对扁平化设计的框架只使用定制的并且特定的字体来设置基调。由于背景简单，字体就会突出并且本身就设置了风格。

色彩

设计界面的基础之一是定义调色板。扁平化界面设计所采用的色彩的模式与其他调色板相比倾向于更加醒目和更加明亮。扁平化UI色彩在思想上就是用这样的理念开发的，而且是下载今天扁平化设计里所用的某些最佳（和最流行）的色彩的好去处。

2、步骤：梳理重要信息，设计整体方案，确认选色、创意及具体内容等

网站信息梳理工作是非常重要，一个网站的首页如果被各式各样繁杂的信息塞的满满当当，被就可能次要的信息冲淡了重要信息的比重，信息的主次得不到体现，访问者在浏览过网站很难对主要信息留下深刻的印象。
而扁平化的设计就是要体现简洁、干净的特点，以便更好地突出重点。
网站的信息确定之后，我们就可以着手来制定更为详细的设计方案。首先需要确定的是版式，也就是网站的布局。
在扁平化风格的设计中，由于设计中常使用特别简单的元素，所以排版和选色就变得非常重要。认真设计排版和选色，就可以使得整个设计更加出彩。