[发明专利]一种Web软件UI界面的换肤方法

说明书

技术领域

本发明属于UI界面换肤方法，尤其是一种Web软件UI界面的换肤方法。

背景技术

随着个性化社会的发展和Web设计技术的不断发展，现在很多基于Web的软件都支持换肤功能，允许用户根据自己实际需要来定制软件的外观。现有的设计方法一般都是通过动态改变所需要的CSS样式文件实现，其原理如下：

在设计Web界面时，首先通过HTML标签来设计界面要显示的内容及布局，然后通过CSS样式文件的设计来实现界面的显示效果和风格，包括标签的高度、宽度，字体大小及颜色、背景图片等。针对Web界面所要提供的每一种肤色风格，设计一套样式表，即CSS文件，并将其放在不同的文件夹中。同时，针对每一种肤色风格，设计相应的背景图片，也放到相应CSS文件对应的文件夹下面。在用户选择某一种目标肤色时，浏览器重新刷新加载相应的CSS样式文件和背景图片，进而实现肤色风格的更换。

该方法虽然能够实现精致的Web界面换肤效果，但其在实际使用中存在如下明显缺点：第一，需要针对每一种肤色效果设计相应的CSS样式文件和背景图片，设计开发工作量较大，尤其是对于复杂的Web软件；第二，在进行肤色更换时，需要浏览器重新进行刷新，加载相应的CSS样式文件和背景图片，效率较低。而且需要相应的设计来保存Web界面当时的数据状态，进一步增加了设计开发的难度。

发明内容

为了克服现有技术的缺陷，本发明提出了一种Web软件UI界面的换肤方法，以简化现有软件UI界面换肤方法的实现方式。

为了实现上述目的，本发明的技术方案为：

一种Web软件UI界面的换肤方法，包括以下步骤：

1）制作图形UI界面，并切割好贴图；

2）设置贴图的透明度，并保存为PNG格式图片；

3）采用HTML容器标签将PNG格式图片应用到UI界面上；

4）根据用户选择的颜色，UI界面将颜色动态应用到HTML容器标签，UI界面生成不同色调的皮肤。

步骤1）中首先制作好图形UI界面，通过图像处理软件，将UI界面布局中需要进行贴图的部分进行逐一剪贴，将切割好的贴图对应于相应的HTML容器标签。在UI界面中提供了颜色选择功能，用于用户选择不同的颜色。贴图采用PNG格式的透明效果更强，PNG格式的透明不限于仅为完全透明或不透明，还存在不同层次的透明。

更进一步的，步骤1）贴图的色调通过背景图片、标签底色或背景图片和标签底色混合实现。

更进一步的，所述贴图的透明度为0%~100%。即有些地方完全不需要底色色调，仅需背景图片上的效果，而有些地方则完全不需要背景图片效果，仅仅使用标签底色。更准确的说，将需要实现色调变换的部分勾选出来，设置一定的透明度，而其余地方则可设置为完全透明或不透明。将该贴图的其余部分的透明度设置为0%，即完全透明，完全透明处仅采用标签底色来实现色调效果；透明度设置为100%，即不透明，不透明处仅保留背景图片上的色调效果。

更进一步的，所述透明贴图的透明度为50%。

更进一步的，所述步骤3）为采用HTML容器标签制作CSS文件，利用HTML容器标签及CSS文件将PNG格式图片应用到UI界面上。

更进一步的，所述步骤4）的用户利用浏览器进入UI界面。用户通过浏览器进入UI界面，从而选择不同的颜色。

本发明的有益效果：通过背景图片和标签底色的混合色调来实现Web软件UI界面换肤的效果。在本法中，只需要一组背景图片，通过利用其透明度来实现背景图片和HTML标签底色的混合来最终实现各种不同色调的界面皮肤的效果；利用本法降低了Web软件开发和维护的难度。

附图说明

图1为本发明的流程图；

图2为本发明的效果图。

具体实施方式

如图1所示，一种Web软件UI界面的换肤方法，包括以下步骤：

1）制作图形UI界面，并切割好贴图；

2）设置贴图的透明度，并保存为PNG格式图片；

3）采用HTML容器标签制作CSS文件；采用HTML容器标签及CSS文件将PNG格式图片应用到UI界面上；

5）在UI界面中提供颜色选择功能；

6）利用浏览器进图UI界面；

7）用户选择颜色，UI界面将颜色动态应用到CSS文件，UI界面生成不同色调的皮肤。