這是一個翻譯系列，原文是谷歌18年所出的材料設計指南（文末有鏈接），強大的材料設計將帶我們一起深入了解UI設計中的所有規范。每周會更新數篇，一共百余篇，歡迎關注哦。
頂部應用欄顯示與當前界面相關的信息和操作。
目錄
- 用法
- 剖析
- 行為
- 語境操作欄
- 主題化
- 規格
用法
頂部應用欄提供與當前界面相關的內容和操作。它用于品牌推廣、界面標題、導航和操作。
它可以轉換為基于上下文的操作欄。
原則
類型
常規型
常見的頂部應用欄
語境操作欄
語境操作欄為已選對象提供操作。頂部應用欄可以轉換為語境操作欄并一直是激活狀態，直到執行某個操作或關閉它。
剖析
對于從左到右的語言，建議在頂部應用欄元素放置的方式有
- 將導航放在最左側
- 將任何標題放在導航右側
- 將上下文操作放在導航右側
- 將溢出菜單（如果使用）放在最右側
對于從右到左的語言，則應倒過來放。
- 容器
- 導航圖標（可選）
- 標題（可選）
- 操作項（可選）
- 溢出菜單（可選）
欄
應用欄包含頂部應用欄的內容。以下是各種應用欄高度：
- 常規型
- 突出型
- 密集型（僅限桌面）
- 突出密集型（僅限桌面）
突出型
突出型頂部應用欄可用于更長的標題、容納圖像或為頂部應用欄提供更強的存在感。
- 移動設備的常規頂部應用欄
- 移動設備的突出型頂部應用欄
密集型（僅限桌面）
頂部應用欄可以在桌面端稍壓縮以適應更密集的布局。
- 桌面端常規型頂部應用欄
- 桌面端密集型頂部應用欄
突出密集型
桌面端的突出密集型頂部應用欄可以有更緊湊的布局。
- 桌面端突出型頂部應用欄
- 桌面端突出密集頂部應用欄
應用欄的圖片
應用欄可以包含圖像。建議使用突出型頂部應用欄以供裝載圖像，因為它們有更多空間。
不要使用讓頂部應用欄的文本和圖標難以辨認的圖像。
帶有圖像的頂部應用欄
不要使用讓頂部應用欄的文本和圖標難以辨認的圖像。
導航圖標（可選）
導航圖標是可選的。在應用欄用到它時，把它放在欄的左側。
可以采用以下任何一種形式：
- 菜單圖標，用于打開導航抽屜
- 返回箭頭，用于導航回到App的上一級
- 后退箭頭，返回上一個界面
標題（可選）
應用欄標題可用于描述：
- 用戶當前所在的界面
- 用戶當前所在的部分
- 正在使用的應用
默認情況下，標題在桌面端保持左對齊。移動設備和平板電腦上標題的默認位置則取決于其相應的平臺。更多信息請參閱跨平臺適配。
如果標題文本很長，請使用突出型應用欄并將標題寫成兩行。
常規型頂部應用欄不可以給文字換行。
不要省略文本，遮住完整的標題可能會導致誤解。
不要為了單行排版而縮小文本。
操作項和溢出菜單（可選）
App的操作位于應用欄右側，可以是圖標，也可以是溢出菜單。移動端的溢出菜單因平臺而異。更多相關規范，請參閱跨平臺適配。
圖標位置
將最常用的操作放在左側，從左向右常用度逐減。任何不適合應用欄的剩余操作都可以放進溢出菜單。
操作項會隨著應用欄寬度的變化而移入、移出溢出菜單，例如，當設備從橫向旋轉到縱向。 更多相關規范請參閱頂部應用欄行為。
將最常用的操作（1）放在最左側，將第二個最常用的操作（2）放在右側，依此類推。任何剩余或輔助操作都應放在溢出菜單中（3）。
跨平臺適配
在iOS上，工具欄被叫做導航欄且高度比安卓上的要矮。在安卓上，工具欄叫做頂部應用欄。
建議工具欄的標題采用平臺的默認文本對齊方式，除非是有多個操作按鈕同時存在。
半透明
材料設計使用投影來表達應用欄的高度。在iOS中，則可使用半透明來區分開應用欄和內容。
行為
滾動
在滾動時，頂部應用欄可以保留在原位，或以以下方式進行轉換：
- 向上滾動會隱藏頂部應用欄
- 向下滾動則顯示頂部應用欄
當頂部應用欄滾動時，其高于其他元素的海拔變得更明顯。
向上滾動時，頂部應用欄會消失，向下滾動時會顯示。
頂部應用欄可以與內容位于同一高度。 滾動時，它們會增加高度并讓內容在其后面滾動。
向上滾動時，使用圖像的突出型頂部應用欄可以轉換為常規型頂部應用欄。直到用戶滾動回頁面頂部時才返回突出型模式。
嵌套操作
界面大小被調整時，頂部應用欄會隨之改變大小。操作將合并到溢出菜單中。
操作定位
操作項從右向左依次移入溢出菜單，最常用的操作項最后移入。
當調整頂部應用欄大小時，操作項將從右向左依次移入溢出菜單。
縮小至62.5％
語境操作欄
用法
頂部應用欄可以轉換為語境操作欄，以便為所選項目提供情境操作。例如，在用戶從圖庫中選擇照片時，頂部應用欄轉換為具有與所選照片相關操作的語境應用欄。
當頂部應用欄轉換為語境操作欄時，會發生以下變化：
- 應用欄顏色發生變化
- 導航圖標將被替換為關閉圖標
- 頂部應用欄標題文字轉換為語境操作欄文字
- 頂部應用欄操作將被替換為情境操作
關閉后，語境操作欄將轉換回頂部應用欄。
頂部應用欄轉換為語境操作欄
剖析
- 關閉按鈕（而不是導航圖標）
- 語境標題
- 語境操作
- 溢出菜單（可選）
應用欄
當頂部應用欄轉換為語境操作欄時，應用欄應更改顏色以表明狀態變化。
主題化
Fortnightly材料主題
這款新聞App的頂部應用欄已使用材料主題進行了自定義。 定制領域包括顏色和排版。
Fortnightly的自定義頂部應用欄
顏色
|
元素 |
元素 |
屬性 |
值 |
|
容器 |
表面 |
顏色 不透明度 |
#FFFFFF 100% |
|
文本，圖標 |
表面之上 |
顏色 不透明度 |
#000000 100% |
排版
|
元素 |
類別 |
屬性 |
值 |
|
文本 |
標題6（H6） |
字體 字型 字號 大小寫 |
Merriweather Bold Italic 20 首字母大寫 |
Rally材料主題
此理財App的頂部應用欄已使用材料主題進行自定義。定制領域包括顏色和排版。
Rally的自定義頂部應用欄
顏色
|
元素 |
類別 |
屬性 |
值 |
|
容器 |
表面 |
顏色 不透明度 |
#363640 100% |
|
文本 |
表面之上 |
顏色 不透明度 |
#FFFFFF 100% |
|
圖標 |
表面之上 |
顏色 不透明度 |
#FFFFFF 60% |
排版
|
元素 |
類別 |
屬性 |
值 |
|
文本 |
標題6（H6） |
字體 字型 字號 大小寫 |
Roboto Condensed Regular 20 首字母大寫 |
Shrine材料主題
這個零售App的頂部App欄已使用材料主題進行了自定義。定制領域包括顏色和排版。
Shrine的自定義頂部應用欄
顏色
|
元素 |
類別 |
屬性 |
值 |
|
容器 |
主色 |
顏色 不透明度 |
#FEDBD0 100% |
|
文本，圖標 |
主色之上 |
顏色 不透明度 |
#442C2E 100% |
排版
|
元素 |
類別 |
屬性 |
值 |
|
文本 |
標題6（H6） |
字體 字型 字號 大小寫 |
Rubik Medium 20 首字母大寫 |
規格
移動端
常規頂部應用欄
轉載請注明：學UI網 » App bars: top 頂部應用欄
