实例解析扁平化设计的要点

自从苹果放弃拟物化设计，采用扁平化设计以来，扁平化设计的龙卷风就全面席卷了整个UI设计界，自此之后，无论是网页还是APP的设计，首要考虑的就是采用扁平化的设计。

扁平化的设计似乎成为了有别于拟物化设计的一种全新的设计思维方式，完全颠覆了拟物化的设计风格，开创了一个UI设计的新时代。

扁平化设计风格带给受众的是一种干净、简洁的设计情绪。这样的一种设计风格在扁平化风格出现之前其实已经被大量应用，只是在设计手法上没有扁平化的设计更加极致。

在我看来，扁平化的设计如此的流行是因为它更加适应于移动终端设备的小尺寸屏幕，扁平化的设计风格更加适合在手机、平板电脑等小屏幕上进行操作，但把扁平化的这种优势放大到能够颠覆整个设计思维方式的话，无疑是夸大了它的影响。

扁平化的设计也有它自身的缺陷，如果将其用在稍微复杂一点的界面中，扁平化设计会带来很多困扰，因此无论它应用的再广泛，扁平化也仅仅只是一种风格而已，在大尺寸的屏幕上，例如网页方面的设计，没有必要都采用扁平化的设计。

当然，这篇文章并非要对于扁平化与拟物化的设计孰优孰劣辩个是非，相反，作为一种设计风格，身为UI设计师，扁平化的设计风格如此流行，我们更加应该掌握这种设计风格的特点及表现手法。

1、设计之前的准备

任何项目都一样，第一步是先确保自己选定的样式合理，在开始进行扁平化设计之前，要先保证自己的设计符合目标用户的感觉以及目标平台、设备和应用类型，如果不适合你的项目情况，那紧跟潮流也没有意义。

不管你要采用哪种样式风格，遵循流程都是非常重要的，在马海祥看来，下面的几个建议可以帮助你实现简约效果。

（1）、在设计最简化界面时，我一般会从PC机出现前的时代寻找灵感，那时的设计师和艺术家往往需要做到“多快好省”。接这个机会你可以重新探访一下过去的很多优秀设计，例如：Josef Müller-Brockmann和Wim Crouwel。另外，我还会看向Ellsworth Kelly等极简主义画家，Mies van der Rohe等建筑家和Dieter Rams等工业设计师。

（2）、暂时脱离工作也很有帮助。扁平化和最简化设计的核心就在于细微之处，所以，短暂休息后带着新的眼光重新回到工作中有时反而比一味苦心琢磨要更有效用。

（3）、将不同版本毗邻比较也很有用。在将一条输入线上下5个像素来回倒腾了20分钟之后，我会保留下两个不同版本进行比较，这样孰优孰劣马上见分晓。

（4）、由于物体的相对大小具有着非常关键的意义，因此你需要尽早开始在不同种类的设备上检视设计理念，以便确定其是否合适。

（5）、在工作的同时，经常自问：“我是否真的需要这个?”人总是很容易对自己钟意的东西念念不舍，但我们还必须频繁地找出要砍掉或者简化的内容，抛弃自己费尽心思做出来的东西不容易，但编辑取舍也是必须的。

2、梳理网站信息，剔除非重要的信息

根据网站目的和诉求梳理网站信息，这是无论做哪种风格的网站设计都要做的第一步工作。

信息梳理的工作非常重要，它直接关系到一个网站的目标能否达成，想想最重要的信息由于缺乏整理没有在页面的重要位置和视觉方面体现出重要性，无论设计的再美观，也是无用的。但我们经常所看到的情况却相反，一个网站的首页被重要不重要的信息塞的满满当当，每一个子页面的内容都要在首页上占据一个位置，什么产品展示、新闻资讯、常见问题、专题活动都出现在首页上，这样做的结果就是让次要的信息冲淡了重要信息的比重，信息的主次得不到体现，访问者浏览过网站后似乎什么都看到了，但却没有留下深刻的印象。

例如上面这个案例，是一个典型的扁平化时代之前的设计，但整体的设计风格与扁平化的风格类似，都是简洁、干净的设计风格。其实，如果我们将这个设计中导航条、搜索框等元素中的高光、阴影去除掉，将其中的图标元素更换为非拟物化的图标的话，在版式上再变化一下的话，这个设计马上就可以变为扁平化的设计。

在此，马海祥提醒各位要时刻要记住，设计不是为了漂亮，更不是为了炫技，而是为了便捷信息的沟通。信息的梳理工作在扁平化的设计中显得更加重要，因为扁平化的设计就是要体现简洁、干净的特点，页面上的信息太多，就不太容易做出这样的视觉风格来。

拿上面页面中的信息来举例，Logo和导航的内容不用多说，导航作为网站信息组织结构的体现是非常重要的一个元素。HTC是一个生产和销售手机的企业，那么可想而知，首页上最重要的信息当然是最新产品的展示，其次是最新的专题活动以及特色产品的展示，其他的例如企业新闻、产品支持服务搜索等内容大可不必在首页中出现，因为这些信息相较于前面提到的信息来说，没有那么重要，完全可以在内页中体现即可。

3、简约是金

虽然传统的软件开发商比较喜欢在产品中加入大量功能作为高售价的借口，但是朝着集中化微应用转变的风潮却更倾向于使用简单代替多样化的功能组合，应用越简单，界面也就越简单（具体可查看马海祥博客《如何使简单的设计变得更为简单》的相关介绍）。

4、内容为王

每当有新设备和技术进入市场之时，其功能和推动交互发展的程度总会让我们为之着迷，继界面所带来的迷乱之后，我们一般都会将注意力重新集中到内容上去。不论是文字、音频还是视频，对媒体内容的摄入大概是我们使用设备时的最主要活动，而在这种情况下，我们需要保证界面不会影响我们的摄入过程。

5、技术精通

随着智能手机和平板快速普及各种用户，业界对其控制方式显见性的顾虑日渐消退，尽管一度曾经担心用户会难以看见不显眼的按钮，但现在我们却更愿意探索较为细微的交互内容。

Fitbit的控制面板界面在视觉上表现明亮、大胆而且简单好用

Windows 8和Chrome for Android甚至还支持在没有视觉提示的情况下通过触摸命令点亮屏幕。

6、技术的影响

大部分软件都会受限于所运行的平台，屏幕尺寸和像素密度是硬件方面的限制因素，较小的界面大大限制了设计调色板的范围，也就意味着界面上的每个元素都要具有自己的表现力。

文字规模和字体大小将在很大程度上决定扁平化设计的美感和可用性。

如果你的目标设备无法体现出细微到这种程度的差别，那算你运气好，随着移动设备的屏幕尺寸和像素密度不断提高，以后更薄更小的设备将能实现更高的清晰度。

7、响应式设计

随着各种尺寸可联网设备的普及，UI受大势所趋而务求更加流畅，而与之相应的，就是响应式设计风潮。尽管响应式设计不需要特别的美学，但也可以说扁平化UI相比其他风格来说能够更易于辅助响应式设计的美观。

最简化设计的另一优势在于能够降低页面重量从而减少加载时间（具体可查看马海祥博客《响应式设计时代该如何进行网站设计》的相关介绍）。

8、网格

网格在界面设计中扮演着非常关键的角色，绝无例外，在你拿着一套受限制的视觉元素，努力想确定其各自顺序并让使用方式更加直观时，网格能够带来很大帮助。

网格所确定的，不仅仅是视觉顺序，你还可以用它来界定内容和功能组，有时候要将一组物体分组不一定非要用到线条或者方框，简单的对其和空间调整往往能帮助用户理解界面的结构。

你也可以尝试使用具有特定重要意义的元素打破网格来吸引用户的注意力。

Live School Rossul Design 开发的iPad应用

尝试使用一下密度比较高的网格，在大幅简化视觉调色板时，你可能会发现你的设计能够支持更为复杂的结构，同时看起来也不会显得凌乱，你也可以试试看仅通过位置调整能够传达出哪些额外的讯息。

9、色彩

颜色毫无疑问是视觉设计中的一个关键组成部分，对于最简化界面来说，其所具有的意义更加关键（具体可查看马海祥博客《基于网站色彩设计对用户体验影响的研究》的相关介绍）。

考虑更为宽泛的调色板，个人来说，我觉得范围比较窄小的调色板通常能创造出比较功能化的界面，想创造出让人眼花缭乱的缤纷色彩非常简单，但通过下面这种方法，你可以大大拓展一下选择范围，而且，考虑到待设计元素的数量很少，扩展调色板还能给你带来很良好的感觉。

TriplAgent 的视觉设计采用了绝妙的配色方案

在设定调色板时，可以在一个比较宽泛的色值范围内对选定的色调进行测试，并确保其在亮色和暗色下表现都合适。

对此，马海祥建议分别试验一下同系配色及鲜明对比，早期对调色板进行试验将保证你在接下来能够掌握微妙和强对比元素所需的全部配色范围。

10、文字

在扁平化内容驱动网站上，文字是主角。

衬线体无疑是个办法，但无衬线字体却能让人感到更为简洁。

你可以找一个粗细和样式种类比较多的字体类型，虽然不一定全用的上，但比较宽泛的选择范围有助于更为鲜明地界定层次结构，你也可能会发现某个粗细度在某个特定环境下效果更佳。

Siteleaf上清爽易读的文字

不要怕使用大小粗细走极端的字体搭配来构建视觉顺序，尝试使用超大超细的标题字体搭配小号中等粗细的正文字体（具体可查看马海祥博客《基于页面易读性的文字编排设计要点》的相关介绍）。

注意字体是否易于辨认阅读。这一点虽然听起来有点无厘头，但你对自己所选定字体的依仗将是很强烈的，所以一定要保证其在任何尺寸小均易于辨认。

11、交互

在扁平化UI中，要表现出哪些元素可交互是个有学问的活，下面是我常用的一些方法。

对比如果布局内容中大部分为白色，那可以给交互元素添加一定其他色彩。如果你的设计以文字为主，可以使用简单的图标表示交互；如果标题比较大而且全部为小写字母，那么链接部分可以做小一点并使用大写字母。

常规的位置安放方法也能起到作用，比方说你的后退箭头使用细V形表示，可以将其放置到左上角，因为用户一般会到这个位置找后退按钮。

随着页面上叠加内容的增加，我们无法将所有可交互元素都做成按钮的样子，界面应尽量直观，但如果交互过程比较复杂或有违常规，则应提供方便的错误恢复方法。

下拉菜单、模拟窗口、弹出式窗口及其他层叠元素对于扁平化设计来说操作起来比较麻烦，你可以采用鲜明的对比、边框或着色区分不同的交互层级（具体可查看马海祥博客《基于交互体验的扁平化设计要点》的相关介绍）。

12、落实设计方案

网站的信息确定之后，我们就可以着手来制定更为详细的设计方案，具体落实版式、色彩方案、字体、创意等内容。

首先需要确定的是版式，也就是网站的布局。在扁平化风格的设计中，由于设计中常使用特别简单的元素，所以排版就变得非常重要，成为了设计中出彩的地方。

扁平化设计中常见的排版方法是用矩形来划分页面中不同的信息区域，例如下面的几个案例所示，可以看到无论是整体页面的划分或者分栏信息的划分，矩形在其中扮演了非常重要的角色。

以扁平化的设计风格来看，上面HTC首页的设计导航部分的创意显得过于复杂，将主要内容固定在一个宽度内的板式看上去也过于小气，所以我们将目前已有的版式更改为通栏的布局方式。放弃目前导航的设计，将导航文字直接放置于通栏的导航条上，banner部分的设计也做同样的处理，banner下方是最新的活动信息，各个活动信息区域用矩形划分开来。

接着需要确定的是色彩方案，在扁平化的设计中，多采用纯度低、亮度高的颜色，高亮色彩的使用让整体的设计风格更加清新，看看下面这些案例的设计：

我们取一下HTC的logo的颜色，发现这个纯度偏低，亮度较高的绿色正符合扁平化的设计风格，所以直接拿来用就可以了。

在这个设计中，我们依然采用前面设计中的配色方案，白色的背景色、logo中的绿色作为主角色，不同层次的灰色作为配角色进行设计。

在设计的质感上，毋庸置疑，我们需要去除掉所有之前设计中拟物化的表现方法。例如高光、阴影、纹理、等等。

这也是扁平化设计的概念最核心的地方：去掉所有冗余的装饰效果，让“信息”本身重新作为核心被凸显出来，字体选择方面，为了契合简洁、干净的设计风格，我们采用非衬线字体，微软雅黑作为正文字体，banner部分的设计可考虑尝试更为纤细的字体，例如方正兰亭超细黑简体。

至此，我们基本可以确定整个页面的感觉，初步做出来的设计应该和下图类似：

接下来我们进一步细化设计方案，banner部分的设计是整个页面设计的重点。它是整个页面中最重要信息展示区域，就像我们在前面提到的，这部分区域应该用来展示最新的产品，所以在banner的创意上我们计划将实实在在的产品展示出来。我们选择了HTC的HTC One M9手机作为banner部分的视觉主元素，将其放置于banner区域，调整一下色相、亮度，然后再键入宣传语，搭配上相应的按钮和链接。

Banner下方的分栏信息部分，我们分别放置了手机配件、HTC如影摄像头、免费更换服务三个信息栏目，为了让分栏信息的排版不过于单调，我们将本来的四栏布局更改为三栏布局，将中间栏目的宽度放大，这样在版式上有所变化，看上去更灵活一些。

分栏信息的设计创意全部来自于HTC现有的网站，这里我们不做另外的创意，分栏信息部分的色彩我们通过调整图片的颜色，保持了以绿色为主色调，辅以灰色搭配的方法，这符合我们本来在页面色彩方案上的想法。

再往下是页脚导航和版权信息，这部分的信息不是页面的重点，只要做到契合整体页面的设计即可。

马海祥博客点评：

在设计领域没有一成不变的规范，在这个互联互通、信息丰裕、功能丰富的数字时代，最简化设计广泛的复兴让人眼前一亮，这自然不会是无所不能的解决方案，但只要经过深思熟虑和恰当的应用，其能够实现既好用，有舒适的数字体验。