SAP Fiori 的 UI 新主题 Horizon

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

订阅专栏

SAP’s UI Technologies supporting the new Horizon visual theme of SAP Fiori

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


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


符合 Web 内容可访问性指南的有吸引力且清新的调色板

具有对比、留白和大胆的排版以适应自然的信息层次结构的焦点感

圆角营造出友好、平易近人的现代外观

一种减少跨设备学习曲线的移动优先方法

一个新的图标集,可以清晰地传达并感觉现代

image.png


图一: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"

image.png


相关文章
|
2天前
|
数据库 API
启用SAP Fiori之前的一些注意事项
启用SAP Fiori之前的一些注意事项
18 0
|
2天前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
33 0
|
2天前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
18 0
|
2天前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
36 0
|
1天前
|
监控 测试技术
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
13 3
|
2天前
|
JavaScript 前端开发
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
7 0
|
2天前
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
16 1
什么是 SAP ABAP 里的 Subscreen
|
2天前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
18 0
|
2天前
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
18 0
|
2天前
|
UED
什么是 SAP Fiori 的 Technical Catalog 和 Business Catalog
什么是 SAP Fiori 的 Technical Catalog 和 Business Catalog
39 0