header_v1.7.40

从用户体验出发-做好新手引导

7天前发布

原创文章 / 多领域 / 观点
miulixiaran 原创,如需商业用途或转载请与miulixiaran联系,谢谢配合。

介绍新手引导设计的分类及案例

产品中的新手引导,可以让用户在短时间快速了解产品的特色以及使用方式等,轻松上手体验产品功能,完成自己的目的。

本文主要从四个模块来阐述如何做好app的新手引导:

一、新手引导简介;

二、新手引导的分类与案例;

三、短视频类竞品新手引导亮点分析


一、新手引导的作用及引导内容

新手引导有哪些作用呢?

新手引导是带领用户更快速更愉悦的达到目标的过程,可以让用户在短时间内快速了解产品的特色以及产品的使用方式,轻松上手去体验产品的功能,完成自己的目标


哪些内容需要引导呢?

1、一般情况下,产品的新手引导最需要对产品特色进行相关引导,让用户清晰的了解该产品和同类产品相比最突出的优势,有一个良好的第一印象。

2、绝大部分产品做新手引导,是为了提示用户如何操作,降低用户的学习成本,帮助用户快速上手,但并不是所有的功能都需要引导,只有部分复杂功能和特殊交互需要对用户新型引导。

3、产品上线新功能,往往会给用户一些提示,引导用户去体验新功能,不然在众多功能中,很难去发现更新了哪些新内容


新手引导一般在何时出现?

1、首次打开产品时:大部分新手引导会出现在用户首次打开产品时,让用户对产品功能有个初步了解

2、结合实际场景,在需要用到的时候出现:在不干扰到用户正常操作的情况下,根据用户行为判断可能遇到的问题,及时给予提示,因为很多时候用户在没有感知到这个功能和自己当前目标有关联之前是不会自己主动去看新手引导,所以把握新手引导出现的时机非常重要

3、用户主动点击寻求帮助:有些产品为了用户体验以及保留用户自行探索的好奇心,并不会强制设置新手引导,但用户在需要引导的时候可以主动点击帮助icon,把选择权交到用户手中。


二、新手引导的具体分类及实际案例

当前新手引导的展示形式主要分为两种,一种是前置引导,一种是过程中引导

前置引导类似于引导页,在用户开始使用应用前直接告知用户更新的功能、玩法等,过程中引导是指用户在实际使用时或者进入某一功能入口时出现的引导,这种引导需要用户的触发时机,而且由于出现在操作过程中,对操作本身具有阻碍的副作用,所以只会出现一次而已。


1、前置引导-启动引导页

案例一:启动引导页面视觉鲜明,说明简约,对刚刚熟悉新应用的用户来说能够快速记住核心功能,并在使用中去探索。

滑稽有趣的引导交互动效,体验之初拥有趣味感


案例二:情感化互动,细节暖化体验用户

在引导页最后一页,You’re ready to go 让人感觉有些惊喜,原来并不是app的app都是那么冷冰冰的交互使用


案例三:游戏化互动,创建与众不同的启动引导页

将产品的服务流程转变成形象生动的送快递游戏,让用户在体验的时候一目了然产品的核心功能,最后“open the door”更是巧妙的将引导与产品体验趣味化的自然联系起来


2、前置引导-动画/视频引导

大片app


马卡龙玩图


Stop motion


3、过程中引导-蒙层引导

蒙层引导,顾名思义,就是在产品的整个界面上放用黑色半透明的图层进行遮罩,对界面进行圈注,旁边配以手势、文字、符号、插画等。

这种引导方式可以让用户聚焦了解被圈住的功能点或手势说明等,不被页面中其他的元素所干扰,同时也能够增加用户对产品的好感度。

蒙层引导分为单页蒙层和分布引导,单页蒙层的适用场景非常多,比如在展示新功能、说明页面中功能位置的变动、讲解操作步骤、体现特定的手势交互等等;分步引导引导一步一步由浅到深的引导用户进行操作,常用于界面相对复杂或完整的交互流程比较长的工具类产品,让用户以最短的路径完整体验一遍操作流程


(1)单页蒙层

(2)分步引导


4、过程中引导-气泡提示引导

气泡提示引导是由一个矩形和三角箭头组成的弹出窗口,箭头指向的地方通常是导致Popover弹出的控件区域,通过点击Popover内的按钮或非Popover的其他区域可关闭Popover

5、过程中引导-动画/视频引导

动画/视频引导适合操作比较复杂或动态演示比较有冲击力的产品,效果非常直观并且具有吸引力,用户能够很快理解整个产品

Enlight


6、过程中引导-空状态引导

有些app页面刚使用时,点开页面是空状态,需要在引导下创建内容,从而去了解页面的功能使用,在工具类产品中比较常见。


7、过程中引导-教学式引导

教学式引导常见于工具类产品和游戏中,会结合产品实际使用场景,一步一步的引导用户进行操作,鼓励用户参与其中,边学边用,这种方式很容易让用户沉浸其中,快速学习,并且因为有及时的操作反馈,所以用户很容易获得强烈的成就感。


8、过程中引导-互动式引导

互动式引导通常出现在用户与产品的特定交互过程中。

9、过程中引导-预加载任务

预加载任务是指在用户进入产品后,自动为用户创建了一些和产品形态相关的示例,而不是留给用户一个空页面。在引导的同时突出了产品的特色,借用本身的形态让用户沉浸在产品的真实场景中去学习,在后续产品的使用中快速上手。

常用于工具类产品,比如原型工具、设计软件、文档、任务清单等产品。

10、过程中引导-小卡片引导

小卡片引导的方式进行简单的提示,给用户一种亲切感,让用户接触到真实的app界面


三、短视频类竞品新手引导流程


1、首页是视频播放器的短视频产品-抖音

微视

微视在新手引导中的手势引导主要是切换视频、点赞视频,关注则是用泡泡提示框显示,分享按钮在观看一定时长后变成朋友圈按钮。



躁点小视频


躁点小视频的交互体验与抖音类似,但在新手引导中有所不同。首先引导的视觉比较酷,跟产品的基调比较一致,其次引导用户查看特色功能-灵感。灵感是用户可以查看UP主使用了哪些功能


2、首页是瀑布流的产品

美拍-美拍除了手势引导外,还有按钮动效做为弱引导,在新手引导中,关注按钮和分享按钮会在视频观看中持续的动效变化,关注按钮是有放大效果,分享按钮会有上下跳动的效果

短视频类竞品新手引导总结

目前短视频的页面结构及交互比较统一,首页主要有两类,一种是以视频播放器为首页,一种是以瀑布流为首页,两类不同的首页类型短视频决定在新手引导中的差异,瀑布流式的首页需要从瀑布流页面引导进入播放器首页。

进入视频播放器页面的引导则大同小异,手势引导一般都优先引导切换视频,其次是点赞。

关注、分享功能的引导大部分会采用泡泡提示框,个人主页的引导则较弱,有些app基本不做进入个人主页的引导


36
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功