2014-04-23 UI中国 iconfans

对于UI设计师来说，当系统性的设计一款应用时，借鉴现存的模式，能够极大的激发他们的灵感，同时也能给予创作上得参考。但是模式仅仅是一种“惯例或者定式”，往往不是问题最好的解决方案。在这篇文章中，我试图来证明一下，为何一些惯用的设计模式是“低效的”，同时，我还会例举一些用户教学射击的规则，并告诉你如何依据这些规则来愉悦用户。

在我《移动应用UI设计模式》第一版发布后，Intuit邀请我和他们的移动团队进行交流。我谈及了设计模式对于产业的价值所在（不光是软件UI行业，还有建筑行业、时尚界），并讲述了设计模式作为教学工具的价值体验。

Alissa Briggs,Intuit的高级用户体验经理，在我个人的论述之后，分享了自家的Snap Payroll的案例研究，展示了这款应用为何用户教学低效，且让用户感到困惑和混淆。

Snap Payroll的用户教学

后来，我和RetailMeNot的一帮人一起工作，主要是设计iOS和安卓应用中的用户教学。产品团队需要通过设计来确保用户知晓如何交互（收藏、保存优惠券等操作）。

我们思考了一阵子，认为简短的教学（3步左右的用户教学），或者视频演示可能会起作用。但是公司管理者很喜欢用透明覆盖层来进行用户教学，于是我们就测试了一下透明层，结果，不但没有愉悦用户，还让用户感到沮丧。

在用户测试中，一名参与者说：

“我只想快速进入应用，开始探索”

总而言之，用户测试表明，用户会完全忽视或者快速略过我们精心设计的用户教学、视频、教学覆盖层。往好了想，不高明的用户教学会打扰用户，往坏了想，不稳妥的用户教学会导致用户流失。

在RetailMeNot时，设计的多版用户教学界面：透明覆盖层、视频展示、三步演示

为什么设计模式不好用了？

那么，为什么设计模式不好用了？我把注意力转移到了游戏设计中，游戏的用户教学一直是设计的最好的。游戏的用户教学是至关重要的：因为新玩家往往不知道怎么操作，如果不经过教学，上去就操作，往往会Game Over。

在游戏设计中的一些方法、模式，非常能让用户感到愉悦，借鉴这些方法和模式，应用到移动应用设计中，我相信也同样适用。——都是同样的虚拟体验，我们需要在用户不知道该怎么办、怎么进行下一步的时候，合理的指引他们。如果玩家/用户经常在你的游戏/应用中感到困惑、不知所措，那么离用户流失不远了。

传送门为玩家提供了安全的游戏环境，让玩家有时间去弄清楚如何操作

如果各位设计师有兴趣，不妨上Youtube去看看Extra Credits出品的《Tutorials 101》，这个视频虽然主要讲述的是如何设计好游戏的用户教学，但是相信移动UI设计师肯定也会从中获得启发。

我个人看完了之后，总结了以下几条可以应用到移动UI设计中的心得：

用语简约

不要开门见山

令人愉悦

寓教于乐

注意倾听用户

规则1: 用语简约

语言似乎永远无法完全描述想法，虽然语言是最简单的交流工具，但却不是最有效率的。不要告诉用户“这是什么”，而是给用户看，让他自己操作，从而弄明白“这是什么”

移动应用的特点是灵活、交互性好，缺点是屏幕小，承载内容量有限。过度依赖文本进行用户教学，无异是“扬短避长”，用户教学必须是“可交互的”，让用户边操作边学。用户自己操作一遍后，往往就能记住，你告诉他怎么做，他不一定能懂，也不一定能记住。

这里是一些案例：

Boomerang vs. Mailbox

Boomerang 安卓版的用户教学文本信息太多了（于此同时还不够“开门见山”——用户需要先看完烦人的用户教学才能进入应用程序)

Mailbox for iOS，用户教学设计中得文本信息主要用来鼓励用户亲身操作

DigiCal vs. Fantastical

DigiCal 安卓版中，虽然用文本和图示展示了一些交互行为，但是并不可操作。

Fantastical for iOS中，用户教学环节不光是用来“看”的，还是用来操作的。

Catch (2013) vs. Clear

Catch 安卓版，用户教学环节描述了种种功能和交互操作，但是用户只能眼巴巴的看

Clear for iOS以及Clear安卓版中，主界面本身就是一个用户教学界面，提供了简短的文字描述，用户可以通过亲身实践来了解操作。

通过文字敦促用户来“试一试”，而不是通过文字来让用户“理解”，通过文字让用户寻找到学习目标，让用户通过操作来理解操作方法及其效果。

规则2：不要开门见山

“如果你把用户教学放在用户整个操作流程的最前面，那么用户会认知过载、不明所以，且完全体会不到设计者所精心设计的愉悦感“Tutorials 101中如是说

不要在应用启动后立马现实用户教学，而是通过分析，合理设计，在用户最需要的时候，提供简短、易消化的文本信息。

这种方法所提供的用户教学，能够让用户接受，而且用户会有这种心态：“恩，不错，我又学会了一招，下一招什么时候出现？”——用户想看更多的教学

而开门见山式的用户教学，用户的心理绝对是“真TM烦，我还没用，就告诉我怎么用，谁能记得住，怎么还不完？”——用户不想看教学

Dooo vs. Todoist

Dooo for iOS的用户教学放在了整个应用操作流程的最前面，史无前例的11页用户教学令用户根本无法理解(Large preview)

Todoist for iOS, 进入界面后，会有一个小贴士来提示用户添加任务；然后另一个贴士会贴心的出现在选项菜单中。

UserTesting最近的一篇文章“从Facebook Paper中所学到了六点用户体验设计经验”中提到“用户喜欢引导式的浏览体验”，这里的“引导式浏览体验”指的是可交互、微小、不突兀的教学小贴士，当用户第一次使用应用时，很轻松的就可以利用这些小贴士快速上手。

Facebook’s Paper 应用采用了可交互式贴士，不但提供了上下文，而且可以有步骤的引导用户进行操作

不要一开始就展示用户教学，那没用，用户很快就会忘了，把用户教学化整为零，在整体操作流程的细节处出现，在用户需要时指引用户。

规则3：令人愉悦

在Tutorials 101有一条是令人愉悦，但是“愉悦”这两个字用来描述某些应用的体验并不确切，在Tutorials 101这个视频中原话是“游戏中得用户教学应该跟游戏的其他部分一样好玩有趣”，各位仔细琢磨一下这句话，联系到移动应用设计中，是不是应该转换成“应用的用户教学部分应该跟应用的其他部分一样，遵循统一的交互方式以及设计风格”？

尽量让用户教学和应用无缝接合，从而打造一致的用户体验。最好的办法就是让用户通过操作来完成可交互式用户教学，从而提高用户的学习效率。

我们来看看NBC News Vs Flipboard,后者采用了可交互式的用户教学，很高明的通过暗示，来敦促用户自己去尝试/探索操作方式。而NBC的用户教学覆盖层更像是一种干巴巴的说教。而Flipboard的用户教学环节不但视觉风格和应用整体高度一致，而且交互方式也完全一样。

Flipboard的用户教学完全没有指示性的文字，而是通过屏幕底部文字的来回翻转来“勾引”用户，然后用户可能会想“是不是我用手去翻也会有同样的效果？”但是过了很久，用户还是没有反应过来，那么就会直接了当的提示“翻页继续...”

Flipboard的用户教学完全符合以下这两点：有价值（NBC News-废话连篇）、愉悦（NBC News-令人感到无聊）

NBC News vs. Flipboard (2013)

NBC Newsfor iOS的字体本身虽然充满愉悦性，但是整个用户教学界面，就未必会让用户感到“愉悦”了——又是传统的说教，用户必须看完了才能操作。

Flipboard 的用户教学更具愉悦性，或是提示向上翻页，或是提供视觉暗示，引导用户进行翻页操作。

仔细打磨应用的细节处，让用户使用时感受到惊喜和愉悦，于此同时通过暗示或者提示，来敦促用户自己来操作一遍。

规则 4: 寓教于乐

还记得小时候上实验课，当你自己动手做出来一个小效果，那种满心欢喜的感觉吗？这就是我们需要赋予用户的感觉。老师传授知识给学生——应用告诉用户操作方法，老师让学生自己做实验——我们让用户自己试一试。成功之后，自然而然就懂得了概念和方法。

对于用户教学来说，道理一样，其实当用户操作成功后，只需要很简单的加入点声音反馈或者视觉反馈来褒奖用户，用户就能产生满足感。

而且反馈的意义还在于，当用户无意识的完成某项他不会得操作时，如果没有视觉反馈，他不知道这是一种新的操作方式：反馈可以帮助用户铭记所习得的交互方法。（如果采用的是声音反馈，那么一段时间后，最好自动关闭声音反馈，以免给用户带来不便）

这条规则需要跟“不要开门见山”那条配合，要把用户教学化整为零，散步于应用中，每当用户学会了一种操作方式时，就要给用户奖励，这样用户自然会学得越来越快。

Polar 应用中，当新用户完成了数次投标后，Polar会提供一个贴心小贴士

Duolingo 当用户技巧提升时，会有升级和奖励

Any.do 在安卓主屏中放置微件，鼓励用户，让用户有完成任务的满足感。

学习不是一时半会儿的事，一定要有奖励机制，让用户感到满足，不断引导用户继续学习。

规则5:倾听用户

想象一下这样的场景:当你全心身的投入UI设计中好几个月了，不断的构建、提炼、简化。那么你的设计好不好，到底谁说的算呢？不是你，而是用户。Tutorials 101中，用户是这样说的：

“如果你是一名有2年左右工作经验的设计师，很容易就会陷入主观意识中，注意不到客观反馈。”

最简单的办法就是进行用户测试，让不了解这款应用的用户来进行测试。观察用户的操作行为，观察他们在那里卡住、出问题了。然后倾听他们的意见

Snap Payroll的设计师最终通过用户测试，改良设计，从而解决了问题，打造了全新的用户教学。采用了具有上下文联系的贴士。而我们在RetailMeNot也采用了“本质相同形式不同”的方法。

Snap Payroll’的用户教学是具有上下文联系的贴士，而RetailMeNot也是

不要被思维定式迷住了眼，传统的用户教学设计模式已经失效。不要让用户看，而是要让用户去做，这样用户才能学有所得。

原文地址：http://www.smashingmagazine.com/2014/04/22/rethinking-mobile-tutorials-which-patterns-really-work/

翻译：martinRGB