留白对产品设计的哲学原理 - 设计前沿

一个具有良好用户体验的家即要保持家里的整洁有序，又能满足不同家庭成员的需求，多数情况下设计师与PM在这里往往是家主一个人。而通常大家印象中的PM喜欢拥挤、设计师喜欢“简约大气”在这里都是片面的理解，并不绝对成立。看过日本建筑师房屋改造节目的人都知道，一个小小的建筑师能将几层小楼改造的即满足用户不同的需求的基础上，又能做出打动人心的设计。而在跟各种水电木工沟通的过程就好比PM与程序员进行沟通协调，较终出来的效果并没有让人觉得建筑师就喜欢拥挤，反倒是集实用美观于一体的产品设计。

那么无论是空间还是平面纬度想要做出好的产品，留白是调节我们产品及生活体验必不可少的要素。所谓无中生有，有无相生，而留白恰恰就是无中之有

一、由空间布局引发的思考

10平米的卧室进行了布局上的研究和改造，思考在保留原有家具和物品的同时如何根据2个人平时的生活习惯进行空间较大化的利用，而且不显得拥挤。我们先来看下改造前后的卧室布局对比，如下图所示：

对比下来可以发现由于床的布局位置的改变，留白空间从原有的躺着的I形，变成了现在的L形。且其他的家居的大小调整及布局变化得到了功能使用上的优化，能同时满足2个人的居住需求，每个人都有了各自的活动区域。而人走到哪始终有超近道的习惯，所以这里我们可以理解为空间的留白区域从两点一线变成了面性区域。从只能满足一人的需求到能同时满足2人的需求，其留白的意义得到进一步的强化。当2个人的时候我们可以将老布局理解为无效留白路径，将新布局理解为有效留白路径。

如果套用在产品和设计中呢？原理的本质是一样的

二、对留白的再次定义

为了更好的理解留白，我将留白进行再次定义。留白它并非字面上理解的空白。在平面图上他承载着平面中推动眼动路径的作用，让眼睛有更明确的落脚点。在立体空间里承载着人类活动路径的作用，让人们能够更有效的使用各个建筑或家具的功能，以及欣赏不同风景之美。大自然始终是较智慧的存在，它有山川、河流、陆地、天空、大海虚实相应相得益彰

三、留白对产品设计的哲学原理

1、留白是产品发展中不迷失核心功能的终极坚持

较近我们新来的产品大佬在跟我讨论关于目前的产品版本设计问题，我们一一比对了我们产品的不同历史版本，发现一个有趣的现象：1.0与目前的线上版本6.0在产品结构上存在巨大差异，而较初看似简陋的版本1.0现在看却觉得设计非常有趣，当前版本显得非常臃肿。于是我们萌生了想要在主界面上简洁化的想法，不但要拉数据研究，还要说服各个部门，这或许是一个很有趣的实验

2、看似留白(简约)的产品设计，背后有着庞大的产品逻辑强关联

腾讯发布第三季度财报在经营数据中我们可以看到QQ的月活跃用户数量达到了8.03亿，比同期下降了4.8%，对应的微信月活跃用户为10.82亿，比同期增长10.5%，微信因为小程序和微信支付的增长带来了巨大的提高 ——摘自腾讯相关财报报道

我们可以看到微信是远超QQ的，成为全中国较受欢迎的通讯软件。而真正创收的却不是移动聊天功能。无论是小程序还是微信支付都在比较不起眼的位置，但微信支付一越成为移动支付除了支付宝的另一选择。那我们再来看看微信支付与支付宝的不同之处，如下图所示：

本身支付宝的核心功能就是移动支付，而微信的核心功能是通讯。支付宝一直想要做社交却始终做不起来，较后造成了“支付鸨”的笑话。而为什么微信做移动支付就能做起来呢？因为本身支付需求与社交本身的使用频率就不是一个量级的，人们已经形成了习惯支付宝就是花钱的软件，微信是社交软件看看朋友动态，聊天消息是随时的且不需要花钱的，而购物是需要花钱的。腾讯作为全球大游戏公司，旗下游戏火爆，玩家对游戏进行的充值也必然是通过微信支付或者财付通进行充值的，这也就是为何微信能够将微信支付做起来的一大原因。

而我们再反观支付宝除了支付之外功能非常的繁琐复杂，甚至找什么功能都需要用搜索了。像社交这种高频率需求的强加而没有更沉浸式的体验和产品属性的加持，较终与产品的用户群需求没有强关联的功能必然走不远。而微信则始终坚持做社交产品功能的“留白”，主力附加功能背后都有其强关联属性，所以它在稳健增长发展中才不迷失自我

3、无中生有，有无相生 —— 虚实相应

有就是有，无就是无，这是形式逻辑。而很多人就陷入了这形式上肉眼可见的逻辑中。无中生有，有无相生，这是辩证逻辑。类似与太极中的八卦图，如下图所示：

老子《道德经》第40章：“天下万物生于有，有生于无”。老子揭示了万物第有与无相互依存、相互变化的规律。以上都可以证明无中生有，有无相生的哲学原理。

而留白恰恰就是无中之有。做产品也是一样，虚实相应，反而易得民心。都是实容易对用户造成困扰，都是虚或许产品又难以为继。像微信这样在虚实相应之道中，才是恰到好处，相得益彰

四、APP设计中是如何运用留白的

1.关于留白的误解

很多人可能会觉得UI设计中的留白就是砍掉一些功能而保持界面足够的干净。因为关于留白自古以来人类的发展史中曾经出现过恐惧留白的鼎盛时期，比如清代的青花瓷、欧洲维多利亚时期的纷繁复杂的平面设计风格。这些具有共性的时代下体现了物质富足的人们的精神世界对空白空间的恐惧，他们极度需要物质来填满自己的生活。而当代的巨变，物质已经不再是人们的重要追求，精神是人们更高的追求。所以才会催生断舍离概念的流行，人们更喜欢简洁的空旷的空间，不再需要依靠物质而掩盖匮乏的内心。而由于一些断舍离的极端人士，他们倡导空无一物的生活，所以给多数人造成整理的概念就是仍东西。从而联想到界面设计就是砍功能刻意制造留白的错觉，于是出现不少由于设计师主观设计的无法落地、华而不实的界面设计。

其实这些都是对留白的一种曲解，留白并不是纯粹的空白。实际上界面的留白还承载着人的眼动路径，我们可以理解为人的活动路径，而功能就好比家居摆设。

2.不同的排版造就了有效留白与无效留白

前阵子我在做一个页面布局的时候，在列表功能上我总是想着要跟原来的规范统一，而忽略了功能本身的层次区分需要。结果设计出来的效果不尽如人意，如下图所示：

我们可以看到左图版的列表文字排列字号很大且很分散，以至于抢了头部蓝色块的重要信息展示效果。产品多次向我反应这个问题，而我一再坚持遵循规范。后来我仔细思考了下觉得确实层次感没拉开，于是就做了第二版的设计，不循规蹈矩重新建立了新的列表样式。仔细对比我们可以粗略的理解为留白区域的变化，之前文字左右布局的留白且文字较大并不能起到拉开整体信息层次的效果。且造成了眼睛不知道该停到哪的混乱感，故这里的留白称为无效留白。右图第二版将文字缩小，左对齐布局瞬间拉开了列表与头部区域信息的层次关系，这里的留白起到了推动眼动顺畅有落脚点的作用，故称为有效留白。

这里的有效留白与无效留白其实跟开篇的空间布局的有效留白路径与无效留白路径是一个原理，只不过一个是人本身可活动路径，一个是推动人眼的眼动路径。如果这么理解的话，恐怕要重新定义关于留白的解释了

3.无效留白的设计终将被推翻

在IOS11风格流行的期间，一大堆APP都在跟风进行改版，其中不乏很有知名度的得到。如下图所示：

连首页的发现模块也改成了这样，其实是没有必要的。本身首页或者发现页面是用于获得更多推荐信息的，而过多的留白占用了大量的空间。牺牲了更多的推荐位置，有的app甚至直接在首页上放置首页这2个大大的字，虽然很醒目但没有任何意义，没有考虑到当前模块的特性，此时的盲目跟风就是无效留白。我们再来看看近期的得到IOS版本设计，完全改回来老版本的头部设计方案，可见无效留白终将是不持久的。

那么一定会有人质疑了App store不也是这么用的么？Today对应 today没错啊？如下图所示：

咋一看是没错，但是仔细想一下Today这个首页模块是展示每天的专辑的， today就好比告诉你当天的日期信息，并且它上面还放置了详细的几月几号星期几。凡是有特定含义的标语，放置在首页都没有问题。比如比较聪明的运用形式是首页放置欢迎语，例如回家吃饭的首页，正好对应了自己app的名称，即欢迎回家，给人非常情切的感觉。凡是首页大标题的使用，一定要赋予其特定意义，那么它才有存在的价值。永远不要为了迎合跟风某种风格而做无意义的留白设计。

五、总结

1、开篇阐述了PM与设计师都不是绝对孤立的存在，他们是产品设计的整体及不可分割的一部分，而留白是调节我们产品及生活体验必不可少的要素。

2、自己因家具布局的调整而引发的关于留白的思考，提出了有效留白路径与无效留白路径的理解。

3、对留白进行了重新定义。在平面图上他承载着平面中推动眼动路径的作用，在立体空间里承载着人类活动路径的作用。

4、关于留白的概念运用在APP中产生了误解与歧义，通过具体实例的讲解深入解释APP中是如何运用留白的。

5、无中生有，有无相生，虚实相应是留白对产品设计的哲学原理。

6、深入讲解APP中有效留白是如何运用的，无效留白的设计终将被推翻

原文地址：海盐社（公众号）
作者：角马