必读科普文！写给设计师和产品经理的用户体验知识（三）

编者按：这个系列的连载已经到第三期了，全文都是有料的干货，可以直接运用到设计工作中，非常适合想系统学习用户体验知识的同学 >>>

前文回顾：

在《写给设计师和产品经理的用户体验知识（一）》中，我们讨论了「用户体验」和「设计」的定义，明确的反对「设计原教旨主义」，以及讨论了两个最底层的设计原则，分别是符合用户使用需求原则和基于用户的心理模型设计原则。

在《写给设计师和产品经理的用户体验知识（二）》中，我们继续讨论了一致性原则和及时有效的反馈和解释原则。

现在，让我们来继续讨论设计原则吧。

原则5：形式追随功能

在互联网行业，很多设计师最讨厌的事情就是别人叫他“美工”。如果你去BAT或者其他稍微大一点儿的互联网公司的招聘网站上翻一翻，你会发现他们很少会招“美工”这样的职位，即便有，大部分也都是类似“客服部”、“行政部”之类不做产品的部门。主流的互联网公司早已达成一致，就是互联网产品的“设计”，远远不是“美”那么简单。即便单说“美”这个维度，也要美得有意义，绝不仅仅是所谓的“有创意”、“有视觉冲击力”这个层面上。

“形式追随功能”这个原则，或许就是“美工”与“设计师”的分水岭之一。这个原则最初由建筑设计师提出，在互联网行业，我将其解释为：对于一个产品来说，形式上的、视觉上的、起装饰作用的东西，应该是为功能和用户场景服务的。

很多人总是习惯性的将“设计”与“艺术”联系在一起，但我认为，能够与“艺术”联系在一起的，大部分是狭义的，针对表现层的设计。而我所理解的大部分设计，是跟艺术完全不同的。简单说，艺术是给人“看”的，给人“感受”的；而设计是给人“用”的，帮助人类解决问题的。所以这两者最初的出发点就是不一样的。形式追随功能这个原则也一直在提醒我，时刻记住两者的区别。

既然是建筑大师提出的观点，那我们就先来看看建筑方面案例吧。首先必须承认的是，有时候在功能之外，需要有点儿“情怀”。所以很多时候一些小的“设计”如果能够让用户身心愉悦，会心一笑，即便它没什么用，也是不错的。

在纽约地铁的某个车站，有一个很长的通道，据说每天会有很多上班族行色匆匆的路过。在这条通道上，每隔一段距离，如果你抬头看，就会有一句话，就像下面这张图：

而这些句子连起来，居然是一首诗：

Overworked.

So Tired.

If Late

Get Fired.

Why Bother?

Why the Pain?

Just Go Home.

Do It Again.

这东西看起来好像没什么“功能”，但是很有趣，可以让人会心一笑。这是好的设计，或者换句话说，能够让用户身心愉悦，也是一种“功能”。

但是有的建筑，过度追求形式，不但对“功能”没什么帮助，还会引起用户反感。2012年，美国有线电视新闻（CNN）旗下的生活旅游网站评选出了全球最丑的十大建筑，中国沈阳的一栋叫做“方圆大厦”的建筑榜上有名。我看到这则新闻的时候，马上去搜索了一下方圆大厦的图片，结果... 仅个人感觉，的确，丑...

后来我还简单搜索过相关资料，试图去了解这样的设计是不是有什么功能上的好处。但是没找到有说服力的资料。如果既没有功能上的好处，又让人觉得丑的话，那这样的“形式创新”就真的是一种失败的设计了。

对于互联网产品来说，也是一样的。下图是国内某银行信用卡app的主界面：

这个手机app内部有很多不同的功能，从账户查询、还款操作，到办卡申请、开卡、分期，再到商城、优惠信息、积分兑换等等。但是该app的主界面上的大部分面积，被一朵我个人认为并不漂亮的“花”占据... 这个形状本身其实并没有特别大的意义，但是却占用了大量的空间，以至于想推活动的时候，经常需要给用户弹下面这样的浮层，不但会阻断用户操作，引起用户反感，而且一次只能推一个活动：

其实，何必追求这样华而不实的形式呢？我们来看另外一家银行的app吧：

上图是招商银行的两个app。招行貌似将用户场景分成了两类，对应的是两个不同的app。

左侧的名叫“招商银行”，以功能为主，是与银行账户强绑定的，提供的功能主要是各种银行服务，例如账户查询、转账、理财等。这个app里面大部分信息的组织形式是严谨、简洁的列表形式，用户可以比较方便的找到所需功能，操作也会比较顺畅（除了一部分内嵌wap形式的功能比较乱，其他还是挺顺畅的）。

而右侧的app叫“掌上生活”，以运营为主，会提供招行体系下包括信用卡、借记卡在内可以享受的各种优惠活动信息。其信息组织形式要活泼、生动得多，会出现大量的图片，会像电商网站一样将数字（包括人民币和积分）放大显示，更加能够吸引用户的关注，更加适合没事儿“逛一逛”的用户场景。

这两个app在信息的表现“形式”上区别还挺大，但都是为各自的功能服务的。我认为是银行里面比较不错的设计。

再看一个生活中的例子。如果你注意一下城市中的各种路牌、指示牌，你就会发现，所有指示牌上面的文字，都是非常简明的黑体或者宋体。

上图：常见的街道上的指示牌，文字大多数是简明的黑体。

上图：香港国际机场的指示牌，或许是繁体字笔画太多，用黑体类的字体会聚成一团，所以在这里中文部分使用了相对简洁的MingLiU体（类似宋体，笔画比较细一些），英文部分则是类似于Tahoma之类的字体，跟中文用黑体类的感觉差不多。

这些都是在日常生活中很自然的设计。因为指示牌的核心功能是用于指示地点或者方位的，所以其最底层的要求，就是让行人（或者机动车驾驶员）能够很容易的（有时候是距离较远的时候）看清楚上面的文字。这是典型的形式追随功能的正面案例。不信，我换一下字体你体会一下：

上图：将指示牌上的文字字体换成更加“飘逸”的舒体，（我知道... 正常的设计师很少会用这个字体... 我就只是举个例子而已，别骂我...）其识别度会降低。是不是觉得，不如原来黑体看得清楚？如果距离再远些，就更加看不清了。（英文部分我就不改了，如果改掉会更加明显）

繁体中文由于笔画多，更惨：

以上案例已经能够很明显的看出，如果抛弃了功能，单纯的去做形式上的“创新”——甚至有时候根本不是创新，而只是“不同”——往往无法做到好的用户体验。

原则6：单一任务，渐次呈现

在伟大的首都北京，有一个被戏称为“世界第九大奇迹”的建筑，这就是传说中的西直门立交桥。这座桥结构狂复杂，并且据说在每天的不同时段通过，即便是去往相同的方向都有可能有不同的走法。很多北京的出租车司机都不敢说自己能走得明白。

西直门立交桥的主要问题我觉得是产品策划的问题，或者往大点儿讲，是产品战略（所谓的城市规划）问题。但是这些都太大了，我只是想用这座桥底下的一个路牌来引出一个小得多的问题。路牌是这样的：

虽然如果您现在去西直门找，已经找不到这个路牌了，因为已经拆了。但这真不是段子，是真实存在的。如果您把路牌这东西看作UI的话，这个UI的确真实的反应了产品的功能，只是，它包含的信息量太大了。它一次性告诉用户，要在5个不同的转弯处选对方向，还不能错过任何一个。这么大的信息量，在司机开车路过的瞬间，很难记得清楚。或者，即便真的记住了，其实图上每一个圈对应的实际道路都是不一样的（虽然图上看起来一样），有的是大圈，有的是小圈，有的是上引桥，有的是进入主路，在实际驾驶过程中很难操作准确。

这就说到了我们将要讨论的这个原则，叫做“单一任务，渐次呈现”。与之前我们讨论过的各种原则相比，这一则更像是一个小tips，是学习过之后马上就可以当工具直接用的。在一个流程中，我们最好是将整个流程拆分成一个一个的步骤，并且在每个步骤里面引导用户只做一件事情。

还是拿路牌来说，如果是一系列复杂的转弯动作，可以考虑将其拆分成几个步骤，在每一个分支处给用户单一的引导。例如，在深圳深南大道东行方向，行驶到“深南南海立交桥”时，会首先看到这样的一个路牌（图片来自：腾讯街景地图）：

这个路牌标注还算清晰吧，假设我想去“滨海大道”，我就知道，这里应该从右侧上引桥。进入右侧车道后，又能够看到第二个路牌，如下：

又有一个路牌，告诉我滨海大道靠右。于是我靠右直行，即可前往滨海大道方向。当然，这个方案也不是没有问题，相反，其实问题挺多的。比如，两个路牌距离比较近，不熟悉路的新手司机有时候反应不过来，来不及变道... 但这已经不是这个原则的讨论范畴了。其实由此我们也应该能够意识到，单一的设计原则往往只能解决或者缓解单一的问题，永远不要指望有一个公式一样的东西存在，只要套进去，就搞定。不可能的。（换句话讲，如果有一天，设计行业的大部分问题都可以通过简单的公式解决，那设计师们也就真的变成“美工”了。）

在互联网和软件行业，这个原则也有比较多的应用，比如最典型的，就是Windows的“安装向导”。如果我没记错的话，“向导”这种形式在Windows系统最初的应用应该是在Windows95上面。微软当年将安装Windows95整个过程切分成一个一个的步骤，将每一步依次呈现给用户，用户在安装过程中，每一步一般只需要做一件事情。例如下面这张截图，是用来设置用户信息的：

“向导”的另一个好处是，因为形成了类似流水线的方式，所以对于非关键步骤，可以给用户提供默认设置。这样，用户如果不想更改设置，只需要使用“上一步”和“下一步”按钮，就可以控制流程前进或者后退。向导的大量应用，让用户在Windows操作系统上安装软件变得特别容易，即便您看不懂路径设置，看不懂功能模块选项，甚至即便软件界面是阿拉伯语，您只要不停点击下一步按钮，就能成功安装了（当然，Mac OS上拖一个图标就搞定的方式更简单）。

在手机平台上，单一任务的设计更加重要，特别是对于比较长的流程来说，因为手机屏幕太小了。比如说著名的Instagram，将发布照片的流程分为3步，分别是：拍摄-调整（滤镜）-添加说明。

这样的步骤有利于用户在每个节点集中精力做好一件事情，以便于优化最终的效果。比如，拍摄环节，用户集中精力构图，决定要将哪些被摄主体收入镜头；调整环节，用户对颜色、风格进行细致化的微调，以适应自己的喜好；添加说明环节，则可以聚精会神的编写文字。每一个环节要进行的操作被严格控制，这也有利于降低用户的认知成本。

原则7：Less is More

不太有经验的产品经理和设计师比较容易犯的一个错误就是，将一大堆功能没有主次，不分先后的塞进一个容器里面。看起来功能强大，四通八达，但实际上信息组织混乱，功能之间逻辑不清晰，用户体验一般不会太好。比如这个：

上图是某银行手机客户端的界面。仔细研究一下，发现它的最底层结构貌似是“手机银行、金融资讯、直销银行、生活商城”这4项（上面第三个界面，是点击“手机银行”后出现的，这里同时违反了一致性原则），而这4个TAB中每一个都堆满了各种入口，并且这些入口里面有的还有非常复杂的三级或者更多级的入口和结构。再仔细研究，发现甚至有一些入口是重复的。

以上这个案例所引出的是一个老生常谈的原则，估计很多朋友都听说过。就是“Less is More”。它最初由建筑大师Ludwig Mies van der Rohe提出，是一种提倡简单，反对过度装饰的设计理念。这个原则历史太悠久，在很多行业中衍生出了很多不同的解释。在互联网行业，类似“简约的设计风格”、“做减法”、“把不必要的内容收起来”、“7加减2原则”等等说法，都或多或少与这个原则有关。

在传统行业中有很多Less is More的成功案例。比如，1979年，索尼发现大部分用户对于播放的需求远远大于录音，所以他们去掉了传统录音机的录音功能，甚至去掉了当时认为必不可少的外置扬声器。然后把剩下的部分做到一个小盒子内，并配以立体声耳机。这就是风靡全球的Walkman随身听。

上图：就是这货，当年可是潮人物件。带这玩意儿上街边走边听，酷毙了

1984年，IBM在鼠标和轨迹球的基础上，精简结构，发明了TrackPoint（小红帽），在移动设备上有效的替代了鼠标的功能，并解决了轨迹球占用空间过大等缺点。现在TrackPoint已经成为了Thinkpad笔记本的标志，并且类似的设计被应用在很多其他品牌的笔记本电脑上。

2007年，苹果精简了手机的按键，甚至砍掉了传统的实体键盘，推出了iPhone。后面的故事你们都知道了。

Less is More的正面案例太多了，很多朋友都已经能够很熟悉的应用，所以，其实今天不想跟大家讨论这些，而是希望能讨论点儿不一样的。我们从另一个角度切入，就是，看看Less is More是如何被理解错，用错的。

Less最初的意思是反对“过度装饰”，并不是一味的追求所谓的“简单”。我所理解的Less，是我们要努力降低用户的认知和操作成本，这才是在互联网行业Less的本质。

还是某银行的app，在你点击一个叫“xx商城”的入口后，或许是在不同的城市，商城提供的商品不同，所以它会先进入一个选择城市的界面，这个界面是这样的：

天啊... 把所有支持的城市列了个表。没有看出任何逻辑顺序！太不负责任了吧？请问，深圳在哪儿？杭州呢？南京呢？这样的设计（或者说，这玩意儿有“设计”吗？）根本不是Less好不好？是懒！在这个案例中，如果要帮助用户更加高效的寻找到他需要的城市，我们要做的不是减法，是加法。

比如说，最简单的，至少排个序吧：

将所有城市按照其首字母A-Z的顺序排列，寻找起来会容易很多。如果同步提供快速定位功能（界面右侧，类似iPhone的通讯录）则会更加高效。

如果你继续思考，可能还会发现其他问题，比如：

• 能否读取用户的地理位置信息，然后在这个列表里面给出一个建议选项。例如，发现我目前在深圳，就把深圳作为默认选项（但是我可以修改）。
• 上面那个方案，好像A-Z的方式解决了问题。但是如果用户不懂英文或者拼音呢？这个还是不work吧？要不要考虑按省份分类？这个app的目标用户中，完全不懂英文的人占多大比例呢？

回到Less上来。很多时候它会成为产品设计者懒惰和推卸责任的借口。我们在日常工作中很容易遇见这样的场景，就是对于一个功能，想着想着，想不明白了，产品经理就说：“哎呀算了，简单点儿做，先只考虑xxx吧。”或者开发就说：“这样太复杂了，为了这一个功能，整个架构都变复杂了。还是别做这个xxx了吧。”这其实并不是Less。事实上，如果你希望用户侧Less，产品逻辑侧和开发侧，很多时候就是要More。“做减法”不是单纯的“少”，也不是简单的“砍需求”，相反，是更加深入的思考每一种可能（对于试错派，也应该是尽量多的试错，遍历尽量多的可能性），最后用最合理的方案，让用户付出最少的认知成本，达到用户的目的（以及你的目的）。

另一方面，很多时候你的产品能否足够Less，是要取决于其他因素的。比如技术因素，比如环境因素。最近在网上流行的一个山东大汉打电话视频，就是有力的证据 >>> http://tv.sohu.com

视频上的山东大叔已经要疯了。开车的时候，需要拨电话，为了保证行车安全使用全语音拨号，这是个非常棒的设计。看起来好像能够让司机很简单的完成需求，够Less吧？但是从视频上（以及我看过的该品牌设备的评测文章）看来，这玩意儿的中文语音识别准确度并不高。视频里面的大叔作为山东人，说山东话至少没什么错吧，但是识别情况一塌糊涂。我看过一些评测指出，普通话的识别率其实也不怎么样。

说白了，这个产品使用的语音识别技术并不成熟。在这样的技术限制情况下，产品虽然很希望做得Less，但实际上效果并不好。这时候不如More一些，用笨一些麻烦一些但是更可靠一些的方式解决问题，总比不work好。比如说，是否有可能考虑这么几个方向：

• 3遍语音识别失败后，引导用户使用拨号按键。
• 担心开车使用拨号按键有危险，能否把这个设备跟多功能方向盘（很多车都有吧）结合？使用方向盘上的按键输入号码。
• 如果担心在方向盘上放一个10键的数字键盘还是有可能会让司机分心发生危险，那可否放一个单项按键？按一下，代表1；按两下，代表2。如果停止按键超过3秒，则系统语音报出刚才输入的数字，然后等待下一位数字的输入。这方案听起来逼格很低吧？但是它足够稳定，能解决问题啊。
• 再往前走一步。我们真的需要通过输入电话号码的方式拨号吗？事实上除了一些类似预定酒店、预定餐厅之类的临时性场景外，大部分情况下我们打电话并不使用拨号盘，而是通讯录。不信请现在回忆一下，你手机通讯录里面有几个人的电话号码是你真正能背下来的？所以输入号码拨号这事儿，本身就有伪需求的嫌疑。那如何设计边开车边拨号的功能，我没多想，留给大家去思考吧。

再稍微深入一点点。在这个原则最后我想斗胆讨论一下“扁平化”和“拟物化”的问题。这是个最近几年在UI设计界非常热门的话题，在各种论坛上就像是“php是最好的语言”一样经常能吵起来的话题。

首先，明确的反对类似下面的观点：

• 拟物化已经过时了！未来是扁平化的世界。
• 你的这个界面/图标/banner/海报怎么还没拍平？太跟不上时代了。
• 扁平化时代来了，设计是不是谁都能做了？你看这图标要画出来多简单！你看这界面，我用Windows画图就能画。

关于扁平化设计，网上有各种各样的观点。我个人比较赞同的是这样：

1. 现在是一个信息爆炸的年代，信息越来越多，越来越杂。所以对于用户来说，应该把注意力集中在有效的信息本身上面，而不是界面上。扁平化设计将界面弱化，将多余装饰Less掉，将信息突出，更加能够适应现在以及未来世界的发展。
2. 在iPhone刚刚推出的那个年代，大部分用户还并不太熟悉这种使用手指操作的设备。拟物化设计因为更加接近于现实生活中的各种物件，所以在当时有利于降低用户的认知门槛，有利于引导用户更加“自然”的使用设备。但现在智能设备已经非常普遍，用户对于“使用手指，通过屏幕来操作设备”这件事情的基本方法已经比较熟悉了，对于现在的大部分用户，给他一个方框，里面写两个字，他就知道这是按钮，能够接受点按操作。所以综合第一点，类似阴影、按下效果等等拟物化元素已经没必要了。

以上逻辑听起来都是对的。但是，拟物化有一个重要的好处，就是它更加接近于真实世界，以至于，它更加容易引导用户获得“沉浸式体验”。就仅仅是基于这一点，拟物化设计不但不会死，而且在相当长的一段时间内都会活得很好。比如说：

• 对于游戏的UI设计，十有八九是拟物化更加合适。理由很简单，因为游戏是一种需要引导用户获得“沉浸式体验”的东西。一个游戏好不好玩，很大程度上取决于它的“画面逼真程度”。
• 对于特定的用户，例如老年人，他们可能并不是很熟悉计算机或者触控类设备的操作。所以如果你要设计一个老人手机，或者给老年人使用的电子设备，那就可以考虑回归拟物化设计。因为这玩意儿更加接近于现实世界，能够降低这些特定用户的认知门槛。

上图：拟物化设计在游戏中依然有着广泛的应用

至于有人认为扁平化时代的到来意味着不再需要专业设计师，这种观点简直懒得讨论了。举个例子，假设你想表达一个“橘子”的形象，最容易的方式，是拍一张橘子的照片，还是只用单色绘制出一个让人觉得像“橘子”的简单图形呢？有没有想过，你画出的“橘子”图形，可能会让人误以为是橙子或者柠檬。事实上，扁平化的设计因为细节变少了，所以对设计师的表现力的要求，不但没有变低，反而是变得更高了。

综上，我认为虽然从逻辑上，扁平化是一种所谓的“趋势”。但是人总是很奇怪的，很多时候我们追求的并不仅仅是高效，很多时候我们并不是“理性”的。有人喜欢简约的宜家风格，就会有人喜欢所谓的欧式复古风格。所以我更加倾向于认为，扁平化和拟物化只是两种不同的设计风格而已，现在看起来好像是扁平化更加“流行”，事实上流行这事儿，你还真说不准以后会怎样。我们不应该仅仅为了“赶时髦”而将什么都拍平了。

Less不能流于表面，「设计」也一样。

《设计原则概览》部分的结束语

到这里为止，设计原则概览部分就告于段落了。其实所谓的设计原则远不止这些，或许就在你阅读这篇文章的时候，在世界的某个角落中，就又有新的原则被优秀的设计师总结出来。所以要想穷尽这些原则，是不可能的，同时也是没有必要的。只是在这部分的最后，请容我再唠叨一遍，一切的原则、方法都只是工具，它们或许在特定的场景下好用，可是当用户、目标、地点、时间等维度发生变化时，原则说不定就失效了。所以永远都不要成为一个死扣工具的「设计原教旨主义者」，产品经理和设计师的价值在于其自身，而不是他们手上的工具。

但是，原则写完了，这个系列的文章还没有完。之后我会继续按照文章后面的提纲与大家讨论「用户体验」，只是之后所讨论的部分，可能更多的并不是像设计原则一样被业界公认的内容，而是会有很多我自己的理解。仅作为一家之言供各位朋友参考。

（待续）

第一部分：先纠结两个概念「用户体验」和「设计」

第二部分：设计原则概览

• 原则1：符合用户使用需求
• 原则2：基于用户的心理模型设计
• 原则3：一致性
• 原则4：及时有效的反馈和解释
• 原则5：形式追随功能
• 原则6：单一任务、渐次呈现
• 可能还有原则7到n

第三部分：设计工具和方法

• 用户场景
• 产品经理的沟通技巧

第四部分：用户体验之外

• 用户体验的局限性
• 用户体验与其他因素的权衡

【超实用的设计师最新好文推荐】

UI设计师有哪些应该会写的文件？
《超实用！UI设计师有哪些应该会写的文件？（附最新书单）》

关系到糊口的那些大事：
《设计师高能注意！有哪些做白工的前兆？》

面试那些讨厌鬼问题的神对策！
《求职红宝书！设计师面试时最讨厌哪些问题？（附高能对策）》

作者：xidea，腾讯产品经理，老友记（人人公司离职员工组织 exrr.org）发起人
微信公众号：uxcafe

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量93万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：