底部導航(Bottom Navigation)與抽屜式導航(Navigation Drawer)的對決!

導航,依據Android的設計規範定義:是指用來引導用戶在應用程序中移動,說白話一點,就是如何讓你的產品用戶能找到他的目的地,而一個設計理想的導航,除了能突顯出產品核心外,更能有效快速的引導用戶完成任務。

移動裝置的導航模式目前常見的有抽屜式導航(Navigation drawer)、標籤式導航(Tab Bar、Bottom navigation)、導覽式導航(List、Springboard、Card)等等,而本篇文章這次想探討的是最常被拿來比較的Navigation drawer與Bottom navigation。

說起Navigation drawer與Bottom navigation這兩個導航,只能說各有各的優缺點,也因他們的優缺點可說是互相交換的,所以就最常被拿來比較,下面簡單說明這兩個導航:

一、抽屜式導航(Navigation drawer)

源起於Android,發展至今在iOS上也能看到這樣的應用。它通常放於螢幕畫面的左上方,有非常代表式的圖示"三",在Android設計規範中屬第一級導航,當導覽目的地大於5個以上時,就適合使用。

優點:
1.節省螢幕空間:在小小的螢幕上空間更顯珍貴,抽屜式導航最明顯的優點就是能節省空間,所以當功能多時,就能把較不重要功能收起來,讓主要內容有更多的空間。
2.廣展性佳:因可隱藏起來,所以也創造了自己的空間,對於之後有新增的同層級功能時,這裡就會是它們的好去處。

缺點:
1.單手操作不易:目前Navigation drawer主要放在左上方,如沒有支援手勢的操作就需點擊開啟,且如今的手機螢幕也越來越大,它放置的位置很難單手操作開啟,且開啟後重要的功能也是優先放在上方,亦不利單手點擊。
2.可見性差:因隱藏起來,當然無法在第一時間得知有哪些選項,甚至對於一些新手用戶來說,還不知道可以點擊開啟。

左:Gmail  中:巴哈姆特  右:mobile01
Gmail:僅使用Navigation drawer來導航,我認為這是適合且理想的設計,信箱的使用主要在收信、看信、寫信,因此應將空間給重要的內容使用,且信件通常會有大量的分類選項,需要有擴充的空間,加上用FAB做為寫信的入口輕易可見,不會有讓人找不到的困擾。

巴哈姆特與mobile01:他們的抽屜式導航主要放置的是一些個人設定相關功能與內容的分類,因這些選項不是會經常用到的功能,將他們隱藏起來亦是很合理的。

二、底部導航(Bottom Navigation)

是iOS最常見的用法(還是說規範?),在2016年開始,Android也開始使用這樣的設計並加入設計規範中。它固定放在螢幕底部,導航目標約3~5個項目,因它不能做滑動設計,所以大於5個以上,就需選擇其他的導航方式,像是Tabs或Navigation drawer。

優點:
1.明顯易見:打開APP就看見項目,免去尋找的困擾。
2.重點突顯:因選項放置有限,所以通常就是提供重要的功能,且因項目較少,容易找也容易記住。
3.告訴用戶目前所在位置:因為固定底部,無論畫面如何切換,用戶都能明確知道現在在哪,較不易迷路。
4.有利單手操作:因固定在底部,所以無論左右手操作或螢幕的大小變化,都能輕鬆的點擊。

缺點:
1.導航數量有限、擴充性差。
2.佔空間:因會佔用畫面的一定高度,不過現在手機螢幕也越來越大,這影響就相對變小了。

左:Opera mini  中:instagram  右:youtube
上圖中的三個APP,因他們的項目不多,所以選用了底部導航模式,可以讓用戶一眼就看清功能,在頁面的轉換上亦能清楚標示,而他們項目所用的圖示多是目前大眾認知相同的圖示,較不會誤解,不過youtube有多加文字說明,雖然讓底部導航看來較複雜些,但加上文字確實是更利於判斷的。

三、在一起吧!

觀看現在的APP多數都會用到1~2以上的導航方式,從中也可看出當APP的項目少時,多數是使用底部導航的,而同時有底部導航和抽屜式導航的APP也不在少數,尤其是購物類型的APP,用的導航樣式就更多樣了。其實每種導航各有各的特色,也各有各自適合使用的情境,會覺得它是缺點時,就表示在一開始的導航規劃上就有誤了,理當是了解產品目的後,從這些導航中找出最適合該產品的模式,這樣才能完成用戶導航的任務。

左:PChome購物  中:雅虎購物中心  右:蝦皮購物
(使用了底部導行、抽屜式導行與宮格式導航)
左:FB   右:google
上圖的FB與google一個用頂部導航,一個用底部導航,但是他們在最後一個選項,都用了"三"這個圖示,個人認為這樣的模式很理想也實用,可說是結合了這兩種導航的優點,讓導航更發揮他的意義。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *