如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
向?qū)皆O(shè)計(jì)屬于交互設(shè)計(jì)的常識(shí)，包括步驟條設(shè)計(jì)，引導(dǎo)標(biāo)簽等。本文從向?qū)皆O(shè)計(jì)的作用、使用場景、設(shè)計(jì)類型、需要注意的問題等，給你帶來全面的基礎(chǔ)科普。一、向?qū)皆O(shè)計(jì)是什么？
軟件界面設(shè)計(jì)中的「向?qū)浇缑妗惯@個(gè)術(shù)語源自英語中的「Wizard」一詞。意思為「男巫、奇才」的意思；延伸意為「向?qū)А埂Ｏ驅(qū)?，顧名思義，就是能帶領(lǐng)或指引別人到達(dá)目的地的人。在實(shí)際使用中，這種交互方式的確像一個(gè)向?qū)б粯樱徊讲降匾I(lǐng)用戶向前，把復(fù)雜的任務(wù)進(jìn)行拆解并有步驟地完成。
向?qū)皆O(shè)計(jì)也是流程設(shè)計(jì)的一種方式，這種方式通常目的性明確。在很多商業(yè)領(lǐng)域使用非常廣泛，比如購物，酒店預(yù)訂，銀行業(yè)務(wù)等等，尤其適合新用戶第一次體驗(yàn)產(chǎn)品時(shí)使用，讓用戶對(duì)產(chǎn)品使用和任務(wù)快速上手，節(jié)約時(shí)間，提升效率。
二、向?qū)皆O(shè)計(jì)的主要作用
1. 引導(dǎo)新手操作
讓新用戶在最短的時(shí)間內(nèi)了解產(chǎn)品/任務(wù)，明白如何快速上手使用。
2. 縱觀信息全局
讓用戶操作時(shí)對(duì)整體流程可控，心里有底，可以提前預(yù)估操作/完成時(shí)間。
3. 簡化操作任務(wù)
對(duì)復(fù)雜任務(wù)進(jìn)行拆解，提升用戶操作的效率，同時(shí)也降低出錯(cuò)率。
4. 較少操作決策
固定任務(wù)操作路徑，節(jié)約用戶思考&做操作決策時(shí)間，快速完成任務(wù)。
三、向?qū)皆O(shè)計(jì)的使用場景
一般情況下，標(biāo)準(zhǔn)向?qū)Р襟E條的使用場景為：2-5 步比較合適。< 2 步，> 10步，使用是不合適的。因?yàn)?< 2 步?jīng)]必要；> 10 步太夸張，會(huì)嚇到用戶，本能認(rèn)為你的產(chǎn)品使用過于繁瑣，拒絕嘗試和使用。
四、向?qū)皆O(shè)計(jì)的類型
- 手風(fēng)琴向?qū)?
- 標(biāo)準(zhǔn)向?qū)?
- 橫向標(biāo)準(zhǔn)向?qū)?
- 縱向標(biāo)準(zhǔn)向?qū)?
- 彈框向?qū)?
- Tab 欄向?qū)?
- 標(biāo)簽向?qū)?
五、向?qū)гO(shè)計(jì)類型案例場景分析
1. 手風(fēng)琴向?qū)?/strong>
手風(fēng)琴向?qū)皆O(shè)計(jì)類型，一般適用于 2B 類后臺(tái)業(yè)務(wù)數(shù)據(jù)較多，任務(wù)指向性相對(duì)明確，流程基本固定。例如用戶幫助文檔以及 Q&A 的場景； PC 端頁面的注冊引導(dǎo)；電商網(wǎng)站的購物支付等流程。
手風(fēng)琴向?qū)?，除了可滿足任務(wù)引導(dǎo)，步驟拆解，直觀展示等作用；更主要的是能對(duì)大量的數(shù)據(jù)信息進(jìn)行收納整理，凸顯信息層級(jí)的清晰度，并在收納信息的同時(shí)節(jié)約頁面空間，讓頁面更有節(jié)奏和呼吸感。
2. 標(biāo)準(zhǔn)向?qū)?– 橫向向?qū)?/strong>
橫向標(biāo)準(zhǔn)向?qū)б部梢苑Q為橫向步驟條，這樣表述大家比較容易理解。此類向?qū)皆O(shè)計(jì)是大家最常見的，也是最常規(guī)的一種橫向向?qū)У脑O(shè)計(jì)，主要作用是對(duì)復(fù)雜的任務(wù)進(jìn)行拆解，按照固定順序明確步驟，讓用戶對(duì)即將要操作的任務(wù)時(shí)間和內(nèi)容有一個(gè)可控的心理預(yù)期。一般用戶可以一目了然總覽共有幾步，目前每個(gè)步驟的狀態(tài)（例如已完成/進(jìn)行中/未開始），和自己當(dāng)前的操作位置。
目前很多行業(yè)內(nèi)的組件庫對(duì)橫向步驟條的 UI 設(shè)計(jì)基本都采用以下表現(xiàn)形式（圖片來源 阿里巴巴 TXD-AISC 組件庫），只是在細(xì)節(jié)上有稍許的差異。
具體差異主要表現(xiàn)在狀態(tài)色彩的使用和上下圖文的布局中。例如阿里-螞蟻金服的 Ant Design 橫向步驟條的設(shè)計(jì)圖文布局為左圖右文，這樣設(shè)計(jì)的好處是，如果流程步驟相對(duì)較少時(shí)，文字也可作橫向指向的一部分，避免頁面太過空曠。同時(shí) Ant Design 對(duì)步驟條的使用場景做了更多細(xì)分，除了簡單的步驟條，還有迷你版和帶圖標(biāo)的步驟條。
除了上面標(biāo)準(zhǔn)的組件庫中常有的步驟條樣式，還有以下的常用樣式，例如電商類購物和支付的場景，除了對(duì)已完成的狀態(tài)進(jìn)行確認(rèn)顯示，色塊箭頭的設(shè)計(jì)，向?qū)е敢愿鼜?qiáng)。
類似上一個(gè)案例的 UI 美化升級(jí)版，其實(shí)功能原理都是相通的。
除了上面相對(duì)比較簡單場景的步驟條，其實(shí)在 2B 業(yè)務(wù)中還有相對(duì)比較復(fù)雜的步驟條的設(shè)計(jì)，具體對(duì)應(yīng)的是復(fù)雜的業(yè)務(wù)場景，例如覆蓋多產(chǎn)品線參與，多角色審批，包含父子步驟審批的業(yè)務(wù)場景，簡單常規(guī)的標(biāo)準(zhǔn)向?qū)皆O(shè)計(jì)是不能夠滿足業(yè)務(wù)場景的，需要對(duì)簡化版的橫向向?qū)Ю^續(xù)深入拓展和優(yōu)化。
上面兩種普通常見的橫向向?qū)讲襟E條，業(yè)務(wù)場景相對(duì)更偏向 2B 中后臺(tái)，風(fēng)格相對(duì)保守和嚴(yán)謹(jǐn)。其實(shí)網(wǎng)上還有很多設(shè)計(jì)感和趣味性較強(qiáng)的步驟條設(shè)計(jì)，UI 風(fēng)格創(chuàng)意十足，但原理都是相通的，具體 UI 樣式詳解就不再贅述?？蓞⒖甲髡叩?a target="_blank" class="external" style="color:#0DA4D3;text-decoration-line:none;transition:none 0s ease 0s;">設(shè)計(jì)板。整體資料 UI 風(fēng)格如下：
3. 標(biāo)準(zhǔn)向?qū)?– 縱向向?qū)?/strong>
縱向標(biāo)準(zhǔn)向?qū)б部煞Q為縱向步驟條向?qū)?，主要使用場景為?nèi)容數(shù)據(jù)較多，需要分頁/板塊展現(xiàn)的場景，B端業(yè)務(wù)使用的場景較多；縱向向?qū)гO(shè)計(jì)陳列在左側(cè)的目的也為了能對(duì)大量數(shù)據(jù)進(jìn)行快速篩選和定位，同時(shí)此類數(shù)據(jù)之間無需進(jìn)行對(duì)比查看，如下圖：
4. 彈出框向?qū)?/strong>
彈出框向?qū)гO(shè)計(jì)主要使用的場景為注冊頁/登錄頁/輕量任務(wù)操作頁，都在彈出框內(nèi)，步驟較少，能夠快速完成。如下圖：
5. Tab 欄向?qū)?/strong>
Tab 欄向?qū)鋵?shí)是Tab欄+步驟條元素，組建成的一個(gè)新的橫向向?qū)Ｊ?，它的主要使用場景相?duì)來說比較靈活，可以用在登錄和注冊頁等輕量頁面場景中，也可用在有固定任務(wù)流程的詳情頁面中，不過一般 PC 端的詳情頁會(huì)采用單獨(dú)的 Tab 和步驟條展示，為讓信息層級(jí)更清晰明確。
6. 標(biāo)簽向?qū)?/strong>
標(biāo)簽性向?qū)гO(shè)計(jì)主要使用在移動(dòng)端居多，較少標(biāo)明固定的操作順序，但是基本的操作路徑有一定的秩序在，主要使用的場景是對(duì)特定事物進(jìn)行快速引導(dǎo)定位和查找，在眾多商品類目中，快速找到自己需要的。例如瀏覽器的搜索和電商平臺(tái)的商品分類檢索，還有外賣類和旅行類對(duì)食物以及景點(diǎn)的查找中，都常常會(huì)用到標(biāo)簽向?qū)В?
六、向?qū)гO(shè)計(jì)中需要注意的問題
任務(wù)流程本身并不復(fù)雜的時(shí)候，盡量不要使用，避免弄巧成拙，畫蛇添足；
每一步驟都需定義清楚，明確用戶當(dāng)前所在的進(jìn)度節(jié)點(diǎn)，清晰展現(xiàn)此刻具體步驟及狀態(tài)；
顏色不要亂用，避免產(chǎn)生寓意分歧和過度設(shè)計(jì)，一般情況下「已完成」采用藍(lán)色/綠色都可以，但是需標(biāo)注「已完成」 icon，「進(jìn)行中」為藍(lán)色高亮，「未開始」置灰；不過也可根據(jù)品牌色做出對(duì)應(yīng)調(diào)整，避免采用太多顏色，讓用戶感覺眼花繚亂，不知所措；
及時(shí)對(duì)狀態(tài)進(jìn)行追蹤&反饋，避免用戶不知道自己操作是否生效，混淆認(rèn)知；
任何向?qū)гO(shè)計(jì)中最好是提供隨時(shí)撤銷的選項(xiàng)，讓誤操作有可逆場景，給任何誤操作提供返回和修改的機(jī)會(huì)。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。