对话框引导可以理解为是安卓端 Dialog/iOS 端 Alert 在略升级后,专门用于引导场景的设计模式。
升级具体表现在:对话框引导基本都有营造视觉氛围的素材图(框体上的配图)或背景图(代替框体本身的整图),甚至有带动效的图片素材或 CTA 按钮,这和 Dialog/Alert 那种偏纯文字描述的克制是不一样的。
为什么会升级,在我看来原因有二:一是要通过抓人眼球的视觉表现力,吸引用户朝着规划好的产品路径行进;二是因为引导的出现机制是系统自动触发,而非对用户某操作的回应(反馈),这意味着于用户而言,对冷不丁出现的对话框引导是没有预期的,所以需要用比纯文字表达更直白、高效的视觉元素解释清楚这是什么?有什么好处?接下来该怎么做?等事情。
因为对话框引导会阻断用户当前行为,所以只有重要的引导才适合用这种设计模式。顶着有可能“冒犯到用户”的风险弹出的内容,对用户而言,最好要有足够的诱惑力或实际价值,常见的适用场景有福利发放、重要活动、重要版本升级等。
对话框引导因为没有指向性(详见气泡引导/工具提示引导),所以一般居中显示,占据整个屏幕的视觉重心。
2、操作栏引导
操作栏引导是类似 iOS 端 Activity View 的设计模式(Activity View 是基于用户操作后弹出的,而操作栏引导是系统自动触发的,所以我这里所谓的类似是指展现形式上类似——都是在页面底部弹出的模态设计模式)。
操作栏引导的特点和对话框引导是一样的(阻断式引导、没有指向性、用于重要功能/内容的引导),主要的区别是——在位置上,相较于居中显示的对话框引导更靠下;所以理论上,操作栏引导在视觉重心上稍差一点点;但也恰恰正是因为位置靠下,所以相较于对话框引导更便于操作,尤其是对大屏手机的单手操作而言;所以除了CTA按钮外,操作栏引导可以承载更多的简单操作,如选择标签、打星评价等。
3、 气泡引导
气泡引导可以理解为是安卓端 Popup/iOS 端 Popover 变形后的设计模式(同操作栏引导一样,气泡引导是系统自动触发的,Popup/Popover 是用户操作后触发的,所以气泡引导在使用时要露出被引导元素,多为某个功能按钮或某个内容按钮;这和 Popup/Popover 是不一样的,点击某操作后弹出的 Popup/Popover,半透明蒙版会盖住该操作控件)。
气泡引导相较于上面两种模态引导,因为更强调其指向性,所以可以根据实际需要出现在页面的任何位置;所谓的指向性,其实就是指气泡引导必定有一个小尖尖,来明确告知用户在引导谁。所以气泡引导的适用场景是:界面上某个固定位置的功能或内容的引导。
气泡引导和工具提示引导很类似,区别就在于一个是模态一个是非模态(即气泡引导有半透明蒙版,工具提示引导没有半透明蒙版);所以阻断式的气泡引导适合最最最重要的功能/内容的引导,非阻断式的工具提示引导适合比较重要的功能/内容的引导。
气泡引导元素相对简单——被引导元素、半透明蒙版、带小尖尖的气泡、引导文案。为了增加视觉冲击力可以在气泡上添加图片素材或者动图。一般没有关闭按钮,点击气泡外的任意位置,都可以关闭气泡引导。
为了吸引用户立即去操作被引导元素,可以给被引导元素添加光影变化、呼吸效果等,也可以添加对应交互手势的视觉元素(如“小手点击”的 gif 图)。
4、页面遮罩引导
页面遮罩引导是一种类似气泡引导的设计模式。具体差别在于气泡引导把被引导元素提到半透明蒙版上层,页面遮罩引导是设计镂空的半透明蒙版(即所谓的页面遮罩),把半透明蒙版下层的被引导元素露出来。
像气泡引导一样,页面遮罩引导也具有明确的指向性,一般都有绘制的箭头告诉用户引导文案是对哪个被引导元素的解释或说明。
页面遮罩引导早些年常用于一个页面上有多处功能/入口等要引导(当然单个引导也可以),但是大家现在见到它们的机会越来越少,分析原因可能有三个:1. 先前的新鲜功能对现在的用户而言随处可见,不值得再去引导;2. 用户耐心越来越少,更喜欢自己去尝试,而非听产品说教(就像电子产品的说明书,很少有用户去读一样);3. 产品可能发现,大部分先前引导的功能/入口其实没那么重要,不值得用打断用户的方式去告知他们。
广州新跃专业做网站多年,通过了解企业的特性进行打造适合各种企业网站;
广州网站建设公司,广州新跃