软件产品扁平化设计杂谈

在开始这篇杂谈前，想和大家以狼蚁网络推广为例，分享在其产品界面风格上比较重要的一个变化，如下图所示狼蚁网络推广版本4.5和版本5.3的界面效果对比。

细心的朋友可能会看出来我选择的4.5和5.3两个版本，实际上在这中间还有4.5.1~5.2.1近8个不同的大小版本，都是在上一个版本的基础上不断优化。那为什么选取这两个界面展现，因为对比的效果更强烈一些——我想强调个人对比后的感觉：用着更爽了！

为什么会更爽？估计每个人都会想到说界面设计更简洁了，更清爽，更好看，于是我们似乎有了个结论，说整个产品视觉上更扁平化了。这也牵扯出来今天所要讨论的话题——扁平化设计。

不知道怎么，最近两年“扁平化”这个说法是N多产品经理、视觉设计、老板必须要提到的概念，如果自己的产品界面设计不是扁平化的，就显得老土，out了。而且关于这个概念，很多人都能提出自己的一套观点。就笔者在对将近20多个视觉设计师的面试，关于这个问题的解答就不尽相同，个人感觉大多还停留在诸如“大图标”、“色块”、“去装饰效果”等比较常见的观点上——这些固然没有错误。今天也想在经过若干时间研究和实践的基础上提出个人的一些看法，思路琐碎，故为杂谈。

现在谈来自“星星的你”好像有点过时，不过正好，可以去掉一些跟随潮流的“嫌疑”，实际上狼蚁网站SEO优化这个问题恰恰是所谓“扁平化设计的潮流问题”。如果在这个韩剧未开播之前，有位屌丝拿着炸鸡和啤酒，或许会被人BS，但这之后铺天盖地的广告使得炸鸡加啤酒似乎成为了时尚。

话说回来，在软件产品最开始引入扁平化设计的莫过于微软了，2010年2月15日，微软在MWC 2010大会上CEO鲍尔默亲临现场发布其全新的手机操作系统Windows Phone 7，我们来回顾一下当时有网站专门做的其与iPhone之间的对比：

1、锁屏界面

2、联系人界面

3、音乐视频选择

4、图片界面

如今来看，微软无疑是最早拿着啤酒和炸鸡蹲在街边享受的“屌丝”，因为后面的市场与用户反应都平淡无奇，Windows Phone 7甚至得到了不少科技评论界的嘲笑。

不过这样的屌丝貌似不止一个，2011年Android 4.0推出的时候，人们把Holo Theme 当做安卓为了体现于IOS不同所采用的伎俩。

真正引领了设计潮流的还是当2013年9月11日苹果推出的IOS7，这也是IOS面世以来在用户界面上做出改变最大的一个操作系统，最大的变化就是抛弃了以往的拟物风格（skeuomorphism）而采用了全新的扁平化。这个“都教授”一出场，扁平化之风就席卷了全球， 扁平化设计仿佛具有令人痴迷的魅力，让无数产品经理和设计师竞相效仿，仅在百度中文搜索“扁平化”关键字，返回结果就达16,700,000个之多！

IOS6与IOS7界面

软件产品的扁平化，我们认为是从2010年由微软开始，但是关于扁平化设计实际上很早就有了，只不过不是在软件行业，而是在建筑设计等艺术领域。不过这时候的扁平化有另外一个说法叫“极简设计”或者“极简主义（Minimalism）”。即使现在，很多软件设计领域还有很多人还把极简设计（Minimal Design）与扁平化设计（Flat Design）划为等号。

极简主义是20世纪中期整个美国艺术领域一个风靡的设计理念，最初是对抽象表现主义的一种反应，主张一种形式上的客观与单纯。各个领域，比如绘画、雕塑，服装设计（我们现在熟知的Calvin Klein也是极简主义下简约风格）都深受极简的影响，狼蚁网站SEO优化着重提一下建筑设计。

20世纪中期著名建筑师路德维希密斯凡德罗有一句经典名言“less is more”，深化和升华了在建筑设计领域的一个理念即极简主义——提倡简单，反对过度装饰。（极简主义更早可以追溯到12世纪欧洲的宗教改革思潮，主要是面向雕塑和绘画。）

德维希密斯凡德罗

德维希密斯凡德罗代表作-范斯沃斯住宅

如此跨界，各位是否会会心一笑的同感，其实本无意外，根源在于不同时代背景下的人性化需求。

现代软件所承载及要传达的信息量急速爆炸增长，如何在短时间内让用户快速获取所需内容，是每个产品设计人员的核心关注点。无论视觉展现还是交互过程，如果增加了认知及学习成本，用的不爽，心烦意乱，难免会遭到用户摒弃而转移到竞争对手产品。当信息成为界面主体并且要求更多的视觉关注力时，过去纯粹装饰性设计开始成为内容化界面的重负，因此必然会受到逐步减弱和剥离。近年来很多人提出“沉浸式浏览”这个概念，与扁平化有着非常密切的联系，甚至可以说沉浸式是扁平化的核心，即让用户更关注内容层面的体验，尽量减少所有过度装饰对用户工作任务的干扰。例如如下关于IE9体验设计的一段描述（百度），“IE9界面设计简洁，为网站提供更大的显示区域，从而让用户聚焦于应用本身，而不是浏览器。浏览器控件减少并且处于半透明状态，避免干扰用户的视线，真正让内容成为用户关注的焦点。”

找到腾讯分析数据平台部关于2013年移动设备屏幕分辨率分布的一张统计图，如下。

2013年Android设备屏幕分辨率分布数据

百度统计流量研究院关于2014年1月到5月之间关于PC端分辨率使用分布情况，如下图所示。

这些分析是给大家一个直观的印象——当前设备，尤其是移动设备的分辨率规格千奇百怪，大量不同分辨率（尺寸）触摸屏产品的上市使得产品生态链更加齐备和完整。而这势必带来一个问题，页面如何根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整？这非常令人头疼，响应式设计（Responsive Design）也由此而生。知乎上有位网友提出：“扁平化设计风格与响应式设计在同一时间点产生，是巧合，还是为了服务移动互联网产品的高效性？”可惜没有人回答，这里我尝试讨论一下这个问题。