建站常识
设计模式-自动完成
2010-10-29 17:23:00
Jabob Nielsen提出的10个可用性原则中有一个原则-防止出错(Error Prevention)。官网中有对这一原则的具体解释,这里不再复述。笔者认为还有一个防止出错的方法就是让用户选择而不是输入。在这里用户不需ꦡ要思考如何输入,输入是否正确,这里以常见的“自动完成”来谈一下这个设计模式在当下的应用。
自动完成是一种属于反应性界面的强大模式。典型的模式是随着用户在文本框的输入,显示一个包含匹配项的下拉列表。理想情况下,应该自动选择最佳的😼匹配项。此时𒀰,用户只需要接受匹配项或者从列表选择其他项。
典型应用:邮箱,即时通信软件
图1 Sametime 7.5.1
好,现在我们来思考下这简单的交互中,有哪些需要在交互设计中需要注意的地方。笔者从输入、匹配、选择这三个方面进行分析。
输入
用户🌺输入时,需要🌳等待多少时间反馈?对自动完成而言,用户每输入一个字符就需要反馈。不过,如果用户输入速度很快,在输入几个字符给出反馈建议也是可以的,同时这里也需要考虑到性能问题。
匹配
如图2对于IBM的Note而言,用户输入的字符可以与联系人的名字或者电子邮件地址的任意部分匹配,突出显示匹配的联系人,同时也以粗体显示已输入的字符♛。这样可以清楚地告知用户选中的联系人以及所匹配的字符,进行拼写♊检查,防止出错。
同时支持键盘操作,上、下方向键可以用来选择匹配的项。
图2 Lotus Note v8.0
如图3在一些集成开发环境中,系统会从规定的参数中基于用户的输入提供一些匹配的关键字。在开发中使用这种设计模式,帮助程序员大大地提高效率。从认知上由系统给出提示减轻了记忆负担,而操作上程序员只需要选择不需要输入对应代码减少了操作,降低了出错的可能性。在集成开发环境中,系统会根据用户输入的值匹配标签中的任意部分进行提示。特别是标签的自动关闭,语法提示都是自动完成这一设计模式的体现,很好地提升了体验效果。
图3 Lot🀅us Note v8.0 IBM Rational Application Developer
图4 中这里说明普通的匹配列表如何做优化和引导。匹配列表也可以提供一些使用说明和额外的相关信息。
1. 在列表中用灰色字体提供了使用说明;
2. 在有些匹配项后提供了类型(computer science, blog)等,这样就更方便地进行精准搜索和信息归类;
3. 提供了网页搜索功能,在没有合适的匹配内容时,给予用户更大的搜索范围;
4. 给予用户控制,用户可以隐藏不符合预期的内容。
图4 IBM w3 portal
自动完成这个设计模式除了在简单的文本输入框中有应用还可以使用在其他环境中。图5说明了利用自动完成去指定对应的属性。一旦从列表中选择了属性,相对꧑应的值也同时会被设定。这里将属性与值配对在大型软件开发的协同工作中有特别的意义,保证了输出质量的统一和规范。设计和开发只需要去调用就可以,大大减少了沟通成本。
图5 IBM Fringe
图6自动完成与标签组合,很显然只会匹配那些以标签名开头的项。在一𒊎些企业内部的SNS应用,自动搜索这一个模式可以与很多Web 2.0的元素组合,提高设计体验。
图6 Lotus Connections
选择
在邮箱的自动匹配环境中,按Tab就可以把匹配的联系人输入到文本框中。因为邮箱中的TꦰAB键💖支持选定和改变焦点的作用。在普通的即时通讯软件中一般使用按Enter进行选中并直接打开对话框。如果是企业级的即时通讯软件建议支持Tab进行多人选择。
什么时候不用
1. 一些涉及到安全的应用最好不要使用“自动完成”,例如在输入用户名、密码或者其他敏感信息的时候;
2. 当存在大量的匹配的内容,但没有合理的依据去归类;
3. 系统不能基于用户的输入即时更新匹配的内容;
4. 自动选择不能用于有固定匹配项的场景,例如最好使用下拉列表而不是自动完成让用户选择洲名。
无障碍设计
1. 当页面进行刷新的时候,屏幕阅读器会重复阅读。所以在更新匹配项的时候页面不能进行刷新。
🧜2. 屏幕阅读器是按照从上到下的顺序阅读已载入的页面。因此在页面载入完成后,出现的匹配项需要通知屏幕阅读器,并且在页面的这一部分要给一个快速入口。
近期更新
- [2025-02-11 14:34:54] 加拿大预测网-在线预测:青岛高端网站定制化设计
- [2023-06-25 23:22:29] 加拿大预测网-在线预测:优秀网站设计的五大特点
- [2023-04-27 14:05:55] 加拿大预测网-在线预测:Html 5 响应式网站设计制作
- [2023-04-10 11:07:30] 加拿大预测网-在线预测: 网站建设制作流程知多少
- [2022-10-14 10:11:30] 加拿大预测网-在线预测:做网站设计应该更看重框架搭建还是视觉观感?
- [2022-08-09 15:57:48] 加拿大预测网-在线预测:以“产品”思维搭建网站!
- [2022-08-08 09:12:57] 加拿大预测网-在线预测:一家公司的网站应该有哪些板块内容?
- [2022-08-05 09:28:06] 加拿大预测网-在线预测:企业网站建设为什么要设置新闻板块?
- [2022-07-04 15:58:06] 加拿大预测网-在线预测:网站加拿大预测网-在线预测设计的好看,这个网站就成功了一大半!
- [2022-05-20 09:34:19] 加拿大预测网-在线预测:网站后台管理系统是什么?有什么作用?
- [2022-05-17 11:29:32] 加拿大预测网-在线预测:作为消费者,应该如何选择一家水平高的网站建设公司
- [2022-05-17 11:27:01] 加拿大预测网-在线预测:高端网站定制与模板化网站应该怎么选择?
延伸阅读
- [2010-03-18 08:41:00] 什么是交互设计
- [2009-07-07 08:01:00] 面包屑设计
- [2009-07-25 08:47:00] 加拿大预测网-在线预测:“反馈信息”的分类及交互设计原则(1/3)
- [2007-08-09 14:54:00] 加拿大预测网-在线预测:基于网络媒介的交互设计研究
- [2010-01-04 09:07:00] 加拿大预测网-在线预测:交互设计(4💝)&md🔥ash;“有效性”之“简洁清晰,自然易
- [2009-08-03 07:42:00] 加拿大预测网-在线预测:如何理解与规划设计师的职业生涯
- [2009-10-29 18:26:00] 加拿大预测网-在线预测:关于bing的交互设计
- [2009-11-04 22:35:00] 交互设计表格
- [2009-06-04 08:18:00] 加拿大预测网-在线预测:微软Bing交互设计与用户体验
- [2008-01-27 09:58:00] 加拿大预测网-在线预测:交互设计中的视觉引导
- [2009-10-21 08:10:00] 加拿大预测网-在线预测:设计师挖掘用户需求浅谈
- [2009-12-19 09:46:00] 加拿💜大预测网-在线预测ܫ:交互设计(2):“有效性”之“可及”
解决方案
加拿大预测网-在线预测: 轮胎行业网站设计解决方案 加拿大预测网-在线预测: 机械行业网站设计解决方案 加拿大预测网-在线预测: 房地产行业网站设计解决方案 加拿大预测网-在线预测: 科技企业网站设计解决方案 加拿大预测网-在线预测: 电子家电网站设计解决方案 加拿大预测网-在线预测: 食品行业网站设计解决方案 加拿大预测网-在线预测: 集团公司网站设计解决方案 加拿大预测网-在线预测: 企事业单位网站设计解决方案 加拿大预测网-在线预测: 外贸行业网站设计解决方案 加拿大预测网-在线预测: 健身运动网站设计解决方案 加拿大预测网-在线预测: 美容与化妆品网站设计解决方案 加拿大预测网-在线预测: 建筑设计行业网站设计解决方案 加拿大预测网-在线预测: 物流行业网站设计解决方案