起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識 B端產(chǎn)品 | APP的反向?qū)Ш剑荒堋皬哪膩砘啬娜ァ皢幔?/h2>
本文將為大家介紹 B 端產(chǎn)品在移動端使用中的反向?qū)Ш皆O(shè)計，以及它的分類類型與設(shè)計要點。
01 什么是反向?qū)Ш?/h2>
反向?qū)Ш降母拍罟俜蕉x出自Material Design：
從用戶行為維度，分成三類：Lateral navigation（橫向?qū)Ш剑orward navigation（前進(jìn)導(dǎo)航）以及Reverse navigation（逆向?qū)Ш剑?/p>
橫向?qū)Ш胶颓斑M(jìn)導(dǎo)航分別指引用戶操作的水平漸進(jìn)和層級漸進(jìn)。逆向?qū)Ш絼t負(fù)責(zé)對反向軌跡進(jìn)行定義和實施，三者結(jié)合，實現(xiàn)對頁面的全局操控（來源見圖）
PC產(chǎn)品，通過頁面常駐的導(dǎo)航欄+面包屑+瀏覽器的返回鍵，用戶可以很輕易地返回或者向上跳轉(zhuǎn)。相較之下，Mob端的反向?qū)Ш叫枰M(jìn)行更多的設(shè)計。
因此，本文主要討論Mob端。
02 什么時候需要反向?qū)Ш?/h2>
根據(jù)觸發(fā)的方式，筆者將反向?qū)Ш椒譃橛脩粲|發(fā)和系統(tǒng)觸發(fā)兩類。
1. 用戶觸發(fā)
APP是通過一個個頁面來進(jìn)行信息傳遞的。用戶在使用過程中，會主動中斷頁面流，進(jìn)行回退。
從理論上來說，用戶進(jìn)行的N+1步操作，都有回到第N步，或者<N步的需求。這是一個合格的產(chǎn)品，需要滿足的基本需求。
2. 系統(tǒng)觸發(fā)
系統(tǒng)觸發(fā)的頁面回退，如提交失敗、系統(tǒng)異常、網(wǎng)絡(luò)異常等，相對是可預(yù)期的情況。當(dāng)頁面因為網(wǎng)絡(luò)或后端等原因，出現(xiàn)崩潰或錯誤提示時，需要給用戶提供“返回”或者“關(guān)閉”的選項。
如果用戶此時只能選擇殺進(jìn)程，那么體驗就太糟糕了。（反面例子見下圖）
03 反向?qū)Ш降脑O(shè)計要點
反向?qū)Ш皆O(shè)計的要點，可以從邏輯和體驗兩方面來考慮：
1. 邏輯：操作閉環(huán)
不管是由用戶還是系統(tǒng)觸發(fā)，都必須保留回退的通路。
使用過程中不能給用戶留下死胡同、斷頭路。這是反向?qū)Ш皆O(shè)計最基本的要求。
2. 體驗：滿足預(yù)期
在完成第一步的基礎(chǔ)上，需要對反向?qū)Ш阶龈嗟乃伎肌?/p>
例如，當(dāng)用戶進(jìn)入比較深的頁面，并不一定希望按照順序依次返回。
例如，當(dāng)任務(wù)流結(jié)束的時候，用戶更期待返回“首頁”,而不是“上一步”。
04 反向?qū)Ш剑胺祷亍蹦娜ィ?/h2>
討論之前，我們先把反向?qū)Ш椒譃閮深悾阂活愂琼撁鎸蛹壪嗤?；一類是頁面層級不同?/p>
1. 頁面層級相同
在這種情況下，用戶并沒有跳轉(zhuǎn)頁面，“返回”只需要回到當(dāng)前頁面即可。
如付款時彈出密碼頁，需要修改支付金額，返回支付信息填寫頁：
如打開側(cè)邊欄之后再收起：
這種情況的反向?qū)Ш?，并不需要PM額外的設(shè)計，只要UI設(shè)計師把控具體的交互方式就好，比如手勢返回、觸摸空白處收起等方式。
需要注意的是，最好給用戶提供足夠明確的“退回方式”，如在“觸摸空白處收起”的基礎(chǔ)上，保留“取消”或“收起”按鈕。
用戶在使用產(chǎn)品的時候，其過程就是探索未知之地。如果有清晰的指示牌，會帶來安心感，即使他不一定每次都需要憑借指示牌去認(rèn)路。
2. 頁面層級不同
當(dāng)用戶進(jìn)行了頁面之間的跳轉(zhuǎn)時，反向?qū)Ш降脑O(shè)計就變得復(fù)雜了，需要我們花更多的心思。
90%的情況下，我們可以用 “從哪來回哪去“的方式滿足需求。
但是在B端產(chǎn)品中，容易出現(xiàn)鏈條很長的任務(wù)流。用戶需要一個頁面一個頁面地操作，最后完成提交或者保存。如果用戶進(jìn)入層級太深，“逐層返回“的方式就不太人道了。
或者，在某些情境下，從N+1回到N，并不符合用戶的心理預(yù)期。
當(dāng)我們在討論這種情況的時候，實際上討論的是整個產(chǎn)品的頁面結(jié)構(gòu)該如何設(shè)計。
這個問題是值得我們深入思考的，筆者將在“下篇”里用整個篇幅展開討論。
參考文獻(xiàn)
http://www.visionunion.com/article.jsp?code=201907010030
本文由 @可可可可 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
本文將為大家介紹 B 端產(chǎn)品在移動端使用中的反向?qū)Ш皆O(shè)計，以及它的分類類型與設(shè)計要點。
01 什么是反向?qū)Ш?/h2>
反向?qū)Ш降母拍罟俜蕉x出自Material Design：
從用戶行為維度，分成三類：Lateral navigation（橫向?qū)Ш剑orward navigation（前進(jìn)導(dǎo)航）以及Reverse navigation（逆向?qū)Ш剑?/p>
橫向?qū)Ш胶颓斑M(jìn)導(dǎo)航分別指引用戶操作的水平漸進(jìn)和層級漸進(jìn)。逆向?qū)Ш絼t負(fù)責(zé)對反向軌跡進(jìn)行定義和實施，三者結(jié)合，實現(xiàn)對頁面的全局操控（來源見圖）
PC產(chǎn)品，通過頁面常駐的導(dǎo)航欄+面包屑+瀏覽器的返回鍵，用戶可以很輕易地返回或者向上跳轉(zhuǎn)。相較之下，Mob端的反向?qū)Ш叫枰M(jìn)行更多的設(shè)計。
因此，本文主要討論Mob端。
02 什么時候需要反向?qū)Ш?/h2>
根據(jù)觸發(fā)的方式，筆者將反向?qū)Ш椒譃橛脩粲|發(fā)和系統(tǒng)觸發(fā)兩類。
1. 用戶觸發(fā)
APP是通過一個個頁面來進(jìn)行信息傳遞的。用戶在使用過程中，會主動中斷頁面流，進(jìn)行回退。
從理論上來說，用戶進(jìn)行的N+1步操作，都有回到第N步，或者<N步的需求。這是一個合格的產(chǎn)品，需要滿足的基本需求。
2. 系統(tǒng)觸發(fā)
系統(tǒng)觸發(fā)的頁面回退，如提交失敗、系統(tǒng)異常、網(wǎng)絡(luò)異常等，相對是可預(yù)期的情況。當(dāng)頁面因為網(wǎng)絡(luò)或后端等原因，出現(xiàn)崩潰或錯誤提示時，需要給用戶提供“返回”或者“關(guān)閉”的選項。
如果用戶此時只能選擇殺進(jìn)程，那么體驗就太糟糕了。（反面例子見下圖）
03 反向?qū)Ш降脑O(shè)計要點
反向?qū)Ш皆O(shè)計的要點，可以從邏輯和體驗兩方面來考慮：
1. 邏輯：操作閉環(huán)
不管是由用戶還是系統(tǒng)觸發(fā)，都必須保留回退的通路。
使用過程中不能給用戶留下死胡同、斷頭路。這是反向?qū)Ш皆O(shè)計最基本的要求。
2. 體驗：滿足預(yù)期
在完成第一步的基礎(chǔ)上，需要對反向?qū)Ш阶龈嗟乃伎肌?/p>
例如，當(dāng)用戶進(jìn)入比較深的頁面，并不一定希望按照順序依次返回。
例如，當(dāng)任務(wù)流結(jié)束的時候，用戶更期待返回“首頁”,而不是“上一步”。
04 反向?qū)Ш剑胺祷亍蹦娜ィ?/h2>
討論之前，我們先把反向?qū)Ш椒譃閮深悾阂活愂琼撁鎸蛹壪嗤?；一類是頁面層級不同?/p>
1. 頁面層級相同
在這種情況下，用戶并沒有跳轉(zhuǎn)頁面，“返回”只需要回到當(dāng)前頁面即可。
如付款時彈出密碼頁，需要修改支付金額，返回支付信息填寫頁：
如打開側(cè)邊欄之后再收起：
這種情況的反向?qū)Ш?，并不需要PM額外的設(shè)計，只要UI設(shè)計師把控具體的交互方式就好，比如手勢返回、觸摸空白處收起等方式。
需要注意的是，最好給用戶提供足夠明確的“退回方式”，如在“觸摸空白處收起”的基礎(chǔ)上，保留“取消”或“收起”按鈕。
用戶在使用產(chǎn)品的時候，其過程就是探索未知之地。如果有清晰的指示牌，會帶來安心感，即使他不一定每次都需要憑借指示牌去認(rèn)路。
2. 頁面層級不同
當(dāng)用戶進(jìn)行了頁面之間的跳轉(zhuǎn)時，反向?qū)Ш降脑O(shè)計就變得復(fù)雜了，需要我們花更多的心思。
90%的情況下，我們可以用 “從哪來回哪去“的方式滿足需求。
但是在B端產(chǎn)品中，容易出現(xiàn)鏈條很長的任務(wù)流。用戶需要一個頁面一個頁面地操作，最后完成提交或者保存。如果用戶進(jìn)入層級太深，“逐層返回“的方式就不太人道了。
或者，在某些情境下，從N+1回到N，并不符合用戶的心理預(yù)期。
當(dāng)我們在討論這種情況的時候，實際上討論的是整個產(chǎn)品的頁面結(jié)構(gòu)該如何設(shè)計。
這個問題是值得我們深入思考的，筆者將在“下篇”里用整個篇幅展開討論。
參考文獻(xiàn)
http://www.visionunion.com/article.jsp?code=201907010030
本文由 @可可可可 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
- 目前還沒評論，等你發(fā)揮！
