文字提示怎么设计？悬停、触屏与重要说明

文字提示适合解释简短、非必需的补充信息；会影响理解或操作结果的重要条件，应直接放在页面上。提示既要能通过鼠标悬停出现，也要考虑键盘聚焦和触屏入口；出现后允许读完、移入和关闭。若内容包含链接、按钮或复杂操作，就应采用可交互浮层，而不是把它们塞进只提供文字说明的Tooltip。

以经营看板的“净收入”指标为例：统计周期、退款处理方式和查看明细，虽然都在解释一个数字，重要程度与操作要求却不同。在Pixso 的界面与组件设计中并排放置桌面悬停、键盘聚焦与手机画面，能帮助团队判断哪些内容应该始终可见。

先分信息，再选气泡

设计时容易先决定气泡朝上还是朝下，然后才想里面放什么。更有效的顺序是先回答：没有这段文字，用户是否仍能正确理解当前内容？如果看不到“统计周期为本月”，用户可能把它当作累计数据，这不是可有可无的补充，应该直接放在指标附近。关键的退款口径如果会改变对数值的判断，也不宜只在悬停时才出现。

“该指标用于观察实际收入变化”这类简短辅助解释，可以按需要放进文字提示。它帮助读者建立语境，但不应承担完整计算说明。若用户需要查看构成、打开订单或调整统计范围，就已经从阅读补充信息进入操作任务，应提供明确的明细入口或可交互浮层。

同一个信息图标不宜同时隐藏多种不同承诺。有的点开只是几个字，有的点开带筛选器，有的直接跳走，用户很难形成预期。可以用提示标识承载解释，用文字链接“查看明细”承载后续动作；将关键统计条件放回页面，则减少反复打开提示的负担。

这张表是按本看板任务作出的选择，不是说所有定义都必须常显。信息的后果、使用频率、篇幅和展示空间应一起考虑。能通过更清楚的标签消除歧义时，也不必再加一个提示图标；标签已经写“本月净收入”，提示就不该只重复这六个字。

鼠标移过去能看到，键盘停下来也要能看到

桌面用户把鼠标移到解释入口时，提示可以在短暂延迟后出现，减少指针经过时不断闪烁。具体延迟应根据界面密度和测试决定，不能为了统一动效给所有提示套一个任意时长。提示出现后，入口与气泡之间也不应有让它立即消失的空白断层。

键盘用户需要能到达相应入口，并知道它解释哪个指标。聚焦后可提供同样的信息，焦点轮廓仍保持可见；不能把鼠标位置作为唯一触发条件。若解释关联一个图标按钮，按钮本身还要有能识别动作的名称，不能把名称只放到一个原本无法触发的气泡里。

W3C 对悬停或聚焦内容的说明提出可关闭、可悬停和持续显示等要求及相应例外。具体到这张看板，用户把指针移向提示文字时，它不应立刻消失；需要阅读时应有足够机会读完；提示挡住其他信息时，也应存在不强迫用户移动指针的关闭方式。

不能用一个固定倒计时替代阅读判断。屏幕放大后，同一段文字可能换成更多行；不熟悉术语的人也可能需要更长时间。只要用户仍在相关触发区域或提示内容上阅读，就不宜无故自动消失。按Escape关闭后，也要避免同一位置立刻再次弹出，让关闭成为一个无效动作。

辅助技术关联也要在交付中说明：提示解释哪个控件或数据项，是否是补充描述，是否需要读出。视觉上离得近不等于程序能建立关系。原型能帮助比较位置与行为，开发还需要实现恰当语义，测试则验证最终朗读和键盘结果。

手机没有悬停，把关键说明带到可点的位置

手机用户通常无法用鼠标悬停探路。把桌面气泡原样缩小到手机上，再要求长按才出现，会让许多人根本不知道有说明。对于本月统计和退款口径，常显文字最直接；对于可选补充，可设置可见的说明按钮，点击后在稳定区域展开，再提供易于发现的收起方式。

不要让一次点击同时完成两件互相冲突的事。例如点“净收入”既想显示解释，又直接跳到明细页，触屏用户还没读到提示就已经离开。应把解释与跳转分成不同入口，或者让点击只打开包含明确后续按钮的帮助层。桌面也沿用相同任务含义，而不是因为有鼠标就换一套不可预期动作。

小屏提示的位置要从可用空间出发。入口靠屏幕右侧，气泡应调整对齐或换到下方，而不是让尾部文字溢出；底部空间不足时，也不该把关闭按钮压进浏览器工具栏附近。长解释更适合页面内展开或专门的帮助区域，不必坚持每一种设备都使用同样的气泡形状。

在 Pixso 画布中保留同一张净收入卡片，桌面版展示清楚的统计周期与辅助解释，手机版将必要条件放到金额下方，并为“查看明细”保留独立入口。对照的重点不是桌面比手机少一行字，而是两种设备是否都能在不猜测的情况下理解这个数值。

气泡里放了链接，就需要另一套交互规则

纯文字提示的职责是补充描述，本身通常不接收焦点。用户聚焦在图标按钮上时，读取描述后可以继续下一个控件。如果在里面加入“查看计算明细”链接，却仍沿用移开就消失的机制，用户按Tab或移动指针时，链接可能还没被点到就已消失。

W3C 的Tooltip模式说明也将包含可聚焦内容的浮层与纯文字提示区分开。对本例来说，需要链接时就应明确采用可操作的帮助层，设计打开、进入内容、关闭和焦点返回的完整路径，而不是只把气泡加宽。

一个轻量的帮助层可以显示简短指标解释和“查看明细”入口，但不必变成模态窗口阻断整张看板。是否限制背景操作、是否点击外部关闭，应取决于任务复杂度；只要采用非模态形式，用户就应能理解自己仍在看板中，而不是被带到一个必须完成的新流程。

交付时标出哪些内容能被键盘聚焦，关闭后焦点回到哪里，点击明细后会保留哪些筛选条件。若浮层内不需要任何操作，删去多余按钮，回归简短文字提示即可。不能为了看起来功能丰富，把本来一句话能解释的术语变成三层弹窗。

读得完、关得掉，也不能挡住要看的数字

提示箭头应指向真正的解释对象。指标卡片中既有金额、环比又有趋势线时，不要把气泡放在中间，让人猜它说明哪一项。与入口保持足够关联，同时避免覆盖当前需要对照的数字；无法同时满足时，换位置或改用常显说明，比继续叠加阴影更有效。

用最长的实际文案和较大字号检查，而不仅是“说明文字”四个占位字。金额变长、中文换行、屏幕放大后，提示不应挤出页面；开关提示时也不要改变整张看板的布局，让读者追着数值移动。对外部链接或更新频繁的说明，核对可用目标和内容一致性，避免气泡里还保留旧规则。

最后分别走鼠标、键盘和手机三条路径：不打开提示能否理解关键口径；打开后能否读完；需要操作时能否真正到达；关闭后能否接着看数据。若只有鼠标那条路径顺畅，问题往往不在气泡样式，而在信息被藏到了不适合的位置。