快好知 kuaihz

设计模式-自动完成

Jabob Nielsen提出的10个可用性原则中有一个原则-防止出错(Error Prevention)。官网中有对这一原则的具体解释,这里不再复述。笔者认为还有一个防止出错的方法就是让用户选择而不是输入。在这里用户不需要思考如何输入输入是否正确,在这里以常见的“自动完成”来谈一下这个设计模式的在当下的应用。

自动完成是一种属于反应性界面的强大模式。典型的模式是随着用户在文本框的输入,显示一个包含匹配项的下拉列表。理想情况下,应该自动选择最佳的匹配项。此时,用户只需要接受匹配项或者从列表选择其他项。

典型应用:邮箱,即时通信软件

图1 Sametime7.5.1

好,现在我们来思考下这简单的交互中,有哪些需要在交互设计中需要注意的地方。笔者从输入匹配、选择这三个方面进行分析。

输入

用户输入时,需要等待多少时间反馈?对自动完成而言,用户每输入一个字符就需要反馈。不过,如果用户输入速度很快,在输入几个字符给出反馈建议也是可以的,同时这里也需要考虑到性能问题。

匹配

如图2对于IBM的Note而言,用户输入的字符可以与联系人的名字或者电子邮件地址的任意部分匹配,突出显示匹配的联系人,同时也以粗体显示已输入的字符。这样可以清楚地告知用户选中的联系人以及所匹配的字符,进行拼写检查,防止出错。

同时支持键盘操作,上、下方向键可以用来选择匹配的项。

图2 Lotus Note v8.0

如图3 在一些集成开发环境中,系统会从规定的参数中基于用户的输入提供一些匹配的关键字。在开发中使用这种设计模式,帮助程序员大大地提高效率。从认知上由系统给出提示减轻了记忆负担,而操作上程序员只需要选择不需要输入对应代码减少了操作,降低了出错的可能性。在集成开发环境中,系统会根据用户输入的值匹配标签中的任意部分进行提示。特别是标签的自动关闭,语法提示都是自动完成这一设计模式的体现,很好地提升了体验效果。

图3 Lotus Note v8.0 IBM Rational Application Developer

图4中这里说明普通的匹配列表如何做优化和引导。匹配列表也可以提供一些使用说明和额外的相关信息。

1. 在列表中用灰色字体提供了使用说明;

2. 在有些匹配项后提供了类型(computer science, blog)等,这样就更方便地进行精准搜索和信息归类;

3. 提供了网页搜索功能,在没有合适的匹配内容时,给予用户更大的搜索范围;

4. 给予用户控制,用户可以隐藏不符合预期的内容。

图4IBM w3 portal

自动完成这个设计模式除了在简单的文本输入框中有应用还可以使用在其他环境中。图5说明了利用自动完成去指定对应的属性。一旦从列表中选择了属性,相对应的值也同时会被设定。这里将属性与值配对在大型软件开发的协同工作中有特别的意义,保证了输出质量的统一和规范。设计和开发只需要去掉用就可以,大大减少了沟通成本。

图5 IBM Fringe

图6 自动完成与标签组合,很显然只会匹配那些以标签名开头的项。在一些企业内部的SNS应用,自动搜索这一个模式可以与很多Web 2.0的元素组合,提高设计体验。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:设计模式自动完成  设计模式  设计模式词条  完成  完成词条  自动  自动词条  设计模式自动完成词条  
设计

 说说社区客户端

从国外的facebook、twitter到国内的人人、开心网、新浪微博、网易微博、搜狐微博、QQ微博……社区的风暴一时间吹遍了整个互联网,然后蔓延到手机客户端,...(展开)

设计

 敏捷设计,让设计更高效

设计师是一群具有艺术气质的思想家,他们以天马行空的创新、特立独行的行事风格存在于各个团队里。区别于其他工作的是,这是一个更注重“灵感”和修养的行业,在东方文化环...(展开)