抽屜導航的發展歷史

meng發表于 2014/07/21

作為APP中隨處可見的側邊抽屜導航,你了解它的發展歷程嗎?即使你的應用中大都采用這種導航方式,你知道它的更迭變化嗎?今天和大家一起來看看抽屜導航的成長和軌跡。

交互新手必看!探秘抽屜導航的前生今世

抽屜導航最早源自于Youtube,如下截圖。

交互新手必看!探秘抽屜導航的前生今世

2012年,Youtube、Facebook、Path等應用紛紛使用了這樣的導航方式,一時之間引發了廣泛的關注,甚至可以稱為一種設計的趨勢。

交互新手必看!探秘抽屜導航的前生今世
但由于沒有統一的規范,各個產品的抽屜導航設計也各不相同,為了控制Android平臺日益混亂的抽屜交互方式,2013GoogleI/O大會之后,Google將抽屜導航納入了AndroidDesign規范當中,隨后大量應用開始采用這種交互模式。

關于抽屜導航利弊的討論也一直不停,直到2014年5月,Googleplus更新,去掉了抽屜導航,一時之間,又引發了熱烈的討論。

可以說抽屜導航的出現也是應需而生,較之PC,移動設備屏幕尺寸較小,可以說“寸土寸金”,抽屜導航最明顯的一個優勢就是節省屏幕空間,讓導航“藏”在側滑抽屜里,釋放了更多的空間給主要內容。

再者,Navigationdrawer實際上是開辟了另一種新的導航模式,區別于在此之前的幾種主要導航模式:腹肌式(Six-pack)、下拉 欄式(Spinner)、選項卡式(FixedTabs),它(Navigationdrawer)彌補了其他幾種模式在非頂級視圖間進行導航的缺陷—— 用戶必須退回頂級視圖,在頂級視圖切換分類之后再進入其他內容,也就是說Drawer的好處就是能夠提供在非頂級視圖間導航的能力。

如下圖所示,從3.3跳轉到4.2,如果用其他導航,需要逐級回到頂級視圖再逐級進入最終頁面,但是Drawer可以方便快捷的實現頁面之間跳轉。

交互新手必看!探秘抽屜導航的前生今世
然而自抽屜導航出現初期就一直伴隨著質疑。

對NavigationDrawer的質疑大致可歸納為以下幾點:

1. 可發現性低;

2. 在某些平臺下,和平臺固有的導航設計模式有所沖突;

3. 低效,并非一瞥即得。

大多數質疑聲都集中在這個Drawer的可發現性上,他們認為“如果看不到,自然也就想不到”(Outofsight,outofmind),在默認狀態下,Drawer都是隱藏的,與傳統的經驗——最重要最常用的功能放到首屏相悖,用戶比較難發現隱藏的導航,增加了認知負擔。

其次,在iOS平臺下,官方標準的導航模式一般左上角是返回,而且支持左滑(從左往右滑動)返回的手勢操作;Drawer也是將icon放到左上角,這樣就產生了如下圖的沖突,actionbar的左上角有多個icon,而且交互模式類似,如下圖。

交互新手必看!探秘抽屜導航的前生今世

再次,特別是在信息層級扁平的產品中,Drawer只是在視覺上簡化了界面,功能并沒有減少,“隱藏”其實是增加了“呼出抽屜”的操作,讓原本直接操作的過程變得復雜了。很難想象如果微信的Tab導航變成Navigationdrawer之后,會是怎樣一番吐槽的場景。

交互新手必看!探秘抽屜導航的前生今世

需要理清的問題

抽屜導航作為一種導航模式,已經不僅僅是Android平臺獨享,iOS甚至Windows平臺都有類似的模式,當我們提到抽屜導航,其實應該是指廣義上的,跨平臺的。

雖然都是“Drawer”,但“此Drawer非彼Drawer”,不可混為一談。這種混為一談在NavigationDrawer的各種褒貶爭論中屢見不鮮。

例如飽受詬病的“沖突”問題——“左滑返回”與“左滑呼出導航”沖突,其實就是混淆了平臺特性。之所以認為是沖突,是建立在如下基礎之上的,即“在產品任何一個層級均可激活抽屜導航”,所以需要預留左滑手勢為呼出導航,于是指出與系統手勢(左滑返回)沖突。

交互新手必看!探秘抽屜導航的前生今世

請注意,前者是Android的規范,但后者是iOS??!所以針對這樣的問題,應該按照不同的平臺分別對待,尋找解決方案。

以iOS平臺的知乎為例,使用抽屜導航,但是并非任何一個界面都可呼出導航(誰讓iOS規范里沒規定呢,嘖嘖),進入詳情頁后,左滑和左上角back都只是返回操作,需要切換到其他詳情頁或者返回問題列表頁才能呼出導航菜單,沖突問題得到解決。

誠然,只看Android,即使是官方規范中也還是存在一些沒能完美解決的問題,例如到達具體詳情頁面,ActionBar上UPicon與抽屜導航有一定意義上的沖突,保留任何一個都不那么完美。但這是另一個問題了,不是么?

被遺棄?

不久前,Googleplus更新,去掉了抽屜導航的導航形式,于是有人大呼風靡一時的抽屜導航將被遺棄,但筆者認為并非如此。問題不在于遺棄與否?而在于如何不被遺棄?換句話說就是如何正確的使用抽屜導航?

作為一種導航的模式,抽屜導航有其應用的場景和價值,而其備受詬病的“難以發現”問題也隨著用戶的長期使用下逐漸弱化,使用習慣的培養使得現在用戶再看到“三道杠”已經不再像兩年前那樣不知為何物了。

在哪些場景下建議使用抽屜導航呢?Android規范中已經總結的較好,有興趣的可點擊鏈接查看,這里簡要概括如下:

1. 頂級視圖超過3個;

2. 低層視圖交叉導航;

3. 導航層級很深;

4. 導航樞紐:用戶需要頻繁訪問導航。

上述場景,其他平臺也同樣適用。抽屜導航只是眾多導航的一種,需要考慮清楚使用場景謹慎使用。

如何正確使用?

1.新手引導,初次進入app,默認展開抽屜,然后自動收起;可以考慮設置展示頻率,例如前50次默認展開;

2.區分平臺,因地制宜??梢葬槍Σ煌脚_,做不同的解決方案,只借用抽屜的優勢,不必局限于Android官方文檔里規定的交互模式。
下面將以android平臺的亞馬遜和iOS平臺的知乎為例,以供參考。

交互新手必看!探秘抽屜導航的前生今世

Amazon(Android)

Android平臺使用抽屜導航的APP之中,數Amazon最符合Android規范,例如Actionbar固定不 動,即使是進入更深層級的界面,Actionbar也一直顯示導航icon,可隨時激活抽屜導航,支持從邊緣左滑,但不支持從屏幕中間左滑,所以不存在沖 突的問題,而且也規避了在詳情頁UPicon與導航icon的沖突問題,讓返回通過系統導航back按鈕來完成,雖然和目前主流的設計有些不同,不過邏輯 上完全沒有沖突,堪稱最“規范”的抽屜導航APP。

交互新手必看!探秘抽屜導航的前生今世

知乎(iOS)

而iOS平臺之中,以知乎為例,它只在頂級視圖(如導航中列出來的首頁、發現、我關注的等一級欄目)下的Actionbar才顯示導航icon,也 就是說只能在頂級視圖才能激活抽屜導航,而且Actionbar是會隨著導航移動(“擠出”而非“覆蓋”)。為了避免與左滑返回沖突,去除了邊緣左滑激活 抽屜導航的功能,無論是左滑還是邊緣左滑都是“返回”。整體來看,雖然無法隨時激活導航菜單,但是考慮到知乎本身產品的特性——閱讀類,在一級欄目之間頻 繁切換的需求并不強烈,更多的是在欄目下作平級的切換(上一篇、下一篇),所以這樣設計有其合理之處。

簡單對比羅列如下:

交互新手必看!探秘抽屜導航的前生今世

3.信息架構的優化是王道。Navigationdrawer只是眾多導航模式的一種,并不是萬能解。所以要想提供友好的用戶體驗,不僅僅局限在導航的設計上,應該站在更高的角度來重新思考該產品的信息架構,去除那些不必要的層級/信息,以減少信息層級,才是根本的解決之道。

©2010-2014 秦皇島易博網絡科技有限公司 我們專注于微信開發 | 網站建設 冀ICP備12004938號-3
日本乱人伦AV精品,性夜影院爽黄A爽在线看,日本乱人伦AV精品,亚洲精品综合欧美一区二区
<蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>