恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
关于app的新手引导设计
0.0°
2014-11-11 好文转载 经验/观点 原作者: 豆豆 举报 13698 54 34 1

时间已久,但已然实用,内容略长,耐心看完必有收获

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

     做为一个交互设计师我们设计产品的目标当然是让用户不需要帮助就可以完成所有操作。但是,如果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的新手注册不像常规的新手注册只是填写一长串的表单而已,而是一步一步的引导用户将自己的信息丰富起来。

更新:2014-11-11

收藏

54人已收藏

s路游

设计思维不是设计师思维

  • 11

    作品

  • 630

    粉丝

  • 26

    关注

  • I have an idea — 用洗车服务为车企塑造品牌
  • 设计师职场生存指南之“向上管理”
  • 用户口碑驱动企业增长 NPS=净推荐值
  • 关于小程序你想知道的一切
相关标签
经验分享

    猜你喜欢

      2014-11-11 好文转载 经验/观点 原作者: 豆豆 举报 13698 54 34 1

      关于app的新手引导设计

      0.0°

      你确定要举报关于app的新手引导设计

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年11月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      34
      54
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录