app 新手引导功能设计

from：http://wx.alipay.com/2011/12/19/app-新手引导设计/

app 新手引导设计

Posted on 2011 年 12 月 19 日 by 霖铃

我最早接触的新手引导设计是来自于游戏，简单如“祖玛”在我第一次玩时也会给我一个关于游戏故事背景的介绍。当我进入游戏后界面上会有闪动的提示告诉我应该如何去操作。游戏发展到网游之后，为了让用户熟悉各种键盘操作，设计者们往往会给出几种新手任务让用户熟悉不同的指法。别具匠心的新手引导能够让玩家没有挫折感的成长为一个老手。

做为一个交互设计师我们设计产品的目标当然是让用户不需要帮助就可以完成所有操作。但是,如果app应用也能像游戏一样，有个开场故事告诉用户这应用是干什么的，有个新手引导的体系更有效的让用户学会如何使用也将是种非常好的体验。事实上，已经有越来越多的app应用开始有自己的新手引导设计。现在就让我们来看看大家都是如何来做的，每种新手引导方式的优缺点以及适用情况又是怎样的。

一、演示Demo

演示demo的方式一般是在用户第一次启动应用时，通过几个场景动画的展现告诉用户如何使用。这种demo动画也可以采用视频短片的形式。

Convertbot(一个单位转化的应用)，在首次启动的时候会询问用户是否想看一个演示demo。如果用户愿意的话，它会以场景动画的方式告诉用户如何进行单位转化的操作（如下图）。这个演示demo同时也可以在support菜单下看到，方便用户日后查看。

 

制作演示demo时需要注意的几点

1、动画节奏一定要掌握好，制作之后要让没有用过的用户看一下动画说明是否能看懂。

2、如果首次启动的时候用户没有看，最好在帮助信息板块提供一个再次观看的入口。

3、demo播放的时间不要太长，一般不要超过30秒。

4、允许用户中途退出观看。

5、动画中需要有辅助的说明信息。

优点：

1、用户在观看演示的时候不需一屏一屏手动切换屏幕。

2、可以更加直观的让用户看到应用中每个关素、按钮之间的交互方式是怎样的。

缺点：

1、一般用来展示一个任务流程，对于流程很多的应用就不太适合了。

2、有可能动画节奏掌握的不好，用户还没有看明白动画就已经往下播放了。

适用于：

1、涉及到与线下的交互的应用通过演示demo就可以很直观的展示线上线下交互（比如支付宝的悦享拍这样线上线下交互的应用）

2、设计中有精巧交互动画的应用，这样的演示会让用户一开始就被你的应用所吸引。

 

二、静态教程 

静态教程和演示demo有点像，都是告诉用户如何去使用应用的，只不过它是需要用户手动去进行每屏的切换的。

你可以像操作说明一样一步步教用户如何使用一个或几个应用的主要任务。如web md 在用户启动的时候通过十几屏的教程像用户介绍应用的各个功能点及操作细节。（当然我认为这个静态教程有点过长了）

你可以向用户展示几个交叉的任务是如何关联的，比如购物分享应用“pose”将拍照、修图添说明、分享给好友、查看好友留言几个功能串联起来给用户讲了个故事。

在静态教程中你还可以为你的应用打广告，比如阅读分享应用“flud”在它的iPhone新手引导的最后一页为自己的iPad应用打了个小广告。

制作静态教程的时候需要注意以下几点：

1、页面不要过多。（最好在10页以下）

2、不要只是截图和简单的文字介绍，请重视设计元素和语言表达不要让用户感觉看的很无趣。

3、让用户可以随时退出这个演示流程，最好可以有路径直接引导用户去登录或注册。如下图：

4、不要妄图向用户介绍应用所有的功能，请找出最能打动他们的功能和变化做介绍。

5、介绍看完后应直接进入登录或应用首界面。

优点：

1、用户可以自主控制每一步的介绍。

2、可以一次性介绍多个功能，也可以表现他们之间的关系。

缺点：

可能一次性向用户展示了过多的功能，减少了用户探索的乐趣。

适用于：

1、很适合进行多个功能介绍，如果你的应用是由很多平分秋色的功能（或相互关联的功能）组成的话，可以选择此种引导方式。

2、新优化点的介绍。当我们优化了一个大版本，有很多的变化和改进的时候，采用这种方式也很不错。

 

三、覆盖在界面之上的操作介绍 

覆盖在界面上的操作介绍，指的是在一个特定的界面上通过半透明的覆盖层的方式向用户介绍界面上1～5个元素的操作或含义。

Pulse new mini介绍页面中各部分如何操作。

在新浪微博添加了分组查看微博的功能之后，界面上的操作变化较多，因此有了如下的新手提示页面。

这种设计应注意：

1、由于单屏幕的空间比较小，所以要介绍的元素点一定不要过多，介绍文字也要尽可能的简短。

2、由于覆盖层看起来像是不可操作的，所以别忘了给用户留个翻过此页的出口。

3、这种说明页面不一定要出现在第一次启动后或应用的第一界面，它也可以出现在应用更深层次界面中。

优点：

1、效率很高，不会让用户感觉需要浪费时间观看。

2、此种方式就像在操作屏幕上添加的几个注释，跳过覆盖层之后用户还会对介绍保有印象，去尝试操作的可能性很大。

缺点：

1、那种界面上操作元素太多的界面就不适合用此种方式做介绍了。

2、只能介绍一个界面之内的操作。

适用于：

1、用在操作与原来相比有变化的时候。

2、适用于应用的操作方式比较隐蔽的时候，如下拉，双击等操作。

 

四、演练 

演练是指引导用户一步一步的完成应用中的一个任务。这样的引导可以帮助用户快速的完成任务操作，同时用户也真实的与应用产生了互动，有助于用户更深入的探索应用。这种方式可能会降低你的新用户流失率。

Path的新手注册不像常规的新手注册只是填写一长串的表单而已，而是一步一步的引导用户将自己的信息丰富起来。

Shopkick是一款提供消费折扣的应用，整个应用采取了勋章级别的折扣奖励体系。进入应用后屏幕上的提示信息会引导用户操作并且赢得第一个奖励勋章。Shopkick创新性的把一个复杂的晋级任务拆分成几个奖章任务。用户可以很轻易的收集到一个奖章，会有晋级在望的感觉。

使用演练这种方式的时候需要注意以下几点：

1、由于演练流程需要用户一步一步跟着走，所以演练的流程一定是应用中最重要的或必经的流程。

2、演练的流程一定要简单，最好在3步左右，不然用户会有厌烦和失去控制权的感觉。

3、如果可能的话，尽量让演练变得有趣，如果演练结束之后能够有个小奖励当然是最好的。（就像我们在玩游戏时练习关卡通过后，关卡选择会呈现已完成的状态，我的游戏角色能得到最初的道具等等）

4、在演练结束之后要明确的告知用户下一步该怎么做或者应该如何返回应用的主界面。

优点：

1、实时性的操作引导，让用户几乎不用思考就可以轻松完成操作。

2、通过这次演练用户已经参与到应用的使用，或完成了一个重要的却不用反复操作的功能（如注册、完善个人资料）

缺点：

1、可能会给用户失去控制权的感觉。

2、不适合介绍那种步骤很多的流程。

3、由于只是介绍一个功能如何操作，无法向用户展示应用中几个功能的关系。

适用于：

1、非常适用于用户注册账户和开始第一个发布任务（社交类应用）。

2、适用于有勋章体系（奖励体系）的应用。可以让用户感受到激励，初尝成长的快乐。

 

下面再来介绍两种辅助的新手引导方式，这两种方式可以随时穿插在用户使用的过程中，是灵活轻便的引导方式。

五、小提示（tips） 

tips一般是出现在用户使用过程中，可以是通过触发某操作即展现的形式，也可以是在页面中单独的tip区用户可以选择看或不看此提示。也可以是瞬间闪现的气泡提示，用户点击即消失或者几秒中之后会自动消失。

Evernote在首次启动的时候界面下方会有一个tips页签，向用户提示页面中的一些操作。当然，此提示可以随时收起。

paypal 的bump功能，当用户选择此功能的时候却没有与其他用户进行bump对接时会出现如下的提示。

需要注意的是：

1、tip不能频繁的出现最好只是在用户需要帮助时出现。（不然用户会有“难道我很笨吗？”的不适感）

2、tip不要遮挡和影响用户的当前和下一步操作。

优点：

1、非常的灵活，可以随操作的情况灵活出现。

2、不会中断用户的操作行为，是用户控制的引导方式。

缺点：

1、只是对单个操作的注释，不可能向用户展示整个功能流程。

2、气泡类提示对有气泡洁癖的用户来说会有点干扰，会把用户引导到本不想进行的操作去。

适用于：

1、适用于教用户一些小技巧或者一些辅助功能。

2、适合在某一操作进行不下去的时候给予帮助。

3、适用于提示一些用户不太容易注意的功能。

六、简介，功能说明 

简介是一种常见的对应用各功能做介绍的方式，一般用是简短的几句话来描述展现页的功能，描述信息会在第一次使用功能时出现，并且会自动消失。

比如在instagram中用户首次在几个页签中做切换的时候屏幕的下方都会浮现出简短的页面介绍。

这种页面介绍设计应该注意：

1、在出现的时候不要打断和影响用户的操作。

2、出现的时间请做好计算，一般用户想要读明白单段文字信息需要5秒左右。

3、介绍文字要尽量简短，最好是在2～3行文字。

优点：

1、可以快速的向用户介绍某一页面的作用。用户在试探性的点击页签的时候就能够对应用有个概念性的了解了。

2、不会中断和影响用户的操作。

缺点：

1、文字的介绍不直观，不要指望用户通过简介了解要如何使用。

2、看过介绍后，有可能打击到用户使用功能的积极性。

适用于：

操作较简单，需要做功能缘由说明的界面。

 

新手引导设计首先要选择适合自己应用的方式。比如大热的twitter的第三方客户端tweetbot对自己复杂的手势操作采取了在启动画面中演示介绍（方式二）中的一页中做介绍，用户是较难记住的。如果采用覆盖页面（方式三）的方式进行介绍是不是会更好？

前面介绍的各种新手引导方式我们可以只选一种适合自己应用的方式。当然也可以选择2、3种在适合的场景中配合使用。（如下图）

Quick fotobook

最后要说的是新手引导应该是让用户第一次使用时感到更舒适的引导，而不是为糟糕设计的补救措施。

参考阅读：Top 6 Help Design Patterns for iPhone Apps