drag to back/home——iOS快速返回首頁的手勢交互

北京/產(chǎn)品設計師/10年前/857瀏覽

版權

從網(wǎng)狀某個節(jié)點快速回到出發(fā)節(jié)點是非高頻但非常緊急的操作。換言之，如何從深層級頁面快速回到首頁是一個非常值得思考的問題。本人在iOS右滑返回基礎上進行微創(chuàng)新，在不影響現(xiàn)有交互的情況下實現(xiàn)快速返回首頁。

移動設備屏幕狹小，雖然可以基于移動使用場景進行輸入和動效等方面的創(chuàng)新，但相對于PC來說，實現(xiàn)同等業(yè)務時，使用的頁面數(shù)量更多，也就意味著頁面層級或者說頁面跳轉會更多。另一方面移動設備隨時隨地的特性，更利于UGC（User-generated Content用戶產(chǎn)生內容）類型產(chǎn)品的發(fā)展，UGC一般采用“內容-->用戶-->該用戶的其他內容”這種網(wǎng)狀信息架構，從網(wǎng)狀某個節(jié)點快速回到出發(fā)節(jié)點是非高頻但非常緊急的操作。換言之，如何從深層級頁面快速回到首頁是一個非常值得思考的問題。本人在iOS右滑返回基礎上進行微創(chuàng)新，在不影響現(xiàn)有交互的情況下實現(xiàn)快速返回首頁。

現(xiàn)存解決方案介紹

底部標簽欄

底部標簽欄是iOS平臺最常見的導航方式，用戶認知度較高易于學習和操作，在底部標簽欄上可設置4或5個入口，便于板塊之間的跳轉。缺點是要實現(xiàn)快速返回首頁在深層次頁面必須保留底部標簽欄，占用過多的屏幕空間，不利于內容較為豐富的次級頁面的展示，當然可以增加在上下滑動時收起標簽欄、不滑動時展開來改善這個問題。

浮動按鈕

浮動按鈕可以看作是的底部標簽欄一種變式，將底部標簽欄的入口收進浮動按鈕里，點擊浮動按鈕后，再展開的菜單里選擇回到首頁。優(yōu)點是占用的屏幕空間比底部標簽欄更少，但是并不是所有應用都適合浮動按鈕，而且相比于直觀的底部標簽欄多了一步點擊展開浮動按鈕的操作。此外浮動按鈕在Material Design（Material Design是跨平臺的通用設計規(guī)范，不僅是用于Android）中
承載的是創(chuàng)建、添加、分享等功能，而不是跳轉入口。

側滑菜單

側滑菜單或者說漢堡菜單由于極差的可見性，已被不少盈利為主的企業(yè)打入冷宮，在國外某可用性測試中轉化率僅2.7%。側滑菜單比較適合有單一主場景的App，例如資訊閱讀類App，用戶主要行為是瀏覽資訊列表和閱讀詳情，不會頻繁的切換到其他板塊。

WebView標題欄關閉

WebView是在原生App內（Native App）打開網(wǎng)頁內容所用的控件，一般是全屏展示，由于網(wǎng)頁也有跳轉的特性，因此普遍的做法是在左上角的返回旁邊加上關閉。返回的作用是網(wǎng)頁內的跳轉，而關閉是指關閉WebView回到原生App內，WebView在用戶的認知里不是一個App的頁面（是網(wǎng)頁的頁面），而是一個全屏的對話框（Dialog）。因此標題欄關閉只適用于WebView或全屏Dialog。返回和關閉挨在一起也容易誤操作，比如亞馬遜將返回和漢堡菜單放在左上角，遭到不少用戶吐槽。

靈感來源pull to reload/open/close

Chrome瀏覽器iOS版在2015年4月份對下拉刷新再設計（re-design），在下拉時除了直接松開手指進行刷新外，摁住左右滑動再松開打開新標簽頁或關閉當前標簽。對于初級用戶來說，新增的兩個功能是隱性的，完全不會影響到原有的下拉刷新，不會讓最常用的功能變復雜。對于有經(jīng)驗的用戶來說，兩個新功能可以提高瀏覽多網(wǎng)頁時的效率。我在想能否從手勢出發(fā)在不影響原有交互的情況下，設計一種返回首頁的手勢呢。

我的drag to back/home方案

事實上，從屏幕左側邊緣向右滑動手勢已經(jīng)代替左上角返回按鈕，成為iOS平臺使用頻率最高的返回方式。我的方案是：向右滑動時如果按住再向下滑動即可返回到首頁，直接向右滑動依然是返回上一頁。另外此交互只出現(xiàn)在第三層級及更深層級的頁面（第二層級的頁面返回上一頁和回到首頁結果是一樣的，所以沒必要）。

本方案的優(yōu)點有：1.不占用額外的屏幕空間、2.與iOS原生返回手勢結合易于使用、3.手勢為兩次連續(xù)滑動操作方便。當然也有缺點：1、比較隱秘初級用戶可能發(fā)現(xiàn)不到，需要一定的引導和教育。2、在非iPhone設備上（iPad、Apple Watch等）屏幕左側邊緣向右滑動手勢并不是一個常用的返回方式，換言之此方案更適合iPhone。