Header Toolbar 标题工具栏 | SAP Fiori

Intro 简介

标题工具栏始终显示在页面头部。标题栏的一个主要优点是,始终可见,并且不会滚动离开。它包含了与整个页面相关的操作。
我们的一般准则是,只使用图标按钮或文本按钮。图标和文本不应合并为一个按钮。按钮始终右对齐。
按钮从经常使用到很少使用进行排序,这样可以确保最重要的按钮最后进入 overflow(溢出状态)。

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 行为和交互

应用程序特定的操作

若有需要,应用团队可为应用自定义操作。在这种情况下,文本按钮应当包含简短、明确的文本,用于解释按钮所执行的操作。按钮文本通常是一个单词的动词(比如,Share(分享))。请注意,翻译成其它语言后,UI 中的文本字符串长度可能会增加。

只有当您确信用户无需借助工具提示就可轻松理解图标的含义时,才使用图标按钮。使用标准和易于识别的图标,例如,表示附件的回形针。
App-specific icon button in header toolbar

添加(通用)

添加(项目或行)操作可显示为通用的图标按钮或更详细地描述该操作的文本。将操作放置尽可能靠近内容的位置。请注意,如果您使用的是图标按钮而不是文本,那么请将图标放置在文本操作的右侧。
dd as icon button (+) in full screen mode

如果应用开发团队想要使用多个操作(例如,添加、编辑和删除等)的组合,我们建议使用文本按钮。只有这样,按钮才能并排排列。

如果「添加」操作是主要功能,则不应将其移入 overflow 中。
如果应用中包含 2 个以上的「添加」操作,或者图标的含义不够明确,那么请使用文本按钮。

编辑和删除(通用)

如果要执行全局编辑操作,请使用「编辑」按钮。
如果要执行全局删除操作,请使用「删除」按钮。


Edit and Delete in header toolbar

收藏和标记(通用)

用户可将某个对象标记为「收藏」或者「标记」,以便快速进行后续检索。用户通过点击标题栏中相关的通用「收藏」或「标记」按钮来执行此操作。更多相关信息,请参阅 flag and favorite

Favorite action in header toolbar

分享(通用)

「分享」菜单允许用户在当前使用的应用程序之外处理内容。它可包含各种操作。所有的按钮要么只包含文本,要么包含图标和文本的组合。每个应用程序都可以使用和补充以下操作:

  • 发送电子邮件(图标:电子邮件)
  • 在 SAP Jam 中讨论(图标:讨论-2)
  • 在 SAP Jam 中分享(图标:分享-2)
  • 发送消息(图标:发送)
  • 保存为磁贴(图标:添加收藏)
  • 打印(图标:打印)
  • 导出为 Excel(图标:Excel 附件)
  • 导出为 PDF(图标:pdf 附件)
  • 导出为…
  • 在…中打开
    如果您希望用户经常使用「在…中打开」功能,那么请将其直接放在标题工具栏中。

「分享」操作可出现在 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 工具栏就增加了新的功能。现在,「…」(overflow)按钮是一个切换按钮,用于控制 overflow 菜单的开启和关闭。
用户点击 overflow 按钮来打开气泡浮层。在这个动作面板中,所有的图标按钮都带有文字标签,用户可 overflow 以下控件:

  • sap.m.SegmentedButton 分段按钮——显示在 overflow 中时,分段按钮处于选择模式,看起来像一个选择按钮,尽管在技术上,它仍旧是一个分段按钮。
  • sap.m.Select 选择器——显示在 overflow 中时,它始终处于默认模式,以利用额外空间的优势,尽管它在工具栏中被设置为图标模式。
  • 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 样式

按钮样式应当用于帮助用户,而不是用于装饰。
应当为用户主要使用的操作(例如,编辑、创建和保存)定义它们。
使用正向、负向,或者强调样式的按钮。避免在同一个屏幕上同时使用这两种样式。

  • 例外 1:出现「消息」按钮时。
  • 例外 2:对象被标记为「已标记」或「收藏」。
    更多相关信息,请参阅 button

Guidelines 准则

请参阅 toolbar overview(工具栏概述) 文章中的「指南」部分。


原文:Header Toolbar | SAP Fiori Design Guidelines
备注:文章内容翻译自 SAP - Fiori Design Guidelines。翻译包含个人理解,仅作为个人学习笔记使用。如有错误,求指正呀,非常感谢 ^^


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,884评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,212评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,351评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,412评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,438评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,127评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,714评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,636评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,173评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,264评论 3 339
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,402评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,073评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,763评论 3 332
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,253评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,382评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,749评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,403评论 2 358