气泡引导的学习

单纯想通过文章总结下自己在工作中讨论如何引导产品经理和开发同学做决定和工作之后的思考。一个很小的案例，气泡引导的使用。

首先对于气泡引导，我们常见的安卓material design设计规范和苹果设计规范apple design中并没有明确的控件去对应到气泡引导这种场景上，所以有的人会叫他们popover或者tooltips，我去翻阅了安卓设计规范和苹果设计规范，发现其中无论是popover还是tooltips，他们的设计本意都不是为了作为新手引导的场景下使用。

我们可以看下他们分别对与popover和tooltips的定义。

首先是苹果设计规范。弹出窗口是一种瞬态视图，当您点击控件或区域中时，它会显示在屏幕上其他内容的上方。通常，弹出窗口包括指向其出现位置的箭头。弹出窗口可以是非模态的或模态的。通过点按屏幕的另一部分或弹出框上的按钮，可以消除非模式弹出框。通过轻按弹出框上的“取消”或其他按钮，可以消除模式弹出框。

可以看出苹果对于popover的定义触发机制是点击触发，但是它的展示形式中，指向出现位置的箭头和我们经常使用的气泡引导很相似。不过在苹果设计规范后续对于popover的进一步解释中

可以发现，popover是一种针对于ipad端的控件。弹出框最适合在较大的屏幕上使用，并且可以包含各种元素，包括导航栏，工具栏，选项卡栏，表格，集合，图像，地图和自定义视图。当弹出窗口可见时，通常会禁用与其他视图的交互，直到关闭弹出窗口为止。使用弹出框在屏幕上显示与内容相关的选项或信息。（不得不说，apple design里每个字都有价值，本来想做些删减，发现每个句都有意义。）所以可以看出在popover中展示了很多信息，并且需要遮罩屏蔽屏幕其他内容，禁止与其他内容交互。而我们常见的气泡引导是没有禁用用户的其他交互行为的，所以popover不适用于这个场景。

原文链接：https://developer.apple.com/design/human-interface-guidelines/ios/views/popovers/

图片来自苹果设计官网

而安卓设计规范中的tooltips我们看下它的定义：

工具提示是文本标签，会在用户鼠标悬停、聚焦、或触摸一个元素时显示。

所以tooltips是一种文本提示，触发的机制是鼠标悬停、聚焦、或者触摸时显示。tooltips的触发机制与我们常见的气泡引导不一致，气泡引导是自动出现，且随着用户的鼠标移开或手指移开而消失，从触发行为上与气泡引导不一致。

原文链接：https://material.io/components/tooltips/

图片来自materal design官网

终于在我去翻阅微软的fluent design的时候发现了问题的答案：Teaching Bubble

看下微软对于teaching bubble的定义

TeachingBubbles是一种特殊的标注，用于突出显示页面特定部分的重要提示。应该使用它们来教育用户有关可能容易错过的元素（例如UI中的新功能或选项）的信息。因为它们增加了与用户界面一部分的互动性，所以它们通常与Coachmarks配对。

通常通过系统更改而不是用户操作来调用TeachingBubble，因此通常不应将其用于显示补充信息或帮助文本。这更适合用于简化交互的标注或工具提示。TeachingBubbles应该用于暂时突出显示某个功能，并且只能在有限的时间内显示；它们不应该是UX的永久部分。

teaching bubbles 完全符合我要找的答案。至于具体使用方法，大家可以点击链接查看。 

原文链接：https://developer.microsoft.com/en-us/fabric#/controls/web/teachingbubble

聊完了气泡引导的定义和触发，那么怎么消失呢？Teaching bubble中并没有定义消失的规则。

这是一个我在工作当中被开发同学提出的问题。而面对这个问题，产品同学，我和开发同学我们讨论了十分钟。

故事的场景是这样的，我们的产品是一款桌面端的产品。我们产品上线了一个新功能，但是这个新功能隐藏用户信息里面，用户想要发现这个新功能就需要展开用户信息。所以我们决定增加一个气泡引导，来增加这个功能的曝光率，从而促进用户使用这个功能。在讨论之前，我们统一的原则是要求用户一定要看到这个引导。

经过对于一些产品的分析，我发现现有产品对于这个问题有两种解决方案：1.持续5s后，气泡引导消失 2.用户必须按照气泡引导才会消失。

我们可以看到现有产品的解决方案：

第一种解决方案当页面内容丰富或用户注意力没有集中在手机上时，用户没有阅读完引导文字或者没注意到气泡内容前，就已经消失。而第二种方案虽然保证了用户一定看到了引导内容，但是气泡引导一直出现在界面中，会引起用户轻度的负面情绪。

所以我对于这个功能操作的操作层级进行梳理。

根据操作的相关性发现，当用户触发用户信息时，就会看到功能入口。所以决定限制这个气泡引导消失规则为用户展开查看用户信息后就消失；如果用户没有查看，用户关闭产品或跳转页面都不会消失。 

强行总结一下：

1. 终于找到了气泡引导的大厂规范可以参考

2. 气泡的消失规则根据场景和具体原则来判断。

第一次写文章分享，原来以为写文章是一个积累到一定程度就水到渠成的事情，现在发现，在写的过程中，保持信息的准确，er且写出有价值的东西是一件挺难的事情，但我会坚持瞎写下去，万一真写出点啥呢。

喜欢点个关注，谢谢～