#我是一個可愛的搬磚工系列# 看了 @霖醬 的分享，自己也嘗試著對照英文翻譯學習MD的組件設計，借此加深各種組件的應用~

Material Design鏈接：App bars：top

頂部應用程序欄顯示與當前屏幕相關的信息和操作。

使用

頂部應用程序欄提供與當前屏幕相關的內容和操作。它用于品牌（branding）、屏幕標題（screen titles）、導航（navigation）和操作（actions）。

它可以轉換為上下文操作欄（contextual action bar）。

原則

· 保持（Persistent ） 頂級應用程序欄出現在應用程序中每個屏幕的頂部, 并且可以在滾動時消失。

· 引導（Guiding） 頂級應用程序欄提供了一個可靠的方式來指導用戶通過應用程序。

· 一致（Consistent） 頂級應用程序欄具有一致的位置和內容, 以提高熟悉度。

類型

· 常規 常規的頂級應用程序欄

· 上下文操作欄 上下文操作欄為所選項目提供操作。頂部應用程序欄可以轉換為上下文操作欄, 直到采取操作或被取消時才保持活動狀態。

分析

建議在頂部應用程序欄中為從左向右的順序放置元素:

· 在最左邊放置導航（Place navigation on the far left）

· 將任何標題放置在導航右側（Place any titles to the right of navigation ）

· 將上下文操作放置到導航右側（Place contextual actions to the right of navigation）

對于從右向左的語言, 應翻轉位置。

1. 容器 Container

2. 導航圖標 (可選) Navigation icon (optional)

3. 標題 (可選) Title (optional)

4. 操作項 (可選) Action items (optional)

5. 溢出菜單 (可選) Overflow menu (optional)

導航欄

該欄包含頂部應用程序欄的內容。可提供各種導航欄高度:

· 定期 Regular

· 突出 Prominent

突出的頂級應用程序欄可以用于更長的標題, 房子的圖像, 或提供一個更強大的存在到頂部的應用程序欄。

左—手機上的常規頂部應用欄 移動中突出的頂級應用程序欄；右—移動中突出的頂級應用程序欄

· 密 (僅限桌面) Dense (desktop only)

頂部應用程序欄可以壓縮在桌面上, 以適應更密集的布局。

左—桌面上的常規頂部應用程序欄；右—桌面上的密頂應用程序欄

· 突出的密集 (僅桌面) Prominent dense (desktop only)

桌面上突出的頂級應用程序欄可以有一個稠密的狀態來容納更密集的布局。

左—桌面上突出的頂級應用程序欄；右—桌面上突出的密頂應用程序欄

· 狀態欄中的圖像 Images in bars

條形圖可以包含圖像。推薦使用突出的頂部應用條形圖, 因為它們提供了更多的空間。不要使用使頂級應用程序欄文本和圖標難以辨認的圖像。

具有圖像的突出的頂部應用程序欄

不要 將圖像放在使頂部應用程序欄的文本和圖標難以辨認的條形圖中。

導航圖標 (可選)

導航圖標是可選的。當它出現在應用程序欄中時, 它在條形圖的左側對齊。它可以采取下列任何形式:

· 一個菜單圖標, 它打開一個導航抽屜

· 向上箭頭, 它向上導航應用程序的層次結構

· 返回上一個屏幕的后退箭頭

標題 (可選)

應用程序欄標題可用于描述:

· 用戶當前所在的屏幕

· 用戶當前所在的部分

· 正在使用的app

如果標題文本很長, 請使用突出的應用程序欄并將標題包裝為兩行。

不要在常規的頂部應用程序欄中包裝文本。

不要截斷文本, 隱藏完整標題可能會引起誤解。

不要收縮文本以適應單行。

操作項和溢出菜單 (可選)

app 操作被放在應用程序欄的右側, 無論是圖標還是溢出菜單（overflow menu）。溢出菜單在移動平臺上有所不同。更多的指導是指跨平臺的適應。（For more guidance refer tocross-platform adaptation.）

Icon placement

把最常用的動作放在左邊, 朝著最右邊最不使用的動作前進。任何不適合應用程序欄的剩余操作都可以進入溢出菜單。

通過將最常用的操作 (1) 放在最左邊、第二個最常用的操作 (2) 到它的右側, 等等來排序操作項。任何剩余或次要操作都應放在溢出菜單中 (3)

當應用程序欄寬度發生變化時, 操作會移入和流出溢出菜單, 如設備從橫向旋轉到縱向方向。有關此的更多指南可在頂級應用程序欄行為中使用。

行為

滾動

滾動時, 頂部應用程序欄可以保持到位, 或以下列方式進行轉換:

· 向上滾動隱藏頂部應用程序欄

· 向下滾動顯示頂部應用程序欄

當頂部應用程序欄滾動時, 它的海拔高于其他元素就會變得明顯。

· 頂部應用程序欄在滾動時消失, 并在向下滾動時出現。

· 頂級應用程序欄可以定位在與內容相同的高度。在滾動時, 它們會增加海拔, 并讓內容在它們后面滾動。

· 當向上滾動時, 使用圖像的突出的頂級應用程序欄可以轉換為普通的頂級應用程序欄。在用戶滾動回頁面頂端之前, 它們不應返回到突出的模式。

嵌套操作

調整屏幕大小時, 頂部應用程序欄將隨之調整大小。操作被合并到溢出菜單中。

操作定位

操作將從右向左移動到溢出菜單, 使最常用的操作最后移動到溢出菜單。

當頂部應用程序欄調整大小時, 操作將從右向左移動到溢出菜單。縮小到62.5%

上下文操作欄

使用

頂級應用程序欄可以轉換為上下文操作欄, 以便為所選項目提供上下文操作。例如, 當用戶從庫中選擇照片時, 頂部應用程序欄將轉換為上下文應用程序欄, 其中帶有與所選照片相關的操作。

當頂級應用程序欄轉換為上下文操作欄時, 將發生以下更改:

· 條形圖顏色更改

· 導航圖標被關閉圖標替換

· 頂部應用程序欄標題文本轉換為上下文操作欄文本

· 使用上下文操作替換頂級應用程序欄操作

關閉后, 上下文操作欄將轉換回頂級應用程序欄。

將頂級應用程序欄轉換為上下文操作欄

分析

· 關閉按鈕 (而不是導航圖標)

· 上下文標題

· 上下文操作

· 溢出菜單 (可選)

END.THANKS FOR YOUR READING~

如有不當，還請多多指教~