移動設備屏幕狹小,雖然可以基于移動使用場景進行輸入和動效等方面的創新,但相對于PC來說,實現同等業務時,使用的頁面數量更多,也就意味著頁面層級或者說頁面跳轉會更多。另一方面移動設備隨時隨地的特性,更利于UGC(User-generated Content用戶產生內容)類型產品的發展,UGC一般采用“內容-->用戶-->該用戶的其他內容”這種網狀信息架構,從網狀某個節點快速回到出發節點是非高頻但非常緊急的操作。換言之,如何從深層級頁面快速回到首頁是一個非常值得思考的問題。本人在iOS右滑返回基礎上進行微創新,在不影響現有交互的情況下實現快速返回首頁。
現存解決方案介紹
底部標簽欄
底部標簽欄是iOS平臺最常見的導航方式,用戶認知度較高易于學習和操作,在底部標簽欄上可設置4或5個入口,便于板塊之間的跳轉。缺點是要實現快速返回首頁在深層次頁面必須保留底部標簽欄,占用過多的屏幕空間,不利于內容較為豐富的次級頁面的展示,當然可以增加在上下滑動時收起標簽欄、不滑動時展開來改善這個問題。
浮動按鈕
浮動按鈕可以看作是的底部標簽欄一種變式,將底部標簽欄的入口收進浮動按鈕里,點擊浮動按鈕后,再展開的菜單里選擇回到首頁。優點是占用的屏幕空間比底部標簽欄更少,但是并不是所有應用都適合浮動按鈕,而且相比于直觀的底部標簽欄多了一步點擊展開浮動按鈕的操作。此外浮動按鈕在Material Design(Material Design是跨平臺的通用設計規范,不僅是用于Android)中
承載的是創建、添加、分享等功能,而不是跳轉入口。
側滑菜單
側滑菜單或者說漢堡菜單由于極差的可見性,已被不少盈利為主的企業打入冷宮,在國外某可用性測試中轉化率僅2.7%。側滑菜單比較適合有單一主場景的App,例如資訊閱讀類App,用戶主要行為是瀏覽資訊列表和閱讀詳情,不會頻繁的切換到其他板塊。
WebView標題欄關閉
WebView是在原生App內(Native App)打開網頁內容所用的控件,一般是全屏展示,由于網頁也有跳轉的特性,因此普遍的做法是在左上角的返回旁邊加上關閉。返回的作用是網頁內的跳轉,而關閉是指關閉WebView回到原生App內,WebView在用戶的認知里不是一個App的頁面(是網頁的頁面),而是一個全屏的對話框(Dialog)。因此標題欄關閉只適用于WebView或全屏Dialog。返回和關閉挨在一起也容易誤操作,比如亞馬遜將返回和漢堡菜單放在左上角,遭到不少用戶吐槽。
靈感來源pull to reload/open/close
Chrome瀏覽器iOS版在2015年4月份對下拉刷新再設計(re-design),在下拉時除了直接松開手指進行刷新外,摁住左右滑動再松開打開新標簽頁或關閉當前標簽。對于初級用戶來說,新增的兩個功能是隱性的,完全不會影響到原有的下拉刷新,不會讓最常用的功能變復雜。對于有經驗的用戶來說,兩個新功能可以提高瀏覽多網頁時的效率。我在想能否從手勢出發在不影響原有交互的情況下,設計一種返回首頁的手勢呢。
我的drag to back/home方案
事實上,從屏幕左側邊緣向右滑動手勢已經代替左上角返回按鈕,成為iOS平臺使用頻率最高的返回方式。我的方案是:向右滑動時如果按住再向下滑動松手即可回到首頁,直接向右滑動依然是返回上一頁。另外此交互出現在第二層級時沒有回到首頁(第二層級的頁面返回上一頁和回到首頁結果是一樣的)。
本方案的優點有:1.不占用額外的屏幕空間、2.與iOS原生返回手勢結合易于使用、3.手勢為兩次連續滑動操作方便。當然也有缺點:1、比較隱秘初級用戶可能發現不到,需要一定的引導和教育。2、在非iPhone設備上(iPad、Apple Watch等)屏幕左側邊緣向右滑動手勢并不是一個常用的返回方式,換言之此方案更適合iPhone。
參考資料
《Material Design中文版》http://wiki.jikexueyuan.com/project/material-design/components/buttons-floating-action-button.html
《關于漢堡包圖標的A/B測試(2)》http://beforweb.com/node/546
《Chrome iOS Pull to reload》https://dribbble.com/shots/2022862-Chrome-iOS-Pull-to-reload