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

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

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

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

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

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

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

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

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

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

方案

經(jīng)過(guò)分析，這個(gè)時(shí)候我們提出了幾個(gè)方案：

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

評(píng)估之后該方案被否決了，會(huì)出現(xiàn)兩個(gè)異常場(chǎng)景：

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

PS:（只會(huì)在安卓手機(jī)上出現(xiàn)此第一個(gè)場(chǎng)景，蘋(píng)果手機(jī)無(wú)返回的按鈕，因此不存在此場(chǎng)景。但第二個(gè)場(chǎng)景在蘋(píng)果和安卓上均會(huì)出現(xiàn)體驗(yàn)問(wèn)題）

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

但是該方案也被否決了，因?yàn)樵擁?xiàng)目要求盡快上線，開(kāi)發(fā)反饋實(shí)現(xiàn)這個(gè)方案開(kāi)發(fā)來(lái)不及。此外，依舊沒(méi)有解決多次返回的問(wèn)題。

方案三：到達(dá)第8頁(yè)之后，新打開(kāi)頁(yè)面點(diǎn)擊返回都會(huì)直接重定向到第8頁(yè)，這樣就避免了10層的限制（部分電商小程序采用了該方案，但是使用場(chǎng)景與我們不同）。

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

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

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

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

實(shí)現(xiàn)過(guò)程中的注意事項(xiàng)

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

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

注意，一定要注意這里的使用場(chǎng)景。

總結(jié)

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

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

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