SAP Fiori 支持多设备：响应式 vs 自适应

简介

对于那些典型的用户来说，在桌面和移动设备之间切换的能力是至关重要的。用户希望他们的设备具有一致的性能、外观和感觉，我们如何才能确保我们的Fiori应用提供良好的用户体验呢?答案是通过响应性和适应性设计。
响应性和适应性的设计允许Fiori应用程序运行在桌面、平板电脑、智能手机和混合设备上。当用户在不同设备之间切换时，我们的应用程序自动适应分辨率、图像大小和脚本。这样，我们的用户就可以在任何设备上以他们想要的方式和地点工作。

响应式设计

SAP Fiori最引人注目的因素之一是我们的应用程序只需要开发、配置和维护一次，更改都能在所有设备上生效。这样，无论终端用户使用哪种设备，都能获得一致的体验。SAPUI5 提供了广泛的UI控件，可以根据不同的形式因素和交互风格自动调整，从而使响应式设计变得简单。另外，SAPUI5允许您调整控件的大小以匹配交互的类型(比如触摸设备或键盘/鼠标)。响应式设计的优势在于，应用程序可以根据不同的屏幕大小进行调整，而不需要额外的编码和维护工作。

响应式栅格

响应式设计由响应式网格支持。响应式网格将UI元素放置在12列的流布局中。可以将其配置为根据可用的屏幕大小显示可变数量的列。有了这个控件，就可以为大、中、小屏幕(如桌面、平板电脑和移动设备)实现灵活的布局和换行。

自适应设计

在某些用例中，响应式方法可能并不合适。例如，您可能更喜欢在桌面上输入大量数据。与此同时，您可能只想查看您输入的数据，或者在您的平板电脑或智能手机上输入一小部分数据。在这种情况下，为不同的设备设计，并根据特定的设备调整用例的复杂性是有意义的。这就是我们所说的适应性设计。这种方法要求应用程序开发人员为不同的表单元素手工定义特定的设计。这意味着更多的工作，但也允许对特定设备的用例提供更有针对性的支持。

响应式设计例子

下面的3个示例展示了一个标准列表报告平面图，如何以(半)响应的方式转换为不同的设备。
对于这些示例，应用以下响应式设计概念：

• 内容密度：在桌面模式下激活紧凑内容密度模式。在触摸设备上，手指友好的舒适模式被激活。 阅读更多关于内容密度的内容
• 过滤器：在桌面上，过滤器字段被完全显示。在平板电脑或手机上，过滤条应该被折叠为默认值。 阅读更多关于过滤器的内容
  响应式控制：当可用空间减少时，响应式表将内容移动到弹出区域。阅读有关响应表的更多信息
  
  桌面设备上的列表报表平面图示例。将显示过滤器栏，并并排显示表的所有列。
  
  
  相同的应用，这次适应了平板电脑的屏幕尺寸。控件的大小增加，允许通过触摸进行交互。过滤字段被隐藏，一些表列移到弹出区域。
  
  
  同样的应用，显示在智能手机上。几乎所有的表列都移到弹出区域。

自适应设计例子

有时候，少即是多。对于上述相同的应用程序，智能手机版本可能只是在默认情况下为每个条目显示更少的列——使用户可以一次看到更多条目。

智能手机上的默认列更少

实现

首先考虑移动端：首先从手机设计开始可以帮助你保持专注。从核心功能开始，在迁移到更大的设备时逐步增强特性。

• 如果您正在使用桌面控件，则在移动设备上运行时，将其替换为响应式控件。你仍然可以使用sap.ui.table库。但是，我们不推荐使用sap.ui.commons库。
• 如果您正在使用ALV(分析表)，那么将其替换为响应表(sap.m)或该用例的其他特定解决方案(例如图表、文本和KPIs)。
  使用响应控制：大多数SAPUI5控制是基于移动控制。这意味着它们可以在触控设备上工作，或者使用鼠标和键盘。
• 正确配置控件：按照指导原则配置不同控件的响应设置。
• 使用正确的大小设置：在触摸设备上将应用程序设置为large，在鼠标或键盘操作的设备上设置为medium。
• 使用响应式布局：有几个布局选项可用，允许您调整到不同的大小。
• 使用宽幅（letterboxing）：许多工作列表应用程序没有太多内容。通过给它们装上宽幅(限制它们的最大宽度为1280像素)，你可以优化应用程序的布局，获得更紧凑的外观。
  太多的功能？如果桌面应用程序有太多的功能，而且太复杂，无法在平板电脑或智能手机上使用，那么你可能需要关闭移动设备上的一些功能：
• 隐藏编辑功能，聚焦于展示
• 在工具栏隐藏功能
• 在表中隐藏可选列和视图

总结 & 快速导览

• SAP Fiori 应用程序必须能够在所有三种主要设备类型上运行：桌面、平板电脑和智能手机。
• 如果应用程序功能可以提供对等的信息给所有设备类型，响应方法应该用于自动调整应用程序。
• 反之(由于使用情况下，可用的屏幕空间，或设备功能)，应用程序应该根据特定设备的需求手动调整。
• 适应性方法和响应性方法可以混合使用。