如何设计一个优秀的向导式界面（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项信息分配到那些步骤上呢？
这里有三个因素在设计时需要加以考虑。
在每个步骤中，界面要求用户输入的所有信息项应该具有高度内聚性，即从逻辑上来说，这些信息项之间是高度相关的，或者说是一个整体。比如说在新会员注册的向导中，有某一步是要求用户提供家庭住址的。在这里，家庭住址所包含的国家名称、城市名称、街道以及邮编等信息从逻辑上来说构成了家庭住址这个完整的信息单元，因而它们被放在一个步骤中是合适的，尽管从物理设计层面来看，这个步骤的界面中包含了多个输入控件，比如单行文本框、下拉列表等等。另一方面，在很多情况下，每个步骤中实际上就只有一个控件，比如只有一个单行文本框或一组单选按钮，这些物理上的单一界面元素自然也就满足了逻辑上的内聚性要求。
向导式界面的操作过程是一个完全由计算机控制的交互过程，用户所能做的只能是被动地根据计算机给出的要求来提供一些简单的信息或做出选择，而无法根据自己的意愿来对所要操作的对象或要完成的任务进行随心所欲的操控。这样，过长的向导步骤个数会令用户感到受到了极大的约束，同时他们也会感到任务过于繁琐和困难。这样的设计结果就违背了采用向导式界面方式的初衷。
有关于步骤的恰当个数并没有一个严格的量化准则，不过一般的指导性建议是不要超过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”项，则工具条就会显示出来。显然，这样的及时反馈策略能够让用户对于每一步操作都胸有成竹，信心百倍。
向导式界面是一种着眼于帮助人们处理复杂任务或不常见任务的交互策略。为了更有效地达到上述目标，我们需要对其中的很多交互细节加以认真处理。本文从一些可用性原理及交互设计原理的角度出发，考查了一些在设计向导式界面时应注意的问题，它们将有助于你设计出一个更加友好和易用的向导式界面。
如果你对这篇文章感兴趣，那么你很可能也对我的其它文章感兴趣，点击这里可以看到我的所有文章：&&
如果您想对某个产品或服务在可用性和人机交互设计方面进行改进，或者是需要对其进行更为专业的可用性研究和评论，您可以通过以下的电子邮件地址及
MSN 和我联系：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。技术文档（105）
作者：候佩雯
链接：/question/
完整的流程，分层次设计，自下而上去完成：
策略层，定义产品使命、价值、目标人群愿景/功能层：定义核心场景、功能列表结构层：做流程图、信息架构，确定主导航、主菜单框架层：梳理每一个主界面的内容、布局表现层：视觉设计，涉及图标、配色、切图。
产品经理主要关注1~2，在去找设计师之前，请先问自己以下几个问题，以保证需求明确：
产品给用户带来的价值是什么？竞品有什么？我们做这个有什么优势？为什么样的用户而做？用户会在什么样的场景下使用这个产品？要完成这个产品，最大的瓶颈是什么？是技术攻关？体验出彩？还是运营资源？
交互设计师主要关注3~4，在交付方案之前请先不断问自己以下几个问题，以保证体验质量：
该界面要求用户完成的最重要的任务是什么？这是最简单的解决方案吗？信息是否组织得当？设计是否易用且一目了然？标准是否一致？能否减少用户点击次数？
视觉设计师主要关注5，在与产品经理PK之前请先不断问自己以下几个问题，以保证减少返工：
界面上需要突出的重点是什么？是否进行了有效的突出？界面上一共有几个层级，是否用清晰的视觉语言予以展现？同样层级、同样性质的元素是否用了一致的设计语言？主色调、材质，是否符合整体品牌感？细节有无丢失？按钮点击态、反馈、缺省状态、字数超出、加载中、未加载态、加载失败态，是否都提供了？
另外，合作不易，三个角色分别需要注意的问题：
对于产品经理：
APP的设计，不要只看竞争对手确定自己的定位，不要“因为竞品A和B没有做到，所以我们要做比A和B更牛B的XX功能”，而是要以用户为导向，思考自己为客户提供的价值。在向其他人描述你的想法时，请用这样的句式来描述和思考：XXX这一类型的人在XXX的时候、XXX的环境下，想要做XXX事情，遇到了XXX问题。而我们这个APP能够通过XXXX方式巧妙的帮助他解决了这个问题。不要直接拿线框图给交互设计师看，直接描述你的需求即可，描述清楚。让设计师知道你的目标是什么，接下来让交互去画原型，让更专业的人做专业的事。不要太纠缠视觉，对于一些无关紧要的细节，该放手就放手，尽量减少提出主观意见。别太迷信用户反馈，能提反馈的，大部分都是粉丝、深度用户、高级用户，他们代表不了全部用户的心声。让开发主管去评估工作量，如果对某一部分工作量的评估觉得时间太长，就把它拆分成子任务。每周对一到两次开发成果，别频繁的去打扰人家。bug不断发现，不断修复，发现/修复率小于1，才开始变得可控了，才能确定bug的具体规模并精准预测发布日期少做少错，新版本尽量别加太多锦上添花的功能，满足最核心的就行了。
对于交互设计师：
不要一提商业化就头疼，谁不想做一个干干净净没广告的APP ? 别老想着高大上，目标最重要。通过你的设计，让用户消无声息的贡献点击，让商业化变得人性化，这才是你的本事。别太窝囊，别产品说怎么改，就怎么改，要跟他争，把自己当成产品的owner，产品的数据、规划，你全都要知道，这样信息对等了，才有话语权，才能有机会站在用户角度提供人性化的设计建议，否则只能是个画线框图的。
对于视觉设计师：
简洁不等于好（在业界大谈特谈简约至上的风气下，一定有人对这句有疑问，不细解释，请自行先翻一下诺曼的《如何管理复杂》这本书）。符合用户的心智模型，让人一目了然，才是好。别做一大堆方案，ABC方案抛出去让人选，这样累不累？自己先判断哪一个方案最好，把它做到自己满意、可行、拿得出手，就行了，不要沦为美工。给开发的视觉稿，先自己想一下，布局如何实现，不同屏幕尺寸如何适配。如果有动画效果，别天马行空的描述，能做出动画示意最好，做不出来，也找一个靠谱的示意。别让开发gg太上火。
最后，90%的问题本质上都是沟通问题！90%的争论本质上都是名词之争！
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：68412次
积分：1967
积分：1967
排名：千里之外
原创：117篇
转载：103篇
(4)(3)(9)(14)(5)(4)(11)(12)(9)(2)(9)(7)(4)(7)(8)(7)(11)(15)(15)(10)(6)(4)(2)(5)(3)(5)(3)(6)(2)(6)(2)(10)一个 App 的界面设计流程是怎么产生的？ - 知乎2043被浏览102375分享邀请回答1添加评论分享收藏感谢收起神仙道的界面是怎么样的一个设计流程？ - 知乎146被浏览9616分享邀请回答该回答已被折叠 15 条评论分享收藏感谢收起}