如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
向導式設計屬于交互設計的常識，包括步驟條設計，引導標簽等。本文從向導式設計的作用、使用場景、設計類型、需要注意的問題等，給你帶來全面的基礎科普。一、向導式設計是什么？
軟件界面設計中的「向導式界面」這個術語源自英語中的「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 業務中還有相對比較復雜的步驟條的設計，具體對應的是復雜的業務場景，例如覆蓋多產品線參與，多角色審批，包含父子步驟審批的業務場景，簡單常規的標準向導式設計是不能夠滿足業務場景的，需要對簡化版的橫向向導繼續深入拓展和優化。
上面兩種普通常見的橫向向導式步驟條，業務場景相對更偏向 2B 中后臺，風格相對保守和嚴謹。其實網上還有很多設計感和趣味性較強的步驟條設計，UI 風格創意十足，但原理都是相通的，具體 UI 樣式詳解就不再贅述。可參考作者的設計板。整體資料 UI 風格如下：
3. 標準向導 – 縱向向導
縱向標準向導也可稱為縱向步驟條向導，主要使用場景為內容數據較多，需要分頁/板塊展現的場景，B端業務使用的場景較多；縱向向導設計陳列在左側的目的也為了能對大量數據進行快速篩選和定位，同時此類數據之間無需進行對比查看，如下圖：
4. 彈出框向導
彈出框向導設計主要使用的場景為注冊頁/登錄頁/輕量任務操作頁，都在彈出框內，步驟較少，能夠快速完成。如下圖：
5. Tab 欄向導
Tab 欄向導其實是Tab欄+步驟條元素，組建成的一個新的橫向向導模式，它的主要使用場景相對來說比較靈活，可以用在登錄和注冊頁等輕量頁面場景中，也可用在有固定任務流程的詳情頁面中，不過一般 PC 端的詳情頁會采用單獨的 Tab 和步驟條展示，為讓信息層級更清晰明確。
6. 標簽向導
標簽性向導設計主要使用在移動端居多，較少標明固定的操作順序，但是基本的操作路徑有一定的秩序在，主要使用的場景是對特定事物進行快速引導定位和查找，在眾多商品類目中，快速找到自己需要的。例如瀏覽器的搜索和電商平臺的商品分類檢索，還有外賣類和旅行類對食物以及景點的查找中，都常常會用到標簽向導：
六、向導設計中需要注意的問題
任務流程本身并不復雜的時候，盡量不要使用，避免弄巧成拙，畫蛇添足；
每一步驟都需定義清楚，明確用戶當前所在的進度節點，清晰展現此刻具體步驟及狀態；
顏色不要亂用，避免產生寓意分歧和過度設計，一般情況下「已完成」采用藍色/綠色都可以，但是需標注「已完成」 icon，「進行中」為藍色高亮，「未開始」置灰；不過也可根據品牌色做出對應調整，避免采用太多顏色，讓用戶感覺眼花繚亂，不知所措；
及時對狀態進行追蹤&反饋，避免用戶不知道自己操作是否生效，混淆認知；
任何向導設計中最好是提供隨時撤銷的選項，讓誤操作有可逆場景，給任何誤操作提供返回和修改的機會。
藍藍設計( www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。