导游式设计属于交互设计的常识，包括步骤条设计，引导标签等。本文从导游式设计的作用、运用场景、设计类型、需求留意的问题等，给你带来全面的根底科普。

一、导游式设计是什么？

软件界面设计中的「导游式界面」这个术语源自英语中的「Wizard」一词。意义为「男巫、奇才」的意义；延伸意为「导游」。导游，望文生义，就是能率领或指引他人抵达目的地的人。在实践运用中，这种交互方式确实像一个导游一样，一步步地引领用户向前，把复杂的任务停止拆解并有步骤地完成。

导游式设计也是流程设计的一种方式，这种方式通常目的性明白。在很多商业范畴运用十分普遍，比方购物，酒店预订，银行业务等等，特别合适新用户第一次体验产品时运用，让用户对产品运用和任务快速上手，节约时间，提升效率。

二、导游式设计的主要作用

1. 引导新手操作

让新用户在最短的时间内理解产品/任务，明白如何快速上手运用。

2. 纵观信息全局

让用户操作时对整体流程可控，心里有底，能够提早预估操作/完成时间。

3. 简化操作任务

对复杂任务停止拆解，提升用户操作的效率，同时也降低出错率。

4. 较少操作决策

固定任务操作途径，节约用户考虑&做操作决策时间，快速完成任务。

三、导游式设计的运用场景

普通状况下，规范导游步骤条的运用场景为：2-5 步比拟适宜。< 2 步，>10 步，运用是不适宜的。由于 < 2 步没必要；> 10 步太夸大，会吓到用户，本能以为你的产品运用过于繁琐，回绝尝试和运用。

四、导游式设计的类型

手风琴导游

规范导游

横向规范导游

纵向规范导游

弹框导游

Tab 栏导游

标签导游

五、导游设计类型案例场景剖析

1. 手风琴导游

手风琴导游式设计类型，普通适用于 2B 类后台业务数据较多，任务指向性相对明白，流程根本固定。例如用户协助文档以及 Q&A 的场景； PC 端页面的注册引导；电商网站的购物支付等流程。

手风琴导游，除了可满足任务引导，步骤拆解，直观展现等作用；更主要的是能对大量的数据信息停止收纳整理，凸显信息层级的明晰度，并在收纳信息的同时节约页面空间，让页面更有节拍和呼吸感。

2. 规范导游 – 横向导游

横向规范导游也能够称为横向步骤条，这样表述大家比拟容易了解。此类导游式设计是大家最常见的，也是最常规的一种横向导游的设计，主要作用是对复杂的任务停止拆解，依照固定次第明白步骤，让用户对行将要操作的任务时间和内容有一个可控的心理预期。普通用户能够了如指掌总览共有几步，目前每个步骤的状态（例如已完成/停止中/未开端），和本人当前的操作位置。

目前很多行业内的组件库对横向步骤条的 UI 设计根本都采用以下表现方式（图片来源 阿里巴巴 TXD-AISC 组件库），只是在细节上有稍许的差别。

详细差别主要表如今状态颜色的运用和上下图文的规划中。例如阿里-蚂蚁金服的 Ant Design 横向步骤条的设计图文规划为左图右文，这样设计的益处是，假如流程步骤相对较少时，文字也可作横向指向的一局部，防止页面太过空阔。同时 Ant Design 对步骤条的运用场景做了更多细分，除了简单的步骤条，还有迷你版和带图标的步骤条。

除了上面规范的组件库中常有的步骤条款式，还有以下的常用款式，例如电商类购物和支付的场景，除了对已完成的状态停止确认显现，色块箭头的设计，导游指引性更强。

相似上一个案例的 UI 美化晋级版，其实功用原理都是相通的。

除了上面相比照较简单场景的步骤条，其真实 2B 业务中还有相比照较复杂的步骤条的设计，详细对应的是复杂的业务场景，例如掩盖多产品线参与，多角色审批，包含父子步骤审批的业务场景，简单常规的规范导游式设计是不可以满足业务场景的，需求对简化版的横向导游继续深化拓展和优化。