4000-888-103

资讯动态层出不穷的引导提示-样式及应用场景资讯详情

层出不穷的引导提示-样式及应用场景

2019-11-28 16:40:34

 

对此,我们先来了解一下什么是引导提示?

引导提示,是通过一些提示手法,它能够帮助用户在初次访问时,帮助达到他们的访问App目的。并在之后的迭代中,带领用户快速低成本的学会使用新功能。为了不破坏用户对产品的体验,我们以引导提示经常出现的,不同的使用场景及模态类型,将引导提示分为:幻灯片式、浮层式和嵌入式三个种类。

 

目录

第一种:幻灯片式

第二种:浮层式引导

第三种:嵌入式引导

 

一、幻灯片式

幻灯片式的引导页,通常用文字和插画相结合的方式概述介绍App或演示交互,同时也是闪屏的其中一种类型。这种形式横于用户和App之间,相比与看这些精美的插画,用户更愿意快速进入App。所以,即使插画再精美介绍再完整,用户也不喜欢去细看,因此引导页的数量一定不要过多(通常在3-5个闪屏之间)

 

优点:用户能在打开界面的第一时间,了解App的主功能和更新项;通过插画的方式明确说明了程序中不同控件的交互和功能,这种方式可以让用户更有效地学习产品的功能。

缺点:通常用户对信息吸收的效率并不高,因为大多数的用户都倾向于自己探索App。(就像我们买了电子产品,却不愿意先看说明书一样。)

出现场景:1.常用于用户第一次打开App;2.大版本更新;3.主推活动广告页。

模态类型:幻灯片式的引导页分为两大类,一类称为模态类,另一类称为非模态类。模态幻灯片式引导页需要用户必须选择一项操作后才会消失,比如 Alert 确认等;而非模态幻灯片式引导页并不需要用户必须选择一项操作才会消失。

 

二、浮层式引导

1. 引导遮罩层

遮照提示是一种强引导性提示,提示设计大都会是黑色半透明的背景,利用图文、或是文字提示组成。利用箭头的指向性,非常直接的告诉用户界面内容及操作方式,从而引导用户使用。它要求用户必须看到提示内容并执行学习操作才会消失,所以内容要尽量明确精简。

 

优点:这种提示让用户将注意力集中到某个特定的主要交互上,最大限度的减少说明的信息量。

缺点:该种方式虽然指向型很强,但是会打断用户操作,用户常会懒得看直接关闭遮罩层。

出现场景:1.新手学习操作、游戏新手指导;2.当前页大功能更新或界面交互复杂的app界面;3.特定交互功能操作使用。

模态类型:一般为模态类,用户必须选择一项操作后才会消失。引导内容以图层的形式叠加到对应的UI控件上,通常出现在用户首次操作的时候,并且一次只显示一个。

 

2.标签式引导

标签式引导,由箭头和圆角矩形组成,悬于主要操作页面上方,箭头指向的地方通常是该气泡要提示的位置。这样的提示气泡有多种模态,用户可以点击关闭时,也会自动消失,在页面中可能并不明显但指向性很强,并且不会打断或影响用户的操作;适用于小范围更新或新增小功能。

 

优点:在不会打断或影响用户操作的前提下,精确快速的提示用户更新或推荐操作。

缺点:容易被忽略,有时会挡住部分页面信息。

出现场景:1.用于提示新增小功能位置;2.引导关注动态信息;

模态类型:标签式的引导页分为三大类,一类称为模态类,需要用户点击关闭按钮后消失;第二类称为非模态类,不需要用户进行任何操作就能自动消失;第三类则为这二者结合;即不点击关闭会自动消失,点击可以提前关闭。

 

三、嵌入式引导

将引导提示嵌入页面中,需要事件触发才会出现。并嵌入到内容页面中,在页面中占到一定位置,用户完成提示操作或页面跳转后消失。

 

1.Snackbar – 引导

多为文字和icon组合的方式,提示一些比较重要的信息,引导用户进行下步操作。

 

优点:能让用户迅速意识到页面报错原因,并提供快速解决入口。

缺点:占到固定的页面位置,影响信息展示。

出现场景:网络不可用、页面因为设置原因出错;

模态类型:Snackbar – 引导为模态类,需要用户点击关闭按钮或进行下一步操作后消失。

 

2.页面嵌入

形式多样,是一些希望用户操作的信息,引导用户进行下步操作。

 

优点:能让用户知道下一步该做什么,快速了解页面或是某个功能的具体作用。

缺点:占到固定的页面位置,影响信息展示。

出现场景:1.购物车为空;2.交互提示;

模态类型:Snackbar – 引导为模态类,需要用户点击引导按钮后消失。

 

总结

我们为了培养用户的操作习惯,或者引导用户如何正确的使用功能时,都会用到引导提示。这类提示多为蒙层加页面提示内容的形式,好的引导层可以使用户在不中断操作的前提下,跟随引导去完成正确的操作。

 

参考文献:

https://www.jianshu.com/p/78f5218f4d8c 《Coach Marks —— 新手引导提示标》

 

关键词:h5做什么的 h5打开网页 简单的h5网站

上一页 下一页

0
↑ 回到顶部

热门推荐

发送
//www.weibenh5.com/newhome/images/manman.png