设计模式-自动完成
作者：Hong 来源：腾讯CDC 发布时间：2010-11-30 21:44:00
Jabob Nielsen提出的10个可用性原则中有一个原则-防止出错（Error Prevention）。官网中有对这一原则的具体解释，这里不再复述。笔者认为还有一个防止出错的方法就是让用户选择而不是输入。在这里用户不需要思考如何输入，输入是否正确，这里以常见的“自动完成”来谈一下这个设计模式在当下的应用。
自动完成是一种属于反应性界面的强大模式。典型的模式是随着用户在文本框的输入，显示一个包含匹配项的下拉列表。理想情况下，应该自动选择最佳的匹配项。此时，用户只需要接受匹配项或者从列表选择其他项。
典型应用：邮箱，即时通信软件
图1 Sametime 7.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. 给予用户控制，用户可以隐藏不符合预期的内容。
图4 IBM w3 portal
0
投稿猜你喜欢
- ActiveServerPages,ASP0126(0x80004005)-->找不到包含文件MicrosoftOLEDBProvid
- 数据库开发数据库应用，选择一个好的数据库是非常重要的。下面从一些方面比较了SQL Server与Oracle、DB2三种数据库，为你选择数据
相信各位网页爱好者都对网页的loading很感兴趣吧!,想不想知道如何做一个:)现在给大家介绍一下一种loading的制作..效果图:loa- 首先要把php_iconv.dll和inconv.dll COPY到c:\winnt\system32下，直接上代码：<?define
- 1.如何将Query String传送到另一个ASP文件去？Response.Redirect("second.asp?
- 在一些网页应用中，就比如在投票系统中，当我们进行的是多项投票时，我们要求用户最多只能选择几项进行投票，这也是就是说选择复选框的个数最多几个.
- 【原文地址】Tip/Trick: Url Rewriting with ASP.NET 【原文发表日期】 Monday, February
- function getBytesLength(str){ var re=/[\x00-\xf
- 近来在做数据库设计，有时候真弄不清SQL2000里的数据类型，所以摘了这篇文章。 (1)char、varchar、text和nchar、nv
- 首先忠心感谢凌宇5942给我的帮助！在他的启迪下我发现了另一种实现flash透明背景的办法，愿与大家共同探讨：凌宇5942告知的解决办法：在
- 本来在网上有不少关于这方面的文章，可是我找了好久也没看到把（可能我的搜索水平有线把）不过倒是聊天室的很多。如何统计会员再线状态，希望对刚开始
- 判断某一个表的记录总数，对于一个开发者来说是最再常见不过的事，我想大家都常用的作法就是:以下为引用的内容：select count(*) f
- 问：SQL Server应该怎样访问Sybase数据库的表？答：具体方法如下：1: 安装Sybase客户端版本的要求:Sybase Clie
- 一种很常见的写法： document.write('<scr'+'ipt src=&quo
- MySQL服务器有几个影响其操作的参数（变量）。如果缺省的参数值不合适，可以将其修改为对服务器运行环境更合适的值。例如，如果您有大量的内存，
- 本文详细解说了MySQL Order By Rand()效率优化的方案，并给出了优化的思路过程，是篇不可多得的MySQL Order By
- 问：如何自己制作验证码的head.fix和body.fix文件答：1 图象绘制完成后，将文件存为24位位图格式的BMP图象文件。 2 去除前
- 目的: 从数据库读取二进制位图图形数据资料, 透过 ImageMagickObject 组件即时制作缩略图,并显示在网页上 (ge
- 如何做一个树状展开视图来显示自己的记录结构？在SQL中，如何做一个可收起和展开树状结构图？就是资源管理器左栏的那种效果。这要用到Data s
- 在document.form1.submit();后加document.body.innerHtml = "W
