側(cè)邊欄抽屜式導(dǎo)航(navigation drawers)分析

最近在設(shè)計一款安卓的app抄邀,忠于安卓5.1的設(shè)計規(guī)范以及對產(chǎn)品原型一些主要功能上的妥協(xié)冲泥,我選擇了使用側(cè)邊欄抽屜式導(dǎo)航瓷患。

一查剖、優(yōu)缺點

優(yōu)點:突出核心功能囱嫩,將其他的功能隱藏掉洞辣。

缺點:

1.不易發(fā)現(xiàn)胚吁,導(dǎo)航性差

2.效率低效

3.與平臺(iOS)原生導(dǎo)航模式?jīng)_突

4.并不是一目了然

Luis Abreu在他的一篇文章“為什么要避免使用漢堡包菜單”中一語中的的指出漢堡包菜單的問題延窜,全文分析得很透徹恋脚,具體可以看(http://daichuanqing.com/index.php/archives/6241)

二腺办、為什么抽屜式導(dǎo)航衰退

我自己討厭抽屜式導(dǎo)航,認(rèn)為大部分APP會使用抽屜式導(dǎo)航糟描,是為了突出核心功能怀喉,將其他不重要的功能隱藏掉,以此來增加頁面的簡潔感與美觀度船响。而抽屜式導(dǎo)航當(dāng)中的內(nèi)容對于用戶來說點擊率是非常低的躬拢。

而且隨著手機屏幕越來越大的趨勢,現(xiàn)在手機屏幕尺寸大多在4——6英寸中間见间,具體調(diào)查數(shù)據(jù)如下聊闯。


而下面這張圖,非常直觀明了的告訴了我們米诉,為什么抽屜式導(dǎo)航衰退了菱蔬。因為,一個需要被經(jīng)常操作的入口,現(xiàn)在拴泌,處在了操作盲區(qū)魏身,左上角的區(qū)域顯然是不常用區(qū)域。



三蚪腐、主流導(dǎo)航:底部導(dǎo)航欄

底部導(dǎo)航欄這是最常見和實用的箭昵,盡管會占據(jù)一些屏幕空間,但它的好處確實足夠多:

·可見性強:全都在你的屏幕上

·結(jié)構(gòu)清晰:最多只能五個標(biāo)簽

·交互方便:只需點一下回季,搞定

但這對icon的要求會很高宙枷,它必須要易于理解,最好底部用文字說明茧跋。

微博慰丛,微信,QQ瘾杭,淘寶诅病,intagram,美團,足記等app都是使用底部導(dǎo)航。

其他形式的導(dǎo)航還有:頂部導(dǎo)航粥烁,滑動導(dǎo)航贤笆,bag和下拉導(dǎo)航......

四、側(cè)邊欄抽屜式導(dǎo)航不好么

但是事實真的是側(cè)邊欄抽屜式導(dǎo)航不好么讨阻,為什么google推出material design5.0的設(shè)計規(guī)范里專門提出一欄來說drawer呢芥永。(而且我最愛的知乎也是側(cè)邊欄抽屜式導(dǎo)航!6鬯薄)

下面我們看下material design 的官方文檔:http://www.google.com/design/spec/patterns/navigation-drawer.html

官方規(guī)范描述如下:

導(dǎo)航抽屜面板,從當(dāng)前界面的左邊劃出埋涧,顯示應(yīng)用程序的主要導(dǎo)航選項。

用戶可以把導(dǎo)航抽屜在屏幕上劃動來從屏幕的左邊緣或通過觸摸操作欄上的應(yīng)用程序圖標(biāo)奇瘦。

隨著導(dǎo)航抽屜的擴展,它覆蓋的是內(nèi)容而不是操作欄棘催。抽屜完全擴展時,操作欄調(diào)整其內(nèi)容通過替換當(dāng)前的操作欄標(biāo)題與上下文的應(yīng)用程序名稱和刪除所有操作視圖導(dǎo)航下面的抽屜里。溢出菜單設(shè)置的標(biāo)準(zhǔn)動作條目和幫助仍然可見耳标。

也就是說醇坝,安卓官方設(shè)計規(guī)范中認(rèn)為drawer應(yīng)該是同時支持滑動與圖標(biāo)點擊兩種呼出觸發(fā)動作,這也很適用于安卓手機大部分的大屏幕次坡。同時這樣的呼出手勢呼猪,一定程度上也是很順手的。

隨著大屏手機的出現(xiàn)砸琅,實體鍵盤的減少宋距,虛擬鍵盤會越來越常見。所以如果安卓采用和iOS一樣的底部導(dǎo)航的話明棍,會出現(xiàn)雙重底部bar的樣子乡革,特別惡心寇僧。所以安卓5.0采取的解決方案是:導(dǎo)航放在屏幕上的 tab欄并且可以左右切換摊腋,加上可以拉出的側(cè)邊欄抽屜式導(dǎo)航沸版。

這種呼出的交互方式是對 drawer在大屏手機中的不足的改善。同樣Navigation drawer的存在于android應(yīng)用中的既是必要的也是一種趨勢兴蒸。

隨著安卓應(yīng)用市場的設(shè)計規(guī)范化视粮,側(cè)邊抽屜欄式會越來越常見,也會逐漸成為用戶的一項用戶習(xí)慣橙凳。但建議重要的內(nèi)容還是獨立出來置于主頁面蕾殴,側(cè)邊欄目前還只適合次級重要的功能。

最最最重要的事:使用哪種類型的導(dǎo)航一定要具體還是要結(jié)合自己的產(chǎn)品進(jìn)行分析岛啸。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末钓觉,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子坚踩,更是在濱河造成了極大的恐慌荡灾,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件瞬铸,死亡現(xiàn)場離奇詭異批幌,居然都是意外死亡,警方通過查閱死者的電腦和手機嗓节,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進(jìn)店門荧缘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人拦宣,你說我怎么就攤上這事截粗。” “怎么了鸵隧?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵桐愉,是天一觀的道長。 經(jīng)常有香客問我掰派,道長从诲,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任靡羡,我火速辦了婚禮系洛,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘略步。我一直安慰自己描扯,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布趟薄。 她就那樣靜靜地躺著绽诚,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上恩够,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天卒落,我揣著相機與錄音,去河邊找鬼蜂桶。 笑死儡毕,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的扑媚。 我是一名探鬼主播腰湾,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼疆股!你這毒婦竟也來了费坊?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤旬痹,失蹤者是張志新(化名)和其女友劉穎葵萎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體唱凯,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡羡忘,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了磕昼。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片卷雕。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖票从,靈堂內(nèi)的尸體忽然破棺而出漫雕,到底是詐尸還是另有隱情,我是刑警寧澤峰鄙,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布浸间,位于F島的核電站,受9級特大地震影響吟榴,放射性物質(zhì)發(fā)生泄漏魁蒜。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一吩翻、第九天 我趴在偏房一處隱蔽的房頂上張望兜看。 院中可真熱鬧,春花似錦狭瞎、人聲如沸细移。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽弧轧。三九已至雪侥,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間精绎,已是汗流浹背速缨。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留捺典,地道東北人。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓从祝,卻偏偏與公主長得像襟己,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子牍陌,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內(nèi)容