CN106293758B - 一种Web应用界面换肤的方法和装置 - Google Patents

Abstract

本发明属于Web界面设计领域，提供一种Web应用界面换肤的方法和装置，以减少Web应用界面换肤前期和后期开发、运维人员的工作量。所述方法包括：搭建Web应用界面的层次，Web应用界面的层次包括背景层和背景层之上的前景层；确定前景层的透明度效果；根据前景层的透明度效果构建前景层的半透明前景元素；在收到用户的换肤请求时，将当前背景层图片替换为换肤请求指向的背景图片。本发明提供的技术方案一方面可以大幅度降低开发工作量；另一方面可以提高系统运行效率；第三方面可以大幅度降低后期维护工作量。

Description

一种Web应用界面换肤的方法和装置

技术领域

本发明属于Web界面设计领域，尤其涉及一种Web应用界面换肤的方法和装置。

背景技术

用户界面(User Interface，UI)是大多数软件系统与用户交互的桥梁。成功的界面方案不仅需要准确、高效地与用户交互，还需要考虑用户对界面外观的个性化需求，因此，越来越多的Web应用开始在界面上提供“换肤”功能，让用户自己决定界面展示风格。

目前大多数Web应用中，Web界面的换肤是通过切换层叠样式表(Cascading StyleSheet，CSS)文件、图片，甚至HTML结构来实现。这种方式的优点是细节控制力强，并且，通过代码层面的改写可实现丰富的细节样式调整。然而，其也存在如下几点缺陷：

1)是前期工作量大。需要为每套皮肤开发独立的CSS、图片，甚至要开发多套功能页面。当界面结构较复杂时，多层元素样式的重载、继承使皮肤风格的控制变得尤为繁琐困难；

2)后期维护难度大。当用户要求提供更多的界面风格皮肤以作选择时，维护人员需要重新开发新的CSS来定义新样式。现代Web应用界面HTML结构日趋复杂，极端情况下一个简单的列表界面，内嵌的HTML结构可能多达数十层，而CSS编码的前提是要对每个页面的HTML结构都了解得非常清晰。如果维护人员和当初的开发人员不是同一批人，几乎是不可能完成的任务。

3)处理复杂，需要由应用控制层代码重新生成HTML标签，引入外部CSS文件后，由浏览器重新渲染界面展示层。当然如果仅仅是CSS文件的变化，浏览器并不会重新创建整个DOM结构，但在现代Web系统前端复杂程度越来越高的情况下，对CSS文件的加载、解析、样式渲染，依然是一笔不小的开支。

发明内容

本发明的目的在于提供一种Web应用界面换肤的方法和装置，以减少Web应用界面换肤前期和后期开发、运维人员的工作量。

本发明第一方面提供一种Web应用界面换肤的方法，所述方法包括：

搭建Web应用界面的层次，所述Web应用界面的层次包括背景层和所述背景层之上的前景层；

确定所述前景层的透明度效果；

根据所述前景层的透明度效果，构建所述前景层的半透明前景元素；

在收到用户的换肤请求时，将当前背景层图片替换为所述换肤请求指向的背景图片。

本发明第二方面提供一种Web应用界面换肤的装置，所述装置包括：

搭建模块，用于搭建Web应用界面的层次，所述Web应用界面的层次包括背景层和所述背景层之上的前景层；

透明度确定模块，用于确定所述前景层的透明度效果；

构建模块，用于根据所述前景层的透明度效果，构建所述前景层的半透明前景元素；

替换模块，用于在收到用户的换肤请求时，将当前背景层图片替换为所述换肤请求指向的背景图片。

从上述本发明技术方案可知，在确定前景层的透明度效果后，可以根据所述前景层的透明度效果构建所述前景层的半透明前景元素，若收到用户的换肤请求，则将当前背景层图片替换为所述换肤请求指向的背景图片后，即可实现Web应用界面的换肤。一方面，由于本发明提供的技术方案不再需要美术设计师单独设计多套皮肤，并开发对应的CSS/图片，在项目后期将大幅度节约项目资源，解放UI设计师和前端工程师的工作量，因此可以大幅度降低开发工作量；另一方面，由于本发明提供的技术方案不需要服务端参与，完全在客户端浏览器上运行，只需切换一张背景图片即可，不需要对整套CSS规则进行重载和解析，因此，可以提高系统运行效率；第三方面，由于采用本发明提供的技术方案，使得后期扩展皮肤时只需要提供一张背景图即可，因此，可以大幅度降低后期维护工作量。

附图说明

图1是本发明实施例一提供的Web应用界面换肤的方法的实现流程示意图；

图2是本发明实施例二提供的Web应用界面换肤的装置的结构示意图；

图3是本发明实施例三提供的Web应用界面换肤的装置的结构示意图；

图4是本发明实施例四提供的Web应用界面换肤的的装置的结构示意图；

图5是本发明实施例五提供的Web应用界面换肤的装置的结构示意图；

图6-a是本发明实施例六提供的Web应用界面换肤的装置的结构示意图；

图6-b是本发明实施例七提供的Web应用界面换肤的装置的结构示意图；

图6-c是本发明实施例八提供的Web应用界面换肤的装置的结构示意图；

图6-d是本发明实施例九提供的Web应用界面换肤的装置的结构示意图。

具体实施方式

为了使本发明的目的、技术方案及有益效果更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明实施例提供一种Web应用界面换肤的方法和装置，所述方法包括：搭建Web应用界面的层次，所述Web应用界面的层次包括背景层和所述背景层之上的前景层；确定所述前景层的透明度效果；根据所述前景层的透明度效果，构建所述前景层的半透明前景元素；在收到用户的换肤请求时，将当前背景层图片替换为所述换肤请求指向的背景图片。本发明实施例还提供相应的Web应用界面换肤的装置。以下分别进行详细说明。

请参阅附图1，是本发明实施例一提供的Web应用界面换肤的方法的实现流程示意图，主要包括以下步骤S101至步骤S104，详细说明如下：

S101，搭建Web应用界面的层次。

传统的美术设计师在进行Web应用界面设计时，一般会有意识地将界面划分为前景层和背景层两个大的层次。界面元素和操作元素即前景元素例如表格、按钮、输入框等是呈现在前景层，而为了突出操作元素，背景层一般采用弱化的设计，主体基本为大面积的白色、灰色等浅色调，只在局部如菜单栏、标题栏等部位小面积搭配颜色、渐变等效果。

而作为本发明一个实施例，搭建Web应用界面的层次可以是：区分背景层和背景层之上的前景层，挑选背景层图片置于背景层，并在主工作区使用半透明层进行遮罩。具体地，可以在设计工具，例如Photoshop中搭建基本的Web应用界面的层次结构，然后挑选或设计一批背景层图片置于背景层上，调整前景元素的透明度效果，完成界面设计。在本发明实施例中，背景层图片可以选择具有明确色调、色彩统一协调和对比度低的图片，同时为了突出主体操作元素，建议在前景元素比较集中的主工作区使用半透明层进行遮罩。

S102，确定前景层的透明度效果。

在本发明实施例中，可以根据需要，将前景层的透明度效果确定为半透明或全透明。

S103，根据前景层的透明度效果，构建前景层的半透明前景元素。

作为本发明一个实施例，根据前景层的透明度效果，构建前景层的半透明前景元素可以通过如下步骤S1031和步骤S1032实现：

S1031，使用层叠样式表CSS规则，对前景层的前景元素进行半透明化处理。

在本发明实施例中，使用层叠样式表CSS规则对Web应用界面前景层的前景元素进行半透明化处理时，可采用如下CSS规则：.myDOm{filter:Alpha(opacity＝50)；opacity:.5；}，其中filter为IE专有属性，所有的IE浏览器都能良好支持，opacity是Web标准属性，IE6/7/8均无法支持。两者共同使用，基本可以兼容当前市场上的所有浏览器。

S1032，将黑白两种纯色的图片按照需要的透明度进行调整后保存为png格式，并将图片设置为容器的背景。

需要说明的是，在使用CSS规则：.myDOm{filter:Alpha(opacity＝50)；opacity:.5；}即两个css属性后，不仅前景层元素本身被透明化，元素内部的内容，例如文字也会被透明化，而绝大多数时候，只是希望容器半透明，文字不透明。要解决这个问题，有两种可行方案，包括使用CSS3属性rgba,或者通过CSS hack技术在rgba,filter,opacity等属性中切换，前者是CSS3标准，不支持低版本IE，后者样式定义纷繁复杂，难以维护。在本发明实施例中，可以使用第三种方案，即，使用半透明图片和CSS背景平铺功能来实现半透明元素，具体地，可以将黑白两种纯色的图片按照需要的透明度进行调整后保存为png格式，并将所述图片设置为容器的背景。为减少资源消耗，可将png格式的图片设置为5x5像素，利用背景图默认自动平铺的特点覆盖整个容器元素。

需要说明的是，由于png格式的图片本身尺寸较小，且浏览器默认会自动缓存图片，所以上述半透明的png格式的图片即使在Web应用界面中大量使用，也不会造成加载效率问题。

S104，在收到用户的换肤请求时，将当前背景层图片替换为换肤请求指向的背景图片。

在本发明实施例中，将当前背景层图片替换为换肤请求指向的背景图片可以是通过Javascript操作背景文档对象模型DOM元素即body或背景DIV改变CSS background属性，具体实现时，以常用Javascript类库jQuery为例，其代码如下：

myBgDom.css(‘background’,userSelectedBg)。

在本发明实施例中，根据前景层的透明度效果，构建所述前景层的半透明前景元素之后，还可以将构建所述前景层的半透明前景元素时的半透明效果封装为特定的层叠样式表CSS类。

上述将构建所述前景层的半透明前景元素时的半透明效果封装为特定的层叠样式表CSS类，是基于这些半透明效果可以在HTML中复用的考虑。例如，假设根据前景层的透明度效果，构建前景层的半透明前景元素之后，其半透明效果封装为特定的CSS类如下：

.w50{background:url(../img/white-50.png)；}

.w30{background:url(../img/white-30.png)；}

….

在HTML中复用时，如下：

<body>

<div class＝”myDomElement w50”></div>

</body>

从上述附图1示例的Web应用界面换肤的方法可知，在确定前景层的透明度效果后，可以根据所述前景层的透明度效果构建所述前景层的半透明前景元素，若收到用户的换肤请求，则将当前背景层图片替换为所述换肤请求指向的背景图片后，即可实现Web应用界面的换肤。一方面，由于本发明提供的技术方案不再需要美术设计师单独设计多套皮肤，并开发对应的CSS/图片，在项目后期将大幅度节约项目资源，解放UI设计师和前端工程师的工作量，因此可以大幅度降低开发工作量；另一方面，由于本发明提供的技术方案不需要服务端参与，完全在客户端浏览器上运行，只需切换一张背景图片即可，不需要对整套CSS规则进行重载和解析，因此，可以提高系统运行效率；第三方面，由于采用本发明提供的技术方案，使得后期扩展皮肤时只需要提供一张背景图即可，因此，可以大幅度降低后期维护工作量。

请参阅附图2，是本发明实施例二提供的Web应用界面换肤的装置的结构示意图。为了便于说明，附图2仅示出了与本发明实施例相关的部分。附图2示例的Web应用界面换肤的装置可以是附图1示例的Web应用界面换肤的方法的执行主体。附图2示例的Web应用界面换肤的装置主要包括搭建模块201、透明度确定模块202、构建模块203和替换模块204，其中：

搭建模块201，用于搭建Web应用界面的层次，其中，Web应用界面的层次包括背景层和背景层之上的前景层；

透明度确定模块202，用于确定前景层的透明度效果；

构建模块203，用于根据前景层的透明度效果，构建前景层的半透明前景元素；

替换模块204，用于在收到用户的换肤请求时，将当前背景层图片替换为换肤请求指向的背景图片。

需要说明的是，以上附图2示例的Web应用界面换肤的装置的实施方式中，各功能模块的划分仅是举例说明，实际应用中可以根据需要，例如相应硬件的配置要求或者软件的实现的便利考虑，而将上述功能分配由不同的功能模块完成，即将所述Web应用界面换肤的装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。而且，实际应用中，本实施例中的相应的功能模块可以是由相应的硬件实现，也可以由相应的硬件执行相应的软件完成，例如，前述的搭建模块，可以是具有执行前述搭建Web应用界面的层次的硬件，例如搭建器，也可以是能够执行相应计算机程序从而完成前述功能的一般处理器或者其他硬件设备；再如前述的透明度确定模块，可以是执行确定前景层的透明度效果的硬件，例如透明度确定器，也可以是能够执行相应计算机程序从而完成前述功能的一般处理器或者其他硬件设备(本说明书提供的各个实施例都可应用上述描述原则)。

附图2示例的搭建模块201可以包括层次区分单元301和背景层处理单元302，如附图3所示本发明实施例三提供的Web应用界面换肤的装置，其中：

层次区分单元301，用于区分背景层和背景层之上的前景层；

背景层处理单元302，用于挑选背景层图片置于背景层，并在主工作区使用半透明层进行遮罩。

附图2示例的构建模块203可以包括半透明化处理单元401和设置单元402，如附图4所示本发明实施例四提供的Web应用界面换肤的装置，其中：

半透明化处理单元401，用于使用层叠样式表CSS规则，对前景层的前景元素进行半透明化处理；

设置单元402，用于将黑白两种纯色的图片按照需要的透明度进行调整后保存为png格式，并将图片设置为容器的背景。

附图2示例的替换模块204可以包括属性变更单元501，如附图5所示本发明实施例五提供的Web应用界面换肤的装置。属性变更单元501用于通过Javascript操作背景文档对象模型DOM元素改变CSS background属性。

附图2至附图5任一示例的装置还可以包括封装模块601，如附图6-a至附图6-d所示本发明实施例六至实施例九所示的Web应用界面换肤的装置。封装模块601用于构建模块203根据前景层的透明度效果，构建前景层的半透明前景元素之后，将构建所述前景层的半透明前景元素时的半透明效果封装为特定的层叠样式表CSS类。

需要说明的是，上述装置各模块/单元之间的信息交互、执行过程等内容，由于与本发明方法实施例基于同一构思，其带来的技术效果与本发明方法实施例相同，具体内容可参见本发明方法实施例中的叙述，此处不再赘述。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取存储器(RAM，RandomAccess Memory)、磁盘或光盘等。

以上对本发明实施例所提供的Web应用界面换肤的方法和装置进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (8)

1.一种Web应用界面换肤的方法，其特征在于，所述方法包括：

搭建Web应用界面的层次，所述Web应用界面的层次包括背景层和所述背景层之上的前景层；

确定所述前景层的透明度效果；

根据所述前景层的透明度效果，构建所述前景层的半透明前景元素，包括：

使用层叠样式表CSS规则，对所述前景层的前景元素进行半透明化处理，其中，使用层叠样式表CSS规则对所述前景层的前景元素进行半透明化处理时，采用如下CSS规则：.myDOm{filter:Alpha(opacity＝50)；opacity:.5；}，其中filter为IE专有属性，opacity是Web标准属性；

将黑白两种纯色的图片按照需要的透明度进行调整后保存为png格式，并将所述图片设置为容器的背景；将png格式的图片设置为5x5像素，利用背景图默认自动平铺的特点覆盖整个容器元素；

在收到用户的换肤请求时，将当前背景层图片替换为所述换肤请求指向的背景图片。

2.如权利要求1所述的方法，其特征在于，所述搭建Web应用界面的层次包括：

区分所述背景层和所述背景层之上的前景层；

挑选背景层图片置于所述背景层，并在主工作区使用半透明层进行遮罩。

3.如权利要求1所述的方法，其特征在于，所述将当前背景层图片替换为所述换肤请求指向的背景图片包括：

通过Javascript操作背景文档对象模型DOM元素改变CSS background属性。

4.如权利要求1至3任意一项所述的方法，其特征在于，所述根据所述前景层的透明度效果，构建所述前景层的半透明前景元素之后，所述方法还包括：

将构建所述前景层的半透明前景元素时的半透明效果封装为特定的层叠样式表CSS类。

5.一种Web应用界面换肤的装置，其特征在于，所述装置包括：

搭建模块，用于搭建Web应用界面的层次，所述Web应用界面的层次包括背景层和所述背景层之上的前景层；

透明度确定模块，用于确定所述前景层的透明度效果；

构建模块，用于根据所述前景层的透明度效果，构建所述前景层的半透明前景元素，包括：

使用层叠样式表CSS规则，对所述前景层的前景元素进行半透明化处理，其中，使用层叠样式表CSS规则对所述前景层的前景元素进行半透明化处理时，采用如下CSS规则：.myDOm{filter:Alpha(opacity＝50)；opacity:.5；}，其中filter为IE专有属性，opacity是Web标准属性；

将黑白两种纯色的图片按照需要的透明度进行调整后保存为png格式，并将所述图片设置为容器的背景；将png格式的图片设置为5x5像素，利用背景图默认自动平铺的特点覆盖整个容器元素；

替换模块，用于在收到用户的换肤请求时，将当前背景层图片替换为所述换肤请求指向的背景图片。

6.如权利要求5所述的装置，其特征在于，所述搭建模块包括：

层次区分单元，用于区分所述背景层和所述背景层之上的前景层；

背景层处理单元，用于挑选背景层图片置于所述背景层，并在主工作区使用半透明层进行遮罩。

7.如权利要求5所述的装置，其特征在于，所述替换模块包括：

属性变更单元，用于通过Javascript操作背景文档对象模型DOM元素改变CSSbackground属性。

8.如权利要求5至7任意一项所述的装置，其特征在于，所述装置还包括：

封装模块，用于所述构建模块根据所述前景层的透明度效果，构建所述前景层的半透明前景元素之后，将构建所述前景层的半透明前景元素时的半透明效果封装为特定的层叠样式表CSS类。