Material Design 中的應用欄該怎麼設計？

在繼續往下聊這個話題之前，我們覺得有必要再強調一下兩個 Material Design 中的名詞：Toolbar（工具欄）和 App Bar（應用欄）。

 

首先是工具欄，這裡是一個最常見的工具欄佈局：

當然，也包括一些出現在控制元件底端或者輸入法軟體盤上方的工具集，也叫工具欄：

但根據 Toolbar 的定義，只要是工具集都可以叫工具欄，所以根據實際場合可以進行佈局的拆分。下面的設計同樣也是工具欄：

甚至 Google Map 裡這個懸浮的搜尋框的區域，也是工具欄。

所以，在設計工具欄的時候，只要工具的功能彼此相關，發揮的空間還是有很多的。

 

接下來是應用欄（App Bar）。一句話：應用欄是一種特殊的工具欄，用於呈現品牌特性、進行頁面導航、搜尋及其他相關的操作。所以相比較工具欄，應用欄擁有更詳細的設計正規化：

△ 從左至右：導航圖示、頁面標題和過濾器圖示、操作和選單圖示

 

下面讓我們來分開說說上圖中的幾個應用欄的元素。

導航圖示

應用欄最左側的導航圖示可以是：

• 一個用來開啟抽屜式導航的入口

• 一個用來返回到上一級頁面的箭頭

• 如果本介面沒有導航的操作需求，則導航圖示可以省略

 

△ 如 AliExpress，在 “我的賬戶” 主頁面，就直接提供抽屜導航（即 “三” 字形圖示，也叫 “漢堡包圖示” ）的入口供全域性移動，而在次級頁面則使用了箭頭圖示來返回上級頁面。

頁面標題和過濾器圖示

雖然顧名思義，這個區域確實是用來顯示頁面標題的，但是您可以在這裡顯示品牌的圖示或者使用品牌的特殊字型，但圖示不要使用應用的啟動圖示（Launcher Icon）。

△ WPS Office在這裡使用了品牌元素，在應用欄的框架內提升了辨識度。

 △ 30 Days Fitness Challenge 嚴格遵循了導航和標題圖示的用法

 

另外值得一提的是，頁面標題也可以新增過濾器：

△ 這裡使用一個懸浮的層來展示過濾條件，但沒有擴充套件應用欄本身

操作和選單圖示

如果應用欄裡有操作圖示（包括通過選單圖示摺疊起來的那些），則這些操作的功能必須和這個頁面有相關性。

△ 同樣拿 AliExpress 舉例，購物車的 “刪除” 操作，以及搜尋的 “拍照” 操作，都是和當前頁面相關的。

整體設計

在使用 Material Design 的時候，因為應用欄用於 “包含” 頁面下方的內容，所以應用欄下方需要有一層陰影。

△ 30 Days Fitness Challenge 的應用欄還延展出了 Tab 頁，但注意這時 Tab 頁也是應用欄的一部分，所以陰影出現在 Tab 的下面。

 

在尺寸上，根據應用欄高度的不同，頁面標題可能距離頁面最左端 72dp 或者 80dp：

△ 應用欄高 56dp 時，標題距左 72dp。

△ 應用欄高 64dp 時，標題距左 80dp。

 

在顏色使用上，請大膽去做，但請注意所有應用欄圖示要使用同一個顏色。

△ 亮色、暗色、彩色甚至透明都可以。

可以看到，使用者互動的一些結構性入口都在 App Bar，但即便如此您還是可以在這裡加入品牌的識別元素，同時還不影響其可用性。我們期待著在 Google Play Store 上看到更多方便好用，同時也能彰顯品牌個性的設計。下一個優秀的設計，也許就出自大家之手哦～

 

更多設計細節請移步：

https://material.io/guidelines/layout/structure.html#structure-app-bar

https://developer.android.google.cn/reference/android/support/v7/widget/Toolbar.html

推薦閱讀：

Android Oreo 常見問題 2.0  | Android 開發者 FAQ Vol.9

聊設計 | Fabulous 是如何抓牢使用者的？

創造 “魔術時刻” —— Android 8.0 畫中畫

想要贏回玩家, 頭十分鐘至關重要！

【視訊】Material Design設計規範的誕生