原文：Medium点击这里
作者：Nick Babich
标注：2017.04.07 - 6 min read
译者：Lisa - lisapeng1996@gmail.com 侵删

向导设计模式

作者： Nick Babich

今天我想谈谈关于向导（wizard）的话题，我指的不是那些用帽子和拥有神奇法术的巫师（wizard）。我指的是我们在app或网站中用来指导用户进行混序渐进的过程。

你应该使用向导吗？向导不只是糟糕界面的修补途径吗？在本文中，你将会找到这些问题的答案。

什么是向导？

向导提供了一系列步骤或条件，用户需要完成这些以完成目标（例如使用产品）。这种模式首先在物理世界中引入（一篇著名的论文快速入门指南，它会明确的告诉你将所有的装置放在一起），不久之前以数字形式（例如软件安装向导）引入。

安装向导曾在传统桌面软件应用和新的硬件安装上被使用。该模式在Windows 95流行起来。

该模式有以下好处：

简化任务

通过将一个复杂的任务分解成一系列块，你可以有效地简化任务。

分治法

如前所述，这种任务的一个常见例子是软件安装。在安装向导变得普遍之前，用户必须自己拷贝文件，编辑配置文件，设置控制目录，并检查软件是否正常运行。安装向导将这种一系列复杂的条件转化为可理解的步骤。使用向导的结果是明确的 - 它减少了支持和培训成本。

减轻用户做决策的负担

当用户缺乏必要的专业知识时，向导变得尤其便捷。完成任务变得更加容易：用户可以按照预先计划的循序渐进的步骤来完成他的目标： “不要让我思考，只要告诉我下一步该做什么。

何时考虑向导

向导可以在以下情况有作用：

用户想完成一个有很多步骤的目标时

你正在为一个长或复杂的任务设计一个UI界面， 并且它不能被简化 。使用向导可以减少任务的看似复杂性，同时提供前进感。

用户必须在一个具体的顺序中完成步骤时

在这种情况下，向导可以通过降低学习曲线来支持执行任务的用户。当用户被迫遵循任务顺序时，用户不太可能会错过重要的事情，从而可以减少错误。

Facebook有效地使用向导来安装应用程序。向导会确保按照适当的顺序执行所有必需的步骤。

何时向导不起作用

使用这种模式要十分小心。将任务分解成更小的步骤并不总是提供更好的用户体验：

当任务本身并不复杂时

向导的需要表明一个任务可能太复杂了。如果你可以简化一个任务，通过一个简单的形式或几个按钮的点击可以做到这一点，那么这是一个更好的解决方案。

当用户很资深时

即使是处理复杂问题，向导也不总是创建最佳UI设计解决方案的笨蛋答案。标准用户通常会发现向导很令人沮丧，很受限制（因为向导不会向用户显示他们的行为真正在做什么，或者应用程序状态如何随着选择而改变）。当向导尝试“帮助”那些用户已知道怎么做的事情时，这是现象很常见。对于支持创意过程（如艺术或编码）的软件，这种现象尤为常见。

小技巧： ******允许用户选择他们想完成任务的方式。

Dropbox安装界面为专家提供了一些自由选项。

当你想要教学时

不要使用向导来提出一个概念。用户在使用向导时不会阅读补充文本。他们非常专注于完成他们的工作。

向导的最佳实践

在设计你的下一个向导时，你还可以采取以下几项好办法来确保其有效性：

使步骤的数量最小

设计这种UI的难点在于块的大小和数量之间的平衡 。有一个两步骤的向导是愚蠢的，一个10步的向导似乎是难以承受的或乏味的。理想情况下，该过程应该有3-5个步骤。将你的向导通过可用性测试将有助于确保屏幕数量是可以接受的。

使向导的目的明确

在每个步骤中，用户需要明确了解向导的问题。向导应为用户提供足够的信息来做出决定并采取行动。如果不清楚，用户会被卡住。要清楚你的向导的目的，有两件事情是必不可少的：

• 每个屏幕上都要有一个清晰简洁的向导标签
• 在第一个屏幕上简要说明目的。

**反面教材：** Homesite家庭保险在第一屏幕上没有提供目的说明。如果用户直接从不同的网站进入该页面，那么他们可能难以理解这个向导将帮助他们完成的任务是什么。图片来源：ibm

去除掉不必要的界面元素

用户在完成任务时不需要的其他链接和内容可能会分散用户的注意力。通过删除它们，你可以帮助用户专注于任务，并提高成功完成任务的可能性。

明确显示用户在进程的进度
你需要清楚地标记向导的边界，以便用户知道何时完成。为了使向导方便用户，你应该体现以下几个功能：

• 编号步骤
• 显示运动的方向（通常是从左到右或从上到下）
• 区分当前步骤，以及剩下的步骤。
• 包含显示成功完成步骤的指标
• 用结果作为最后的显示信息

**反面教材：**每一步都是一个不显示任何上下文的孤立的UI空间——用户无法看到之前发生的事情或接下来的事情。

**正确教材：**在步骤标题上有清晰的步骤数目。此外，UI显示了模式顶部所有步骤的概述。原始图片来源： [Raj Shrestha](https://dribbble.com/rsthdn)

选择好的默认值

无论你如何安排步骤，良好的默认值都是有用的。但是，如果用户愿意将过程的控制权交给您，愿意让你选择合理的默认选项，例如软件安装的位置，那么默认值是有用的。

提供“取消”按钮

有时候用户进入向导，出于各种原因决定不完成。为了避免正在寻找出炉的用户感到沮丧，请在向导界面中添加一个“取消”按钮。

允许每个步骤撤消

为用户提供一种返回的方式，或以其他方式改变选择。如果用户可以重新运行该步骤并修改以前输入的数据，则用户将受益。当他们无法回到上一步来修改他们输入的内容（即使这是一个微小的改变），用户也经常重新运行整个向导。

**不要**禁用或隐藏“返回”按钮

提供选择的摘要

在向导结尾附近向用户提供整个向导中的选择摘要。这将允许用户在单击最终“完成”按钮之前查看并仔细检查输入的数据。

结论

虽然向导对局外人看起来简单，但设计师和开发人员知道真相： 设计一个好的向导真的很难 。有很多规划，尝试和错误设计，以及进行向导创建的复杂开发。希望上面列出的最佳做法将有助于您开始开发您的向导艺术。
谢谢！