看不慣又干不掉的網站引導界面，該怎么設計？

我們使用 App 或者網站設計時，經常遇到需要一步一步完成的界面，指引我們完成某項任務。這個界面，就是所謂的「引導界面」。

設計過程中，到底要不要使用引導界面呢？它能不能當作一個不堪入目的界面的「補丁」呢？讀完這篇文章，你就知道答案了。

一. 什么是引導界面？

在引導界面，用戶會碰到一系列步驟或條件，不完成這些步驟或條件的話，就無法完成某項任務（比如開始使用某產品）。

這種模式，最初出現于線下——比如大家熟知的配套各種家電的紙質說明書。直到最近幾十年，才被用于線上（比如軟件安裝向導界面）。

傳統桌面軟件應用或硬件安裝，都有上圖中的設置引導界面。引導界面逐漸普及，還要從 Windows 95 說起。

引導界面有這些優勢：

1. 簡化任務

將某個復雜任務拆分成有序任務流，你會發現之前的復雜任務并沒有那么復雜。

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

但引導界面出現后，前述復雜的條件就轉化成了簡單易懂的步驟。引導界面的效果是非常明顯的——技術支持成本和培訓成本都大大降低了。

2. 減少決策負擔，讓人們心曠神怡

在我們缺乏必要背景知識的情況下，引導界面的優勢就出現了。完成任務從此變得輕而易舉：人們只需要順著預先設計的、需要逐步完成的路徑，即可完成任務。

不會給你時間去思考，下一步做什么全都告訴你了，超級簡單。

二. 引導界面適合什么時候使用？

引導界面在以下情景中特別有用：

1. 人們想要完成某個多步驟任務

如果你在設計的某個任務界面，其實際上步驟繁多、復雜，而且無法簡化。通過引導界面，可以讓看起來很復雜的任務變得更簡單。同時，整個過程還會顯得非常地清晰明了。

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

這類情境下，通過降低學習曲線，引導界面可以協助人們完成某任務。若要求按步驟完成任務，人們就不太可能錯過重要的環節，從而可以降低出錯率。

Facebook 通過引導界面來設置應用。它能確保所有的步驟都按恰當的順序完成。

三. 引導界面也有沒啥用的時候

使用此類模式一定要謹慎。將某項任務拆分成多步驟小任務，并不代表可以提供更友好的用戶體驗。比如：

1. 任務本身不復雜

如果是不得不使用引導界面，則可以說明該項任務的確很復雜。要是能簡化任務，比如通過簡單表單或者幾次按鈕點擊就能完成的事，那引導界面存在的意義就不大了。

2. 人們太高端

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

因此，要說引導界面是在「幫助」我們去解決那些其本已知道怎么做的事情，就見慣不怪了。這對支持自主創作（比如搞藝術或者寫代碼）的軟件來說，就更加貼切。

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

3. 你想要告知信息時

不要通過引導界面來呈現某種概念。人們操作引導界面時，很少會閱讀輔助文字。他們所關注的，只是去完成核心任務罷了。

四. 引導界面的好實踐

設計下一個引導界面時，你可能需要注意以下幾點，否則它可能就廢了：

1. 盡量減少安裝步驟的數量

設計引導界面最難的部分，是在單一界面內容和界面總數之間找到平衡點。如果引導界面只有 2 個步驟，那就有點搞笑了，但有 10 個步驟的引導界面又太過了。

理想狀態下，引導界面最好只有 3 到 5 個步驟。最好能提前進行可用性測試，保證引導界面的步驟數量在可以接受的范圍內。

2. 保證引導界面的目的清晰

在引導界面的每一個步驟界面，人們都需要清晰地知道該界面目的。引導界面應該為大家提供足夠多的信息，輔助其做決策。如果目的模糊，人們就摸不清方向?；诖耍袃蓚€方面值得注意：

第一步要將目的簡要闡明。

每個環節的標簽都要非常清晰、明了。

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

3. 移除多余的界面元素

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

4. 清晰顯示進度

有了清晰的進度信息，人們才能知道何時可以完成該項任務。要把引導界面設計得非常友好，不要忽略以下幾點：

將每個步驟按順序標號

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

凸顯當前步驟，并顯示剩余步驟數量

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

最后一步完成后的相關提示

△ 反面示范：上圖示例中，每個步驟都是獨立界面，無上下文鋪墊，用戶無法確認之前的信息，也無法預知之后的信息。

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

5. 加入取消按鈕

有時，人們進入引導界面后，會因為種種原因，而決定退出。為了不讓想要退出、又找不到「出路」的用戶抓狂，在界面上加入「取消」按鈕就行了。

6. 每個步驟都允許撤銷

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

否則的話，你只有讓他們從頭再來。不過話又說回來，如果僅僅是因為一處小的改變，那真是作死了。

7. 提供所選項回顧，讓人們再次確認

建議在引導界面的最后，提供整個過程的所選項，以方便大家回顧。這可以讓他們再次確認已輸入信息，從而無所顧忌地朝「完成」按鈕點過去。

總結

雖然引導界面應該設計得簡單易懂，但設計師和開發者深知背后的真相：要設計出好的引導界面，一點都不簡單。

除了一系列的策劃、實驗和再修正，整個設計創作過程中還可能出現讓你意想不到的難題。通過這篇文章，希望能幫助你設計出更好的引導界面。（@優設）

網站名稱：看不慣又干不掉的網站引導界面，該怎么設計？
網站URL：http://m.kartarina.com/news38/158338.html

成都網站建設公司_創新互聯，為您提供網站改版、營銷型網站建設、網站建設、商城網站、做網站、App設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯