‘信息引导’超全总结，让你的设计有理有据

产品壹佰 • 4年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

上一篇讲了信息引导的策略层：可切入的场景和机制。这篇就总结一下表现层的内容： 有哪些引导形式？ 适用什么场景下？ 如何优化这些引导？ 让各位在界面输出时，能更清晰地理解信息的引导。

按照‘是否会干扰用户’的维度，我将信息引导分为两类：干扰型和不干扰型。下面我们直接进入主题：

Part 1：不会干扰用户操作的引导

不会对用户的当前操作产生影响的，主要有： tips通知栏、snackbar提示框、 浮层/气泡、 信息push、 徽标、toast提示 等这几种引导方式。

1. Tips通知栏：

固定嵌入显示在界面顶部或nav下方的提示条，向用户反馈及时信息，用户操作它后才能消失。 ‘信息引导’超全总结，让你的设计有理有据

· 适用场景： 需要长时间向用户展示信息、内容公告、引导操作的提示。

· 引导延伸： 可动效轮播Tips里的信息，引导性更强。如支付宝，在向‘异常用户’转账时就会出现轮播tips。 ‘信息引导’超全总结，让你的设计有理有据 2. Snackbar提示框：

向用户展示刚刚操作结果、且可以取消/撤回操作的提示框。一般显示在页面底部，属于Android的系统控件，1-2秒后自动消失。 ‘信息引导’超全总结，让你的设计有理有据 · 适用场景： 允许用户修改刚才的操作结果，防止用户犯错和误操作的提示。

· 引导延伸： 可直接用图标表意（代替iOS没有该控件的不足），如新版本滴答清单的操作提示。 3. 浮层/气泡

悬挂在页面上，引导用户使用某功能模块的浮层，很多产品都会采用该形式向用户展示新功能、新内容。

它与toast不同的是：toast更多则是在用户的操作行为后弹出的，而浮层可以在任意流程节点上出现，灵活性更高。

· 适用场景： 特别想让用户知道、引导其使用某功能/内容的提示。

· 引导延伸 ：浮层消失时，可将内容移动并缩小到入口中去，向用户做入口教育。

4. 信息push：

和前面几种不同，这种属于产品的‘外部引导’，引导性很强，但需要一点的推送成本做支撑。多用于运营内容的对老用户的‘唤醒’和留存提升。 · 适用场景： 培养用户习惯、定时地推送内容、提醒用户操作。

· 注意： 需要获取用户手机的‘ 通知 ’权限。在需要做引导的场景中，提示用户允许获取该权限。

5. 徽标/Badge

徽标（Badge）指在页面元素上出现的圆点、数字、文字等信息。我们经常说的‘小红点’，就是徽标的形式之一。徽标可以分为2类：数字型和非数字型（如小红点、文字、图形等）。 · 适用场景：

- 数字型徽标：需要强调信息的‘数量’，让用户精确知道有多少新内容，吸引用户注意力。

- 非数字型徽标：只需简单让用户知道有新内容/消失，不会对用户产生干扰。

· 注意：

数字型徽标需要注意 数字的展示长度和数量上限。 一般最大限度是9999、用‘99+’表示视觉长度。且避免太多的数字信息给用户造成浏览压力，一般都设有‘一键清除’功能。

6. Toast提示

帮助用户明确当前状态的小弹窗提示，一般1-2秒后自动消失。 Toast是安卓控件，但现在大部分已经通用到两个系统里了。且现在toast的定义也不再是‘系统黑框提示’，而是表示所有用户操作后的反馈状态，如图： · 适用场景： 需要让用户了解当前处境、操作结果等状态。

· 引导延伸： 结合用户场景，可提供便捷操作入口。如QQ浏览器保存完图片后，toast提示里带有查看保存后的图片入口。

Part 2： 干扰用户操作的引导

会对用户的当前操作产生干扰，主要有： 对话框和下拉菜单/列表 。这些引导方式虽说会干扰用户操作，但好处就在于引导性强，用户能直观注意到你的信息传达。

1. 对话框/ Dialog

强制用户只执行N个结果才能离开的弹层提示。该类型的引导性就很强，但用户体验相对差点，大多起信息提醒、功能确认作用。除此之外，对话框还能延伸出其他的引导用途，如 内容的多选、文字的输入、模块之间的切换 等等，根据不同的产品需要选择不同的引导方式。 · 适用场景： 对用户当前的操作进行提醒、确认、多选、输入、切换等操作。