SAP Fiori 的 UI 新主题 Horizon

JerryWang_汪子熙 - 2021-12-13 19:24:32

SAP’s UI Technologies supporting the new Horizon visual theme of SAP Fiori
SAP 正在转变我们的设计和开发文化，更加专注于帮助人们更快、更轻松地完成工作并取得更好的成果。如果您还没有阅读过相关内容，请先阅读我们首席设计官 Benedikt Lehnert 的这篇博文，然后再继续阅读：体验心态：重新设计我们在 SAP 构建产品的方式。

SAP 的新设计语言是 SAP Fiori 的演变。新的视觉主题 Horizon 为基于可访问的模块化设计系统的现代友好用户界面铺平了道路。在其他方面，计划中的新地平线主题包括：

符合 Web 内容可访问性指南的有吸引力且清新的调色板具有对比、留白和大胆的排版以适应自然的信息层次结构的焦点感圆角营造出友好、平易近人的现代外观一种减少跨设备学习曲线的移动优先方法一个新的图标集，可以清晰地传达并感觉现代

图一：My Home page from

上图是 SAP S/4HANA Cloud 2111 的主页，使用 Purchase 业务角色登录。开启了 Horizon preview 主题。

How do SAP’s UI technologies support the Horizon visual theme?

SAP 力求跨解决方案和跨 UI 技术提供一致的用户体验。 SAP Fiori DNA 通过一个通用主题构建到所有 Web 开发人员的基础中，从而可以更轻松地构建新的 SAP Fiori 应用程序。通用主题库是高效重用和统一主题外观及其颜色和度量的关键。因此，SAP 能够快速引入 Horizon 主题，并正确关注各种 UI 技术。

UI 主题设计器和基于 HTML 的 UI 框架（如 SAPUI5 / OpenUI5、UI5 Web Components 和 Fundamental Library）基于主题基础内容，该内容提供所有相关主题参数作为现代 CSS 变量。通过 UI 主题设计器自定义这些参数，您可以根据 SAP 的标准主题创建自定义主题。

SAP UI5 对 Horizon 主题的支持情况SAPUI5 1.93.3 and 1.96.0: 支持 experimental preview 版本，以搜集用户需求UI5 Web Components 1.0.0，以便在 Angular 和 React 里使用。如何启用 Horizon 主题

对 end user 来说，直接在 Fiori Launchpad 里选择。

对于开发者来说，在 index.html 里添加一行代码即可：