本文將為大家介紹 B 端產品在移動端使用中的反嚮導航設計，以及它的分類類型與設計要點。

01 什麼是反嚮導航

反嚮導航的概念官方定義出自Material Design：

從用戶行為維度，分成三類：Lateral navigation（橫嚮導航）、Forward navigation（前進導航）以及Reverse navigation（逆嚮導航）。

橫嚮導航和前進導航分別指引用戶操作的水平漸進和層級漸進。逆嚮導航則負責對反向軌跡進行定義和實施，三者結合，實現對頁面的全局操控（來源見圖）

PC產品，通過頁面常駐的導航欄+麵包屑+瀏覽器的返回鍵，用戶可以很輕易地返回或者向上跳轉。相較之下，Mob端的反嚮導航需要進行更多的設計。

因此，本文主要討論Mob端。

02 什麼時候需要反嚮導航

根據觸發的方式，筆者將反嚮導航分為用戶觸發和系統觸發兩類。

1. 用戶觸發

APP是通過一個個頁面來進行信息傳遞的。用戶在使用過程中，會主動中斷頁面流，進行回退。

從理論上來說，用戶進行的N+1步操作，都有回到第N步，或者<N步的需求。這是一個合格的產品，需要滿足的基本需求。

2. 系統觸發

系統觸發的頁面回退，如提交失敗、系統異常、網絡異常等，相對是可預期的情況。當頁面因為網絡或後端等原因，出現崩潰或錯誤提示時，需要給用戶提供“返回”或者“關閉”的選項。

如果用戶此時只能選擇殺進程，那麼體驗就太糟糕了。（反面例子見下圖）

03 反嚮導航的設計要點

反嚮導航設計的要點，可以從邏輯和體驗兩方面來考慮：

1. 邏輯：操作閉環

不管是由用戶還是系統觸發，都必須保留回退的通路。

使用過程中不能給用戶留下死衚衕、斷頭路。這是反嚮導航設計最基本的要求。

2. 體驗：滿足預期

在完成第一步的基礎上，需要對反嚮導航做更多的思考。

例如，當用戶進入比較深的頁面，並不一定希望按照順序依次返回。

例如，當任務流結束的時候，用戶更期待返回“首頁”,而不是“上一步”。

04 反嚮導航，“返回”哪去？

討論之前，我們先把反嚮導航分為兩類：一類是頁面層級相同；一類是頁面層級不同。

1. 頁面層級相同

在這種情況下，用戶並沒有跳轉頁面，“返回”只需要回到當前頁面即可。

如付款時彈出密碼頁，需要修改支付金額，返回支付信息填寫頁：

如打開側邊欄之後再收起：

這種情況的反嚮導航，並不需要PM額外的設計，只要UI設計師把控具體的交互方式就好，比如手勢返回、觸摸空白處收起等方式。

需要註意的是，最好給用戶提供足夠明確的“退回方式”，如在“觸摸空白處收起”的基礎上，保留“取消”或“收起”按鈕。

用戶在使用產品的時候，其過程就是探索未知之地。如果有清晰的指示牌，會帶來安心感，即使他不一定每次都需要憑藉指示牌去認路。

2. 頁面層級不同

當用戶進行了頁面之間的跳轉時，反嚮導航的設計就變得複雜了，需要我們花更多的心思。

90%的情況下，我們可以用 “從哪來回哪去“的方式滿足需求。

但是在B端產品中，容易出現鏈條很長的任務流。用戶需要一個頁面一個頁面地操作，最後完成提交或者保存。如果用戶進入層級太深，“逐層返回“的方式就不太人道了。

或者，在某些情境下，從N+1回到N，並不符合用戶的心理預期。

當我們在討論這種情況的時候，實際上討論的是整個產品的頁面結構該如何設計。

這個問題是值得我們深入思考的，筆者將在“下篇”里用整個篇幅展開討論。

參考文獻

“返回”功能應該怎麼設計

“逆嚮導航”體驗探究

5種“返回”方法，幫你做好反嚮導航

http://www.visionunion.com/article.jsp?code=201907010030

本文由 @可可可可 原創發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議