sap-fiori-guidelines

SAP Fiori 设计指南

遵循 SAP 官方设计系统标准，设计和构建 SAP Fiori 应用的全面指南。

何时使用此技能

• 设计或构建 SAP Fiori 应用
• 实现 SAPUI5 或 UI5 Web Components
• 遵循 SAP 企业 UX 模式
• 为 SAP 应用选择 UI 元素
• 实现导航、消息或数据可视化
• 确保无障碍体验和包容性设计
• 应用颜色、字体排印或视觉样式
• 设计 AI 驱动的功能、Joule 集成或引导式提示词

核心原则

SAP Fiori 基于以下五项原则：

1. 以角色为中心 - 针对特定用户角色和任务设计
2. 自适应 - 适用于各种设备和屏幕尺寸
3. 一致 - 在所有 SAP 应用中提供一致的体验
4. 简单 - 专注于关键任务，降低复杂性
5. 愉悦 - 提供引人入胜且直观的用户体验

技术选项

技术	用例
SAPUI5	完整的 SAP Fiori 应用、SAP BTP、S/4HANA
UI5 Web Components	与框架无关，可集成 React/Vue/Angular
SAP Fiori Elements	使用 OData 服务的元数据驱动型应用

参考文档

根据任务阅读相应的参考文件：

UI 元素

参考文件	内容
references/ui-actions.md	按钮、链接、切换按钮、菜单按钮
references/ui-inputs.md	输入字段、选择控件、复选框、单选按钮、滑块、日期/时间选择器、筛选栏
references/ui-containers.md	面板、卡片、对话框、弹出框、工具栏、表单、Shell 栏、用户菜单、通知中心
references/ui-display.md	头像、进度指示器、忙碌指示器、图示消息
references/ui-lists-tables.md	响应式表格、网格表格、分析表格、网格列表、列表
references/ui-navigation.md	图标选项卡栏、分段按钮、侧边导航、Shell 搜索
references/ui-messages.md	消息条、消息条 Web 组件
references/ui-ai.md	AI 按钮、AI 提示、AI 写作助手、AI 确认、引导式提示词、快捷提示词、重新生成、主页横幅
references/ui-upload.md	使用表格插件的上传集

页面类型与页面布局

参考文件	内容
references/page-types.md	对象页、列表报表、分析列表页、概览页、动态页面布局、页面页眉

基础

参考文件	内容
references/foundations-visual.md	颜色、字体排印、图标、主题、内容密度
references/foundations-interaction.md	状态、光标、屏幕阅读器支持
references/foundations-writing-and-wording.md	UX 文案、UI 文本指南
references/foundations-best-practices.md	导航、消息、对象处理、操作位置
references/foundations-ai-and-joule-design.md	AI 设计模式、Joule 助手、情境处理、AI 指南
references/foundations-integration-and-services.md	Fiori 启动板、集成模式

SAP Fiori Elements 与 S/4HANA

参考文件	内容
references/fiori-elements.md	智能模板、列表报表、对象页、表格功能、AI 输入辅助
references/sap-s4hana.md	S/4HANA 专属设计：导航菜单、产品主页、AI 错误说明

快速参考

按钮类型和用法

类型	用法
强调	主要操作 - 每个页面/对话框一个
默认/幽灵	次要操作
透明	工具栏操作、低强调
接受（绿色）	肯定语义操作（批准、接受）
拒绝（红色）	否定语义操作（拒绝、删除）

语义颜色

颜色	含义	用途
中性	默认状态	常规 UI 元素
正向（绿色）	成功、状态良好	批准、完成
严重（橙色）	警告	需要注意
负向（红色）	错误、状态不佳	拒绝、错误
信息（蓝色）	信息突出显示	中性信息

消息类型

类型	用途
错误	阻止任务完成，需要用户操作
警告	存在潜在问题，用户可以继续
成功	确认操作已完成
信息	中性信息

导航模式

模式	使用场景
逐层深入	导航至对象详情，并支持返回
全屏	完全替换当前视图
灵活列布局	在列中显示主从视图
对话框/弹出框	用于快速任务的临时叠加层

AI 组件

组件	使用场景
AI 按钮	触发 AI 驱动的操作
AI 贡献说明	透明地展示 AI 的贡献
引导式提示词	帮助用户组织 AI 请求
快捷提示词	提供预定义的 AI 交互快捷方式
重新生成	允许用户请求新的 AI 生成内容
AI 写作助手	提供行内 AI 文本辅助
本地 AI 通知	告知用户 AI 在设备端进行处理

实施检查清单

构建 Fiori 应用时：

• 每个页面/对话框仅设置一个强调按钮
• 使用恰当的语义颜色指示状态
• 使用 Message Popover 处理消息
• 提供无障碍标签和 ARIA 属性
• 针对不同屏幕尺寸采用响应式布局
• 保持导航模式一致
• 使用值状态进行表单验证
• 为异步操作显示加载指示器
• 在适用时，AI 功能遵循 Joule 设计模式

关键指南

按钮

• 对主要、次要和语义操作使用文本按钮
• 仅在图标隐喻具有普遍认知度时使用纯图标按钮
• 始终为图标按钮提供工具提示
• 按钮文本：使用祈使动词（保存、编辑、创建）

表单

• 按逻辑对相关字段分组
• 使用恰当的字段标签（始终显示）
• 使用值状态显示验证错误
• 提供清晰的错误消息

表格

• 大多数情况下使用响应式表格
• 复杂数据分析使用网格表格
• 有汇总需求时使用分析表格
• 始终提供列标题

消息

• 多条消息使用 Message Popover
• 仅在需要中断操作的错误时使用 Message Box
• 临时成功确认使用 Toast
• 对表单字段进行行内验证

AI 集成

• 使用 AI 按钮触发 AI 操作
• 显示 AI 贡献说明，确保透明度
• 提供引导式提示词，帮助用户与 AI 交互
• 在设备端进行处理时，始终包含本地 AI 通知
• 所有 AI 驱动的功能都应遵循负责任的 AI 原则

外部资源

• SAP Fiori 设计指南：https://experience.sap.com/fiori-design-web/
• SAPUI5 SDK：https://ui5.sap.com/
• UI5 Web Components：https://sap.github.io/ui5-webcomponents/

---

实现具体组件时，务必阅读相关参考文件，了解详细指南和示例。