小程序頁面層級與跳轉(zhuǎn)邏輯的設(shè)計

9 評論 17093 瀏覽 177 收藏 8 分鐘

文章與大家分享一下關(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é)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 內(nèi)容詳情頁不該直接跳到收藏頁

    來自四川 回復(fù)
  2. 有道理 應(yīng)該更通俗易懂一點的 哈哈哈哈

    回復(fù)
  3. 抖音:首頁》個人》作品》個人,點不動了。

    回復(fù)
    1. 抖音 好像沒有小程序啊

      回復(fù)
    2. 是,小馬哥也不會允許抖音有小程序的,我的意思是可以參考抖音的邏輯,不讓用戶誤入過多的層級。不過你得邏輯也是可行的喲。

      回復(fù)
  4. 看懂了堆棧和出棧的知識,可是不知道為什么要這么做?運用到什么場景下?前輩可以指點指點嗎?

    回復(fù)
    1. 這個是微信小程序中頁面的處理邏輯 哈哈哈哈 前輩不敢當(dāng) 也是新人

      回復(fù)
  5. 張叔叔這篇文章寫的不錯,不過我覺得因為首頁和收藏頁都在小程序的tab bar上,這兩者同級最好不要設(shè)計成可以相互跳轉(zhuǎn)的形式。如果需求允許,收藏完不一定跳轉(zhuǎn)收藏頁,或者把收藏頁放到次一級中去是比較不錯的選擇。我比較喜歡從哪來回哪去原則感覺是大眾比較能接受的

    來自北京 回復(fù)
    1. 是這樣的 支持互相跳轉(zhuǎn)是業(yè)務(wù)需求 也被大佬拍板決定了 哈哈哈哈
      做成同級是為了突出收藏這一功能 并在收藏中引導(dǎo)用戶去分享

      回復(fù)