#我是一個可愛的搬磚工系列# 看了 @霖醬 的分享,自己也嘗試著對照英文翻譯學習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
把最常用的動作放在左邊, 朝著最右邊最不使用的動作前進。任何不適合應用程序欄的剩余操作都可以進入溢出菜單。
當應用程序欄寬度發生變化時, 操作會移入和流出溢出菜單, 如設備從橫向旋轉到縱向方向。有關此的更多指南可在頂級應用程序欄行為中使用。
行為
滾動
滾動時, 頂部應用程序欄可以保持到位, 或以下列方式進行轉換:
· 向上滾動隱藏頂部應用程序欄
· 向下滾動顯示頂部應用程序欄
當頂部應用程序欄滾動時, 它的海拔高于其他元素就會變得明顯。
· 頂部應用程序欄在滾動時消失, 并在向下滾動時出現。
· 頂級應用程序欄可以定位在與內容相同的高度。在滾動時, 它們會增加海拔, 并讓內容在它們后面滾動。
· 當向上滾動時, 使用圖像的突出的頂級應用程序欄可以轉換為普通的頂級應用程序欄。在用戶滾動回頁面頂端之前, 它們不應返回到突出的模式。
嵌套操作
調整屏幕大小時, 頂部應用程序欄將隨之調整大小。操作被合并到溢出菜單中。
操作定位
操作將從右向左移動到溢出菜單, 使最常用的操作最后移動到溢出菜單。
當頂部應用程序欄調整大小時, 操作將從右向左移動到溢出菜單。縮小到62.5%
上下文操作欄
使用
頂級應用程序欄可以轉換為上下文操作欄, 以便為所選項目提供上下文操作。例如, 當用戶從庫中選擇照片時, 頂部應用程序欄將轉換為上下文應用程序欄, 其中帶有與所選照片相關的操作。
當頂級應用程序欄轉換為上下文操作欄時, 將發生以下更改:
· 條形圖顏色更改
· 導航圖標被關閉圖標替換
· 頂部應用程序欄標題文本轉換為上下文操作欄文本
· 使用上下文操作替換頂級應用程序欄操作
關閉后, 上下文操作欄將轉換回頂級應用程序欄。
將頂級應用程序欄轉換為上下文操作欄
分析
· 關閉按鈕 (而不是導航圖標)
· 上下文標題
· 上下文操作
· 溢出菜單 (可選)
END.THANKS FOR YOUR READING~
如有不當,還請多多指教~