Header Toolbar 標題工具欄 | SAP Fiori

Intro 簡介

標題工具欄始終顯示在頁面頭部。標題欄的一個主要優(yōu)點是,始終可見,并且不會滾動離開。它包含了與整個頁面相關的操作。
我們的一般準則是,只使用圖標按鈕或文本按鈕。圖標和文本不應合并為一個按鈕。按鈕始終右對齊。
按鈕從經常使用到很少使用進行排序,這樣可以確保最重要的按鈕最后進入 overflow(溢出狀態(tài))。

Usage 用法

請使用標題工具欄,如果:
  • 頁面中包含多個控件,這些操作對整個頁面有效。
請不要使用標題工具欄,如果:
  • 您有影響整個頁面的關閉或完成操作。請將它們放在頁腳工具欄中。
  • 您有屬于某個特定 UI 元素的操作。請將它們放在離相應對象盡可能近的位置(例如,在表格中或者圖表工具欄中)。

Responsiveness and Adaptiveness 響應性和適應性

要啟用響應性,請使用 Overflow Toolbar 控件。更多相關信息,請參閱 toolbar overview 文章中的相應部分。

在桌面(緊湊模式)、平板電腦和智能手機(舒適模式)上,工具欄的高度會相應變化。有關舒適模式和緊湊模式的更多信息,請參閱 content density(內容密度)

Header Toolbar on Object page – Size S

Header Toolbar on Object page – Size M

Header Toolbar on Object page – Size L

Components 組件

標題工具欄可包含以下組件:

  • 應用程序特定的操作
  • 通用操作

以下操作可視為通用操作:

  • 添加
  • 標記和收藏
  • 分享菜單
  • 溢出(overflow)
  • 分頁

Behavior and Interaction 行為和交互

應用程序特定的操作

若有需要,應用團隊可為應用自定義操作。在這種情況下,文本按鈕應當包含簡短、明確的文本,用于解釋按鈕所執(zhí)行的操作。按鈕文本通常是一個單詞的動詞(比如,Share(分享))。請注意,翻譯成其它語言后,UI 中的文本字符串長度可能會增加。

只有當您確信用戶無需借助工具提示就可輕松理解圖標的含義時,才使用圖標按鈕。使用標準和易于識別的圖標,例如,表示附件的回形針。
App-specific icon button in header toolbar

添加(通用)

添加(項目或行)操作可顯示為通用的圖標按鈕或更詳細地描述該操作的文本。將操作放置盡可能靠近內容的位置。請注意,如果您使用的是圖標按鈕而不是文本,那么請將圖標放置在文本操作的右側。
dd as icon button (+) in full screen mode

如果應用開發(fā)團隊想要使用多個操作(例如,添加、編輯和刪除等)的組合,我們建議使用文本按鈕。只有這樣,按鈕才能并排排列。

如果「添加」操作是主要功能,則不應將其移入 overflow 中。
如果應用中包含 2 個以上的「添加」操作,或者圖標的含義不夠明確,那么請使用文本按鈕。

編輯和刪除(通用)

如果要執(zhí)行全局編輯操作,請使用「編輯」按鈕。
如果要執(zhí)行全局刪除操作,請使用「刪除」按鈕。


Edit and Delete in header toolbar

收藏和標記(通用)

用戶可將某個對象標記為「收藏」或者「標記」,以便快速進行后續(xù)檢索。用戶通過點擊標題欄中相關的通用「收藏」或「標記」按鈕來執(zhí)行此操作。更多相關信息,請參閱 flag and favorite

Favorite action in header toolbar

分享(通用)

「分享」菜單允許用戶在當前使用的應用程序之外處理內容。它可包含各種操作。所有的按鈕要么只包含文本,要么包含圖標和文本的組合。每個應用程序都可以使用和補充以下操作:

  • 發(fā)送電子郵件(圖標:電子郵件)
  • 在 SAP Jam 中討論(圖標:討論-2)
  • 在 SAP Jam 中分享(圖標:分享-2)
  • 發(fā)送消息(圖標:發(fā)送)
  • 保存為磁貼(圖標:添加收藏)
  • 打印(圖標:打印)
  • 導出為 Excel(圖標:Excel 附件)
  • 導出為 PDF(圖標:pdf 附件)
  • 導出為…
  • 在…中打開
    如果您希望用戶經常使用「在…中打開」功能,那么請將其直接放在標題工具欄中。

「分享」操作可出現(xiàn)在 the full screen 或者 the details screen 中,并且永遠不會移入 overflow 菜單中。它始終是右對齊。overflow 從「分享」圖標的右側開始。
Possible actions in the Share menu
Share in Header Toolbar

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 菜單。
Header toolbar on desktop with open overflow

分頁(通用)

如果您想導航至上一個或下一個對象,請使用「分頁」按鈕。
如果您正使用「分享」按鈕,那么請將「分頁」按鈕放在「分享」按鈕的右側。

Paging buttons in header toolbar

Styles 樣式

按鈕樣式應當用于幫助用戶,而不是用于裝飾。
應當為用戶主要使用的操作(例如,編輯、創(chuàng)建和保存)定義它們。
使用正向、負向,或者強調樣式的按鈕。避免在同一個屏幕上同時使用這兩種樣式。

  • 例外 1:出現(xiàn)「消息」按鈕時。
  • 例外 2:對象被標記為「已標記」或「收藏」。
    更多相關信息,請參閱 button

Guidelines 準則

請參閱 toolbar overview(工具欄概述) 文章中的「指南」部分。


原文:Header Toolbar | SAP Fiori Design Guidelines
備注:文章內容翻譯自 SAP - Fiori Design Guidelines。翻譯包含個人理解,僅作為個人學習筆記使用。如有錯誤,求指正呀,非常感謝 ^^


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。