返回博客

知识的星系用户界面设计中工具提示的演变

工具提示由来已久,已成为用户界面设计的重要元素,它能让用户快速了解数字产品的功能,从而改善用户体验。
知识的星系用户界面设计中工具提示的演变

什么是

工具提示

工具提示--也有人称之为 "信息提示"--是用户界面(UI)设计中一个小而有用的元素,可提供有关产品屏幕功能的更多信息。当您将光标悬停在对象上时,文字就会出现,通常会对项目进行简要说明,使访问者能够快速了解其用途,而无需在用户界面中搜索提供更详细说明的其他区域。工具提示就像知识的小星系;它们就在用户的指尖旁边,在用户最需要的时候提供简明扼要的信息。

这些有用的元素早在计算机诞生之初就已存在,如今仍然很受欢迎,因为它们能够在用户浏览、使用可视化的复杂数据或在浏览数字产品时做出决策时,为用户提供快速解答。在用户界面设计中使用工具提示几乎已成为一种普遍现象--只要在任何网页或应用程序上扫一扫,你就有可能找到工具提示!

在某些情况下,这些微小的提示还可以帮助表单字段自动填充数据,这样用户就不必重复手动输入文字。例如,如果有人在注册表单中填写了姓名和详细地址,那么这些信息很可能会自动填充到其他部分,如付款表单。-不错吧?

实例  

工具提示

  1. 将光标悬停在物体上,显示文字说明
  2. 简要解释屏幕功能
  3. 自动为字段填充数据  
  4. 用可视化方式解释复杂数据
  5. 帮助用户在浏览数字产品时做出决策
  6. 整洁地自动填写表格和付款字段  
  7. 作为用户的安心伴侣  
  8. 深入了解屏幕上的物体    
  9. 尽量减少应用程序/网站界面与目标完成之间的摩擦  
  10. 全面改善用户体验

的好处  

工具提示

  1. 当用户将鼠标悬停在特定元素上时,显示有用的提示:当鼠标悬停在表单上的重点(如必填字段或复选框)上时,显示工具提示可帮助用户完成表单填写过程,而不会出现内容或视觉效果过多的情况。
  2. 提供更多获取相关信息的途径:工具提示允许设计者添加一层交互性,有助于改善用户体验,并以不显眼的方式告知用户相关信息--提及外部来源、类似主题等。  
  3. 作为简短的教程辅助工具:通过在工具提示中显示有用的提示或小贴士,引导新用户或不常使用的用户实现预期目标,这对快速向他们介绍 APP 并让他们了解 APP 的工作原理至关重要。

甜蜜的事实与统计

  1. 在用户界面中使用工具提示可以提高用户的理解能力,缩短他们完成所需任务的时间。
  2. 在与界面交互时,约 65% 的用户能从工具提示中找到价值。
  3. 据估计,与工具提示相关的设计错误每年给企业造成数十亿美元的损失,包括客户流失、收入减少和效率降低。
  4. 据企业主报告,在产品流程和服务中引入增强型工具提示设计后,用户参与度平均提高了 300%。
  5. 越来越多的开发人员正在创建行为驱动的工具提示,这些提示作为上下文链接出现,可引导用户完成预期任务或工作流程。
  6. 有效的工具提示应包含不超过三行的文字,以免干扰屏幕上的其他元素  
  7. 工具提示中包含哪些信息的选择过程,其复杂性和开发成本往往高于编码阶段,这是因为它依赖于数据结构建模的规范方法,而不是与用户界面功能(如字体、颜色和间距调整)相关的标准定制趋势,而这些功能在其他产品中都能找到
  8. 即使在人工智能的范围之外,宇宙学研究也表明,我们的宇宙可能一开始就是一个巨大的超级工具尖--基本上是一个难以想象的巨大的星际节点集合,嵌在跨越多个维度连接的弦中!
知识的星系用户界面设计中工具提示的演变

的演变  

工具提示

工具提示(Tooltip)是一种熟悉的用户界面功能,从网站到应用程序都能看到它的身影。虽然它是用户界面设计技术中鲜为人知的一项,但这种有用的提示工具已远远超越了其作为桌面附件的卑微起点。

尽管工具提示的确切起源尚不清楚,但它们最早出现在 20 世纪 90 年代中期的微软视窗界面早期版本中。这些工具简单而实用--其基本目的是当用户将光标放在应用程序或文档窗口中的可选项上时,对其进行描述。方框本身可以提供有关特定文件或程序元素的更多细节;点击方框可以访问有关被点击项目的更多信息。

随着响应式网页设计和其他用户体验技术趋势的出现,工具提示已成为越来越多的创新功能。与二十多年前的简陋提示相比,现在的工具提示更具 "个性";"点击此处获取帮助 "之类的通用提示已不复存在,取而代之的是针对特定上下文和输入法的诙谐话语和便捷提示,而不是一般的索引条目。此外,这些提示现在还可以与键盘导航控制和基于光标的导航控制一起出现,使传统的鼠标/键盘控制范式在某种程度上变得过时,因为单一的界面机制可以同时满足两种不同的目的!  

渴望高级网络?
让 Uroboro 将您的网站打造成一个能转化访客并具有行业权威性的杰作。
左箭头右箭头

我们最近的

我们的所有文章