用途
本技能是 SAP Fiori 设计体系中针对“操作与控件”类组件的使用指南,用于回答组件选型与最佳实践问题。当用户询问“某个用例是否应该使用某个组件”、需要在相似组件之间做选择、想了解组件最佳实践,或想知道何时不应使用某组件时,可参考本技能。
本技能覆盖四个组件:Button、Product Switch、Scrollbar、User Menu。
主要能力
Button(按钮)
按钮用于触发应用中的操作,从提交数据到打开菜单或切换视图。按钮提供不同类型和视觉样式,以反映用途、优先级和意图;其行为和外观会随用户交互、布局上下文或任务类型而变化。
适用场景:
- 触发特定操作,如创建/编辑/保存、批准/拒绝、接受/拒绝、确定/取消
- 在工具栏中使用切换按钮来激活或停用某个对象或元素
- 使用切换按钮在不同状态之间切换
- 在工具栏中使用分段按钮,从一小组选项中选一个(如年/月/日、小/中/大)
- 需要提供多个选项的菜单时,使用菜单按钮
- 当一组操作中某个选项使用频率高于其他选项时,使用拆分按钮
应避免的用法:
- 链接到不同页面或对象 → 改用链接
- 显示通用导航功能 → 改用主页或面包屑
- 在多步骤流程中导航 → 改用向导
- 让用户上传内容 → 改用上传集控件
- 让用户从多个相关选项中选 → 改用单选按钮或复选框
- 用切换按钮触发活动、流程或过程(如创建、编辑、保存)→ 改用按钮
- 用切换按钮显示大量选项 → 改用菜单按钮
- 用拆分按钮在不同状态间切换 → 改用切换按钮或开关
- 对没有附加选项的独立操作使用拆分按钮 → 改用按钮
最佳实践:
- 默认按钮用于中性或信息性(次要)操作
- 强调按钮(fd-button--emphasized)表示屏幕上的主要操作
- 幽灵按钮用于触发次要操作,或在内容工具栏中突出最重要的操作
- 正向按钮(fd-button--positive)用于正向语义操作(如接受),始终带文本
- 负向按钮(fd-button--negative)用于负向语义操作(如拒绝),始终带文本
- 注意按钮(fd-button--attention)用于需要引起注意的语义操作,始终带文本
- 透明按钮(fd-button--transparent)用于页眉/页脚栏中的负向路径操作,以及工具栏中的次要操作
- 切换按钮用于在两个状态间切换,或在工具栏中激活/停用元素
- 分段按钮用于从一小组选项中选一个
- 菜单按钮用于多组操作
- 拆分按钮用于一组操作中某个选项使用频率高于其他选项时
- 每个页面/对话框只使用一个强调按钮(表示主要操作)
- 仅图标按钮始终包含描述性文本或 aria-label
Product Switch(产品切换/应用启动器)
产品切换提供基于角色的多产品或业务线(LoB)访问。显示一个图标按钮,点击触发包含产品/业务线的弹出框。仅支持单层导航,通常放在 Shellbar 最右侧。
适用场景:
- 让用户在同一 UI 内访问多个不同产品或业务线
- 在应用或产品线之间切换
- 提供基于角色的产品导航
- 在企业应用中展示产品组合
- 从 Shellbar 实现跨产品导航
应避免的用法:
- 当前产品内的导航 → 改用 Shellbar 中的产品菜单
- 多级导航层级 → 改用侧边导航或菜单
- 产品很少且能放入主导航 → 纳入主导航
- 单产品应用 → 不需要
最佳实践:
- 放在 Shellbar 最右侧
- 产品图标使用 SAP Icon Fonts 或 Avatar 组件(尺寸 S,48x48 px)
- 头像支持 PNG、JPG 和 SVG 格式
- 所有图标渲染在 48x48 px 边界框内以保持一致
- 点击触发弹出框显示产品列表
- 导航保持单层
- 提供清晰的产品名称和图标
- 根据角色/权限显示用户可访问的产品
- 保持所有产品图标视觉一致
- 限制为用户有权访问的产品
- 不要用于产品内导航
Scrollbar(滚动条)
主题化滚动条遵循 Fiori 3 设计指南。在支持自定义滚动条的组件中,优先于浏览器默认滚动条。可在 Chrome、Safari、基于 WebKit 的浏览器中工作;Firefox 部分支持(无悬停效果);IE 显示默认滚动条。
适用场景:
- 遵循 Fiori 3 指南、含可滚动内容的组件中
- 应用内需要一致的主题化
- 基于 WebKit 的浏览器(Chrome、Safari、Edge Chromium)
- 需要与 SAP 设计系统匹配的主题化滚动条
应避免的用法:
- IE 浏览器(不支持)→ 自动显示默认滚动条
- 内容无需滚动即可容纳 → 不需要滚动条
- 特定 UX 需要原生滚动行为
最佳实践:
- 在 Fiori 3 组件中优先于浏览器默认滚动条
- 自动主题化以匹配 SAP 设计系统
- 在 Chrome、Safari 和 WebKit 浏览器中效果最佳
- 在 Firefox 中优雅降级(无悬停效果)
- 在 IE 中回退到默认滚动条
- 与其他 Fiori 组件保持一致
- Firefox 为部分支持,悬停效果不生效
- IE 回退到默认浏览器滚动条
- 跨目标浏览器测试滚动条外观
- 不要依赖 Firefox 中的悬停效果
User Menu(用户菜单)
用户菜单是 Shell Bar 的组成部分,通过点击最右端的头像访问。提供跨所有屏幕可用的用户专属选项,显示当前用户信息、账户切换、用户菜单项、产品特定功能,可包含登录/登出操作、设置、法律信息。
适用场景:
- 呈现用户专属信息、设置和操作
- 支持账户切换
- 显示产品相关和法律信息
- 便于执行登录或登出操作
- 显示当前用户信息
- 访问用户偏好和设置
- 显示用户专属菜单项
应避免的用法:
- 导航元素 → 改用侧边导航或主菜单
- 主页自定义项 → 改用页面级控件
- 非活动项 → 隐藏而非显示为禁用
- 内容过载 → 保持简洁,仅限必要项
- 产品内动态内容变化 → 保持菜单稳定
最佳实践:
- 作为 Shell Bar 的一部分,通过最右侧头像访问
- 跨所有屏幕可用
- 显示当前用户信息
- 支持在账户之间切换
- 在相关时包含产品特定功能
- 显示登录/登出操作
- 显示用户设置和偏好
- 包含产品相关和法律信息
- 保持菜单简洁,仅保留必要项
- 隐藏非活动项而非禁用
- 避免导航,仅用于用户专属操作
- 不要在产品内动态更改菜单内容
- 不要包含主页自定义
- 不要用过多链接造成过载
使用方式
本技能以问答形式使用:当用户提出组件选型或最佳实践问题时,依据上述各组件的适用场景、应避免用法和最佳实践给出建议。资料未提供具体的安装命令、代码示例或调用接口。
适用场景
适用于 SAP Fiori 应用的设计与开发过程中,进行组件选型、设计评审或规范查阅,尤其是需要在相似组件之间做决策、确认某组件是否适合特定用例,或了解何时不应使用某组件时。
限制
- 本技能仅覆盖 Button、Product Switch、Scrollbar、User Menu 四个组件。
- 滚动条在 Firefox 中为部分支持(无悬停效果),在 IE 中回退为默认滚动条。
- 产品切换仅支持单层导航。
- 资料未提供具体安装命令、代码实现或平台支持细节。