工具提示:具有巨大用户体验影响的小设计元素

工具提示是一个解释性文本的小框,当用户将鼠标悬停在图标上时,它会出现在屏幕上。尽管工具提示很小,但它在创造出色的用户体验方面发挥着重要作用。

工具提示的目的

工具提示的存在是为了在用户导航界面时向他们提供额外的上下文和指导。他们能:

解释不熟悉的图标、字段名称或功能

 

工具提示:具有巨大用户体验影响的小设计元素
Tooltip用于描述未标记图标的功能。图片由Adob​​e Spectrum提供。

 

 

 

工具提示:具有巨大用户体验影响的小设计元素
工具提示用于解释用户界面中未直接描述的元素。图片由PatternFly提供。

 

提供有关如何完成任务的说明

 

工具提示:具有巨大用户体验影响的小设计元素
Shopify 提供的上下文说明。

 

 

 

工具提示:具有巨大用户体验影响的小设计元素
Uber Eats 优食中的上下文工具提示。

 

提供额外的有用信息

 

工具提示:具有巨大用户体验影响的小设计元素
工具提示提供数据可视化的附加信息。图片由sigmacomputing提供

 

工具提示:具有巨大用户体验影响的小设计元素
工具提示解释了 Uber 客户端的价格。图片由优步提供。

 

工具提示:具有巨大用户体验影响的小设计元素
工具提示解释了为什么收取额外费用。图片由优步提供。

 

教育用户如何更有效地使用产品

 

工具提示:具有巨大用户体验影响的小设计元素
帮助用户更有效地与产品交互的附加说明。图片由优步提供。

 

让用户放心

 

工具提示:具有巨大用户体验影响的小设计元素
工具提示向用户解释系统行为。图片由Adob​​e Spectrum提供。

 

如何设计工具提示

这是有关如何在 Figma 中设计交互式工具提示的快速教程。

交互行为

当鼠标悬停在对象上时,工具提示应有 300 毫秒的输入延迟,并且应在 1 秒后消失。

放置

工具提示可以显示在 UI 元素的上方、下方和每一侧,具体取决于屏幕空间和意图。

 

工具提示:具有巨大用户体验影响的小设计元素
工具提示放置。图片由 Adob​​e Spectrum 提供。

 

放置工具提示时,请确保它不会与用户当前交互的 UI 元素重叠。

 

工具提示:具有巨大用户体验影响的小设计元素
工具提示与用户当前正在交互的输入字段重叠。图片由亚当·西尔弗拍摄。

 

设计建议

谨慎使用工具提示

太多的工具提示可能会让用户不知所措。如果您正在构建需要大量工具提示的内容,请努力澄清体验中的设计和语言。

 

工具提示:具有巨大用户体验影响的小设计元素
不要添加太多工具提示。图片由ProCore提供。

 

优先解释复杂、高风险或经常被误解的项目。

 

工具提示:具有巨大用户体验影响的小设计元素
优先考虑工具提示。图片由ProCore提供。

 

不要使用工具提示来传达关键信息

不要使用工具提示来传达关键信息(例如您的“付款方式已过期”)。

 

工具提示:具有巨大用户体验影响的小设计元素
不要使用工具提示来传达关键信息。图片由优步提供。

 

使用工具提示提供有用的附加信息或说明。

 

工具提示:具有巨大用户体验影响的小设计元素
如何在 UI 设计中使用工具提示。图片由NNGroup提供。

 

简洁地描述或扩展它们指向的元素

工具提示文本应该清晰、简洁且易于浏览。使用通俗易懂的语言,开门见山(用尽可能少的文字解释用户需要了解的内容)。目标字符数限制为 20,即 2 到 5 个单词(包含空格)。

 

工具提示:具有巨大用户体验影响的小设计元素
第一个工具提示文本(“为本课程添加书签”)比第二个更可取,因为它简洁且易于浏览。图片来源:pluralsight

 

不要在工具提示中添加任何交互元素

工具提示仅在悬停时或键盘焦点时出现;当焦点切换到另一个元素时,工具提示消失。因此,它们不应包含任何链接或按钮。

 

工具提示:具有巨大用户体验影响的小设计元素
不要在工具提示中放置任何链接或按钮。图片由 Adob​​e Spectrum 提供。

 

 

 

工具提示:具有巨大用户体验影响的小设计元素
不要将“关闭”控件 (x) 放置在工具提示中。图片由优步提供。

 

键盘可访问的工具提示

工具提示必须可通过键盘导航和屏幕阅读器访问。

键盘交互

  • Tab:将焦点移到触发器上并打开工具提示。
  • Esc:关闭工具提示

翻译:云瑞设计
原文:uxplanet

给TA打赏
共{{data.count}}人
人已打赏
设计方法论

超多案例!常见的B端弹窗样式设计总结

2024-4-4 9:01:18

设计方法论

京东实战案例!CRM移动端视觉全新升级完整复盘

2024-4-6 20:38:55

个人中心
今日签到
有新私信 私信列表
搜索