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的原創文章，盡在："汪子熙":