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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
新手引导设计,这样改善太棒了!
0.0°
2017-06-15 原创文章 经验/观点 举报 2143 7 3 0

新手引导,又可称为新手帮助。对于新手引导使用最多的就是电子游戏行业,特别是国内的网络游戏行业,作用就是将规则以简单易懂的方式,在较短的时间内传达给娱乐活动的参与个体。主要形式有图片、文字、音效、视频、互动操作。


今天想用5W1H的方法来分析下新手引导页面的设计。5W+1H:是对选定的项目、工序或操作,从原因(何因Why)、对象(何事What)、地点(何地Where)、时间(何时When)、人员(何人Who)、方法(何法How)等六个方面提出问题进行思考,串起来将就是何人在是何时何地因为什么原因做了何事,是怎样做的


发现在分析问题的时候,5W1H它能帮助自己理清头绪。如果不知道从哪里入手就将这些因素罗列出来一个个进行分析。


一般情况下,在APP主功能设计完成之后,我们会花很一些精力去做新手引导,一方面是将APP的功能介绍给用户,另一方面是想教会用户使用APP或者展示出某些功能的入口等。在工作中听到一位资深的开发人员说到一句话深感赞同,就是,最好的APP设计就是不需要新手引导。也许这种说法偏了极端了一点,很少有人能在自己没有多少经验的前提下就做到这样完美,所以合适的新手引导还是有它存在的必要。


不得不承认在现在市面上各种新手引导中,除了极个别的能让自己停下来逗留一会,自己的第一反应不是好好看它,二是马上、快速、厌烦地跳过或者叉掉,更多的是觉得多此一举。而那些极个别的当然也有它的能跳出来的特点,待会一一细讲。


新手引导的常见做法


1.黑色蒙版overlay在app最顶端,highlignt出来视线集中的地方,用白色的字进行标注和解释。

Image title

2.一小卡片的方式进行简单的提示,这个程度上比第一种要亲切,让用户接触到真实的APP的界面更多。

Image title

3.在合适的时候弹出的popup(弹窗)。

Image title

以上三种做法是最常见的新手引导,效果是有的,但咱们在此基础上如果能改善一些,效果会更好~


改善方法:还是从5W1H的原则出发,一个个点进行击破。


1.何人Who。在设计的时候经常听到一句话叫做“从用户出发”。首先我们需要分清楚用户是哪些人,是一类人还是多类人。一类人的话就开始分析这些人有什么特点,能接受什么样的APP设计风格,多类用户的话怎样进行分类。


最常见的多类用户就是个人与团队,VIP与非VIP的身份不同。用户群分开之后,针对性就更强。咱们在这一点需要讨论的是,要有这个分类的步骤,如下图。

Image title

2.何时When。需要的时候才进行引导,不在不恰当的时候给用户添麻烦,也不完全不吭声进行隐藏。


比方说,咱们在用某宝进行购物的时候,选东西和找东西是一个步骤,期间花费的时间可能是几分钟,几小时,甚至是几天,而填写收货地址又是另一个任务,倘若一股脑在APP打开的瞬间全部抛来,用户没有精力看,就算看了也记不住,还会引起反感。可当用户在选完商品之后填写收货地址时,这个时候再进行引导,不仅新手引导起了作用帮助用户完成任务,同时也能让用户感到贴心,增加用户对产品的好感。


同一件事,在不同的时间去做会产生两种完全不同的效果,重点在于,在当时的场景下,用户真正需要的是什么,跟谈恋爱是不是也是一个道理?


3.何地Where。APP的新手引导除了首次打开APP,以及上一条所说在合适的需要的原则下,还有地方可以利用就是空状态。空状态的情况下,也可以给予用户提示去做一些任务,满足用户的需求。如下图。

Image title

4.何因Why。解释清楚为什么要做这一步,这一步可以为用户带来什么样的好处,而不是给企业或者APP本身带来什么样的好。文字进行简洁,控制在一句话之内。如下图。

Image title

5.何事What。即用户所要做的事情,在前面几条都铺垫完全之后,用户就会更满意地进行这个操作了。


6.何法How。除了使用图片加步骤的引导之外,方法可以朝其他方面进行扩展。比方说弄个小型的常驻机器人或者客服窗口,进行问题回答,需要的时候再用;用趣味性的游戏的引导方式,让用户做旅客地图;或者用潮流的酷炫的视频进行引导等等。

Image title

解决问题的方式有很多种,5W1H只是比较常见的其中一种。在工作中,怕的不是问题如何艰巨,怕的是自己没有理清楚思绪,不知道如何下手,像这样用拆分的法则将问题进行拆分,进行一个个地解答,未尝不是一种好的思路。希望有一天,能设计出不需要新手引导的APP~望共勉~


敬请期待下篇更新landing page的设计方法~


其它文章
设计背后的思维能力


作者简介:Sophia的玲珑阁,一枚爱折腾,爱健身的交互设计妹纸。
职场设计技能,更多教程抢先看,请关注作者的微信公众号:Sophia的玲珑阁Image title








更新:2017-06-15

收藏

7人已收藏

Sophia的玲珑阁

从创业公司到大厂,分享实用的互联网设计技巧和职场经验。

  • 142

    作品

  • 389

    粉丝

  • 7

    关注

  • 作为设计师,我是如何一步步找到业务增量的
  • 情绪是魔鬼,但要原谅自己
  • 2020年打工人4条总结出炉
  • 提升屏效可实施性最强的4大方法
相关标签
设计经验UDCUXui

    猜你喜欢

      2017-06-15 原创文章 经验/观点 举报 2143 7 3 0

      新手引导设计,这样改善太棒了!

      0.0°

      你确定要举报新手引导设计,这样改善太棒了!

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年06月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      7
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录