5種“返回”方法幫你做好反向?qū)Ш?/h1>
2018-09-10 23:36:18段晨
計算機與網(wǎng)絡(luò) 2018年17期
段晨
又到交手機話費的時間，但本月跟世界500強公司的續(xù)約卻發(fā)現(xiàn)了一點體驗的問題。過程是這樣：在中國移動10086客戶端的充值頁面選擇金額，然后在支付完成頁面點擊“返回”按鈕，竟然又回到了充值頁面。
按理在支付成功后，這次充值任務(wù)已經(jīng)完成，用戶的預(yù)期應(yīng)該是點擊“返回”回到應(yīng)用首頁，因為很少有人會連續(xù)充值的。這難道不是產(chǎn)品需求考慮欠周到，導(dǎo)致影響了用戶體驗？
再看一個頁面跳轉(zhuǎn)超出用戶預(yù)期的例子。
從微信首頁（A1）依次進(jìn)入訂閱號消息（A2）、訂閱號文章詳情頁（A3），在A3頁點擊訂閱號名稱后沒有打開訂閱號主頁（A4），而是打開微信首頁（A1）再自動打開訂閱號首頁（A4）。
很明顯，用戶在A3頁面點擊訂閱號名稱，是希望進(jìn)入A4公眾號主頁的。為什么微信要違背用戶期望，自動打開一個“多余”的A1首面再跳轉(zhuǎn)到目標(biāo)頁？
上面的2個問題的答案涉及到今天討論的內(nèi)容：移動端產(chǎn)品的反向?qū)Ш健?/p>
一、什么是反向?qū)Ш剑?/p>
導(dǎo)航分為三種：前進(jìn)導(dǎo)航、橫向?qū)Ш健⒎聪驅(qū)Ш?。前進(jìn)導(dǎo)航、橫向?qū)Ш椒謩e指的是頁面的層級前進(jìn)、水平前進(jìn)，都是頁面遞進(jìn)式的導(dǎo)航。而反向?qū)Ш绞侵赴磿r間順序或分層向后打開頁面。三者結(jié)合，給用戶提供操控頁面跳轉(zhuǎn)的完整能力。
應(yīng)用是以頁面為單位去呈現(xiàn)內(nèi)容的?！坝脩趔w驗要素”將應(yīng)用分為5層，第三層“結(jié)構(gòu)層”就是指頁面之間的結(jié)構(gòu)關(guān)系。毫無疑問，無論是PC產(chǎn)品還是移動產(chǎn)品，頁面流都是影響用戶體驗的一個重要方面。反向?qū)Ш阶鳛槲ㄒ徊倏仨撁婧笸说膶?dǎo)航方式，需要我們審慎視之。
在PC時代，通過頁面常駐的導(dǎo)航欄+面包屑+瀏覽器的返回鍵，用戶可以很輕易地返回或者向上跳轉(zhuǎn)。所以，在設(shè)計產(chǎn)品的時候，只要設(shè)計好常駐導(dǎo)航欄和面包屑，反向?qū)Ш绞遣恍枰兕~外關(guān)注的。
但在移動時代，反向?qū)Ш降牟僮餍问街挥幸环N：返回。沒有了常駐導(dǎo)航欄和面包屑，怎樣通過“返回”這個單一的動作，讓用戶在不同的場景下分別“跳躍”地回退到不同的頁面，很多時候需要精心設(shè)計。
如果仍然保留PC時代的工作習(xí)慣，在設(shè)計完正向流程頁面之后，沒有梳理反向?qū)Ш降捻撁媪鳎蜁層脩粝萑氩粩帱c擊返回甚至“迷路”的煩惱。
二、如何設(shè)計移動端的反向?qū)Ш剑?/p>
下面總結(jié)了5種需要特別注意反向?qū)Ш降膱鼍耙约跋鄳?yīng)的解決辦法。
1.頁面層級深：用常用頁面隔離深層級內(nèi)容
假如微信在上面用戶的操作中沒有插入“首頁”，那么從A1 ～A4，再在A4訂閱號主頁點擊文章，頁面有5個層級。這也就意味著，用戶進(jìn)入公眾號閱讀文章后，至少要點4次“返回”，才能回到首頁聊天。
按微信的線上方案，將最常用的頁面（也就是首頁）插到頁面流里，將頁面結(jié)構(gòu)改成了3級。這樣，從文章詳情頁回到首頁聊天，只需要點擊2次返回。
所以，微信在進(jìn)入訂閱號主頁前自動打開首頁，可以讓用戶在瀏覽訂閱號文章時，可以方便地回到首頁聊天。
用首頁隔絕深層級的頁面，是減少頁面層級，方便用戶快速“返回”的有效方法。
例如：支付寶想在用戶掃碼支付完成之后，引導(dǎo)用戶使用余額寶支付，也采用了同樣的做法隔離了層級過深的內(nèi)容，讓余額寶以后的頁面可以快速返回首頁。
2.任務(wù)鏈條長：分解成若干個子任務(wù)
通過子流程的分段操作和分段保存，既方便用戶中途退出任務(wù)后的二次操作，也可以減少頁面層級，避免過多的“返回”操作。
招聘類產(chǎn)品的用戶簡歷，需要用戶填寫個人信息、若干段工作經(jīng)歷、項目經(jīng)歷等內(nèi)容，任務(wù)鏈條是比較長的。如果采用一段式操作，不僅不便于修改某部分內(nèi)容，而且導(dǎo)致頁面層級過深。
一段式的表單任務(wù)：把頁面設(shè)計成4個以上的層級。同樣的任務(wù)分解為多個子任務(wù)。把任務(wù)分解后，頁面層級減少為2層，每個頁面都可以快速返回個人簡歷頁面。同時，可以選擇某一個子任務(wù)單獨去完成。
3.對內(nèi)容驅(qū)動型產(chǎn)品，可考慮使用內(nèi)容詳情頁同級消除
內(nèi)容驅(qū)動型產(chǎn)品允許通過內(nèi)容自由跳轉(zhuǎn)頁面，或圍繞內(nèi)容本身定義導(dǎo)航。即是說可以通過用戶的興趣標(biāo)簽、搜索、內(nèi)容分類和同一作者等維度的內(nèi)容列表與具體內(nèi)容相互鏈接。游戲，書籍和其他沉浸式應(yīng)用通常使用此導(dǎo)航樣式。頁面關(guān)系類似于這樣：
內(nèi)容型產(chǎn)品的特點是同一個頁面的入口可能很多。Android提供了“向上”返回上一層的功能。但是這種“向上”進(jìn)入的列表頁面很有可能是用戶沒點擊過的，會讓用戶產(chǎn)生錯愕。如果要使用“向上”跳轉(zhuǎn)，產(chǎn)品必須圍繞著分類去組織內(nèi)容。正是由于對內(nèi)容的組織限制很大，幾乎沒有產(chǎn)品使用“向上”跳轉(zhuǎn)。
而使用系統(tǒng)的“返回”按鈕，用戶在詳情頁多次跳轉(zhuǎn)之后，又需要點擊多次才能回到首頁，而中途出現(xiàn)的內(nèi)容都是已經(jīng)看過的，所以不斷按返回只能讓用戶煩躁。
為減少這種無意義的返回操作，其實可以在進(jìn)入詳情頁B的時候，都判斷一下來源。如果來源是其他內(nèi)容的詳情頁A，那么就自動將頁面A移出頁面棧（activity stack，可以認(rèn)為是瀏覽記錄）。從而保證在頁面棧里只有一個詳情頁。所以假如打開的頁面流是：首頁>詳情頁A>詳情頁B>詳情頁C，在詳情頁C點擊返回，會直接返回首頁。
4.對內(nèi)容驅(qū)動型產(chǎn)品，使用彈出菜單、底部導(dǎo)航欄等實現(xiàn)反向?qū)Ш?/p>
這是蘋果的人機界面指南推薦的做法。在這里就不復(fù)制了，有興趣的同學(xué)可以自己看指南。
5.如果有獨立的內(nèi)容模塊，至少保證在瀏覽第二個頁面之后，出現(xiàn)關(guān)閉第三方模塊的固定按鈕
這里所指的獨立內(nèi)容模塊包含webview（例如微信公眾號、qq看點等）、小程序和插件式的第三方原生APP（支付寶里的淘票票）等。對這個問題，騰訊的qq和微信已經(jīng)完美解決。
任何產(chǎn)品的信息都要靠頁面承載，所以頁面流就是信息流轉(zhuǎn)的通道。在移動端，系統(tǒng)只提供了“返回”這一種操作，就很容易產(chǎn)生一條條斷頭路，迫使用戶只能一步一步地點擊“返回”回到主干道。
通過頁面流的再組織、任務(wù)的分解、導(dǎo)航欄的合理運用、隨時關(guān)閉分流程等方法可以設(shè)計比系統(tǒng)默認(rèn)的“返回”效率更高的反向?qū)Ш剑瑴p少斷頭路的產(chǎn)生，或者縮短斷頭路的長度。
猜你喜歡
跨境電商背景下廣西工藝品詳情頁優(yōu)化技巧商場現(xiàn)代化(2023年3期)2023-06-15 22:50:19 軍工企業(yè)不同層級知識管理研究實踐航天工業(yè)管理(2020年9期)2020-12-28 00:38:02 基于軍事力量層級劃分的軍力對比評估軍事運籌與系統(tǒng)工程(2020年1期)2020-09-11 06:41:00 淺析消費心理下商品無線端詳情頁優(yōu)化策略絲路視野(2019年31期)2019-05-09 13:45:32 奇妙的智商充值店小主人報(2018年11期)2018-06-26 08:52:30 充值小學(xué)生導(dǎo)刊(2017年19期)2017-07-19 13:41:50 店鋪詳情頁裝修那些事農(nóng)家參謀(2017年10期)2017-03-27 01:09:53 淺議優(yōu)化詳情頁提升商品轉(zhuǎn)化率商場現(xiàn)代化(2016年13期)2016-06-16 10:32:19 基于NFC的ETC卡空中充值服務(wù)應(yīng)用系統(tǒng)實現(xiàn)中國交通信息化(2016年11期)2016-06-06 07:39:58 任務(wù)期內(nèi)多層級不完全修復(fù)件的可用度評估系統(tǒng)工程與電子技術(shù)(2016年2期)2016-04-16 05:17:09
段晨
又到交手機話費的時間，但本月跟世界500強公司的續(xù)約卻發(fā)現(xiàn)了一點體驗的問題。過程是這樣：在中國移動10086客戶端的充值頁面選擇金額，然后在支付完成頁面點擊“返回”按鈕，竟然又回到了充值頁面。
按理在支付成功后，這次充值任務(wù)已經(jīng)完成，用戶的預(yù)期應(yīng)該是點擊“返回”回到應(yīng)用首頁，因為很少有人會連續(xù)充值的。這難道不是產(chǎn)品需求考慮欠周到，導(dǎo)致影響了用戶體驗？
再看一個頁面跳轉(zhuǎn)超出用戶預(yù)期的例子。
從微信首頁（A1）依次進(jìn)入訂閱號消息（A2）、訂閱號文章詳情頁（A3），在A3頁點擊訂閱號名稱后沒有打開訂閱號主頁（A4），而是打開微信首頁（A1）再自動打開訂閱號首頁（A4）。
很明顯，用戶在A3頁面點擊訂閱號名稱，是希望進(jìn)入A4公眾號主頁的。為什么微信要違背用戶期望，自動打開一個“多余”的A1首面再跳轉(zhuǎn)到目標(biāo)頁？
上面的2個問題的答案涉及到今天討論的內(nèi)容：移動端產(chǎn)品的反向?qū)Ш健?/p>
一、什么是反向?qū)Ш剑?/p>
導(dǎo)航分為三種：前進(jìn)導(dǎo)航、橫向?qū)Ш健⒎聪驅(qū)Ш?。前進(jìn)導(dǎo)航、橫向?qū)Ш椒謩e指的是頁面的層級前進(jìn)、水平前進(jìn)，都是頁面遞進(jìn)式的導(dǎo)航。而反向?qū)Ш绞侵赴磿r間順序或分層向后打開頁面。三者結(jié)合，給用戶提供操控頁面跳轉(zhuǎn)的完整能力。
應(yīng)用是以頁面為單位去呈現(xiàn)內(nèi)容的?！坝脩趔w驗要素”將應(yīng)用分為5層，第三層“結(jié)構(gòu)層”就是指頁面之間的結(jié)構(gòu)關(guān)系。毫無疑問，無論是PC產(chǎn)品還是移動產(chǎn)品，頁面流都是影響用戶體驗的一個重要方面。反向?qū)Ш阶鳛槲ㄒ徊倏仨撁婧笸说膶?dǎo)航方式，需要我們審慎視之。
在PC時代，通過頁面常駐的導(dǎo)航欄+面包屑+瀏覽器的返回鍵，用戶可以很輕易地返回或者向上跳轉(zhuǎn)。所以，在設(shè)計產(chǎn)品的時候，只要設(shè)計好常駐導(dǎo)航欄和面包屑，反向?qū)Ш绞遣恍枰兕~外關(guān)注的。
但在移動時代，反向?qū)Ш降牟僮餍问街挥幸环N：返回。沒有了常駐導(dǎo)航欄和面包屑，怎樣通過“返回”這個單一的動作，讓用戶在不同的場景下分別“跳躍”地回退到不同的頁面，很多時候需要精心設(shè)計。
如果仍然保留PC時代的工作習(xí)慣，在設(shè)計完正向流程頁面之后，沒有梳理反向?qū)Ш降捻撁媪鳎蜁層脩粝萑氩粩帱c擊返回甚至“迷路”的煩惱。
二、如何設(shè)計移動端的反向?qū)Ш剑?/p>
下面總結(jié)了5種需要特別注意反向?qū)Ш降膱鼍耙约跋鄳?yīng)的解決辦法。
1.頁面層級深：用常用頁面隔離深層級內(nèi)容
假如微信在上面用戶的操作中沒有插入“首頁”，那么從A1 ～A4，再在A4訂閱號主頁點擊文章，頁面有5個層級。這也就意味著，用戶進(jìn)入公眾號閱讀文章后，至少要點4次“返回”，才能回到首頁聊天。
按微信的線上方案，將最常用的頁面（也就是首頁）插到頁面流里，將頁面結(jié)構(gòu)改成了3級。這樣，從文章詳情頁回到首頁聊天，只需要點擊2次返回。
所以，微信在進(jìn)入訂閱號主頁前自動打開首頁，可以讓用戶在瀏覽訂閱號文章時，可以方便地回到首頁聊天。
用首頁隔絕深層級的頁面，是減少頁面層級，方便用戶快速“返回”的有效方法。
例如：支付寶想在用戶掃碼支付完成之后，引導(dǎo)用戶使用余額寶支付，也采用了同樣的做法隔離了層級過深的內(nèi)容，讓余額寶以后的頁面可以快速返回首頁。
2.任務(wù)鏈條長：分解成若干個子任務(wù)
通過子流程的分段操作和分段保存，既方便用戶中途退出任務(wù)后的二次操作，也可以減少頁面層級，避免過多的“返回”操作。
招聘類產(chǎn)品的用戶簡歷，需要用戶填寫個人信息、若干段工作經(jīng)歷、項目經(jīng)歷等內(nèi)容，任務(wù)鏈條是比較長的。如果采用一段式操作，不僅不便于修改某部分內(nèi)容，而且導(dǎo)致頁面層級過深。
一段式的表單任務(wù)：把頁面設(shè)計成4個以上的層級。同樣的任務(wù)分解為多個子任務(wù)。把任務(wù)分解后，頁面層級減少為2層，每個頁面都可以快速返回個人簡歷頁面。同時，可以選擇某一個子任務(wù)單獨去完成。
3.對內(nèi)容驅(qū)動型產(chǎn)品，可考慮使用內(nèi)容詳情頁同級消除
內(nèi)容驅(qū)動型產(chǎn)品允許通過內(nèi)容自由跳轉(zhuǎn)頁面，或圍繞內(nèi)容本身定義導(dǎo)航。即是說可以通過用戶的興趣標(biāo)簽、搜索、內(nèi)容分類和同一作者等維度的內(nèi)容列表與具體內(nèi)容相互鏈接。游戲，書籍和其他沉浸式應(yīng)用通常使用此導(dǎo)航樣式。頁面關(guān)系類似于這樣：
內(nèi)容型產(chǎn)品的特點是同一個頁面的入口可能很多。Android提供了“向上”返回上一層的功能。但是這種“向上”進(jìn)入的列表頁面很有可能是用戶沒點擊過的，會讓用戶產(chǎn)生錯愕。如果要使用“向上”跳轉(zhuǎn)，產(chǎn)品必須圍繞著分類去組織內(nèi)容。正是由于對內(nèi)容的組織限制很大，幾乎沒有產(chǎn)品使用“向上”跳轉(zhuǎn)。
而使用系統(tǒng)的“返回”按鈕，用戶在詳情頁多次跳轉(zhuǎn)之后，又需要點擊多次才能回到首頁，而中途出現(xiàn)的內(nèi)容都是已經(jīng)看過的，所以不斷按返回只能讓用戶煩躁。
為減少這種無意義的返回操作，其實可以在進(jìn)入詳情頁B的時候，都判斷一下來源。如果來源是其他內(nèi)容的詳情頁A，那么就自動將頁面A移出頁面棧（activity stack，可以認(rèn)為是瀏覽記錄）。從而保證在頁面棧里只有一個詳情頁。所以假如打開的頁面流是：首頁>詳情頁A>詳情頁B>詳情頁C，在詳情頁C點擊返回，會直接返回首頁。
4.對內(nèi)容驅(qū)動型產(chǎn)品，使用彈出菜單、底部導(dǎo)航欄等實現(xiàn)反向?qū)Ш?/p>
這是蘋果的人機界面指南推薦的做法。在這里就不復(fù)制了，有興趣的同學(xué)可以自己看指南。
5.如果有獨立的內(nèi)容模塊，至少保證在瀏覽第二個頁面之后，出現(xiàn)關(guān)閉第三方模塊的固定按鈕
這里所指的獨立內(nèi)容模塊包含webview（例如微信公眾號、qq看點等）、小程序和插件式的第三方原生APP（支付寶里的淘票票）等。對這個問題，騰訊的qq和微信已經(jīng)完美解決。
任何產(chǎn)品的信息都要靠頁面承載，所以頁面流就是信息流轉(zhuǎn)的通道。在移動端，系統(tǒng)只提供了“返回”這一種操作，就很容易產(chǎn)生一條條斷頭路，迫使用戶只能一步一步地點擊“返回”回到主干道。
通過頁面流的再組織、任務(wù)的分解、導(dǎo)航欄的合理運用、隨時關(guān)閉分流程等方法可以設(shè)計比系統(tǒng)默認(rèn)的“返回”效率更高的反向?qū)Ш剑瑴p少斷頭路的產(chǎn)生，或者縮短斷頭路的長度。
猜你喜歡
商場現(xiàn)代化(2023年3期)2023-06-15 22:50:19
航天工業(yè)管理(2020年9期)2020-12-28 00:38:02
軍事運籌與系統(tǒng)工程(2020年1期)2020-09-11 06:41:00
絲路視野(2019年31期)2019-05-09 13:45:32
小主人報(2018年11期)2018-06-26 08:52:30
小學(xué)生導(dǎo)刊(2017年19期)2017-07-19 13:41:50
農(nóng)家參謀(2017年10期)2017-03-27 01:09:53
商場現(xiàn)代化(2016年13期)2016-06-16 10:32:19
中國交通信息化(2016年11期)2016-06-06 07:39:58
系統(tǒng)工程與電子技術(shù)(2016年2期)2016-04-16 05:17:09
