1. 工具提示引导

为了呼应上面提到的气泡引导,我们优先介绍工具提示引导。区别于 Material Design 里的 Tooltips,工具提示引导是自动触发的设计模式,所以不适合事无巨细的引导所有功能或内容,更适合引导“次重要功能/内容里的重点对象”;而 Material Design 里的 Tooltips,是用户长按某按钮后的信息反馈,是普世的,原则上(但凡不和长按手势冲突的)所有的按钮都应该添加,尤其是为了节省空间而设计的纯 icon 按钮,因为大部分 icon 按钮没有统一的用户认知。

2. Snackbar 引导

Snackbar 是安卓端 Material Design 设计体系中包含的一个控件,官方的定义是出现在页面底部的一种控件,只有引导文案和一个文字按钮,会自动消失且支持用户使用拖拽手势把它划出页面进行快速关闭;适用场景是用户进行了 A 操作,可以用 Snackbar 提示用户是否要实施与之高度相关的 B 操作。

究其根本,与其说官方定义的 Snackbar 在上述场景中是对 B 操作的引导,不如说是系统对用户进行的 A 操作的反馈。

现实产品中,我们看到了各种各样与 Material Design 建议用法相悖的案例,个人觉得这是突破了官方的限制,朝着适用性更广的方向在发展。所谓规则,本就是人为定义、人为遵守、人为打破的。哪怕这种打破只是让我们朝着更好的方向迈了一小步,这种“破坏”都是值得推崇和尊敬的。

比如大家会把 Snackbar 用在系统自动触发的引导上(本段所说的“Snackbar 引导”就是指这种借 Snackbar 之名定义的、系统自动触发的引导模式)、会给它添加更重的按钮(不局限于纯文字按钮)、添加图片素材(甚至是动图)来增加美感吸引用户注意力、会添加关闭按钮来替代拖拽关闭的高级手势、定义永久显示的展示时长(即用户不主动关闭就不会自动消失)等。

为什么大家乐此不疲的改造着 Snackbar,因为它天然具有一些独特优势;首先它是非模态的设计模式,对用户的打扰是相对比较低的;其次它出现的位置是屏幕底部,类似于操作栏引导,它对于大屏手机的单手操作很友好;最后作为自动触发的引导模式,因为没有指向性,反而让它没有束缚、更具兼容性——活动引导、内容引导、功能引导…,都能覆盖到。

3. FAB 引导

FAB 也是安卓端 Material Design 设计体系中包含的一个控件,全称是 floating action button(悬浮操作按钮),FAB 引导只是借用 FAB 这个名字,同时也欢迎大家参与讨论,以便定义出描述更为准确、有更广泛认知的名字。

4. 徽标引导

徽标(Badge)即平时常说的“小红点”(实际设计时可以结合产品主色,不必非得选用红色),它通过带颜色的小圆点或带数字的徽标来告知用户,此处有内容更新。

接下来我们聊聊徽标作为一种引导模式有哪些应用场景:

上面描述的是徽标引导的两种常见形式,一般不带数字的小圆点引导性更弱(这里的“弱”指的是对用户而言的重要性以及结合业务而言的重要性,二者综合考量下的强度是弱的)一些的内容,即没有数字逐级透传到启动 icon 上面。

稍重一些的带数字的徽标提示,则会透传到启动 icon 上,并且用户不点击查看,就一直存在;还有第三种常见的用法,用“NEW”、“推荐”等文案代替数字,来引导用户点击某入口;我最近发现有基于此进一步做升级强化的用法——用“带文字的徽标加动效”来强化引导效果的案例出现(详见美团V11.8版本首页的“美团优选”入口和“电商tab”入口)。

徽标引导因为占地儿极小,对用户的打扰微乎其微,所以不会设置主动关闭按钮,用户关闭徽标引导的方式就是使用它或者等待它自动消失;这就要求设计师在使用徽标引导时,配套制定好消失逻辑——是用户点击之后就消失、还是用户点击特定次数后才消失、亦或是徽标提示展示特定次数后自动消失,都需要提前规划清楚。

5. 嵌入式引导

嵌入式引导指的是把引导做在内容层,常见的是作为插条形式存在于 feed 流,或者作为插卡形式存在于瀑布流的情况。


6. 手势引导

手势引导指的是对一些高级手势操作的引导模式,如双击点赞、长按保存、滑动调整音量等,这些高级手势对于用户而言,如果能灵活掌握,使用产品时会起到事半功倍的效果。


7. 特殊引导

除了上面描述的 5 种非模态类引导,还有两种构思巧妙,也和大家分享一下。

第一种是动效引导模式。这种引导模式的神奇之处在于没有添加任何新元素,仅仅通过动效来起到引导用户的效果;如图所示的 2018 年即刻某版本的关注主题列表页,用户可以通过向左滑动来删除某个已关注的主题,但页面上没有任何提示信息,设计师通过“让第一条主题自动向左滑动一下,来露出删除按钮”,从而起到提示用户使用该功能的作用。

第二种是按钮状态变化引导模式。如下图所示,当底 tab 除了有切换功能外,还被赋予了返回顶部功能时,随着页面的向上划动,左下角的支付宝 tab 变成了返回顶部的样式,通过这种按钮展示状态的变化,很好的提示了用户这个按钮所拥有的另外一个功能;同动效引导一样,按钮状态变化引导也需要设计师奇思妙想,是否能称之为一种引导的设计模式,也欢迎大家发表自己的看法。



广州新跃专业做网站多年,通过了解企业的特性进行打造适合各种企业网站;


广州网站建设公司,广州新跃


获取您的专业报价方案
取得联络 无限可能往往从第一次交流开始
15814558325微信二维码线上服务咨询