使用 SAP Fiori 设计指南
学习目标
应用 SAP Fiori 设计指南以提供一致的用户体验
SAP Fiori 布局
SAP Fiori 布局简介
你是否还记得 SAPUI5 开发的黄金法则：“SAP Fiori 应用必须具有经过批准的 UX 设计。”？
在了解用户和业务需求之后，就进入应用程序的设计阶段。设计人员和开发人员必须做出的第一个决定是应使用哪种整体布局。
这在很大程度上取决于信息需要在应用中呈现的方式以及用户访问这些信息的方式。
Julie 与 Carmen 会面，以收集有关该应用的更多详细信息。
SAP Fiori Design Guidelines 包含两种主要布局和三种布局变式。
主要布局包括：
动态页面
灵活列布局
布局变式包括：
比较模式
多实例
语义页面
在本课中，我们将聚焦于这两种主要布局。
视频：本节含 SAP 官方视频（视频 ID
1_x91kefxy），需在 learning.sap.com 在线观看。
何时使用动态页面布局
如果你要构建使用 SAP Fiori（1.40 及更高版本）动态页面页眉和页脚工具栏特性的 freestyle 应用，请使用动态页面布局
如果你计划以下任一场景，请不要使用动态页面布局：
使用 SAP Fiori elements，例如列表报表、分析列表页面、概览页面或对象页面。这些元素已经包含动态页面布局。
实现初始页面或对象页面 floorplan。这些 floorplan 已经包含吸附式页眉和页脚工具栏特性。其行为与动态页面类似，但技术基础不同。
显示少量信息。在这种情况下，请改用对话框。如果你无法避免使用动态页面布局，请使用 letterboxing 来缓解该问题。
何时使用灵活页面布局
如果你想创建主从或主从从场景，使用户可以向下钻取或导航，请使用灵活列布局。
如果你计划以下任一场景，请不要使用灵活列布局：
你想构建工作台或工具布局。灵活列布局并非用于在主列左右（或任一侧）提供额外的侧列。如果你想显示额外内容以丰富主内容并帮助用户更好地执行任务，请改使用动态侧边内容。
你想创建包含与上下文无关页面的仪表盘。
你想打开同一对象类型的多个实例。请改使用多实例处理 floorplan。
你想将单个对象拆分为多列，或仅显示少量信息。
你想将 SAP Fiori launchpad 或概览页面嵌入其中一列。
需要记住的事项
下表应有助于决定应使用哪种布局，以及你在做出决定时会问自己哪类问题。
问题 |
模板 |
|---|---|
查看、检查或编辑元素列表中一个或几个元素的详细信息是一项重要的用户需求吗？ |
如果是，请使用灵活列布局模式，例如跟踪应用。 |
检查一个或多个对象的状态重要吗？ |
如果是，请使用灵活列布局模式，例如跟踪应用。 |
你正在检查的对象是否复杂到需要图表来快速说明问题？ |
如果是，你应使用带图表的动态页面应用。 |
与 Marco Rossi 互动
既然你已经了解了 SAP Fiori 布局，请开动脑筋，在这个用例活动中帮助 Marco 做出正确的决定。
SAP Fiori floorplan
SAP Fiori floorplan 简介
floorplan 通常基于动态页面。floorplan 服务于特定的用例，因此在页眉、内容区域和页脚工具栏中带有特定的 UI 元素组合。
选择合适的 floorplan 并不总是那么容易。大致来说，SAP Fiori 提供的 floorplan 可以：
允许导航以处理单个对象： 初始页面
列出多个对象： 列表报表 、 分析列表报表 、 工作清单
管理单个对象： 对象页面 、 向导
提供信息和任务的概览： 概览页面
大多数 floorplan 都在课程 SAP Fiori Elements Development 中涵盖。有 2 个 floorplan 无法使用 SAP Fiori elements 开发，即初始页面和向导。以下两节将介绍这些 floorplan，
在接下来的部分中，有一个汇总表，可将你引导至你可能需要的任何附加信息。
初始页面 floorplan
当用户需要导航到单个对象时，可使用初始页面 floorplan。
交互或起点是一个单一的输入字段，它通过几个步骤将用户引导至他们正在寻找的对象。
输入字段可以是值帮助，也可以是随输入即搜索（search as you type）字段。
该屏幕使用初始页面 floorplan 来显示用于输入采购订单 ID 的单一输入字段。
该屏幕使用初始页面 floorplan 来显示搜索相应采购订单 ID 的结果。
当你想显示多个对象时，请不要使用此 floorplan。在这种情况下，列表报表 floorplan 是更合适的解决方案。
在以下代码中，handleValueHelp 方法用于显示标准值帮助对话框，以在初始屏幕中选择采购订单。
你也可以如下代码所示，为建议窗格定义特定的表格结构。
你也可以使用特定的片段以及用于处理 Search、Confirm 和 Cancel 用户操作的方法来定义自己的搜索对话框。
向导 floorplan
何时使用向导 floorplan
向导旨在通过将大型或复杂任务划分为多个片段来帮助用户。如果用户必须完成一项冗长的任务（例如填写一份很长的问卷）或一项用户不熟悉的任务，请使用向导。
该流程应包含最少 3 个、最多 8 个步骤。
向导既可用于创建场景，也可用于编辑场景。如果你的应用同时包含这两种场景，请考虑对两种场景使用相同的方法——要么使用向导，要么使用其他创建或编辑屏幕（编辑流或对象页面）。
何时不使用向导 floorplan
如果你的任务只有 2 个步骤，或者其形式是用户熟悉的（例如属于他们的日常工作），请不要使用向导，因为它只会为该流程增加不必要的点击。
如果你的流程需要超过 8 个步骤，向导将不支持这些步骤，因为该流程太长，可能会让用户感到困惑。在这种情况下，你应考虑重新组织该任务。
请考虑经典编辑屏幕（编辑流或对象页面）是否更适合你的用例。
向导 floorplan 引导屏幕的结构。
调用向导后，将显示该 floorplan 的第一步。
当所有必要字段都填写完成后，会出现一个标签为 Step # 的按钮。
完成最后一步时，会出现一个标签为 Review 的按钮。
向导的页脚包含具有标准 SAP Fiori 取消行为的取消按钮。
当表单非常长时，可以有一个保存或草稿按钮
显示的是向导 floorplan 汇总页面的结构。Review 按钮会将用户带到显示数据的屏幕。
汇总表
在此表中，你可以看到每个 floorplan 的摘要。有关更多详细信息，请参阅以下学习之旅：Develop SAPUI5 Applications > SAP Fiori Elements Development。
floorplan 汇总表
floorplan |
描述 |
SAP 文档 |
|---|---|---|
初始页面 |
允许导航以处理单个对象。 |
https://experience.sap.com/fiori-design-web/initial-page-floorplan/ |
列表报表 |
列出多个对象。 |
https://experience.sap.com/fiori-design-web/list-report-floorplan-sap-fiori-element/ |
工作清单 |
显示一组项目集合，并处理它们或将它们委派给其他人。 |
|
对象页面 |
以响应式方式显示简单或复杂对象的所有信息及其不同 facet。 |
|
向导 |
逐步引导用户完成数据编辑。 |
|
概览页面 |
提供信息和任务的概览 |
与 Marco Rossi 互动
既然你已经了解了 SAP Fiori floorplan，请开动脑筋，在这个用例活动中帮助 Marco 做出正确的决定。