抽屜式導航怎么用?這4種場景教你正確的設計姿勢
2012年,path首先使用了漢堡菜單作為產品的導航方式來替代原本的標簽頁的導航方式。一時引起了各大廠商的跟風,Youtube、facebook等App都紛紛把自己的導航改成了抽屜式導航。但由于沒有統一的規范,各個產品的抽屜導航設計也各不相同,為了控制Android平臺日益混亂的抽屜交互方式,2013 Google I/O大會之后,Google將Navigation Drawer納入了Android Design規范當中,隨后大量應用開始采用這種交互模式【1】。
不過慢慢的,包括youtube和facebook在內的很多app都將抽屜式導航換回了原來的標簽頁導航,從此,對于抽屜式導航的爭辯就一直沒有斷過。并且慢慢的,對于抽屜式導航的批評漸漸多于肯定【2】。我摘取其中的兩則批評如下。
…上圖的 APP 將選項卡(tab row)變成抽屜式導航菜單(drawer menu),用戶在相應功能間的切換率急劇下降。…很多用戶還沒有建立起相應的心理模型(尤其是抽屜式或者漢堡包菜單)盡量將 APP 的核心功能放在用戶可以看得到地方。
觸摸操作中,手勢永遠要比點擊優先級低?,F代觸摸操作習慣畢竟只流行了幾年,然而傳統PC上的操作習慣已經實行了將近20年。所以通過滑動來切換Tab不會比點擊切換來的直觀。
——石頭們
總結一下,對于抽屜式導航的批評主要有如下幾點:
1. 可見性不好:
- 首先抽屜式導航的入口是三條杠,對于部分用戶來說,他們并不能準確知道這三條杠可以呼出抽屜式導航;
- 抽屜式導航畢竟是隱藏起來的,沒有現有標簽式導航來的明顯。
2. 操作復雜。抽屜式導航的切換可以直接點擊,如果Tab放在上方可以直接滑動切換。但是抽屜式導航的切換就要先呼出側邊欄,然后再點擊,相對比而言,操作更加繁瑣。
3. 與現有的交互方式沖突。抽屜式導航可以從屏幕左邊緣向右滑動喚出,與iOS的后退操作沖突。但是這本來就是Android的設計規范,并不一定適用于iOS,所以我覺得的這個批評不成立。
但是,正如那句老話“垃圾是放錯地方的資源”,我始終相信,沒有不好的交互設計,只有不適合產品使用場景的交互設計。所以抽屜式導航也是有它的正確使用方法的。
首先關于這個入口的問題,我覺得暫時是無解的,但是這是可以通過長期的用戶教育來實現的。正如現在的開關鍵(一個圓圈加一條杠),這個設計其實并不能一目了然地讓人知道這是開關鍵,但是經過長期的使用,現在大部分人都會知道這是開關鍵。所以,這個問題就只能交給時間來解決了。
但是除此之外,上面的批評1,2總結一下就是切換麻煩(批評3不太站得住腳)。只是,如果產品的導航不需要頻繁切換呢?如果有其他的切換入口呢?那么問題就迎刃而解了。那么有沒有產品是這樣的呢?答案是:當然有。下面我就結合一些例子來講講抽屜式導航的正確使用方式。
1. 導航模塊有主次
抽屜式導航的使用場景首先一點是:導航的模塊是有主次之分的。相對比于常用的標簽式導航而言,抽屜式導航的模塊之間主次區分更加明顯。
- 當啟動應用時,標簽式導航的每個模塊入口都是可見的。
- 標簽式導航的模塊切換非常容易,通常是點擊(底部Tab)或者滑動(頂部Tab)操作。
- 當進入某個模塊時,其他模塊的入口依舊清晰可見。
基于以上三點,標簽式導航模塊之間的區分不是特別大。
但是對于抽屜式導航而言,以上三點都不成立。所以,相對而言,抽屜式導航的第一個模塊的重要程度要遠遠大于其他的模塊。也就是說,當不同導航模塊之間存在明顯的主次之分時,才可以考慮使用抽屜式導航。
舉個例子,豆瓣一刻的導航模塊如下:
一刻的導航
如上圖,因為豆瓣一刻的資訊都是嚴格按照每天為單位的,一刻的目的也是希望你當天閱讀完當天的內容。所以,一刻的核心使用場景是當日事當日畢,當天的內容(即“今日一刻”模塊)的優先級遠遠大于其他模塊。其他模塊是為次要場景設計的,即使滲透率不高,對于產品的影響也不大。
2、次要模塊可以有快捷入口
對于次要的模塊,我們并不需要嚴格保證模塊的滲透率。但是,假如我們可以提高次要模塊的滲透率,又何樂而不為呢?既然抽屜式導航的可見性不高,操作繁瑣,那為什么不可以另辟蹊徑?設置一個可以見高,操作便捷的入口呢?答案當然是肯定的。
對于豆瓣一刻來說,模塊之間的優先級如下:今日一刻>往期內容>熱門作者、欄目瀏覽、我的喜歡。所以,往期內容模塊的使用場景是僅次于今日一刻模塊,但是又遠遠高于其他模塊。所以,針對這個模塊,可以設置更加便捷的快捷入口。豆瓣一刻的處理方式如下圖:
次要內容快捷入口
在每日一刻內容列表的最下方設置了一個按鈕,作為往期內容模塊的快捷入口。這樣的快捷入口,一方面不會干擾最主要的內容,因為它設置在頁面最后面。另一方面,當用戶閱讀到最后的時候,假如用戶還有強烈的閱讀愿望,那么這個入口簡直就是沙漠中的甘泉。
最最巧妙的一點,為什么這里不用上拉刷新而是使用按鈕呢?因為上拉刷新的內容往往是銜接在當前頁面下的,同時上拉刷新的操作成本很低。但是,往期內容模塊與今日一刻的區分度又比較大,銜接在當前頁面下并不合適,操作太便利的話又顯示不出模塊之間的區分度。所以,這里采用按鈕而不是上拉刷新。
3、應用首次啟動進行引導
當然,為了解決可見性的問題,還需要在首次啟動應用的時候進行引導。對于抽屜式導航的引導,有兩種方式:
- 啟動應用自動打開導航;
- 指引用戶點擊漢堡菜單按鈕,然后再彈出導航。
兩種引導各有利弊,當然好處就是都可以起到引導作用。而壞處來說:
- 第一種方法的壞處是:即使使用動畫引導,引導的效果還是不如第二種,畢竟第二種用戶是親手打開導航的;
- 第二種的壞處就是:它需要強迫用戶先完成這個操作,然后才能進行其他操作。
相對而言,這種脅迫會對用戶的控制欲造成一些傷害,用戶體驗會打一點折扣。
自動打開指引
浮層指引
4、善用小紅點
最后一個方法也是為了解決可見性不高的問題,就是利用讓人又愛又恨的小紅點,英文名稱叫Badge Notification。小紅點有兩種形式:一種是帶數字的,另一種是不帶數字。帶數字的一般是跟消息有關系,比如還有兩條消息未處理,那么小紅點就會顯示一個“2”;不帶數字的一般就是引導作用,告訴用戶這里有東西需要你查看。
普通小紅點
帶數字的小紅點
由于小紅點對于用戶來說確實體驗不太好,很多人都會有強烈的強迫癥要消滅這些小紅點。所以,針對用戶的這種心理,小紅點反而成為了產品的一種非常高效、簡潔的引導方式。
不過,有句話要說的是:小紅點雖好,可不要貪杯喲。適當適量的引導可以處于一種“既觸發了用戶的強迫癥又避免讓用戶厭惡”的狀態。如果一旦超過這個度,產品就有可能會被拋棄,所以謹慎使用小紅點。
再次重復一下那句話,垃圾是放錯地方的資源。沒有錯誤的控件,只有使用不當的控件。所以與其指責抽屜式導航的種種錯誤,不如找一個恰當的場景去承載它,讓它發揮自己的閃光之處。以上就是我對于抽屜式導航使用的一些心得。
【1】交互設計新手必看!探秘抽屜導航的前生今世?http://www.aharts.cn/ucd/92222.html
【2】哪些因素阻礙國內 BAT 的移動應用采用 Material Design?-Kenny MacCormick的回答-知乎?https://www.zhihu.com/question/37376355/answer/71940532
本文由 @Autumn阿秋?原創發布于人人都是產品經理?,未經許可,禁止轉載。
有點意思
最近一直在考慮這個問題,總結的好棒,大贊!