看不慣又干不掉的網(wǎng)站引導(dǎo)界面，該怎么設(shè)計(jì)？

我們使用 App 或者網(wǎng)站設(shè)計(jì)時(shí)，經(jīng)常遇到需要一步一步完成的界面，指引我們完成某項(xiàng)任務(wù)。這個(gè)界面，就是所謂的「引導(dǎo)界面」。

設(shè)計(jì)過程中，到底要不要使用引導(dǎo)界面呢？它能不能當(dāng)作一個(gè)不堪入目的界面的「補(bǔ)丁」呢？讀完這篇文章，你就知道答案了。

一. 什么是引導(dǎo)界面？

在引導(dǎo)界面，用戶會(huì)碰到一系列步驟或條件，不完成這些步驟或條件的話，就無(wú)法完成某項(xiàng)任務(wù)（比如開始使用某產(chǎn)品）。

這種模式，最初出現(xiàn)于線下——比如大家熟知的配套各種家電的紙質(zhì)說(shuō)明書。直到最近幾十年，才被用于線上（比如軟件安裝向?qū)Ы缑妫?/p>

傳統(tǒng)桌面軟件應(yīng)用或硬件安裝，都有上圖中的設(shè)置引導(dǎo)界面。引導(dǎo)界面逐漸普及，還要從 Windows 95 說(shuō)起。

引導(dǎo)界面有這些優(yōu)勢(shì)：

1. 簡(jiǎn)化任務(wù)

將某個(gè)復(fù)雜任務(wù)拆分成有序任務(wù)流，你會(huì)發(fā)現(xiàn)之前的復(fù)雜任務(wù)并沒有那么復(fù)雜。

很多人覺得引導(dǎo)界面麻煩，但在引導(dǎo)界面普及之前，我們安裝軟件要自行拷貝文件，再編輯配置文件，再設(shè)置控制目錄，最后還要檢查軟件是否能正常運(yùn)行。

但引導(dǎo)界面出現(xiàn)后，前述復(fù)雜的條件就轉(zhuǎn)化成了簡(jiǎn)單易懂的步驟。引導(dǎo)界面的效果是非常明顯的——技術(shù)支持成本和培訓(xùn)成本都大大降低了。

2. 減少?zèng)Q策負(fù)擔(dān)，讓人們心曠神怡

在我們?nèi)狈Ρ匾尘爸R(shí)的情況下，引導(dǎo)界面的優(yōu)勢(shì)就出現(xiàn)了。完成任務(wù)從此變得輕而易舉：人們只需要順著預(yù)先設(shè)計(jì)的、需要逐步完成的路徑，即可完成任務(wù)。

不會(huì)給你時(shí)間去思考，下一步做什么全都告訴你了，超級(jí)簡(jiǎn)單。

二. 引導(dǎo)界面適合什么時(shí)候使用？

引導(dǎo)界面在以下情景中特別有用：

1. 人們想要完成某個(gè)多步驟任務(wù)

如果你在設(shè)計(jì)的某個(gè)任務(wù)界面，其實(shí)際上步驟繁多、復(fù)雜，而且無(wú)法簡(jiǎn)化。通過引導(dǎo)界面，可以讓看起來(lái)很復(fù)雜的任務(wù)變得更簡(jiǎn)單。同時(shí)，整個(gè)過程還會(huì)顯得非常地清晰明了。

2. 人們必須按特定順序完成某任務(wù)

這類情境下，通過降低學(xué)習(xí)曲線，引導(dǎo)界面可以協(xié)助人們完成某任務(wù)。若要求按步驟完成任務(wù)，人們就不太可能錯(cuò)過重要的環(huán)節(jié)，從而可以降低出錯(cuò)率。

Facebook 通過引導(dǎo)界面來(lái)設(shè)置應(yīng)用。它能確保所有的步驟都按恰當(dāng)?shù)捻樞蛲瓿伞?/p>

三. 引導(dǎo)界面也有沒啥用的時(shí)候

使用此類模式一定要謹(jǐn)慎。將某項(xiàng)任務(wù)拆分成多步驟小任務(wù)，并不代表可以提供更友好的用戶體驗(yàn)。比如：

1. 任務(wù)本身不復(fù)雜

如果是不得不使用引導(dǎo)界面，則可以說(shuō)明該項(xiàng)任務(wù)的確很復(fù)雜。要是能簡(jiǎn)化任務(wù)，比如通過簡(jiǎn)單表單或者幾次按鈕點(diǎn)擊就能完成的事，那引導(dǎo)界面存在的意義就不大了。

2. 人們太高端

即便是很復(fù)雜的任務(wù)，加入引導(dǎo)界面也不是設(shè)計(jì)好用戶界面的唯一途徑。令不少高級(jí)用戶非常沮喪的是：引導(dǎo)界面非常死板，而且有不少局限性。許多人并不知道每個(gè)步驟到底代表什么，也不知道完成每個(gè)步驟后會(huì)有什么變化。

因此，要說(shuō)引導(dǎo)界面是在「幫助」我們?nèi)ソ鉀Q那些其本已知道怎么做的事情，就見慣不怪了。這對(duì)支持自主創(chuàng)作（比如搞藝術(shù)或者寫代碼）的軟件來(lái)說(shuō)，就更加貼切。

小提示：我們應(yīng)該讓人們可以選擇他們想完成某項(xiàng)任務(wù)的方式。舉個(gè)例子，Dropbox 的安裝界面中，我們可以自由選擇不同的設(shè)置類型。如果選擇高級(jí)模式，人們則可以自定義軟件的安裝路徑，同步盤的位置等等。

3. 你想要告知信息時(shí)

不要通過引導(dǎo)界面來(lái)呈現(xiàn)某種概念。人們操作引導(dǎo)界面時(shí)，很少會(huì)閱讀輔助文字。他們所關(guān)注的，只是去完成核心任務(wù)罷了。

四. 引導(dǎo)界面的好實(shí)踐

設(shè)計(jì)下一個(gè)引導(dǎo)界面時(shí)，你可能需要注意以下幾點(diǎn)，否則它可能就廢了：

1. 盡量減少安裝步驟的數(shù)量

設(shè)計(jì)引導(dǎo)界面最難的部分，是在單一界面內(nèi)容和界面總數(shù)之間找到平衡點(diǎn)。如果引導(dǎo)界面只有 2 個(gè)步驟，那就有點(diǎn)搞笑了，但有 10 個(gè)步驟的引導(dǎo)界面又太過了。

理想狀態(tài)下，引導(dǎo)界面最好只有 3 到 5 個(gè)步驟。最好能提前進(jìn)行可用性測(cè)試，保證引導(dǎo)界面的步驟數(shù)量在可以接受的范圍內(nèi)。

2. 保證引導(dǎo)界面的目的清晰

在引導(dǎo)界面的每一個(gè)步驟界面，人們都需要清晰地知道該界面目的。引導(dǎo)界面應(yīng)該為大家提供足夠多的信息，輔助其做決策。如果目的模糊，人們就摸不清方向?；诖?，有兩個(gè)方面值得注意：

第一步要將目的簡(jiǎn)要闡明。

每個(gè)環(huán)節(jié)的標(biāo)簽都要非常清晰、明了。

△ 反面示范：在 Homesite Home Insurance 網(wǎng)站上，其引導(dǎo)界面的第一頁(yè)中并沒有明確指出安裝目的。如果用戶通過其它站點(diǎn)的鏈接跳轉(zhuǎn)到該頁(yè)面，我猜他們肯定會(huì)一臉懵逼。

3. 移除多余的界面元素

多余的鏈接和內(nèi)容往往會(huì)使用戶分心。移除這些元素，可以讓用戶專注于任務(wù)本身，增加成功完成任務(wù)的概率。

4. 清晰顯示進(jìn)度

有了清晰的進(jìn)度信息，人們才能知道何時(shí)可以完成該項(xiàng)任務(wù)。要把引導(dǎo)界面設(shè)計(jì)得非常友好，不要忽略以下幾點(diǎn)：

將每個(gè)步驟按順序標(biāo)號(hào)

顯示任務(wù)流的方向（通常情況下，從左到右，或從上到下）

凸顯當(dāng)前步驟，并顯示剩余步驟數(shù)量

完成某步驟后，嵌入成功完成該步驟提示

最后一步完成后的相關(guān)提示

△ 反面示范：上圖示例中，每個(gè)步驟都是獨(dú)立界面，無(wú)上下文鋪墊，用戶無(wú)法確認(rèn)之前的信息，也無(wú)法預(yù)知之后的信息。

△ 在該步驟名稱右處，清晰展示步驟數(shù)量。此外，界面頂部還展示了整個(gè)步驟的流程。

5. 加入取消按鈕

有時(shí)，人們進(jìn)入引導(dǎo)界面后，會(huì)因?yàn)榉N種原因，而決定退出。為了不讓想要退出、又找不到「出路」的用戶抓狂，在界面上加入「取消」按鈕就行了。

6. 每個(gè)步驟都允許撤銷

給用戶留點(diǎn)出路吧，在每個(gè)步驟界面中都加入撤銷功能。如果人們可以重復(fù)之前的步驟，并修改之前輸入的信息，那他們估計(jì)會(huì)很開心吧。

否則的話，你只有讓他們從頭再來(lái)。不過話又說(shuō)回來(lái)，如果僅僅是因?yàn)橐惶幮〉母淖?，那真是作死了?/p>

7. 提供所選項(xiàng)回顧，讓人們?cè)俅未_認(rèn)

建議在引導(dǎo)界面的最后，提供整個(gè)過程的所選項(xiàng)，以方便大家回顧。這可以讓他們?cè)俅未_認(rèn)已輸入信息，從而無(wú)所顧忌地朝「完成」按鈕點(diǎn)過去。

總結(jié)

雖然引導(dǎo)界面應(yīng)該設(shè)計(jì)得簡(jiǎn)單易懂，但設(shè)計(jì)師和開發(fā)者深知背后的真相：要設(shè)計(jì)出好的引導(dǎo)界面，一點(diǎn)都不簡(jiǎn)單。

除了一系列的策劃、實(shí)驗(yàn)和再修正，整個(gè)設(shè)計(jì)創(chuàng)作過程中還可能出現(xiàn)讓你意想不到的難題。通過這篇文章，希望能幫助你設(shè)計(jì)出更好的引導(dǎo)界面。（@優(yōu)設(shè)）

網(wǎng)站名稱：看不慣又干不掉的網(wǎng)站引導(dǎo)界面，該怎么設(shè)計(jì)？
網(wǎng)站URL：http://www.bm7419.com/news38/158338.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、商城網(wǎng)站、做網(wǎng)站、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)