设计模式-自动完成

  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 

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

图5 IBM Fringe

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

图6 Lotus Connections

 
选择
  在邮箱的自动匹配环境中,按Tab就可以把匹配的联系人输入到文本框中。因为邮箱中的TAB键支持选定和改变焦点的作用。在普通的即时通讯软件中一般使用按Enter进行选中并直接打开对话框。如果是企业级的即时通讯软件建议支持Tab进行多人选择。

 
什么时候不用
1. 一些涉及到安全的应用最好不要使用“自动完成”,例如在输入用户名、密码或者其他敏感信息的时候;
2. 当存在大量的匹配的内容,但没有合理的依据去归类;
3. 系统不能基于用户的输入即时更新匹配的内容;
4. 自动选择不能用于有固定匹配项的场景,例如最好使用下拉列表而不是自动完成让用户选择洲名。

  
无障碍设计
1. 当页面进行刷新的时候,屏幕阅读器会重复阅读。所以在更新匹配项的时候页面不能进行刷新。
2. 屏幕阅读器是按照从上到下的顺序阅读已载入的页面。因此在页面载入完成后,出现的匹配项需要通知屏幕阅读器,并且在页面的这一部分要给一个快速入口。

  
参考文献
1. http://www.useit.com/papers/heuristic/heuristic_list.html
2. Bill Scott , Tberesa Neil 李松峰译.Web界面设计[M].北京:电子工业出版社,2009:253-254.
3. Robert Hoekman, Jr 向怡宁译.瞬间之美[M].人民邮电出版社,2009:72.

时间: 2024-11-03 07:03:30

设计模式-自动完成的相关文章

JAVA进阶之旅(一)——增强for循环,基本数据类型的自动拆箱与装箱,享元设计模式,枚举的概述,枚举的应用,枚举的构造方法,枚举的抽象方法

JAVA进阶之旅(一)--增强for循环,基本数据类型的自动拆箱与装箱,享元设计模式,枚举的概述,枚举的应用,枚举的构造方法,枚举的抽象方法 学完我们的java之旅,其实收获还是很多的,但是依然还有很多的知识点需要我们的突破,所以写下这个java进阶之旅的系列,这个系列不会说的那么的基础,主要是对一些高级点的功能进行剖析,所以,一起来看看吧! 一.增强for循环 for循环在我们的开发中是非常非常的多的,但是有多少人会用增强for循环?其实还是有很多人会用哈,但是还是有很多人一知半解,我们来看一

自动装箱与拆箱引发的享元设计模式

/** * 自动装箱与拆箱 */ public class Autoboxing { public static void main(String[] args) { Integer num1 = 20; //自动装箱 int num2 = new Integer(20); //自动拆箱 System.out.println(num2 == num1); //true //-128~127之间的同一个Intege对象相比为true Integer num3 = 128; Integer num4

关于23种设计模式的有趣见解(转载)

好东西不得不转 在网上看见了这篇文章,作者以轻松的语言比喻了java的32种模式,有很好的启发作用. 创建型模式 1.FACTORY-追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说"来四个鸡翅"就行了.麦当劳和肯德基就是生产鸡翅的Factory 工厂模式:客户类和工厂类分开.消费者任何时候需要某种产品,只需向工厂请求即可.消费者无须修改就可以接纳新产品.缺点是当产品修改时,工厂类也要做相应的修改.如:

你真的了解iOS代理设计模式吗?

本文是投稿文章,作者:刘小壮 在项目中我们经常会用到代理的设计模式,这是iOS中一种消息传递的方式,也可以通过这种方式来传递一些参数.这篇文章会涵盖代理的使用技巧和原理,以及代理的内存管理等方面的知识.我会通过这些方面的知识,带大家真正领略代理的奥妙.写的有点多,但都是干货,我能写下去,不知道你有没有耐心看下去.本人能力有限,如果文章中有什么问题或没有讲到的点,请帮忙指出,十分感谢! iOS中消息传递方式 在iOS中有很多种消息传递方式,这里先简单介绍一下各种消息传递方式. 通知:在iOS中由通

设计模式之设计原则

之前在做 .Net的时候就买了<Head First 设计模式>,也看了一下,由于看的也不深入,理解上不是太深,特别是没有动手敲一下,最近闲的蛋蛋疼,也想着跳槽,但觉得要沉住气,耐得住寂寞,不能跳槽太频繁,这样对职业生涯不好,所以趁着没事做,就试着把它再看一遍,书读百遍,其意自现嘛.当时在学校学软件工程课程时也讲过设计的基本原则,不过当时主要是理论也没实践过,回过头再温习一下,理解的可能会更深,温故知新嘛. 首先是软件设计的基本原则,这也是设计模式的目标: 单一职责原则(SRP),就一个类而言

提高移动电子商务销售的交互设计模式

译者注:2012年,各大电商巨头以及品牌商的移动终端订单量都呈现出迅猛增长的态势.人人已经看见,移动电商已经来了.那么设计优良的移动购物体验必将能争夺更多的用户,提升销售额.本文较为全面的介绍了移动购物流程中各环节的交互设计模式,供大家参考学习. 原文地址:http://uxdesign.smashingmagazine.com/2012/12/19/boost-your-mobile-e-commerce-sales-with-mobile-design-patterns/ 现在越来越多的人使

理解jsp模式2架构:MVC设计模式探险

js|架构|设计 摘要:通过开发一个熟悉的基于web的购物店,你将学到如何工具化mvc设计模式并且真正地在使用jsp的时候分离内容和表现.Govind Seshadri 会向你展示这是多么的容易(2000字(原文字数)). 尽管相对抛开最近的相关介绍而言,jsp技术正在很好地以自己的方式成为卓越的创建提供动态web内容的应用程序的java技术.java开发者因为许多不同的理由喜爱jsp.一些人喜欢它给交互式web页面带来了"一次编写,到处运行"的变化这个事实:另一些人欣赏它易学易用并且

在Java中应用设计模式--Factory Method

设计 在设计模式中,Factory Method也是比较简单的一个,但应用非常广泛,EJB,RMI,COM,CORBA,Swing中都可以看到此模式的影子,它是最重要的模式之一.在很多地方我们都会看到xxxFactory这样命名的类,那么,什么是Factory Method,为什么要用这个模式,如何用Java语言来实现该模式,这就是本文想要带给大家的内容. 基本概念 Factory Method是一种创建性模式,它定义了一个创建对象的接口,但是却让子类来决定具体实例化哪一个类.当一个类无法预料要

在Java中应用设计模式--Singleton

设计 本文介绍了设计模式中 Singleton 的基本概念,对其功能和用途进行了简单的分析,列出了通常实现 Singleton 的几种方法,并给出了详细的Java 代码. 基本概念 Singleton 是一种创建性模型,它用来确保只产生一个实例,并提供一个访问它的全局访问点.对一些类来说,保证只有一个实例是很重要的,比如有的时候,数据库连接或 Socket 连接要受到一定的限制,必须保持同一时间只能有一个连接的存在.再举个例子,集合中的 set 中不能包含重复的元素,添加到set里的对象必须是唯