如何設計好移動端的反向導航呢？本文總結了5種需要特別注意反向導航的場景以及相應的解決辦法。
又是月初，又到了跟中國移動簽訂合作協議的時間。但本月跟世界500強公司的續約卻發現了一點體驗的問題，有點不爽。
過程是這樣：在中國移動10086客戶端的充值頁面選擇金額，然後在支付完成頁面點擊“返回”按鈕，竟然又回到了充值頁面。如下圖：
有同學說了，在支付成功後，這次充值任務已經完成，用戶的預期應該是點擊“返回”回到應用首頁，因為很少有人會連續充值的。這難道不是產品汪需求考慮欠周到，導致影響了用戶體驗？
再看一個頁面跳轉超出用戶預期的例子。
從微信首頁（A1）依次進入訂閱號消息（A2）、訂閱號文章詳情頁（A3），在A3頁點擊訂閱號名稱後沒有打開訂閱號主頁（A4），而是打開微信首頁（A1）再自動打開訂閱號首頁（A4）。如下圖：
很明顯，用戶在A3頁面點擊訂閱號名稱，是希望進入A4公眾號主頁的。為什麼微信要違背用戶期望，自動打開一個“多餘”的A1首面再跳轉到目標頁？
上面的2個問題的答案涉及到今天討論的內容：移動端產品的反向導航。
一、什麼是反向導航？
materia design文檔將導航分為3種：前進導航、橫向導航、反向導航。前進導航、橫向導航分別指的是頁面的層級前進、水平前進；都是頁面遞進式的導航。而反向導航是指按時間順序或分層向後打開頁面。三者結合，給用戶提供操控頁面跳轉的完整能力。
應用是以頁面為單位去呈現內容的。《用戶體驗要素》 將應用分為5層，第三層“結構層”就是指頁面之間的結構關係。毫無疑問，無論是PC產品還是移動產品，頁面流都是影響用戶體驗的一個重要方面。反向導航作為唯一操控頁面後退的導航方式，需要我們審慎視之。
在PC時代，通過頁面常駐的導航欄+麵包屑+瀏覽器的返回鍵，用戶可以很輕易地返回或者向上跳轉。所以，在設計產品的時候，只要設計好常駐導航欄和麵包屑，反向導航是不需要再額外關注的。
但在移動時代，反向導航的操作形式只有一種：返回。沒有了常駐導航欄和麵包屑，怎樣通過“返回”這個單一的動作，讓用戶在不同的場景下分別“跳躍”地回退到不同的頁面，很多時候需要精心設計。
如果仍然保留PC時代的工作習慣，在設計完正向流程頁面之後，沒有梳理反向導航的頁面流，就會讓用戶陷入不斷點擊返回甚至“迷路”的煩惱，例如上文提到的中國移動客戶端的話費充值的那種體驗。
二、如何設計移動端的反向導航？
下文總結了5種需要特別注意反向導航的場景以及相應的解決辦法。
1. 頁面層級深：用常用頁面隔離深層級內容
假如微信在上面用戶的操作中沒有插入“首頁”，那麼從A1到A4，再在A4訂閱號主頁點擊文章，頁面有5個層級。這也就意味著，用戶進入公眾號閱讀文章後，至少要點4次“返回”，才能回到首頁聊天。如下圖：
按微信的線上方案，將最常用的頁面（也就是首頁）插到頁面流裡，將頁面結構改成了3級。這樣，從文章詳情頁回到首頁聊天，只需要點擊2次返回。如下圖：
所以，微信在進入訂閱號主頁前自動打開首頁，可以讓用戶在瀏覽訂閱號文章時，可以方便地回到首頁聊天。
用首頁隔絕深層級的頁面，是減少頁面層級，方便用戶快速“返回”的有效方法。
例如：支付寶想在用戶掃碼支付完成之後，引導用戶使用餘額寶支付，也採用了同樣的做法隔離了層級過深的內容，讓餘額寶（B5）以後的頁面可以快速返回首頁。
2. 任務鏈條長：分解成若干個子任務
通過子流程的分段操作和分段保存，既方便用戶中途退出任務後的二次操作；也可以減少頁面層級，避免過多的“返回”操作。
招聘類產品的用戶簡歷，需要用戶填寫個人信息、若干段工作經歷、項目經歷等內容，任務鏈條是比較長的。如果採用一段式操作，不僅不便於修改某部分內容，而且導致頁面層級過深。
一段式的表單任務：把頁面設計成4個以上的層級。如下圖：
同樣的任務分解為多個子任務。如下圖：
把任務分解後，頁面層級減少為2層，每個頁面都可以快速返回個人簡歷頁面。同時，可以選擇某一個子任務單獨去完成。（上面的草圖只是為了說明頁面關係）
3. 對內容驅動型產品，可以考慮使用內容詳情頁同級消除
內容驅動型產品允許通過內容自由跳轉頁面，或圍繞內容本身定義導航。即是說可以通過用戶的興趣標籤、搜索、內容分類、同一作者等維度的內容列表與具體內容相互鏈接。遊戲，書籍和其他沉浸式應用通常使用此導航樣式。頁面關係類似於這樣：
內容型產品的特點是同一個頁面的入口可能很多。Android提供了“向上”返回上一層的功能。但是這種“向上”進入的列表頁面很有可能是用戶沒點擊過的，會讓用戶產生錯愕。如果要使用“向上”跳轉，產品必須圍繞著分類去組織內容。正是由於對內容的組織限制很大，幾乎沒有產品使用“向上”跳轉。
而使用系統的“返回”按鈕，用戶在詳情頁n次跳轉之後，又需要點擊n次才能回到首頁，而中途出現的內容都是已經看過的，所以不斷按返回只能讓用戶煩躁。
為減少這種無意義的返回操作，其實可以在進入詳情頁B的時候，都判斷一下來源。如果來源是其他內容的詳情頁A，那麼就自動將頁面A移出頁面棧（activity stack，可以認為是瀏覽記錄）。從而保證在頁面棧裡只有一個詳情頁。所以假如打開的頁面流是：首頁——>詳情頁A——>詳情頁B——>詳情頁c，在詳情頁C點擊返回，會直接返回首頁。
bilibili和網易公開課就是使用的這種做法。有興趣的可以體驗一下。
4. 對內容驅動型產品，使用彈出菜單、底部導航欄等實現反向導航
這是蘋果的人機界面指南推薦的做法。在這裡就不復制輪子了，有興趣的同學可以自己看指南。下面提供兩個例子闡述上面方法的意思。
（1）抽屜式/側邊式
點擊左上角的頭像，左側劃入功能入口。
（2）點聚式
點擊一個入口，圍繞其散開，並展示出其中的功能入口。
5. 如果有獨立的內容模塊，至少保證在瀏覽第二個頁面之後，出現關閉第三方模塊的固定按鈕
這裡所指的獨立內容模塊包含webview（例如微信公眾號、qq看點等）、小程序、插件式的第三方原生APP（支付寶裡的淘票票）等等。對這個問題，騰訊的qq和微信已經完美解決，而支付寶還不是很重視。
三、總結
任何產品的信息都要靠頁面承載，所以頁面流就是信息流轉的通道。在移動端，系統只提供了“返回”這一種操作，就很容易產生一條條斷頭路，迫使用戶只能一步一步地點擊“返回”回到主幹道。
通過頁面流的再組織、任務的分解、導航欄的合理運用、隨時關閉分流程等方法可以設計比系統默認的“返回”效率更高的反向導航，減少斷頭路的產生，或者縮短斷頭路的長度。
題圖來自 Unsplash ，基於 CC0 協議
閱讀更多 人人都是產品經理 的文章
