文字提示
Tooltip
初级通用文字提示(Tooltip)是用户悬停鼠标或聚焦某个界面元素时,在它附近短暂出现的简短说明。它能解释图标、缩写或不直观的操作,让用户在需要时看懂含义,又不必把说明一直摆在页面上。
你可能会说:「这个图标有点难猜,能不能在用户把鼠标移上去时,显示一句解释?」
动手看看导出按钮的文字提示
把鼠标移到说明图标上,或用 Tab 聚焦它,看看图标的反馈;切换「显示文字提示」可以观察提示出现和消失。
提示浮在报表内容上方,说明这个图标与导出格式有关,却不会一直占据页面布局。实际产品通常在悬停或聚焦图标时显示,离开或失焦后关闭。
要点文字提示怎样帮用户看懂界面?
- 1
给具体元素补一句解释
文字提示通常依附于一个图标、字段或按钮。比如后台报表里有个“?”图标,用户把鼠标移上去,才看到“统计范围包含已完成订单”。这样说明和疑问出现在同一处,不用去别处找。
- 2
内容短到可以扫一眼
用户打开文字提示,通常只想确认眼前这个元素是什么意思。如果一段说明需要分步骤阅读,提示就装不下了;我们可以把简短解释留在这里,把完整规则放到帮助页面或可展开的说明中。
- 3
别只考虑鼠标悬停
悬停对鼠标用户方便,但键盘用户会通过聚焦找到控件,触屏用户则没有悬停动作。所以你让 AI 做文字提示时,可以同时说明键盘和触屏上的查看方式,并检查提示出现后是否容易读清。
容易混淆的地方
文字提示是围绕某个元素出现的简短解释,通常不承载需要用户操作的内容。气泡卡片可以放更多内容或可点击项,适合较复杂的补充信息;轻提示则常在操作完成后出现,比如“已复制链接”,它报告结果,不负责解释用户正指向的元素。
什么时候用
适合用
- 数据后台用了一个不常见的图标表示“查看计算口径”,你想让用户接近图标时先读到简短解释。
- 表单字段旁有一个缩写,页面空间有限,你想让用户在查看字段时知道缩写的含义。
- AI 工具的模型列表里有一项费用说明,你想在价格旁补充一句计费范围,而不打断选择。
不适合用
- 用户必须先读懂一段规则才能正确提交表单时,把规则直接写在字段附近,别藏进文字提示。
- 用户点“删除项目”后需要确认后果时,用确认弹窗或气泡确认框,而不是文字提示。
- 文件上传完成后要告知用户结果时,用轻提示或页面内状态信息,而不是附着在上传按钮上的文字提示。
练一练选一个答案,看看解释
你在做数据后台,表头的“净收入”有一条简短的计算口径说明。用户需要能在查看表头时读到它,键盘用户也要能看到。你会怎么做?
让 AI 帮你做复制给 AI Agent 直接用
请给数据报表中“净收入”表头旁的说明图标添加文字提示,内容为“已扣除退款,未扣除平台服务费”。鼠标悬停和键盘聚焦时都能查看;触屏上也提供可触发的查看方式。保持说明简短,不要用弹窗打断查看报表。