交互設計中的「距離」思考

01-26

正式入職成為一名互聯網交互設計師已經有4個多月了，陸陸續續也踩了不少坑，有了不少成長。在工作中發現，交互設計的目的基本上都是在【引導】、【幫助】用戶完成目標，或者是【吸引】用戶完成業務目標。如下圖所示，用戶從一開始到完成目標這中間存在著一段距離。如何讓用戶更方便更快地完成目標呢？

本文將從【步驟距離】、【視線距離】和【物理移動距離】三個維度來闡述，分析如何縮短距離，提升產品的易用性和用戶體驗。

一、步驟距離

通過減少步驟來縮短距離，有以下3個方面：

1、減少頁面跳轉

頁面跳轉就是從當前頁面轉到一個新的頁面。對用戶來說，每一次跳轉需要瀏覽、查找、消化信息，這些都是完成目標前用戶需要花費的成本。對業務需求來說，用戶的每一次跳轉都有可能增加流失率。因此在分析用戶使用場景和目標後，我們要考慮減少頁面跳轉。

舉個例子，實習期間做過一個優化【新用戶註冊流程】的項目，項目的背景是新用戶在下載並進入app後，需要註冊登錄以後才能瀏覽app的內容（沒錯，就是強制註冊登錄……），這次改版的目標就是儘可能地提高新用戶的註冊率。

我們先分析了目前線上的方案有什麼問題，主要有3點：

1、註冊的步驟過多，需要填手機號、驗證碼並設置密碼，有3步，因此考慮是否可以刪除不必要的步驟。

2、一些交互細節可優化，比如一開始的「登錄」和「註冊」兩個按鈕使用戶感到疑惑，有可能是這個頁面用戶流失最多的一個重要原因；

3、引導頁有4頁，但是信息對新用戶來說缺乏價值，因此可以針對新用戶優化引導頁的信息和頁數。

在新的方案中，我們用一個「開始使用」按鈕代替了「登錄」和「註冊」兩個按鈕，並將註冊的步驟減少到2步，只需要手機號和驗證碼，在1個頁面上就可以完成。引導頁也從4頁減少到了1頁，這樣，整個強制註冊登錄流程從6個頁面減少到了2個頁面。

但是要注意的是，並不是所有情況我們都要儘可能地減少頁面跳轉。例如在移動端填寫表單的時候，我們往往採取分頁的形式，一頁只讓用戶專註做一件事情，這樣單一信息流的方式不容易使用戶厭煩。

2、減少點擊/減少操作

其實，在減少頁面跳轉的時候往往也伴隨著減少點擊。除此之外，我們可以將用戶必須要做的操作設計成默認操作，讓系統自動「幫」用戶做操作。

例如，當頁面中用戶需要做的第一件事情是輸入時，讓鍵盤自動彈起，無須點擊輸入框喚起，適用於頁面下半部分內容為空的情況。這次的註冊登錄改版，就採用了這樣的設計。

又例如，當頁面要填寫手機驗證碼時，無須點擊就自動發送驗證碼。

3、更自然的交互

更自然的交互方式可以讓用戶更快地進入下一個步驟，而不是迷茫該做什麼操作。

我們常見的引導頁到了最後一頁，一般都會設計一個按鈕寫著「立即使用」，讓用戶點擊進入app。我在遇到這樣的頁面設計時的體驗是，先嘗試繼續左滑或者點擊任意位置，發現沒有用，於是尋找按鈕，點擊按鈕才終於進入App。有的時候，一些app的按鈕設計樣式和引導頁還融為一體不容易很快找到。以這個例子來說，我認為更自然地交互方式是繼續滑動進入app，這樣可以和前面的滑動動作有一個延續性，理解起來也沒有障礙，例如Flipboard的引導頁，這次的註冊登錄改版也採用了這種繼續滑動就可以進入App的方式。

經過以上3個方面的優化，新版註冊登錄頁的新用戶註冊率有了明顯的提升。

二、視線距離

你有沒有過這種經歷？在頁面上苦苦尋找自己想要的信息，找不到的時候會心生煩躁，甚至想放棄使用這個產品，因此設計師還要考慮用戶的視線距離。

我們設計師在完成設計稿以後，可以自己模擬瀏覽一下每個頁面，或者找身邊的人做個小測試，讓別人來模擬使用並說出內心感受，使設計師對用戶的視覺流線做到心裡有數。

有條件的話，還可以使用眼動儀邀請用戶來做比較專業的測試，能得到更精確的結果。

三、物理移動距離

更細緻一點，我們甚至可以考慮移動距離，物理移動距離對應的是移動端的【手指移動距離】，以及PC端的【滑鼠移動距離】，移動端我們可以參考資深交互設計大師Steven Hoober關於手指操作區域的研究成果。

舉個例子，之前做過一個篩選器的交互設計，在考慮下拉選項的高度時，高度應該是半屏？三分之二屏？還是全屏？我迷茫了。後來發現可以從手指操作便捷性的角度來評估下拉高度的設計。半屏的方案，在選項較多的時候需要更多次的滑屏；全屏的方案，雖然能一次看到更多選項，但是用戶無法很方便地關閉下拉選項；三分之二屏的方案既可以一次看到較多的內容，並且無論是上下滑動還是關閉都可以很方便地用單手大拇指操作。

小結

交互設計中的「距離」包括步驟距離（減少頁面跳轉、減少點擊/操作、更自然的交互方式）、視線距離和物理移動距離（手指/滑鼠移動距離），很多情況下我們要分析如何縮短距離來提升產品的易用性和用戶體驗。

以上就是我對交互設計的「距離」思考，希望以後在工作中不斷強化「距離」意識。

謝謝閱讀

沁園