sap-fiori-guidelines
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseSAP Fiori Design Guidelines
SAP Fiori 设计指南
Comprehensive guidance for designing and building SAP Fiori applications following official SAP design system standards.
遵循官方SAP设计系统标准，为设计和构建SAP Fiori应用提供全面指导。
When to Use This Skill
使用场景
- Designing or building SAP Fiori applications
- Implementing SAPUI5 or UI5 Web Components
- Following SAP enterprise UX patterns
- Choosing UI elements for SAP applications
- Implementing navigation, messaging, or data visualization
- Ensuring accessibility and inclusive design
- Applying colors, typography, or visual styling
- Designing AI-powered features, Joule integration, or guided prompts
- 设计或构建SAP Fiori应用
- 实现SAPUI5或UI5 Web Components
- 遵循SAP企业UX模式
- 为SAP应用选择UI元素
- 实现导航、消息或数据可视化功能
- 确保无障碍与包容性设计
- 应用颜色、排版或视觉样式
- 设计AI驱动功能、Joule集成或引导式提示
Core Principles
核心原则
SAP Fiori is built on five principles:
- Role-based - Designed for specific user roles and tasks
- Adaptive - Works across devices and screen sizes
- Coherent - Consistent experience across all SAP applications
- Simple - Focused on essential tasks, reduces complexity
- Delightful - Engaging and intuitive user experience
SAP Fiori基于五大原则构建：
- 基于角色 - 针对特定用户角色和任务设计
- 自适应 - 跨设备和屏幕尺寸适配
- 一致性 - 所有SAP应用提供统一体验
- 简洁性 - 聚焦核心任务，降低复杂度
- 愉悦性 - 提供直观且有吸引力的用户体验
Technology Options
技术选项
| Technology | Use Case |
|---|---|
| SAPUI5 | Full SAP Fiori applications, SAP BTP, S/4HANA |
| UI5 Web Components | Framework-agnostic, React/Vue/Angular integration |
| SAP Fiori Elements | Metadata-driven apps with OData services |
| 技术 | 使用场景 |
|---|---|
| SAPUI5 | 完整SAP Fiori应用、SAP BTP、S/4HANA |
| UI5 Web Components | 与框架无关，支持React/Vue/Angular集成 |
| SAP Fiori Elements | 基于OData服务的元数据驱动应用 |
Reference Documentation
参考文档
Read the appropriate reference file based on your task:
根据任务选择对应的参考文件：
UI Elements
UI元素
| Reference | Contents |
|---|---|
| Buttons, links, toggle buttons, menu buttons |
| Input fields, selects, checkboxes, radio buttons, sliders, date/time pickers, filter bar |
| Panels, cards, dialogs, popovers, toolbars, forms, shell bar, user menu, notification center |
| Avatars, progress indicators, busy indicators, illustrated messages |
| Responsive tables, grid tables, analytical tables, grid lists, lists |
| Icon tab bar, segmented button, side navigation, shell search |
| Message strips, message strip web component |
| AI button, AI notice, AI writing assistant, AI acknowledgment, guided prompts, quick prompts, regenerate, home page banner |
| Upload set with table plugin |
| 参考文档 | 内容 |
|---|---|
| 按钮、链接、切换按钮、菜单按钮 |
| 输入框、选择器、复选框、单选按钮、滑块、日期/时间选择器、筛选栏 |
| 面板、卡片、对话框、弹出框、工具栏、表单、Shell栏、用户菜单、通知中心 |
| 头像、进度指示器、忙碌指示器、插图消息 |
| 响应式表格、网格表格、分析表格、网格列表、列表 |
| 图标标签栏、分段按钮、侧边导航、Shell搜索 |
| 消息条、消息条Web组件 |
| AI按钮、AI通知、AI写作助手、AI确认、引导式提示、快速提示、重新生成、首页横幅 |
| 带表格插件的上传集合 |
Page Types & Floorplans
页面类型与框架模板
| Reference | Contents |
|---|---|
| Object page, list report, analytical list page, overview page, dynamic page layout, page header |
| 参考文档 | 内容 |
|---|---|
| 对象页面、列表报表、分析列表页面、概览页面、动态页面布局、页面头部 |
Foundations
基础规范
| Reference | Contents |
|---|---|
| Colors, typography, iconography, theming, content density |
| States, cursors, screen reader support |
| UX writing, UI text guidelines |
| Navigation, messaging, object handling, action placement |
| AI design patterns, Joule assistant, situation handling, AI guidelines |
| Fiori launchpad, integration patterns |
| 参考文档 | 内容 |
|---|---|
| 颜色、排版、图标、主题、内容密度 |
| 状态、光标、屏幕阅读器支持 |
| UX文案、UI文本规范 |
| 导航、消息、对象处理、操作放置 |
| AI设计模式、Joule助手、场景处理、AI规范 |
| Fiori启动板、集成模式 |
SAP Fiori Elements & S/4HANA
SAP Fiori Elements 与 S/4HANA
| Reference | Contents |
|---|---|
| Smart templates, list report, object page, table features, AI input assistance |
| S/4HANA specific design: navigation menu, product home page, AI error explanation |
| 参考文档 | 内容 |
|---|---|
| 智能模板、列表报表、对象页面、表格功能、AI输入辅助 |
| S/4HANA专属设计：导航菜单、产品首页、AI错误说明 |
Quick Reference
快速参考
Button Types and Usage
按钮类型与用法
| Type | Usage |
|---|---|
| Emphasized | Primary action - one per page/dialog |
| Default/Ghost | Secondary actions |
| Transparent | Toolbar actions, low emphasis |
| Accept (green) | Positive semantic actions (Approve, Accept) |
| Reject (red) | Negative semantic actions (Reject, Delete) |
| 类型 | 用法 |
|---|---|
| 强调型 | 主要操作 - 每页/对话框仅一个 |
| 默认/幽灵 | 次要操作 |
| 透明 | 工具栏操作，低强调 |
| 确认（绿色） | 正向语义操作（批准、接受） |
| 拒绝（红色） | 负向语义操作（拒绝、删除） |
Semantic Colors
语义颜色
| Color | Meaning | Usage |
|---|---|---|
| Neutral | Default state | Regular UI elements |
| Positive (Green) | Success, good status | Approval, completion |
| Critical (Orange) | Warning | Needs attention |
| Negative (Red) | Error, bad status | Rejection, errors |
| Information (Blue) | Informational highlight | Neutral information |
| 颜色 | 含义 | 用法 |
|---|---|---|
| 中性 | 默认状态 | 常规UI元素 |
| 正向（绿色） | 成功、良好状态 | 审批、完成 |
| 警告（橙色） | 警告 | 需要关注 |
| 负向（红色） | 错误、不良状态 | 拒绝、错误 |
| 信息（蓝色） | 信息高亮 | 中性信息 |
Message Types
消息类型
| Type | Usage |
|---|---|
| Error | Prevents task completion, requires user action |
| Warning | Potential issue, user can proceed |
| Success | Confirms completed action |
| Information | Neutral information |
| 类型 | 用法 |
|---|---|
| 错误 | 阻止任务完成，需用户操作 |
| 警告 | 潜在问题，用户可继续 |
| 成功 | 确认操作完成 |
| 信息 | 中性信息 |
Navigation Patterns
导航模式
| Pattern | When to Use |
|---|---|
| Drill-down | Navigate to object details with back navigation |
| Full-screen | Replace current view entirely |
| Flexible Column Layout | Master-detail views in columns |
| Dialog/Popover | Temporary overlay for quick tasks |
| 模式 | 使用场景 |
|---|---|
| 钻取 | 导航至对象详情，支持返回 |
| 全屏 | 完全替换当前视图 |
| 灵活列布局 | 分栏展示主-明细视图 |
| 对话框/弹出框 | 临时浮层用于快速任务 |
AI Components
AI组件
| Component | When to Use |
|---|---|
| AI Button | Trigger AI-powered actions |
| AI Acknowledgment | Show AI contribution transparency |
| Guided Prompts | Help users formulate AI requests |
| Quick Prompts | Provide predefined AI interaction shortcuts |
| Regenerate | Allow users to request new AI-generated content |
| AI Writing Assistant | Inline AI text assistance |
| Local AI Notice | Inform users about on-device AI processing |
| 组件 | 使用场景 |
|---|---|
| AI按钮 | 触发AI驱动操作 |
| AI确认 | 展示AI贡献透明度 |
| 引导式提示 | 帮助用户制定AI请求 |
| 快速提示 | 提供预定义AI交互快捷方式 |
| 重新生成 | 允许用户请求新的AI生成内容 |
| AI写作助手 | 内嵌式AI文本辅助 |
| 本地AI通知 | 告知用户设备端AI处理情况 |
Implementation Checklist
实施检查清单
When building a Fiori application:
- Single emphasized button per page/dialog
- Proper semantic colors for status indication
- Message handling with Message Popover
- Accessible labels and ARIA attributes
- Responsive layout for different screen sizes
- Consistent navigation patterns
- Form validation with value states
- Loading indicators for async operations
- AI features follow Joule design patterns where applicable
构建Fiori应用时：
- 每页/对话框仅一个强调型按钮
- 使用正确的语义颜色指示状态
- 通过消息弹出框处理消息
- 设置无障碍标签和ARIA属性
- 为不同屏幕尺寸设计响应式布局
- 采用一致的导航模式
- 表单验证包含值状态
- 异步操作添加加载指示器
- AI功能在适用时遵循Joule设计模式
Key Guidelines
关键规范
Buttons
按钮
- Use text buttons for primary, secondary, and semantic actions
- Icon-only buttons only for universally recognized metaphors
- Always provide tooltips for icon buttons
- Button text: imperative verb (Save, Edit, Create)
- 主要、次要和语义操作使用文本按钮
- 仅为通用认知的隐喻使用纯图标按钮
- 图标按钮始终提供工具提示
- 按钮文本使用祈使动词（保存、编辑、创建）
Forms
表单
- Group related fields logically
- Use proper field labels (always visible)
- Show validation errors with value states
- Provide clear error messages
- 按逻辑分组相关字段
- 使用合适的字段标签（始终可见）
- 通过值状态展示验证错误
- 提供清晰的错误消息
Tables
表格
- Use responsive table for most cases
- Grid table for complex data analysis
- Analytical table for aggregation needs
- Always provide column headers
- 大多数场景使用响应式表格
- 复杂数据分析使用网格表格
- 需要聚合功能使用分析表格
- 始终提供列标题
Messages
消息
- Message Popover for multiple messages
- Message Box only for interrupting errors
- Toast for transient success confirmations
- Inline validation for form fields
- 多条消息使用消息弹出框
- 仅在中断性错误时使用消息框
- 短暂的成功确认使用提示框
- 表单字段使用内嵌验证
AI Integration
AI集成
- Use AI Button for AI-triggered actions
- Show AI Acknowledgment for transparency
- Provide Guided Prompts to help users interact with AI
- Always include Local AI Notice when processing happens on-device
- Follow responsible AI principles in all AI-powered features
- 使用AI按钮触发AI驱动操作
- 展示AI确认以保证透明度
- 提供引导式提示帮助用户与AI交互
- 设备端处理时始终显示本地AI通知
- 所有AI驱动功能遵循负责任的AI原则
External Resources
外部资源
- SAP Fiori Design Guidelines: https://experience.sap.com/fiori-design-web/
- SAPUI5 SDK: https://ui5.sap.com/
- UI5 Web Components: https://sap.github.io/ui5-webcomponents/
When implementing specific components, always read the relevant reference file for detailed guidance and examples.
- SAP Fiori设计指南：https://experience.sap.com/fiori-design-web/
- SAPUI5 SDK：https://ui5.sap.com/
- UI5 Web Components：https://sap.github.io/ui5-webcomponents/
实施特定组件时，请务必阅读相关参考文件以获取详细指导和示例。