文章與大家分享一下關(guān)于小程序頁面層級與跳轉(zhuǎn)邏輯的設(shè)計，一起來看看~

閱讀前聲明：本文作者與文中所涉及到的各小程序與APP僅有參考關(guān)系，無實際利益關(guān)系

前段時間，負責(zé)公司的一個小程序的產(chǎn)品實現(xiàn)，幾天前正式上線。過程中遇到了小程序頁面層級與跳轉(zhuǎn)的問題，因此特撰此文，對該小程序?qū)崿F(xiàn)過程中遇到的該問題做一個簡單的復(fù)盤。

在我們的小程序中，涉及到的關(guān)鍵交互頁面主要有三個：首頁、內(nèi)容詳情頁以及收藏頁面。其中，三個頁面之間構(gòu)成互相跳轉(zhuǎn)的關(guān)系，具體的跳轉(zhuǎn)邏輯如下所示（其中，首頁和收藏頁面作為底部欄中的圖標(biāo)出現(xiàn)）

三個頁面之間的跳轉(zhuǎn)邏輯

剛開始在做頁面的時候，考慮到的是“頁面之間的跳轉(zhuǎn)邏輯有沒有遺漏？”，反復(fù)確認沒問題之后，就開心地跑去和開發(fā)提需求。

但是在開發(fā)過程中，開發(fā)反饋了一個問題：首頁-詳情頁-收藏頁-首頁-…（路徑為1-3-5-1-…）構(gòu)成了一個閉環(huán)，如果循環(huán)打開到10個頁面的時候，出現(xiàn)再次點擊卻出現(xiàn)了再也點不動的情況（無法打開新的頁面）。原因是當(dāng)前微信小程序頁面最多支持10個層級（可以理解為這是一個最多可以放10個元素的棧，每新打開一個頁面相當(dāng)于入棧操作，返回上一個頁面則相當(dāng)于出棧）。

考慮到小程序一旦對外，我們就無法把控用戶的行為。一旦用戶確實打開了10個頁面而導(dǎo)致其無法繼續(xù)操作，肯定會造成用戶的困擾，導(dǎo)致其體驗不好，最終導(dǎo)致流失。其次，該種交互方式存在另外一個問題：如果用戶打開了大于5個頁面（小于10個），需要連續(xù)按多次“返回”按鈕才可以退出小程序，導(dǎo)致用戶的體驗也相當(dāng)?shù)夭缓谩?/p>

所以，最好的方式就是將流程優(yōu)化。

先分析問題發(fā)生的根源：出現(xiàn)了一個死循環(huán)，但是要求是總步數(shù)不超過10步。

方案

經(jīng)過分析，這個時候我們提出了幾個方案：

方案一：這三個頁面互相跳轉(zhuǎn)的時候，調(diào)用小程序的相關(guān)方法，將之前的所有頁面全部關(guān)閉之后跳轉(zhuǎn)其他頁面（可以理解為清空棧后在入棧）

評估之后該方案被否決了，會出現(xiàn)兩個異常場景：

1. 在三個頁面中點擊返回按鈕時，都會直接退出小程序，用戶體驗不夠好。
2. 在用戶在進入內(nèi)容詳情頁時，點擊返回時，潛意識會認為會返回到前一個頁面，如果直接退出，用戶的體驗就不夠好。

PS:（只會在安卓手機上出現(xiàn)此第一個場景，蘋果手機無返回的按鈕，因此不存在此場景。但第二個場景在蘋果和安卓上均會出現(xiàn)體驗問題）

方案二：使用中間頁的方式，在頁面數(shù)量達到5層之后，使用中間頁進行頁面的標(biāo)記，從而協(xié)助支持更多的跳轉(zhuǎn)（就是在微信的棧之外另外建一個棧來記錄）。

但是該方案也被否決了，因為該項目要求盡快上線，開發(fā)反饋實現(xiàn)這個方案開發(fā)來不及。此外，依舊沒有解決多次返回的問題。

方案三：到達第8頁之后，新打開頁面點擊返回都會直接重定向到第8頁，這樣就避免了10層的限制（部分電商小程序采用了該方案，但是使用場景與我們不同）。

評估之后，依舊被否決了，因為如果第8頁為收藏頁，跳轉(zhuǎn)到首頁（第9頁）之后，用戶點擊某個內(nèi)容后跳轉(zhuǎn)到了詳情頁（第10頁），這時，用戶點擊返回，直接定向到了收藏頁，和用戶的預(yù)期（首頁）不符，會對用戶造成使用上的困擾。所以，該方案也被否決了。

經(jīng)過思考和調(diào)研一些電商小程序（因為電商小程序的購物路徑有時會突破10層的限制，這里的邏輯主要借鑒參考了某電商小程序中的首頁-商品詳情頁-購物車的跳轉(zhuǎn)邏輯）之后，我們意識到，其實出現(xiàn)返回的場景主要集中在內(nèi)容詳情頁，所以提出了方案四：

在跳轉(zhuǎn)到非內(nèi)容詳情頁的時候，使用清空棧后再跳轉(zhuǎn)的方案（此時再按返回就會退出小程序，涉及到首頁和收藏頁）。當(dāng)跳轉(zhuǎn)到內(nèi)容詳情頁時，允許進行返回的操作（即出棧的操作）。

此時，雖然整體邏輯路徑仍然和之前一致，但是在5,6步驟的時候，已經(jīng)將之前所有的頁面均進行了關(guān)閉。此時，最長的路徑為首頁-商品詳情頁-收藏頁面，也就不存在超過10層的問題，同時解決了之前我們所討論的兩個問題。

實現(xiàn)過程中的注意事項

其實在產(chǎn)品設(shè)計的過程中，我們不應(yīng)該忽略的點是——收藏和首頁按鈕一樣，是作為底部欄的按鈕出現(xiàn)的，二者的地位是平等的（類似電商小程序中的購物車功能），所以才用了方案四的處理方式。

如果收藏頁面比首頁的地位低（不在底部欄而在首頁上），那么用戶從首頁點擊進入收藏頁面后，潛意識認為，點擊返回后進入的就會是首頁，如果此時退出小程序，給用戶就會造成困擾，此時也就不能用方案四的實現(xiàn)方式了。

注意，一定要注意這里的使用場景。

總結(jié)

• 一是在競對分析的時候，除了要關(guān)注宏觀功能點之外，還要多關(guān)注細節(jié)的處理邏輯，很多時候大方向沒錯的時候，細節(jié)往往會有不少忽略的地方。細節(jié)才是用戶體驗的主陣地，也能體現(xiàn)一個產(chǎn)品經(jīng)理的功力（大佬如是說）
• 二是要多和開發(fā)測試溝通，很多時候大家在思考問題的角度不同，所以一定要學(xué)會站在對方的角度去換位思考，在確定好最終的目標(biāo)與方向不變的前提下，求同存異。

本文由 @隔壁張叔叔 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議