在做扁平化设计之前，先要做好拟物化

「扁平化设计」的使用正逐渐成为网页和UI设计近期的大趋势，同时也是时下的一个热门话题，各种探讨和学习研究纷至沓来。这篇文章将要和大家分享的是华为（上海）终端交互设计主管 朱斌老师所演讲的《扁平与拟物之争：手机界面越来越好看，是因为拟物化》。

究竟是扁平化好？还是拟物化好？

今天我要和大家分享的主题是手机界面的设计，大家都知道我们经历了两个时代，一个是拟物化的时代，一个是现在的扁平化时代，那么站在设计的角度，究竟是拟物好，还是扁平好？很多做产品和做设计的都想我给出一个两元的答案，究竟是好，还是不好。但问题远远没那么简单。

大家可能有做过图标、扁平化设计的，也有做过一些拟物尝试的，包括一些招贴、海报，那么扁平是什么？拟物是什么？它们带来各自的特性是什么？我们先来看一个小游戏。游戏的内容很简单，类似我画你猜的形式，用尽可能短的时间，记住所有你在图片上看到的信息。大概10秒钟一个图标。

1.滴滴打车

作为设计师，我们的眼光都是比较毒辣的，所以从左边来看，我们能看出一个图标的特性。首先这是一辆车，并且是咧着嘴在笑的一种情绪，再仔细看还有taxi的字样，所以这是一辆出租车，给人感觉比较友好、开心的状态。作为设计师，我们肯定还会观察到它的颜色，所以在右边看到的是我们能够记录下来的颜色。其实就是几个主色调，橙色、黄色和蓝色。

第二个图标，我们也用10秒的记忆来记住它。其实5秒就够了。这是滴滴打车和快滴合并后的一个新Logo，每天我都要使用很多次。图标设计很简单，而且记忆难度也很低，让普通用户一看，就能联想到大写的D。那么从设计师的角度，我们能看出它有一个orange的颜色，橙色。

我们把滴滴的图标和这个图标放在一起，看能传达出什么信息。从图标看出，在早期，滴滴处于一种拓展市场的阶段，给用户传达的是一种非常友好、易用、以出租车为主的模式，但是在和快滴合并后，已经形成了一种大型的叫车服务，包含专车和拼车服务体系，所以形成了一个商业化的标志，比较简洁，是一种扁平化的Logo。

我们先不去评价哪一个好，哪一个不好。因为100个读者的眼中有100个哈姆雷特。我们主要需要关注的是它背后传递的内容，以及设计师和商家希望传递给最终用户的内容。

2.INSTAGRAM

我们来看下一个图标。这个图标，做设计的一定知道，INSTAGRAM。它是一台照相机，从直观的、感性的、细节的角度来看，我们能看到它有一个很大的镜头，皮质的材质，还有INSTA字样。这是在这个图标上非常明显的信息和内容。同时在色彩上，从设计的角度可以看到它的色彩也很丰富，有彩虹色，橙色和一些高光的颜色，凸显在它的镜头和玻璃材质上。是我非常喜欢的图标，他们也用了5年没有变。

下一个图标就是INSTAGRAM的新Logo。这次我去硅谷，正好遇到这个设计上的公案，大家都在热烈地讨论INSTAGRAM这次换图标究竟代表了什么样的意义，是一个划时代的信息？还是设计师们脑子坏了？这个3秒钟就可以记住的图标，其实就传递了两个信息，一个是camera，一个是colorful。这也是我们在和美国同行交流时提到的。

其实这个上面出现了东西方文化认知上的差异，在我认识的东方设计师们更喜欢左边的图标，比较符合东方人的审美，因为它有细节和情感在里面。但在西方的同行却十分赞同INSTAGRAM这次换图标的行为，他们认为这次INSTAGRAM终于跟上了时代，从图片分享的网站前进了一步，成为了一个传递、分享、营造社区氛围的APP应用。虽然我不是完全认同，但是却能明显体会到东西方文化的碰撞。这里我们也不说哪一个图标更优秀，因为这是没有答案的。

通过这四个小测试，我们能够看到左边拟物化的图标和右边扁平化的图标分别传递给了用户不同的信息和情感。所以拟物化和扁平化究竟是处在一个不可调和的对立状态，还是分别在UX设计中承担了各自的角色，有各自的任务和意义呢？

论扁平化和拟物化的不同意义

其实说到意义，扁平化就是要给用户最关键的信息，而且第一眼就能看到。这是扁平化设计最大的优势和特点。拟物化设计则除了核心信息，还附加了许多情感化的元素。

像滴滴图标的微笑，INSTAGRAM的皮质、很好的镜头，这些都给人一种开心和很高档的感觉。这些其实就是我们讲扁平化和拟物化的前提，我们不应该简单地理解扁平化，就是把阴影、色彩去掉，然后融合成了一个非常简单的图形来传递一些信息。这不是扁平化。扁平化主要是我要传递给别人什么样的信息，用户接收到的是什么信息。而拟物化是我要传递什么样的情感，用户接触到的是什么样的情感。然后再去讨论扁平化和拟物化才有意义。

扁平化设计的优势及案例分析

我是做UX设计的，这10年从拟物化到扁平化，作为一个UX设计师，我是非常喜欢扁平化设计的，因为给了用户非常关键的引导、传递信息的作用。

扁平化设计的好处：

1.简单易用。只给你想要的信息，弱化掉了其他信息。

2.界面清晰干净。不影响在手机上的使用效率。

3.是理性的产物。通过理性的思维方式和逻辑，把次要的信息进行了有效的屏蔽。

结合了这三点，我们能看出扁平化设计的功能是执行、完成任务的一个路径和工具。

扁平化是现在十分流行的趋势，不管是做UX设计、产品设计还是其他，扁平化设计都需要我们好好学习研究。但我们看市面上很多扁平化的设计做得并不好。我今天其实是要黑那些做的不好的扁平化设计。世界上最大的互联网公司谷歌，集合了世界上最聪明的头脑，最强的软件团队，结果做出的扁平化设计是这样。

这个原生的操作系统，在国内很少见到，因为我们看到的都是国内的厂商灌装的OS，已经非常地符合了中国人的口味。但是在西方，安卓原生的操作系统，还是有很大的市场，我真的认为这个扁平化设计做的还不够。

还有微软，从windows7开始做的扁平化设计界面，我从windows7开始，就坚定地成为了mac用户。这两个都是扁平化设计被厂商、设计团队用坏了的案例。

下面我们要讨论为什么他们做的扁平化不是我们想要的？要怎么做才能让用户觉得更好看呢？我们看最新的穿戴式设备，像APPLE WATCH，ANDROID WEAR这样的设计方案，结果出来的扁平化设计一点也没有make sense。市场上的反馈也一样，即使再加上色彩，最多也只能做成这样。

看起来和我们20年前买的电子表没什么区别。这是时代进步了还是倒退了？真的不好说。那我们来看一些其他例子。我们的团队做了一些什么尝试。你们看了有什么感觉？

拟物化设计的优势及案例分析

和前面的WATCH对比，会有什么样的比较？这个是华为WATCH和施华洛世奇合作的水晶手表，售价很高，但是在欧美和中国高端市场供不应求。我们对表盘采取的是纯粹的拟物设计。当然在施华洛斯奇定制版上是合适的，因为水晶本身就承载了一些美学因素。

那看一下我们的通用版本，我们在华为WATCH上没有做扁平化的设计，全是采用拟物化的表盘设计，同样在市场上的反馈非常好。

还有这是我们为华为设计的一部分的表盘，毫无例外，所有的都有许多拟物化的，拟真的元素在里面。为什么我们要这样做，是不是带来了商业价值的提升？答案是肯定的。至少在华为WATCH上是这样。所以这背后的道理和逻辑是什么呢？

其实拟物化设计带给用户的感觉是：

1.真实。这是一块真正的手表。而不是扁平化设计给人感觉不像是手表。

2.非常精细的细节。

3.带给人一种情绪和情感。

在我的团队，不强调教条化的扁平和拟物，我们需要在做设计的时候，考虑它的扁平和拟物特性的融合，或者在某个特定的场景之下，我们要怎样去做扁平和拟物的设计。我们现在的设计方法是：在做扁平设计之前，尽可能地用拟物的方法去尝试、去设计、去实现，在做了足够多的拟物化设计方案之后，再看哪些可以精简，哪些可以扁平，哪些场景需要拟物或扁平。在这个基础之上，才能有机地把拟物和扁平结合起来。

譬如说在手表上，我们有两个设计方案，一个是真正的数字，理念是为了让用户在最短的时间内获得最准确的时间。但其实在用户调研的数据中显示，许多华为或APPLE WATCH的用户在展示表盘时，更多是想和周边的人分享这个智能手表有很多的可能性。随着每一次点亮屏幕，都有一个不同的表盘呈现。这个需求反而超过了对确切时间的要求。因为人是一个有时间观念的动物，基本上不会对时间的认知有很大的偏差，这就是场景决定了设计。通过这个场景分析，我们知道在设计上不用做太多的扁平设计，反而是做一些让用户觉得有噱头，能够拿出去分享的设计。所以最后能得到很好的反馈。

做扁平化设计之前，先做好拟物化

所以在我们团队有一个很重要的训练，就是怎样将扁平和拟物相结合。其实方法也很简单。

1.讲究设计的造型。在扁平化的时代，我们已经不用太care造型，哪怕是一个CAMERA或者手机，只要几根线条，几个几何形，几个棱角，做成一定的弧度就能完成这个造型。其实就算这是在扁平化的时代也是不对的。我们首先要了解它的造型，它的主要形体，然后才能把这个形体抽象出来，成为一个独特的特征。

2.对色彩的把握。这在扁平化设计要比拟物化设计更难，因为扁平化设计的色彩元素太少，就是几个颜色的搭配。有一个好的色彩感觉，对扁平化设计是非常有帮助的。我们现在回想一下，windows的操作系统，它就吃亏在色彩上。

3.材质。回想INSTAGRAM的第一个图标，有皮质、玻璃镜头，它的材质的反馈能非常好地提升自己的档次和品质。

那么我们什么时候该体现材质，什么时候要放弃它呢？可以参考刚才分享给大家的华为WATCH的设计，我们对材质的要求可以说是苛刻的。非常苛刻地要求材质的还原度，但后面我们会看到别的华为手表的设计。我们对材质又是完全放弃，完全扁平的设计。要做到收放自如的材质设计首先要掌握材质的设计方案。只有先掌握好拟物设计，才能更好地在扁平化设计上发挥。

做扁平化设计之前，要做好拟物化。做好拟物化设计的设计师再转过来做扁平化设计，要比一直在做扁平化设计的要设计的好看。这就是为什么我说，手机界面或者APP的设计好看是因为拟物化的原因。其实扁平是需要借助拟物化的特征和特性的来弥补它欠缺的情感上和信息传递上的需求。我们看做得比较好的扁平化设计，苹果手机里面的图标。都是通过拟物来做的扁平化设计。

比如：记事本。完全是用拟物的方式，但同时却又非常的扁平。再看苹果的钱包，现在有新的版本了。但是元素还是一样的，设计的理念和逻辑也没有变。依然是拟物卡槽。卡槽的拟物化设计拍扁了放在了拟物化设计，然后形成了妇孺皆知的扁平化设计。那音乐和图库的图标也是一样的。音乐用了世界公认的音乐符号，但是背景没有用单一的颜色，依然保留了渐变色和颜色变化的特性。从图库的图标上可以看出现在的图库标示是从花朵的变形转变过来的。这都是在拟物上做的扁平设计，也是苹果的高明之处。所以苹果一直处在设计领先、体验领先、销量领先、和利润最高的level是有它的道理的。

什么场景用扁平化或拟物化？

拟物化的设计要在适合的场景去做，譬如手表的表盘。很多人会问，那你怎么去区分什么样的场景用扁平或拟物呢？我们可以从使用的场景去反推。如果更多的是分享和吸引其他用户的关注，那么更推荐用拟物；如果是为了达到某个目标，目的，线性的操作，那么更推荐UX扁平化的设计。用最短的路径，最简单的方法去达到用户的目的。

人都有虚荣心，也都是爱美的，为了让更多人感受到我们的存在。所以在做视觉分享为主的界面，我要求我们的团队在拟物化设计上多加一些元素，但如果是一些既定的操作，譬如打电话发短信，那我们会更注重一个扁平化的流程。让用户在最短的时间去完成一个任务。所以再次强调，扁平化的设计要基于拟物来设计。

最后一个例子，在纯粹的扁平化设计，我们的拟物难道只局限在设计手法上吗？肯定不是。因为拟物有很多状态，比如华为的杂志解锁，在MATE7得到了巨大的成功，现在已经成为国内OS的标配。所有的厂商都有这么一个杂志解锁。其实你看杂志解锁的设计非常扁平，除了一张杂志图片，就是边上的一些小设计。但是其实我们是把一本杂志搬到了我们的解锁界面上。难道这不是一个拟物吗？把一个真实的物件搬到了使用场景中来，这也是一种拟物。

所以在扁平化时代要做拟物的地方非常多，我们希望越来越多的拟物化设计能够在扁平化的时代里凸现出来，然后得到大家的认可，帮助公司获得商业成功。