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 裡添加一行代碼即可: