如何设计一个优秀的向导式界面（Wizard）

软件界面设计中的“向导式界面”这个术语翻译自英语中的“Wizard”一词。大部分字典上对于Wizard的解释是男巫、奇才的意思。不过从其用途来看，似乎向导的译法更加形象。向导，顾名思义，就是能带领或指引别人到达目的地的人。在实际使用中，这种交互方式的确就像一个向导一样，一步步地引领用户向前。在每一步中，它会询问用户一些简单的问题。最后，根据用户的输入信息，它将能够帮助用户完成一个复杂的任务。

从软件可用性的角度来看，向导式界面试图达到的可用性目标包括易学习性和易记忆性，这两个可用性目标在如下两个应用环境中显得尤为重要：

1．从用户特征来看，用户是新手，希望能快速上手使用；

2．从任务特征来看，任务有一定复杂度并且使用频率很低。由于具有这样的特点，用户很难将任务所需的操作全部记忆在头脑中，这就需要界面将这些操作全部呈现出来，以一种外部知识的方式提供给用户，从而减少用户的记忆负担。

具体来说，向导式界面最常见于三种应用环境中：

1．软件安装向导，它用来帮助用户完成安装软件的任务；

2．种是创建复杂的文档或对象，比如vs.net的向导可以帮助你很快地建立起一个C++或其它语言的项目工程，这其中已经包含了一个工程所必需的所有文件；

3．任务的各个步骤之间具有很大相关性，后面的步骤会根据用户在前面步骤中的不同输入而发生变化。

从应用平台看，起初向导式界面只是出现在桌面应用中。不过，随着Web应用的迅速发展，有越来越多的Web应用中的某些任务也采用了这种形式的交互方式，例如在进行新用户注册或完成网上购物的过程。

那么，如何才能设计出一个友好易用的向导式界面，以使其能更好地满足以上的可用性目标呢？下面将应用有关的可用性启发式原则，得出一些向导式界面设计的指导性准则。

一． 尽可能展示出用户当前在整个向导过程中的位置

具体来说，在进行界面设计时，要通过各种视觉手法来告诉用户，这个向导过程总共有哪些步骤、用户已经完成了多少步，以及还有多少步未完成等信息。这些要求其实是任何信息导航设计所要达到的一些基本目标。如果一个界面设计达到了这些目标，它就能使得用户具有一种对整体的把握感。当用户看到自己所完成的每一步所带来的进展以及他在整体上正在一步步地向成功接近时，他就会更加有信心并愉快地完成整个任务。

有两种方式可以用来向用户展示当前进度。第一种方式比较简单，即在每个步骤的页面上显示类似“第2步（总共7步）”，或 “Step 2 of 7” 格式的文字，如图1所示。

（图1，VC++ 中的MFC Application Wizard 界面中的第四步）

第二种方式是在每个步骤的页面上的固定位置显示一个所有步骤名称的列表，并且用一种醒目的方式显示出当前所处的步骤。这种方式不仅可以让用户看到当前的进度，而且还能看到接下来的那些步骤的名称，如图2所示。在这个例子中，用户当前是在“Database Support”步骤中，后面还有三个步骤有待进行：“User Interface Features”，“Advanced Features”以及“Generated Classes”。

（图2，vs.net 2005 中MFC Application Wizard的界面）

二． 向导式界面的步骤个数以及每个步骤上的信息量的设置

现在假设，向导式界面需要从用户那里收集10项信息以便完成一个任务。那么，应该设置多少步骤以及如何将这10项信息分配到那些步骤上呢？

这里有三个因素在设计时需要加以考虑。

2．1 在每个步骤中，界面要求用户输入的所有信息项应该具有高度内聚性，即从逻辑上来说，这些信息项之间是高度相关的，或者说是一个整体。比如说在新会员注册的向导中，有某一步是要求用户提供家庭住址的。在这里，家庭住址所包含的国家名称、城市名称、街道以及邮编等信息从逻辑上来说构成了家庭住址这个完整的信息单元，因而它们被放在一个步骤中是合适的，尽管从物理设计层面来看，这个步骤的界面中包含了多个输入控件，比如单行文本框、下拉列表等等。另一方面，在很多情况下，每个步骤中实际上就只有一个控件，比如只有一个单行文本框或一组单选按钮，这些物理上的单一界面元素自然也就满足了逻辑上的内聚性要求。

2．2 向导式界面的操作过程是一个完全由计算机控制的交互过程，用户所能做的只能是被动地根据计算机给出的要求来提供一些简单的信息或做出选择，而无法根据自己的意愿来对所要操作的对象或要完成的任务进行随心所欲的操控。这样，过长的向导步骤个数会令用户感到受到了极大的约束，同时他们也会感到任务过于繁琐和困难。这样的设计结果就违背了采用向导式界面方式的初衷。

有关于步骤的恰当个数并没有一个严格的量化准则，不过一般的指导性建议是不要超过10个，正如《Designing Effective Wizards: A Multidisciplinary Approach》一书中所建议的。另外，无独有偶，在Vs.net 2003中有一个工具是专门用来帮助程序员制做向导式界面的，该工具所允许的最大的步骤则是8个，如图3所示。

（图3，Vs.net 2003 中的制做向导软件的工具界面）

为了得到特定于你的应用中所需的向导式界面所能允许的步骤个数，最可靠的方法还是进行可用性测试，以便发现在超过多少步骤后用户就难以忍受了。

2．3不难看出，向导式界面所要收集的信息总量也对向导个数及每步中的信息量有很大影响。显然，为了保证步骤个数不会太多并且每个步骤内的信息高度内聚，信息总量是有个上限的。这意味这不能试图在向导式界面中要求用户提供太多的信息，而应当只要求用户提供完成任务所必须的基本信息。那些高级设置应当通过其它类型的界面来完成。

三． 避免显示无用的图片

有很多的向导式界面会在其每个步骤的画面中的某个位置，比如左侧或右侧，显示一副图片，如图4所示。这种设计的问题在很多其它类型的界面设计中也都存在，那就是，界面设计中的图形设计不是为了表达某种信息，而纯粹是为了修饰的目的。软件就其本质来说是一种工具，而不是挂在墙上的艺术品；用户购买软件是为了使用它，而不是像看风景一样地欣赏它。由于这样的原因，在发生冲突时，软件的功能性和可用性的优先级应当高于美观方面的考虑。在向导式界面的设计中，通常情况下每个步骤的画面都是一个不太大的窗口，很少会有窗口大小是全屏或接近全屏的向导式界面。这就意味着在每个步骤中，软件所能利用的屏幕空间是很有限的。在这种情况下，将宝贵的空间用于一副不能向用户传达任何有效信息的图片就是在浪费了。这样的图片所占据的空间完全可以用来显示其它一些更有意义的信息，比如上文提到的用于展示当前进度的所有步骤的名称列表，或者，它也可以如下文将要提到的那样，根据用户在当前步骤中的选择，以一种可视化的方式显示做出这个选择后的效果。

（图4，Windows XP中添加新用户时的向导式界面，注意其左侧毫无意义的那幅图片）

四． 在向导结束前，将用户的输入以某种方式显示给用户以便确认，并且越及时越好

这一准则应用了反馈原理。该原理指出，任何同人进行交互的系统，都需要将其内部状态以某种方式表现出来，尤其是要对用户的输入动作进行反馈，只有这样，用户才能知道系统是否检测到并接受了自己的输入，以及自己的输入是否正确，这样用户才能进行相应的后续操作，比如调整自己的输入或改正错误。缺乏反馈的系统会让用户感觉茫然和焦虑。以网上银行的交电话费功能为例，在系统的提示下，你输入了自己的电话号码，此时如果系统没有任何反馈就直接从你的帐户里扣掉一笔金额，你还还敢用这样的系统码？万一在输入电话号码按错了按键，岂不是帮别人交了钱？幸好，网上银行系统考虑到了这一点，在你输入完号码后，系统会首先把你的输入的号码念一遍，然后再念出要缴费的金额，最后才让你按某个键来确认缴费。

软件中的向导式界面有着和网上银行类似的对于反馈的需求。它必须以某种方式显示出用户都做了哪些输入和选择，这样用户才能放心地让向导完成任务，并且在按下最终的确认按钮之前对于任务完成之后的情况明明白白。这就是为什么大多数向导式界面的最后一个步骤都是将用户在前面的步骤中输入的内容以明细表的形式显示出来，以便用户根据它来进行确认。因此，提供一个总结页面（Summary）是对向导式界面的一个基本要求。

在此基础上，如果有可能，在向导中的每一步都应当根据用户的输入，在界面上的某个区域显示出用户输入所将产生的结果，从而能让用户更加及时地看到将来的结果并立刻进行调整，而不是等到了最后一步发现错误时，不得不一直按“上一步”按钮倒退到所要修改的那一步。当每一步所产生的结果能构以一种可视化方式表现时，这种及时反馈的策略就显得更为必要和可行了。

以图1中的MFC Application Wizard的第四步为例，这一步要求用户设置将要生成的项目的界面风格，例如是否有工具条、是否有状态条、控件是否具有三维立体效果等等。该步骤左侧的图片是一个对于将要生成的界面风格的预览区域，其样式将根据用户的选择实时变化。例如，如果用户选择了“Docking toolbar”项，则工具条就会显示出来。显然，这样的及时反馈策略能够让用户对于每一步操作都胸有成竹，信心百倍。

总结

向导式界面是一种着眼于帮助人们处理复杂任务或不常见任务的交互策略。为了更有效地达到上述目标，我们需要对其中的很多交互细节加以认真处理。本文从一些可用性原理及交互设计原理的角度出发，考查了一些在设计向导式界面时应注意的问题，它们将有助于你设计出一个更加友好和易用的向导式界面。