一种页面元素样式定制方法、设备及存储介质

技术领域

本发明涉及产品页面设计技术领域，尤其是涉及一种页面元素样式定制方法、设备及存储介质。

背景技术

随着互联网的快速发展，用户对产品页面呈现效果的定制化需求越来越多。在这样的背景下，基于Sass生成变量来管理元素样式的方法应运而生并快速发展，这种方法还支持基于主题色来更新大量元素，实现主题定制效果。

传统的主题色定制方案在元素之间存在一种默认的关联关系，即在改变一种主题色时，会同时更改多种元素的多种属性效果，不能指定更新一些特定元素，甚至不能指定更新元素的特定属性效果；同时在变更主题色的基础色时，影响范围较大，难以维护。

对于传统的定制方案，当需要实现更新特定元素以及元素特定属性效果时，只能在原有的功能上进行二次开发，这就需要耗费大量的时间去实现并测试影响范围，在不同的定制化需求下，成本会越来越高、后期的维护性也会越来越差。因此传统的主题色定制方案已经无法满足快速定制化的需求。

发明内容

本发明的目的就是为了克服上述现有技术存在的缺陷而提供一种页面元素样式定制方法、设备及存储介质，以实现页面元素样式快速定制化的目的。

本发明的目的可以通过以下技术方案来实现：一种页面元素样式定制方法，包括以下步骤：

S1、确定主题色基础变量；

S2、确定元素文件及元素文件内需要定制化的属性、属性状态；

S3、基于元素文件内需要定制化的属性，创建对应的属性文件；

基于元素文件内需要定制化的属性状态，定义属性文件中对应的变量，其中，属性文件中的变量与主题色基础变量相关联；

S4、基于用户需求，根据元素文件内需要定制化的属性状态，使用属性文件中的变量对元素文件内的属性进行赋值。

进一步地，所述步骤S2具体包括以下步骤：

S21、确定元素文件及元素文件内需要定制化的属性；

S22、确定元素文件内需要定制化的属性状态。

进一步地，所述元素文件内需要定制化的属性状态包括默认状态和悬浮状态。

进一步地，所述属性文件内包含状态变量以及该状态变量对应的元素变量。

进一步地，所述状态变量包括默认状态变量和悬浮状态变量。

进一步地，所述步骤S4具体包括以下步骤：

S41、基于用户需求，根据元素文件内的属性默认状态，使用默认状态变量对元素文件内的变量进行赋值，或者直接在属性文件内找到元素变量进行赋值；

S42、基于用户需求，根据元素文件内的属性悬浮状态，使用悬浮状态变量对元素文件内的变量进行赋值，或者直接在属性文件内找到元素变量进行赋值。

进一步地，所述步骤S41具体是使用默认状态变量从关联的主题色基础变量中获取数据值，并将获取的数据值赋值给对应的元素变量；

或者对当前默认状态变量值进行修改，以将修改后的数据值赋值给对应的元素变量；

或者直接在属性文件内找到元素变量进行赋值。

进一步地，所述步骤S42具体是使用悬浮状态变量从关联的主题色基础变量中获取数据值，并将获取的数据值赋值给对应的元素变量；

或者对当前悬浮状态变量值进行修改，以将修改后的数据值赋值给对应的元素变量；

或者直接在属性文件内找到元素变量进行赋值。

一种页面元素样式定制设备，包括处理器、存储器和通信总线；

所述存储器上存储有可被所述处理器执行的计算机可读程序；

所述通信总线实现处理器和存储器之间的连接通信；

所述处理器执行所述计算机可读程序时实现如上所述的页面元素样式定制方法中的步骤。

一种计算机可读存储介质，所述计算机可读存储介质存储有一个或多个程序，所述一个或多个程序可被一个或者多个处理器执行，以实现如上所述的页面元素样式定制方法中的步骤。

与现有技术相比，本发明针对快速实现定制化页面的元素效果，通过将多个元素的相同属性值定义在同一个属性文件内，根据不同属性状态进行统一管理，可以快速定位到需要改变的元素属性并且能批量修改不同元素的属性效果，快速实现产品页面整体主题色变更效果以及定制更细粒度元素效果。

在传统的主题定制方案下，修改多个元素的某个属性值时，需要在不同文件内查找相关属性，一一进行修改，而本发明仅需在一个属性文件内修改，即可快速对应修改元素内相应变量值，且主题色影响范围可见，仅需要在少量的文件内修改内容即可，同时测试范围也无需全部覆盖，大大降低定制化成本及后期维护难度。

附图说明

图1为本发明的方法流程示意图；

图2为实施例中的应用流程示意图。

具体实施方式

下面结合附图和具体实施例对本发明进行详细说明。

实施例

如图1所示，一种页面元素样式定制方法，包括以下步骤：

S1、确定主题色基础变量；

S2、确定元素文件及元素文件内需要定制化的属性、属性状态，其中，属性状态包括默认状态和悬浮状态；

S3、基于元素文件内需要定制化的属性，创建对应的属性文件；

基于元素文件内需要定制化的属性状态，定义属性文件中对应的变量，其中，属性文件中的变量与主题色基础变量相关联，属性文件内包含状态变量以及该状态变量对应的元素变量，状态变量则包括默认状态变量和悬浮状态变量；

S4、基于用户需求，根据元素文件内需要定制化的属性状态，使用属性文件中的变量对元素文件内的属性进行赋值。

在步骤S4中，具体包括：

一、基于用户需求，根据元素文件内的属性默认状态，使用默认状态变量对元素文件内的变量进行赋值：

使用默认状态变量从关联的主题色基础变量中获取数据值，并将获取的数据值赋值给对应的元素变量；

或者对当前默认状态变量值进行修改，以将修改后的数据值赋值给对应的元素变量；

另外，还可直接在属性文件内找到元素变量进行赋值；

二、基于用户需求，根据元素文件内的属性悬浮状态，使用悬浮状态变量对元素文件内的变量进行赋值：

使用悬浮状态变量从关联的主题色基础变量中获取数据值，并将获取的数据值赋值给对应的元素变量；

或者对当前悬浮状态变量值进行修改，以将修改后的数据值赋值给对应的元素变量；

另外，还可直接在属性文件内找到元素变量进行赋值。

本实施例应用上述方法，分别创建两个元素文件：元素1文件和元素2文件，并分别在两个元素文件中设置两个属性：属性1和属性2，通过创建对应的属性文件：属性1文件和属性2文件，以实现对元素1和元素2的快速定制化，具体的应用流程如图2所示，包括：

1.设计主题色基础变量，见图2中主题色框架内容。

2.设计需要定制化的属性，见图2中元素1文件内属性1框架内容。

3.设计需要定制化属性的状态，见图2元素1文件内属性1内默认状态和悬浮状态内容。

4.根据步骤2设计的属性创建属性文件，在属性文件内根据步骤3设计的状态定义对应的变量，见图2中属性1文件框架内容，其中“$default-color:$base-blue；”定义了属性1文件中默认状态的基础变量，“$base-blue”为主题色定义的基础变量，因此，元素变量“$button-default-color”使用“$default-color”变量进行赋值；同理，定义悬浮状态变量“$hover-color”并赋值“$button-hover-color”。

5.创建元素文件，对元素文件内的属性根据状态使用属性文件的对应变量进行赋值，见图2中方框1和方框2所示的线段标识。元素1为button元素，其中包含有属性1：color，同时该属性1具有两种状态：默认状态以及悬浮状态，则使用属性1文件的默认状态对应元素button的“$button-default-color”变量进行赋值；

使用属性1文件的悬浮状态对应元素button的变量“$button-hover-color”进行赋值；

同理创建元素2文件并进行变量赋值。

6.重复上述步骤2-4，创建属性2文件、元素1文件属性2以及元素2文件属性2，并在元素文件中使用属性2的变量对属性进行赋值。

7.完成上述步骤后，可以看到主题色的变量影响属性1和属性2的默认状态以及悬浮状态。在变更主题色任意基础色时，可以很清楚地看到影响范围，不需要额外的实现效果校验以及影响范围测试的工作量。

8.需要定制化特定属性时，可在对应的属性文件内更改基础变量即可。例如：当需要实现color的默认状态为red、悬浮状态为yellow时，直接在属性1文件内将基础变量“$default-color”赋值为red、“$hover-color”赋值为yellow。

9.需要定制化特定元素特定属性时，可在对应的属性文件内找到对应元素变量进行赋值。例如：当需要实现input的color属性默认状态为green时，直接在属性1文件内将变量“$input-default-color”赋值为green。

本实施例还提供一种页面元素样式定制设备，包括处理器、存储器和通信总线；

存储器上存储有可被处理器执行的计算机可读程序；

通信总线实现处理器和存储器之间的连接通信；

处理器执行计算机可读程序时实现如上的页面元素样式定制方法中的步骤。

本实施例还提供一种计算机可读存储介质，计算机可读存储介质存储有一个或多个程序，一个或多个程序可被一个或者多个处理器执行，以实现如上的页面元素样式定制方法中的步骤。

综上所述，本发明在Sass管理元素效果的基础上，提供一种批量更新多种元素特定效果以及特定元素属性不同状态效果的管理方法，整体思路是在主题色变量与属性变量之间加一个中间件，用于处理两者之间的映射关系，可以在中间件中控制映射关系来实现批量更新特定元素效果。

本发明提出一种支持快速实现定制化元素效果的方法，解决改变元素效果实现较慢，定制化粒度大，影响范围广的问题，在改变元素效果时，仅需在统一文件中改变对应效果的变量即可快速实现定制化。

在传统的主题定制方案下，修改多个元素的某个属性值时，需要在不同文件内查找相关属性，一一进行修改，而本发明仅在一个文件内修改，随着修改属性值的增多，本发明的优势越加明显，效率能够提升50％以上。而在修改主题色时，因主题色影响很多个元素的属性值，在修改时需要在多个文件内确认主题色的影响范围，容易导致遗漏，使得页面呈现效果与预期相差很大，而主题色在多个元素的多个属性值中都有使用，工作量非常大，同时测试时也需要全面覆盖，随着主题色数量不断增多，组件数量不断增多，变更主题色带来的工作量将呈现指数型增长。而采用本发明下，主题色影响范围可见，仅需要在少量的文件内修改内容即可，同时测试范围也无需全部覆盖，效果显而易见。

以定制化主题为例，仅需要替换主题色文件内容即可更换主题效果；以定制化特定属性为例，在对应的属性文件内，修改基础变量即可实现；以定制化特定元素特定属性为例，在对应的属性文件内，找到对应的元素变量，修改元素变量即可实现。

实现上述效果时，修改的内容较少，影响范围可见，且维护性很高，同时支持细粒度定制，大幅度提供了工作效率，降低实现成本。