标签：Web 主题 Fiori Horizon UI SAP

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 里添加一行代码即可：

data-sap-ui-theme="sap_horizon"

更多Jerry的原创文章，尽在："汪子熙":

标签：Web,主题,Fiori,Horizon,UI,SAP
来源： https://www.cnblogs.com/sap-jerry/p/15682662.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。