向?qū)皆O(shè)計屬于交互設(shè)計的常識，包括步驟條設(shè)計，引導標簽等。本文從向?qū)皆O(shè)計的作用、使用場景、設(shè)計類型、需要注意的問題等，給你帶來全面的基礎(chǔ)科普。

一、向?qū)皆O(shè)計是什么？

軟件界面設(shè)計中的「向?qū)浇缑妗惯@個術(shù)語源自英語中的「Wizard」一詞。意思為「男巫、奇才」的意思；延伸意為「向?qū)А埂Ｏ驅(qū)?，顧名思義，就是能帶領(lǐng)或指引別人到達目的地的人。在實際使用中，這種交互方式的確像一個向?qū)б粯?，一步步地引領(lǐng)用戶向前，把復(fù)雜的任務(wù)進行拆解并有步驟地完成。

向?qū)皆O(shè)計也是流程設(shè)計的一種方式，這種方式通常目的性明確。在很多商業(yè)領(lǐng)域使用非常廣泛，比如購物，酒店預(yù)訂，銀行業(yè)務(wù)等等，尤其適合新用戶第一次體驗產(chǎn)品時使用，讓用戶對產(chǎn)品使用和任務(wù)快速上手，節(jié)約時間，提升效率。

二、向?qū)皆O(shè)計的主要作用

1. 引導新手操作

讓新用戶在最短的時間內(nèi)了解產(chǎn)品/任務(wù)，明白如何快速上手使用。

2. 縱觀信息全局

讓用戶操作時對整體流程可控，心里有底，可以提前預(yù)估操作/完成時間。

3. 簡化操作任務(wù)

對復(fù)雜任務(wù)進行拆解，提升用戶操作的效率，同時也降低出錯率。

4. 較少操作決策

固定任務(wù)操作路徑，節(jié)約用戶思考&做操作決策時間，快速完成任務(wù)。

三、向?qū)皆O(shè)計的使用場景

一般情況下，標準向?qū)Р襟E條的使用場景為：2-5 步比較合適。< 2 步，>10 步，使用是不合適的。因為 < 2 步?jīng)]必要；> 10 步太夸張，會嚇到用戶，本能認為你的產(chǎn)品使用過于繁瑣，拒絕嘗試和使用。

四、向?qū)皆O(shè)計的類型

手風琴向?qū)?/p>

標準向?qū)?/p>

橫向標準向?qū)?/p>

縱向標準向?qū)?/p>

彈框向?qū)?/p>

Tab 欄向?qū)?/p>

標簽向?qū)?/p>

五、向?qū)гO(shè)計類型案例場景分析

1. 手風琴向?qū)?/p>

手風琴向?qū)皆O(shè)計類型，一般適用于 2B 類后臺業(yè)務(wù)數(shù)據(jù)較多，任務(wù)指向性相對明確，流程基本固定。例如用戶幫助文檔以及 Q&A 的場景； PC 端頁面的注冊引導；電商網(wǎng)站的購物支付等流程。

手風琴向?qū)?，除了可滿足任務(wù)引導，步驟拆解，直觀展示等作用；更主要的是能對大量的數(shù)據(jù)信息進行收納整理，凸顯信息層級的清晰度，并在收納信息的同時節(jié)約頁面空間，讓頁面更有節(jié)奏和呼吸感。

2. 標準向?qū)?– 橫向向?qū)?/p>

橫向標準向?qū)б部梢苑Q為橫向步驟條，這樣表述大家比較容易理解。此類向?qū)皆O(shè)計是大家最常見的，也是最常規(guī)的一種橫向向?qū)У脑O(shè)計，主要作用是對復(fù)雜的任務(wù)進行拆解，按照固定順序明確步驟，讓用戶對即將要操作的任務(wù)時間和內(nèi)容有一個可控的心理預(yù)期。一般用戶可以一目了然總覽共有幾步，目前每個步驟的狀態(tài)（例如已完成/進行中/未開始），和自己當前的操作位置。

目前很多行業(yè)內(nèi)的組件庫對橫向步驟條的 UI 設(shè)計基本都采用以下表現(xiàn)形式（圖片來源 阿里巴巴 TXD-AISC 組件庫），只是在細節(jié)上有稍許的差異。

具體差異主要表現(xiàn)在狀態(tài)色彩的使用和上下圖文的布局中。例如阿里-螞蟻金服的 Ant Design 橫向步驟條的設(shè)計圖文布局為左圖右文，這樣設(shè)計的好處是，如果流程步驟相對較少時，文字也可作橫向指向的一部分，避免頁面太過空曠。同時 Ant Design 對步驟條的使用場景做了更多細分，除了簡單的步驟條，還有迷你版和帶圖標的步驟條。

除了上面標準的組件庫中常有的步驟條樣式，還有以下的常用樣式，例如電商類購物和支付的場景，除了對已完成的狀態(tài)進行確認顯示，色塊箭頭的設(shè)計，向?qū)е敢愿鼜姟?/p>

類似上一個案例的 UI 美化升級版，其實功能原理都是相通的。

除了上面相對比較簡單場景的步驟條，其實在 2B 業(yè)務(wù)中還有相對比較復(fù)雜的步驟條的設(shè)計，具體對應(yīng)的是復(fù)雜的業(yè)務(wù)場景，例如覆蓋多產(chǎn)品線參與，多角色審批，包含父子步驟審批的業(yè)務(wù)場景，簡單常規(guī)的標準向?qū)皆O(shè)計是不能夠滿足業(yè)務(wù)場景的，需要對簡化版的橫向向?qū)Ю^續(xù)深入拓展和優(yōu)化。