采铜学心录

思维导图火了很多年，很多人亲切地称它为“脑图”。有些人把脑图作为思维利器，遇事必画脑图，乐此不疲。国内也有些人把它充分地商业化，把它吹得神乎其神。脑图真有这么大的作用吗？先来说说脑图的优点：正如其创始人托尼·巴赞所强调的，思维导图可以有力地激发你的联想，通过一个关键词激发出更多的关键词，然后再衍生出更多的……同时丰富的色彩、形象的图示等，也能起到激发思维的作用。

事物之间皆有关联，这使我们无可选择地生活于复杂性之中。关联紧密的事物构成了系统，比如共享一个池塘的鱼、昆虫、水草与微生物，比如学校中的学生、老师和课程体系。还有些系统是抽象层面的，比如一门学科（由该学科内所有的概念、理论、方法等组成），一部长篇小说（包括小说中的各种人物、事件以及人物/事件之间或明或暗的关系）。有些系统易于解读，但更多的系统使人茫然。

因为人脑不是天生的应对“系统”的高手。人脑的运行方式是案例式的、片段式的、场景式的。心理学家发现人能同时加工的视觉对象不超过4个，而且还发现人经常会被一些特异性的局部事件所诱导产生错误的整体认知，比如因为一个男孩长得英俊帅气就不由地推测他人品也非常出众。古人发明的成语——朝三暮四、盲人摸象等——至今还被人频频引用，比如用来比喻企业管理中的糟糕现象。有趣的是，有些领域正是利用了人类不谙系统的弱点来发展的，例如魔术。魔术师通常会施展各种技巧把人的注意力牵引到某个局部上，比如手帕、杯子，而在这个局部之外则往往暗藏玄机。

但是，更多的时候人们承受着无法破解系统之痛。比如失败的计算机程序往往是由于程序员没有进行充分的系统、全面的思考；很多城市市民经常抱怨的道路“开拉链”的情况（同一条路修完一遍又修一遍）则暴露了城市建设缺乏系统性的问题；而大城市的交通拥堵则是最典型的系统设计困境；更严重的是，科技领域中的很多创新产品，由于缺乏正确的系统层次的分析，无可挽回地陷入市场失败的境地。那么，面对这些问题，我们就束手无策了吗？

并非如此。大多数的系统问题是可以（在一定的层次上）加以解决的，只不过我们还得做出一小步努力。这步努力，就是用“元认知”来修正原本不够好的思维习惯。所谓元认知，就是对认知本身的认知，是对思考本身的思考，简单地说，就是一种深层的自我反思。而现状是，大多数人习惯于零散的、孤立的、随性的“非系统”思维方式，却又缺乏必要的反思。所以发现和提炼“系统”的思维方式就显得异常重要，这些方法及其背后的思想，我把它们写出来，于是就有了从今天开始的《系统思维之道》系列。

Pinterest很红。根据comScore的数据，2012年1月Pinterest的独立访客数达到1170万，是除google+外最快达到千万用户的网站，稳居美国社交网站第七把交椅（前六位是Facebook、twitter、Linkedin、myspace、google+、tumblr），而国内也是山寨者众多。

Pinterest为什么会红？原因是多方面的，比如对用户来说极低的参与成本、更灵活的订阅机制减少了信息噪声、Repin操作形成病毒性的扩散机制等，但是更受人瞩目的就是其独特的“瀑布流”图片布局。这种布局诟病者不少，但是我却很喜欢，因为虽然这个创意来自于网站创始人在生活中的灵光一现，但是却恰好符合人的视觉心理学规律，下面就分析一番：

这里首先要从人眼感知文本内容和图片内容的差异说起。人阅读文字是一种串行模式，必须一个词一个词按确定的顺序线性地读下来；而人观赏图片是并行模式，他可以在众多图片中快速地扫视，然后选择其中自己感兴趣的部分，这种方式比线性模式找到感兴趣内容的效率要高得多。

所以很多典型的产品界面模式遵从了这种差异，比如：

1 搜索引擎的搜索结果页，若是网页搜索结果都是线性排列，若是图片搜索结果都是矩阵排列（google和bing的图片搜索结果页甚至去掉了所有的文本信息，只有在鼠标悬停在某张图片才会出现文本，这种设计正是凸显图片并行浏览的优势）；

2 SNS类产品、微博的feed页面都是线性排列。不过这里有个问题，如果是纯文本feed（如知乎），线性排列是最佳模式，而图文内容皆有的feed（如微博和SNS），你会发现浏览图片的效率比较低，因为图片内容不适合线性排。

那么传统的图片展现是以矩阵模式为主，搞一个交错型的瀑布流模式是怎么回事呢？ 这里首先要了解一下人眼的扫视路径的影响因素是什么。这方面的认识取自认知心理学中有关“视觉搜索（visual search）”领域的大量研究。目前心理学家的共识时，影响视觉搜索效率的因素主要是两个：一个是人既有的经验和习惯，是一种自上而下的影响；另一个是画面本身的视觉显著性，是一种自下而上的影响。对于前者，我们都知道人一般是从上往下、从左往右看，所以一个矩阵式的多图片页面，其扫视路径差不多受这种习惯影响而有些僵化。对于后者，画面本身的视觉显著性（动态、颜色及其整体美感等）构成了一个“显著性地图（saliency map）”，用户的注意力首先会被画面中视觉上最显著的部分所牵引。所以自下而上的因素（图片本身的因素）容易使用户可以更高效地选择到优质的视觉内容，而矩形模式下的扫视习惯会干扰自下而上的因素发挥作用。

举个例子来说，在搜索引擎的图片搜索结果页面中，如果有一张好图位于页面的右下角位置，你可能会先在页面左上部徘徊几下才能逐渐找到这种图片；而在瀑布流布局中，你则能更快地找到这张图片。 所以说，线性模式是文本内容最好的布局方式；瀑布流模式则是图片内容（迄今为止）最好的布局方式。

Pinterest更妙的一点是，用户可以按自己的偏好选择图片视觉搜索的方式：虽然网页默认有5列图片，但当你把网页缩小时，页面中每张图片缩小，同时列数增加（最多可增加到10列），每页同时呈现的图片数量就会增加，这对一些用户来说就可以增加搜索的效率。

正由于瀑布流模式是一种十分高效的图片浏览界面，所以吸引了很多用户将它作为收集和欣赏图片的工具，也正是这点，成为了Pinterest快速流行的最大动力。

 

“用户体验设计”、“以用户为中心的设计”等在前些年颇为流行，但是近两年似乎“产品经理”、“产品设计”这些词又是大热。有些业内大拿更喜欢称自己为“产品设计师”而非“体验设计师”。可是难道“产品设计”不应该以“用户体验”为出发点进行设计吗？难道“产品设计”与“用户体验设计”不是一回事吗？

 

仔细想想，还真不是一回事。当然不可否认两者有比较大的交叠，产品设计包含了用户体验设计，用户体验设计也涉及产品设计。但两者背后的根本思路是很不同的：

 

所谓用户体验设计，本质上是使产品符合用户的心理模型和行为习惯，满足用户的需求与期望，以实现良好的用户体验。

所谓产品设计，尤其是互联网产品的设计，本质是设计一套能影响、控制甚至操纵用户的机制，可以潜移默化地改变用户的心理与行为（这里说的“控制”、“操纵”均是中性含义）。

 

所以，从产品与用户关系的角度来看，产品设计是一种进攻型设计，用户体验设计是一种防守型设计。而一个出色的产品，它必然是攻守兼备的。

 

 

讲到进攻型，不得不提产品上线后的营销、推广和运营。这些活动都是试图影响用户的心理与行为，不过与产品设计不同的是，前者是设计各种事件，后者是更稳定的机制设计，于是我画了下面这张图：

 

 

 

上面这张图中清楚地展现了体验设计、产品设计和产品运营之间的关系，其中产品设计是“进攻型（改变用户）”的机制设计，对于产品的成功与否的影响可能是最大的。从根源上讲，互联网产品的产品设计本质上是一种人与人、人与信息的互动规则设计，心理学是其根基。如果谈创新的话，“产品设计”层面的创新可能是革命性的，但是难度和风险也是最大的。国内产品山寨国外成风，基本上在产品设计这一环的照抄度是最高的，相比之下，在用户体验设计和运营等方面倒是容易出一些“微创新”。所以总的来说，产品设计占据了制高点，最终，我画了下面这种图：

 

哈佛大学医学院的认知心理学家Jeremy Wolfe以其“导引搜索理论（guided search theory）”而在世界心理学界享有盛誉。这一理论解释了人的视觉搜索行为的内在心理机制。Wolfe认为，当人在开始观察某一个视觉场景时，大脑中会快速地生成一副激活地图（activation map）。在这个激活地图中，具有最高显著性的场景元素会首先牵引观察者的注意资源，使其注意力集中到该元素上。当对该元素的知觉加工完成后，观察者又会根据重新刷新的显著性地图把注意力转移到显著性居于其次的元素上，以此类推。

 

那么是什么因素决定了某个场景元素的显著性呢？Wolfe认为，自下而上（bottom up）的因素和自上而下(top down)的因素共同影响着显著性。自下而上的因素是指视觉刺激本身的物理性质，比如颜色的明度、饱和度，色块的大小，是否闪烁，是否有人脸，是否与周围刺激有明显的对比等；而自上而下的因素是指观察者预先的任务设定（搜索目标）、视觉偏好等。两种因素是如何共同作用的呢？举一个生活中的例子，如果你在火车站接人，且对方事先已经告诉你他穿着绿色的外套，那么当你在观察出站的人群时，就会对绿色的刺激特别地敏感，这就是自上而下的因素的作用；不过，如果这时突然有一个穿着红色外套的人挥舞着手臂，那么你可能也会被其所吸引，这就是自下而上的因素的作用了。

 

从这一理论出发来审视网页的视觉设计会有些什么启发呢？我认为可以用来调整我们对用户观察页面的视觉流的预期。众所周知，人们浏览网页一般有从上至下、从左至右的习惯，还有另一种类似的说法即古登堡法则，就是观察者的视线是从画面的左上角移至右下角。这也是为什么大多数网站把至关重要的导航条放在页面上方或者左侧的原因。但是，这种视觉习惯并不是绝对的。整个页面中不同成分的显著性对比足以改变这种惯常的视线流动。比如下面这个例子：

在上面的页面中，我用红圈圈出的人脸是整个页面中显著性最高的部分，因为心理学的大量研究已经证实我们对人脸（甚至包括卡通人脸）的敏感性是最强的；其次是右侧的两个高饱和度的红色色块（“日志”和“论坛”）。但是按常理来说，右侧的这两个板块的内容的重要性应该远低于位于页面上方的网站Logo、导航条、搜索框以及页面左侧的类目导航。因而可以说，整个页面的视觉显著性分布并没有与基于信息架构的内容布局相匹配。从用户的角度讲，视觉习惯促使他先从页面的左上方开始浏览，而页面的显著性布局又引导他先注意页面的右侧，这使得用户无法获得一个明确的如何扫视页面的计划或者预期，使用户产生迷惑。

 

因此，一个好的页面设计应该考虑整个页面的显著性布局，使得页面各个板块的显著性层次与网站信息架构的内在逻辑相匹配，同时也与用户的视觉习惯相兼容（即并不一定要完全一致，但是至少不要严重地冲突）。一个精彩的例子就是淘宝网首页的搜索框：

 在上图中，我们看到了一个“夸张”的凸显视觉显著性的设计，这个搜索框不仅非常地宽，而且使用了双边框和内阴影设计（要知道google和百度的搜索框都没有采用双边框和内阴影）来增加视觉显著性，而且还用了一个特别宽的搜索按钮（宽和高的比例很大，在搜索按钮中十分少见）。为什么淘宝网要如此凸显搜索框呢？我相信，在这个设计的背后，肯定有海量的流量数据，证明搜索框在淘宝网用户浏览行为中举足轻重的地位。对于这样一个如“芝麻开门”一般的入口，再怎么强调都不过分。

 

除了凸显显著性的设计之外，通过降低某些板块的显著性来获得页面整体的和谐也是很必要的。下面也是一个经典的例子，同样来自淘宝网：

这个图取自淘宝商城的首页，这里面的点睛之笔是将左侧的品牌全部变灰，使画面的焦点都集中在中间，从“1F”开始将页面往下滚出现的“2F”“3F”等也采用了相同的处理，引导用户在浏览时形成有规律的视觉流动。试想一下，如果没有进行变灰处理，那么这些纷繁炫目的品牌Logo们将构成一个多么“嘈杂”的视觉画面，此时页面的整体视觉效果就会变得混乱不堪。正是应用了这种“降显”的设计，所以在目前的淘宝商城首页中，虽然产品品类丰富，但是页面的布局和层次却非常地清晰、一目了然。

 

从以上的例子可以看出，在网页的视觉设计中从整体出发进行有针对性地“增显”和“降显”设计非常必要。但是，这一层面的设计很容易被疏忽。我认为，其中一个原因出自互联网产品的设计流程上。一般来说，页面的整体布局在设计早期通过黑白的线框图来展现，黑白线框图虽然有利于设计师更加理性地调控页面内容在“空间”上的布局，但是却将对显著性布局的思考排除在外。而页面各版块的视觉设计则往往是在产品设计的最后阶段分解到不同的视觉设计师的手上，因此对于页面的显著性布局缺乏一个通盘考虑的环节。我认为，页面整体的显著性布局的设计应该整合到线框图阶段，也就是说线框图除了要给出页面各版块内容的空间布局外，还应给出各部分的显著性等级（可以通过1~5级打分）的建议，至于显著性的具体实现方式还是可以放在后期的设计阶段中。

 

最后我们来“欣赏”一个显著性整体布局缺失的例子，下图摘自前程无忧的首页：

在这张图中，我们看到对于招聘网站同样至关重要的站内搜索框，虽然位于页面的上方中部这一醒目的位置，但是却处在各种动态视觉元素的包围之中。图中用红圈圈出的部分都是动态元素。页面两侧的企业广告先不说了，收钱的地方，没有办法。其他的动态项目包括：“网通用户（与‘网页速度慢？’交替呈现）”、“新手上路（左侧莫名其妙的机器人在走路，右侧有一个逆时针旋转的箭头）、“校园招聘（与‘实习岗位’交替出现）”以及信息滚动条。更神奇的是，“石家庄”和“南昌”两个城市是闪烁的，为啥呢？在这个页面中，不同的动态元素的背后可能体现了不同产品组的利益诉求，每个组都想自己的产品在首页上加大嗓门，吸引尽可能多的用户。可是结果呢？用户变得不知所措：他们不知道从何处下“眼”，不知道从什么地方开始，又从什么地方结束；他们不知道对于他们最有价值的信息在页面的哪个位置；他们想集中注意力搜索，却被永不停歇的闪动搞得心烦意乱。

 

最后的最后我想特别提一下“信息滚动栏”这种东西。滚动栏的优点是能在有限的空间里（一行或两行）呈现比较多的实时信息，但是由于其动态的特点，必然会对用户的注意力产生比较大的牵引。除非滚动条的信息对于大多数用户来说确实非常关键，不然的话就没有必要采用这种信息呈现的方式。阿里巴巴中国站的首页曾经在一段时间里采用了信息滚动条，不过现在已经弃用了，其中的一大原因可能就是设计人员意识到这种以牵引用户大量注意来换取少量的信息呈现空间的做法是得不偿失的。