关于-文字提示tooltip 在B端作品中的使用感悟

文字提示tooltip作为一种非模态悬浮窗，不会对用户操作流产生打扰，而如何合理应用Tooltip呢？

1. 构建独立空间，简化页面信息量。浮层在一定的条件下触发展示，作为一种容器可以形成临时的内容空间。不会占据页面空间，并且可以简化页面的信息量，有助于页面的内容布局。例如常见的数据可视化展示时，重点在于图形展示，详细数据放置在浮窗中展示，从而保证了页面的可视化效果。

2. 交互轻量化
对于强调操作效率的 B 端产品，在交互流程上，浮层组件停留在当前页面，在触发机制上，非模态浮层可以实现悬停展示，移走消失，操作更加方便，获取提示也更简单直接。


在页面布局方面，浮层也更加灵活，可以出现在页面中间、侧边、上方、下方等各个位置，尺寸可大可小，对于不太复杂的信息都有较好的适应性。
团队在通过使用了多个B端产品后发现文字提示悬浮气泡具有多种形态从而得到了一部分的设计感悟


tooltip作为一个轻量非模态弹窗，主要用于适时的提醒解决用户的疑惑，而不打断用户的操作，也尽可能引导用户的注意力以及是否需要减轻用户的视觉压力。
1.颜色选择

市面上的产品在这个组件上大致运用了两个基本颜色白色/黑色。相比于黑色而言，白色气泡显得更加的轻盈，用户在使用过程中除非特别关注基本不会分散用户的注意力。而黑色更加吸引用户的注意力，同样的黑色气泡也在无形中增加了用户的视觉压力。在各大厂B端类产品没有统一的要求及标准，但在颜色上各类产品内部有自身的规范要求。以腾讯文档为例，作为一款工具类产品，经常使用的用户对于各个图标所代表的意义有一定的心理预期，即使用户不知道某个图标是什么意思，当鼠标移入时，用户的视觉中心是集中在图标上的因此气泡选择较为轻量的白色。

2.出现时间

体验较好的产品对于气泡在不同地方出现的时间是有一定差别的。例如腾讯文档，Adobe，钉钉（筛选图标）等图标类气泡1S左右出现，笔者推测是由于经常使用该产品的用户基本知道该图标所代表的意思，工具类产品鼠标需要经常移入触发，频繁弹出气泡会使用户感觉烦躁，降低使用体验，但由于图标比较多，用户存在无法简单通过图标判断用途，因此鼠标移入并停留1S，给予用户一定提示，避免用户对工具产生疑惑从而找不到自己所需要的工具。


当然并不是说每一个气泡都迟1S出现最好，对于大部分工作中不常用到的B端类产品，以工作效率为先，使用者继续解决疑惑的一些操作，气泡提示应当立即出现，从而避免用户产生不耐烦的情绪，降低工作效率及体验感受。

3.箭头
提示性气泡是否必须要带箭头呢？我们这里做了不同的版本，可感受下体验上的差别。无论是白气泡还是黑气泡，相比于带箭头的气泡，不带箭头的则感觉更加柔和，而带箭头的则显得更加尖锐，更加具有针对性。因此在是否使用带箭头的气泡使用上，个人建议是除非强提醒状态下可以选择不带箭头的气泡。像需要强提醒快速解决用户操作疑惑的具有强指向性的气泡则选择带箭头进行强提示。

4.出现位置
根据页面布局，用户可根据需要选择气泡的具体位置。若无特殊情况(如被遮挡)气泡均展示在下方居中位置，若被其他元素遮挡可选择其他位置，提供8个不同的方位，如下图。

总结：不打断用户的心流，避免打扰用户操作，恰如其分的解决用户的疑惑，合理运用与弹出文字提示才能更好的提升用户体验。