#可写文章 #components/feedback ## 概念 ### [[Polaris Design System#^712735|Polaris Design System]] 工具提示是一种浮动标签，它简要地解释了用户界面元素的功能。当商家盘旋、聚焦、点击或点击时，它们就会被触发。 ### NielsenNormanGroup [Tooltip Guidelines](https://www.nngroup.com/articles/tooltip-guidelines/) - 工具提示是用户触发的消息，它提供有关页面元素或特性的附加信息。 - 提供有用的、附加的内容 - 定义: 工具提示是一个简短的，信息性的消息，当用户与图形图形用户界面中的元素交互时出现。工具提示通常以两种方式之一启动: 鼠标悬停手势或键盘悬停手势。 ## 最佳实践 ### DO - 尽量保证相邻的元素都有提示，给用户信心。 - 可以展示对应操作的[[快捷键交互设计]]，提升专家用户的效率 - Hover 到出现的时间，可以稍微有点延迟，否则对熟练用户是一种困扰。 - 在鼠标悬停上过快地显示工具提示可能会导致意外激活，并产生不和谐的用户体验。建议在显示之前添加一个短延迟 (大约 100 毫秒)，来源 [UI Playbook — Tooltip](https://uiplaybook.dev/play/tooltip)。 - 一旦工具提示可见，与任何其他工具提示的交互应该立即显示而不会延迟。 - 例如连续的查看，别让人每次都等。 - 需要思考的图标按钮，就要有工具提示，[[别让我思考 Don't make me think]] ### Don't - 不能有链接和按钮 - 尽可能简短，太长没法看 - 不要对任务完成至关重要的信息使用工具提示。 - 当展示工具提示的元素附近也有很多他元素，请使用箭头，避免歧义。 ### 出现位置 **我的见解：** - 最根本的逻辑上，出现的位置尽可能不影响操作和阅读，例如这个Medium导航侧边弹出的案例的案例，如果在上方将影响用户切换不同的导航。 - 各个方向都见过，但目前更偏向顶部，一般认为上方内容是看过的，被遮挡可能影响更小一些。 #### 顶部案例 - Medium - 在 Renren 时的所有 Web 产品。 ## 资源 - [Tooltip Guidelines (nngroup.com)](https://www.nngroup.com/articles/tooltip-guidelines/) 尼尔森官网文章，总结很全。 - [UI Playbook — Tooltip](https://uiplaybook.dev/play/tooltip) - [Tooltip - Shopify Polaris](https://polaris.shopify.com/components/overlays/tooltip) - [Pop-up, popover or popper? — a quick look into UI terms | by Shan Shen | UX Collective (uxdesign.cc)](https://uxdesign.cc/pop-up-popover-or-popper-a-quick-look-into-ui-terms-cb4114fca2a)