Intro 簡介
標題工具欄始終顯示在頁面頭部。標題欄的一個主要優(yōu)點是,始終可見,并且不會滾動離開。它包含了與整個頁面相關的操作。
我們的一般準則是,只使用圖標按鈕或文本按鈕。圖標和文本不應合并為一個按鈕。按鈕始終右對齊。
按鈕從經常使用到很少使用進行排序,這樣可以確保最重要的按鈕最后進入 overflow(溢出狀態(tài))。
Usage 用法
請使用標題工具欄,如果:
- 頁面中包含多個控件,這些操作對整個頁面有效。
請不要使用標題工具欄,如果:
- 您有影響整個頁面的關閉或完成操作。請將它們放在頁腳工具欄中。
- 您有屬于某個特定 UI 元素的操作。請將它們放在離相應對象盡可能近的位置(例如,在表格中或者圖表工具欄中)。
Responsiveness and Adaptiveness 響應性和適應性
要啟用響應性,請使用 Overflow Toolbar 控件。更多相關信息,請參閱 toolbar overview 文章中的相應部分。
在桌面(緊湊模式)、平板電腦和智能手機(舒適模式)上,工具欄的高度會相應變化。有關舒適模式和緊湊模式的更多信息,請參閱 content density(內容密度)。
Components 組件
標題工具欄可包含以下組件:
- 應用程序特定的操作
- 通用操作
以下操作可視為通用操作:
- 添加
- 標記和收藏
- 分享菜單
- 溢出(overflow)
- 分頁
Behavior and Interaction 行為和交互
應用程序特定的操作
若有需要,應用團隊可為應用自定義操作。在這種情況下,文本按鈕應當包含簡短、明確的文本,用于解釋按鈕所執(zhí)行的操作。按鈕文本通常是一個單詞的動詞(比如,Share(分享))。請注意,翻譯成其它語言后,UI 中的文本字符串長度可能會增加。
添加(通用)
添加(項目或行)操作可顯示為通用的圖標按鈕或更詳細地描述該操作的文本。將操作放置盡可能靠近內容的位置。請注意,如果您使用的是圖標按鈕而不是文本,那么請將圖標放置在文本操作的右側。如果應用開發(fā)團隊想要使用多個操作(例如,添加、編輯和刪除等)的組合,我們建議使用文本按鈕。只有這樣,按鈕才能并排排列。
如果「添加」操作是主要功能,則不應將其移入 overflow 中。
如果應用中包含 2 個以上的「添加」操作,或者圖標的含義不夠明確,那么請使用文本按鈕。
編輯和刪除(通用)
如果要執(zhí)行全局編輯操作,請使用「編輯」按鈕。
如果要執(zhí)行全局刪除操作,請使用「刪除」按鈕。
收藏和標記(通用)
用戶可將某個對象標記為「收藏」或者「標記」,以便快速進行后續(xù)檢索。用戶通過點擊標題欄中相關的通用「收藏」或「標記」按鈕來執(zhí)行此操作。更多相關信息,請參閱 flag and favorite。
分享(通用)
「分享」菜單允許用戶在當前使用的應用程序之外處理內容。它可包含各種操作。所有的按鈕要么只包含文本,要么包含圖標和文本的組合。每個應用程序都可以使用和補充以下操作:
- 發(fā)送電子郵件(圖標:電子郵件)
- 在 SAP Jam 中討論(圖標:討論-2)
- 在 SAP Jam 中分享(圖標:分享-2)
- 發(fā)送消息(圖標:發(fā)送)
- 保存為磁貼(圖標:添加收藏)
- 打印(圖標:打印)
- 導出為 Excel(圖標:Excel 附件)
- 導出為 PDF(圖標:pdf 附件)
- 導出為…
- 在…中打開
如果您希望用戶經常使用「在…中打開」功能,那么請將其直接放在標題工具欄中。
Overflow(通用)
如果應用程序使用 overflow 工具欄,則自動生成 overflow。如果沒有足夠的空間可容納工具欄上的所有操作,或者某些操作被認為不如其他操作重要,則激活 overflow。在這種情況下,應用團隊可決定僅在 overflow 中顯示某些特定的操作。
應用團隊還可決定某些操作是否重要到永遠都不應被移入 overflow。
從版本 1.30 開始,overflow 工具欄就增加了新的功能。現(xiàn)在,「…」(overflow)按鈕是一個切換按鈕,用于控制 overflow 菜單的開啟和關閉。
用戶點擊 overflow 按鈕來打開氣泡浮層。在這個動作面板中,所有的圖標按鈕都帶有文字標簽,用戶可 overflow 以下控件:
- sap.m.SegmentedButton 分段按鈕——顯示在 overflow 中時,分段按鈕處于選擇模式,看起來像一個選擇按鈕,盡管在技術上,它仍舊是一個分段按鈕。
- sap.m.Select 選擇器——顯示在 overflow 中時,它始終處于默認模式,以利用額外空間的優(yōu)勢,盡管它在工具欄中被設置為圖標模式。
- sap.m.ToggleButton 開關
- sap.m.Checkbox 復選框
- sap.m.Input 輸入框
- sap.m.SearchField 搜索框
- sap.m.ComboBox 組合框
- sap.m.DateTimeInput 日期時間輸入框
分屏布局有自己的 overflow 菜單。
所有按鈕從右到左進入 overflow 菜單。這樣可確保最重要的按鈕是最后一個被移入 overflow 菜單。分頁(通用)
如果您想導航至上一個或下一個對象,請使用「分頁」按鈕。
如果您正使用「分享」按鈕,那么請將「分頁」按鈕放在「分享」按鈕的右側。
Styles 樣式
按鈕樣式應當用于幫助用戶,而不是用于裝飾。
應當為用戶主要使用的操作(例如,編輯、創(chuàng)建和保存)定義它們。
使用正向、負向,或者強調樣式的按鈕。避免在同一個屏幕上同時使用這兩種樣式。
- 例外 1:出現(xiàn)「消息」按鈕時。
- 例外 2:對象被標記為「已標記」或「收藏」。
更多相關信息,請參閱 button。
Guidelines 準則
請參閱 toolbar overview(工具欄概述) 文章中的「指南」部分。
原文:Header Toolbar | SAP Fiori Design Guidelines
備注:文章內容翻譯自 SAP - Fiori Design Guidelines。翻譯包含個人理解,僅作為個人學習筆記使用。如有錯誤,求指正呀,非常感謝 ^^