SAP Fiori - 主题

简介

SAP Fiori 的默认主题称为SAP Quartz Light。此外，SAP还提供了其他主题:SAP Quartz Dark、SAP Belize、SAP Belize Deep，以及可访问性主题SAP High-Contrast Black (HCB)和SAP High-Contrast White (HCW)。

主题

SAP Quartz Light theme (默认)

SAP Quartz Dark theme

SAP Belize theme

SAP Belize Deep theme (dark flavor)

SAP Fiori High Contrast Themes

SAP High-Contrast Black theme

SAP High-Contrast White theme

所有的控件都使用CSS样式，基于较少的主题参数以CSS变量、SASS和JSON的形式出现。这使客户能够使用UI主题设计器将他们自己的品牌标识应用到用户界面，该UI设计器可以跨所有SAP UI技术工作。它允许客户很容易地改变一些基本颜色(快速主题化)以及单独的控制颜色(详细主题化)。我们建议使用SAP Quartz Light 作为基础，以改变颜色作为极简设计作为一个理想的起点。

概念

客户可以通过调整标准SAP Fiori主题来应用他们自己的品牌。有些客户会简单地替换徽标或通过替换主题的默认品牌和基本颜色来更改UI的主品牌颜色。其他客户想要更多的控件来更改UI控件的颜色。一些公司甚至创造了多个主题来反映其不同部门的不同子品牌。

从快速主题化到详细控制主题化

主题化是由客户需求驱动的，使用自顶向下的方法，从快速到详细的UI控制调整：
快速主题化：更换logo和主要品牌的颜色
详细主题化：替换特定UI控件的详细颜色值
例如：客户品牌建立之前和之后

快速主题

通过替换UI主题设计器中的颜色，客户可以很容易地改变UI中的徽标和一些颜色。这将自动创建一个应用于各种UI元素的重新计算的色调调色板，创建一个和谐的外观和感觉。
企业品牌指南的主要部分之一是一组主要和次要品牌颜色。在创建自定义主题时，只需将这些颜色添加到UI主题设计器的自定义调色板中，就可以轻松替换SAP Fiori缺省的颜色。
下面的示例展示了快速主题更改与一些针对shell标题、背景图像和渐变的详细参数的组合。

详细主题

用于快速主题化的所有主要品牌颜色在控件中相互链接。快速主题参数，如品牌颜色，连接到个别控制参数，如强调和标准按钮和图标文本。它们甚至可以连接到交互状态，比如选择和活动状态的颜色。其他快速主题化参数，如基本颜色，连接到卡片，列表和表格背景。

控制组

语义主题化的概念是组织关联控制参数分组，分组由它们的影响以及它们之间的关系来决定。这使得选择对预期结果负责的参数变得更容易，并更好地衡量更改它的结果。用户不是简单地在UI中改变颜色，而是决定如何使用特定的颜色。例如，输入控件的所有主题参数(输入字段、单选按钮、复选框等)都被组合在一起，并包含字段域。类似地，所有类型的按钮、菜单和标记(背景、边框等)的所有颜色参数都被组合在一起，并包含单词“按钮”。
为控件的每个语义命名部分设置主题参数。这些控制参数保持稳定，不会因主题而改变。每个主题都有链接到这些控制参数中的特定颜色值。

按钮举例

下图仅显示了选择的按钮控件示例。您可以预览和修改所有详细的控制参数与UI主题设计器。

Quartz Light button control example

Belize button control example

HCB button control example

HCW button control example

“域”控制举例

字段参数应用于多个输入控件，如输入字段、组合框等。更改这些参数中的任何一个都可能影响许多或所有这些控件。
下图仅显示了输入控件示例的选择。您可以预览和修改所有详细的控制参数与UI主题设计器。