導(dǎo)游式設(shè)計(jì)屬于交互設(shè)計(jì)的常識(shí)，包括步驟條設(shè)計(jì)，引導(dǎo)標(biāo)簽等。本文從導(dǎo)游式設(shè)計(jì)的作用、運(yùn)用場(chǎng)景、設(shè)計(jì)類型、需求留意的問(wèn)題等，給你帶來(lái)全面的根底科普。

一、導(dǎo)游式設(shè)計(jì)是什么？

軟件界面設(shè)計(jì)中的「導(dǎo)游式界面」這個(gè)術(shù)語(yǔ)源自英語(yǔ)中的「Wizard」一詞。意義為「男巫、奇才」的意義；延伸意為「導(dǎo)游」。導(dǎo)游，望文生義，就是能率領(lǐng)或指引他人抵達(dá)目的地的人。在實(shí)踐運(yùn)用中，這種交互方式確實(shí)像一個(gè)導(dǎo)游一樣，一步步地引領(lǐng)用戶向前，把復(fù)雜的任務(wù)停止拆解并有步驟地完成。

導(dǎo)游式設(shè)計(jì)也是流程設(shè)計(jì)的一種方式，這種方式通常目的性明白。在很多商業(yè)范疇運(yùn)用十分普遍，比方購(gòu)物，酒店預(yù)訂，銀行業(yè)務(wù)等等，特別合適新用戶第一次體驗(yàn)產(chǎn)品時(shí)運(yùn)用，讓用戶對(duì)產(chǎn)品運(yùn)用和任務(wù)快速上手，節(jié)約時(shí)間，提升效率。

二、導(dǎo)游式設(shè)計(jì)的主要作用

1. 引導(dǎo)新手操作

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

2. 縱觀信息全局

讓用戶操作時(shí)對(duì)整體流程可控，心里有底，能夠提早預(yù)估操作/完成時(shí)間。

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

對(duì)復(fù)雜任務(wù)停止拆解，提升用戶操作的效率，同時(shí)也降低出錯(cuò)率。

4. 較少操作決策

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

三、導(dǎo)游式設(shè)計(jì)的運(yùn)用場(chǎng)景

普通狀況下，規(guī)范導(dǎo)游步驟條的運(yùn)用場(chǎng)景為：2-5 步比擬適宜。< 2 步，>10 步，運(yùn)用是不適宜的。由于 < 2 步?jīng)]必要；> 10 步太夸大，會(huì)嚇到用戶，本能以為你的產(chǎn)品運(yùn)用過(guò)于繁瑣，回絕嘗試和運(yùn)用。

四、導(dǎo)游式設(shè)計(jì)的類型

手風(fēng)琴導(dǎo)游

規(guī)范導(dǎo)游

橫向規(guī)范導(dǎo)游

縱向規(guī)范導(dǎo)游

彈框?qū)в?/p>

Tab 欄導(dǎo)游

標(biāo)簽導(dǎo)游

五、導(dǎo)游設(shè)計(jì)類型案例場(chǎng)景剖析

1. 手風(fēng)琴導(dǎo)游

手風(fēng)琴導(dǎo)游式設(shè)計(jì)類型，普通適用于 2B 類后臺(tái)業(yè)務(wù)數(shù)據(jù)較多，任務(wù)指向性相對(duì)明白，流程根本固定。例如用戶協(xié)助文檔以及 Q&A 的場(chǎng)景； PC 端頁(yè)面的注冊(cè)引導(dǎo)；電商網(wǎng)站的購(gòu)物支付等流程。

手風(fēng)琴導(dǎo)游，除了可滿足任務(wù)引導(dǎo)，步驟拆解，直觀展現(xiàn)等作用；更主要的是能對(duì)大量的數(shù)據(jù)信息停止收納整理，凸顯信息層級(jí)的明晰度，并在收納信息的同時(shí)節(jié)約頁(yè)面空間，讓頁(yè)面更有節(jié)拍和呼吸感。

2. 規(guī)范導(dǎo)游 – 橫向?qū)в?/p>

橫向規(guī)范導(dǎo)游也能夠稱為橫向步驟條，這樣表述大家比擬容易了解。此類導(dǎo)游式設(shè)計(jì)是大家最常見(jiàn)的，也是最常規(guī)的一種橫向?qū)в蔚脑O(shè)計(jì)，主要作用是對(duì)復(fù)雜的任務(wù)停止拆解，依照固定次第明白步驟，讓用戶對(duì)行將要操作的任務(wù)時(shí)間和內(nèi)容有一個(gè)可控的心理預(yù)期。普通用戶能夠了如指掌總覽共有幾步，目前每個(gè)步驟的狀態(tài)（例如已完成/停止中/未開(kāi)端），和本人當(dāng)前的操作位置。

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

詳細(xì)差別主要表如今狀態(tài)顏色的運(yùn)用和上下圖文的規(guī)劃中。例如阿里-螞蟻金服的 Ant Design 橫向步驟條的設(shè)計(jì)圖文規(guī)劃為左圖右文，這樣設(shè)計(jì)的益處是，假如流程步驟相對(duì)較少時(shí)，文字也可作橫向指向的一局部，防止頁(yè)面太過(guò)空闊。同時(shí) Ant Design 對(duì)步驟條的運(yùn)用場(chǎng)景做了更多細(xì)分，除了簡(jiǎn)單的步驟條，還有迷你版和帶圖標(biāo)的步驟條。

除了上面規(guī)范的組件庫(kù)中常有的步驟條款式，還有以下的常用款式，例如電商類購(gòu)物和支付的場(chǎng)景，除了對(duì)已完成的狀態(tài)停止確認(rèn)顯現(xiàn)，色塊箭頭的設(shè)計(jì)，導(dǎo)游指引性更強(qiáng)。

相似上一個(gè)案例的 UI 美化晉級(jí)版，其實(shí)功用原理都是相通的。

除了上面相比照較簡(jiǎn)單場(chǎng)景的步驟條，其真實(shí) 2B 業(yè)務(wù)中還有相比照較復(fù)雜的步驟條的設(shè)計(jì)，詳細(xì)對(duì)應(yīng)的是復(fù)雜的業(yè)務(wù)場(chǎng)景，例如掩蓋多產(chǎn)品線參與，多角色審批，包含父子步驟審批的業(yè)務(wù)場(chǎng)景，簡(jiǎn)單常規(guī)的規(guī)范導(dǎo)游式設(shè)計(jì)是不可以滿足業(yè)務(wù)場(chǎng)景的，需求對(duì)簡(jiǎn)化版的橫向?qū)в卫^續(xù)深化拓展和優(yōu)化。