CN101021790A

CN101021790A - 一种用户界面变换方法及系统

Info

Publication number: CN101021790A
Application number: CN 200710073469
Authority: CN
Inventors: 刘帅
Original assignee: Huawei Technologies Co Ltd
Current assignee: Huawei Technologies Co Ltd
Priority date: 2007-03-09
Filing date: 2007-03-09
Publication date: 2007-08-22
Anticipated expiration: 2027-03-09
Also published as: CN100464296C

Abstract

本发明适用于计算机应用领域，提供了一种用户界面变换方法及系统，所述方法包括下述步骤：接收用户输入的颜色信息；读取用户界面的分层配置信息，将用户界面相应图层图片的颜色变换为所述用户输入的颜色信息对应的颜色，所述分层配置信息包含用户界面的分层信息，不同图层的图片数据，以及需要变换颜色的图层；合并包括颜色变换后的相应图层图片在内的各层图片，生成新用户界面。在本发明中，允许用户指定用户界面的颜色，同时对用户界面进行分层处理，可以防止变换颜色后，用户界面的光影效果明显损失，用户界面的颜色变换更为灵活，色彩更为绚丽，给用户更好的视觉体验。

Description

一种用户界面变换方法及系统

技术领域

本发明属于计算机应用领域，尤其涉及一种用户界面变换方法及系统。

背景技术

随着计算机图形界面技术的不断发展，用户对一款软件的需求已经不再仅仅停留于功能的使用上，而是越来越多的注重用户界面给用户的视觉冲击力，即用户界面的颜色搭配是否符合用户的习惯，颜色的个性化设置是否方便灵活。

目前，各个软件也基本体现了这一需求。现有的一种解决方案是软件预置几套颜色方案供用户选择。每套颜色方案的图片都是预先做好的，所以用户界面的光影效果比较理想。在这种方案中，由于预置的颜色方案数量有限，难以满足用户灵活变换用户界面的需求。在另外一种解决方案中，软件预置了一套用户界面，在软件运行过程中可以让用户指定用户界面的颜色，并按照一定算法以用户指定的颜色对当前用户界面进行变换，动态生成新用户界面。由于软件所使用的用户界面图片不分层，在用户界面的颜色多次变换后，其光影效果会有明显损失。

发明内容

本发明实施例的目的在于提供一种用户界面变换方法，旨在解决现有技术中软件用户界面的颜色多次变换后，其光影效果存在明显损失的问题。

本发明实施例是这样实现的，一种用户界面变换方法，所述方法包括下述步骤：

接收用户输入的颜色信息；

读取用户界面的分层配置信息，将用户界面相应图层图片的颜色变换为所述用户输入的颜色信息对应的颜色，所述分层配置信息包含用户界面的分层信息，不同图层的图片数据，以及需要变换颜色的图层；

合并包括颜色变换后的相应图层图片在内的各层图片，生成新用户界面。

本发明实施例的另一目的在于提供一种用户界面变换系统，所述系统包括：

颜色信息接收模块，用于接收用户输入的颜色信息；

颜色变换模块，用于读取用户界面的分层配置信息，将用户界面相应图层图片的颜色变换为所述用户输入的颜色信息对应的颜色，所述分层配置信息包含用户界面的分层信息，不同图层的图片数据，以及需要变换颜色的图层；以及

用户界面生成模块，用于合并包括颜色变换后的相应图层图片在内的各层图片，生成新用户界面。

在本发明实施例中，允许用户指定用户界面的颜色，同时对用户界面的图片进行分层处理，可以使得变换颜色后，用户界面的光影效果没有损失，用户界面的颜色变换更为灵活，色彩更为绚丽，给用户更好的视觉体验。

附图说明

图1是本发明实施例提供的用户界面变换方法的实现流程图；

图2是本发明实施例提供的用户界面变换系统的结构图。

具体实施方式

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

在本发明实施例中，允许用户指定用户界面的颜色，同时对用户界面的图片进行分层处理，可以防止变换颜色后，用户界面的光影效果明显损失。

由于常见的图片都是单层的，可以用多张图片来分别存储不同的图层。用户界面图层分的越多，实现起来就越灵活，但也会占用越多的存储空间，在用户界面变换颜色时也要消耗越多的处理时间。作为本发明的一个优选实施例，将用户界面分为背景图片(background)、前景图片(foreground)和光影效果图片(flash)三层，既可以保证用户界面外观(appearance)的美观性，同时也保证了较小的存储空间和较高的处理性能。在具体应用时，可以根据用户界面的实际需要，选择适用背景图片与前景图片两层、前景图片与光影效果图片两层，或者背景图片、前景图片与光影效果图片三层。

背景图片放在前景图片之下，例如按钮的阴影，进度条的边框等，一般不需要变换颜色。前景图片叠加在背景图片之上，是用户界面所必需的，一般需要变换颜色。

光影效果图片叠加在背景图片和前景图片之上，一般为透明图片，可以是透明的渐变图，或者是透明光照效果图，或者其他效果图，一般不需要变换颜色。在本发明实施例中，将光影效果图片单独作为一层可以使得无论前景图片怎么变换，光影效果图片始终可以叠加在前景图片上面，不会因为前景图片颜色的连续变换而失真。

当用户界面变换颜色时，可以根据用户的选择或者系统的配置对某些层的图片变换颜色，一般是前景图片。本发明实施例中，根据用户指定的颜色对用户界面的相应图层图片进行变换，可以利用色相(Hue)、色饱和度(Saturation)和明度值(Value)的HSV色彩空间的特性，通过改变色相(Hue)这一属性来变换颜色。

目前，计算机中常见的图片格式都是将象素存储为红、绿、蓝(RGB)模式。在本发明实施例中，先将RGB模式的颜色值变换为HSV模式下的颜色值，然后改变此颜色的色相为用户指定的色相就可以了，即改变H值，而保持S值和V值不变。这样就可以保证用户界面变换颜色前后，用户界面的饱和度(Saturation)与亮度(Brightness)与变换颜色前保持一致，用户界面仍会保持较好的视觉效果。当然，也可将饱和度与亮度的设置开放给用户，这样用户在个性化用户界面颜色时就有更大的选择空间。

上述颜色变换算法效果比较理想，变换效率也比较高，适用于大多数场合。如果软件对用户界面的效果有更高的要求，也可以使用其他更为复杂的算法。

为了使得颜色变换后的用户界面效果能够更快、更简洁地显示给用户，从而便于用户选择，作为本发明的一个实施例，在用户界面变换时，动态生成预览图(preview)显示给用户。当然，也可以省略该项功能，或者允许用户通过设置灵活选择是否启动预览图功能。

在预览时，根据用户界面的具体情况可以分为背景预览图片、按钮图标和图标旁边的文字等。此处对预览图片的分层方法与上述对用户界面的分层不同，上述用户界面的分层是用来生成最终用户界面的，所以背景图片侧重于底层的阴影边框等效果，前景图片用来改变颜色，最上层还有光影效果图片。由于用户界面的预览图一般比较小，所以阴影、光影等效果可以不必单独提出，而将这三层合并为一层统一变换颜色进行预览就可以了。因此，在用户界面预览的过程中，将这三层统一称为背景预览图片，而叠加在背景预览图片之上的是前景预览图片，包括图标和文字。对于没有前景图标和文字的控件来说，前景预览图片可以省略。而如果用户界面存在更为复杂的控件，也可以分为更多的层次。

在变换用户界面的颜色时，一般需要转换背景预览图片的颜色，不需要变换图标、文字等前景预览图片的颜色，当然前景预览图片的颜色也可以根据背景预览图片的颜色进行相应变换，图标和文字一般都显示在用户界面的最上层。

本发明实施例中通过图层(layer)来区分前景预览图片与背景预览图片之间的层次关系，例如用第0层来表示最底层，第1层则叠加在0层之上，依此类推。在预览时，为了区分哪张预览图片需要变换颜色(如背景预览图片)，哪张图片不需要变换颜色(如前景预览图片)，需要在用户界面的配置数据中增加一个是否需要进行颜色变换(colorize)的属性，例如true则改变预览图片颜色，false则不改变预览图片颜色。

为了使得用户能够对用户界面的视觉效果进行更加灵活的配置，从而进一步增强用户界面的视觉冲击力，作为本发明的另一实施例，可以根据软件自身的需要对用户界面进行分类，每一分类支持单独变换颜色，如工具栏图片、状态栏图片、对话框图片、菜单图片等。对于前景图片和背景图片可以融合到一起统一变换颜色的分类来说，背景图片可以省略。

用户界面的分类越详细，设置用户界面颜色时就越灵活，可以按照用户界面中的控件进行划分，例如分为工具栏、状态栏、按钮、对话框等，但分类太细会导致用户变换颜色的过程过于繁琐，需要用户手动一个部分一个部分的变换颜色。因此，可以提供将整个用户界面统一变换颜色的功能，自动将用户指定的颜色应用到所有分类中去。

在本发明实施例中，可以将每一个分类称为用户界面的一个组成部分(component)，每一个组成部分都可以有一个容易理解的名字(name)。以工具栏、状态栏为例，采用XML语言描述如下，当然可以根据具体情况增加新的组成部分或删改已有组成部分，例如增加按钮、对话框等其他分类：

<appearance background＝″toolbar_background.png″

foreground＝″toolbar_foreground.png″

flash＝″toolbar_flash.png″/>

</component>

<appearance background＝″statusbar_background.png″

foreground＝″statusbar_foreground.png″

flash＝″statusbar_flash.png″/>

</component>

</skin>

对于需要多语言支持的软件而言，也可以用一个语言资源ID(langid)来代替组成部分的名字。当然，二者也可以并存，名字可以方便开发者阅读描述文件，而语言资源ID可以在软件运行过程中被动态更换为相应的语言，例如：

</skin>

此外，为了保证软件可以读取不同版本的描述文件，可以为该描述加上一个版本号(version)，以保证不同版本间的兼容性：

</skin>

用户界面分类后，可以分类对颜色变换后的用户界面进行预览，采用XML文件可以描述如下：

<appearance background＝″toolbar_background.png″

foreground＝″toolbar_foreground.png″

flash＝″toolbar_flash.pn″/>

</component>

<appearance background＝″statusbar_background.png″

foreground＝″statusbar_foreground.png″

flash＝″statusbar_flash.png″/>

</component>

</skin>

由上述描述文件可以看出，工具栏背景图片在第0层，工具栏前景图片在第1层，而工具栏背景图片和状态栏背景图片同在第0层。由于预览图中各个控件一般是不会重叠的，可以处于同一图层中，所以这样处理一般是不会有问题。当然，如果预览界面太小，导致控件之间出现重叠时，也可以将不同控件放在不同层次上。标识图层的参数在具体实现中可以非常灵活的配置，以达到最佳预览效果。

用户界面相应图层图片的颜色变换完成后，合并用户界面中包括颜色变换后的相应图层图片在内的各层图片，生成新用户界面。在本发明实施例中，存储合并生成的新用户界面的配置数据，以便下一次操作。

第一种方式存储用户选择的颜色信息，下次软件启动时，自动根据原用户界面数据和用户选择的颜色信息进行运算，生成新用户界面。在存储颜色信息时，可以在XML描述文件中增加颜色(color)属性信息，用来表明用户界面的每一个组成部分是什么颜色：

</skin>

这种方式方便软件预置多套用户界面颜色方案，也方便存储用户自定义的多套用户界面颜色方案，而基本无需消耗磁盘空间，用户选择的颜色信息等数据占用的存储空间小，但是每次软件启动时，都需要一定时间进行运算来生成新用户界面。

第二种方式是存储合并生成的新用户界面数据。这种方式优点是软件启动时无需重新计算用户界面的配置数据，软件启动速度较快。

第三种方式是存储颜色变换后合并生成前用户界面的分层配置信息，包括用户界面的分层信息，颜色变换后的不同图层的图片数据，以及需要变换颜色的图层。这样，在用户需要重新变换颜色时，需要在原始用户界面的基础上进行，不能在变换颜色后的新用户界面的基础上进行。

在具体实现时，可以根据需要选择上述任意一种方式。

图1示出了本发明实施例提供的用户界面变换方法的完整流程，详述如下：

在步骤S101中，软件启动，加载现有用户界面的配置数据，生成现有用户界面。

现有的用户界面的配置数据可能是软件在安装后预置的用户界面的配置数据，也可能是上次变换颜色后的用户界面的配置数据。软件加载现有用户界面的配置数据，例如将上述XML描述文件加载到内存中，生成用户界面。

在步骤S102中，用户界面变换颜色功能被用户触发，接收用户输入的颜色信息。

在本发明实施例中，用户通过点击相应菜单项或者其他方式触发用户界面变换功能。

在步骤S103中，读取当前用户界面的分层配置信息，包含用户界面的分层信息，不同图层的图片数据，以及需要变换颜色的图层，生成预览图。在不需要预览时该步骤也可以省略。

在步骤S104中，判断用户对当前颜色下的用户界面是否满意，是则执行步骤S105，否则返回执行步骤S102。

在步骤S105中，根据用户选择颜色后的分层配置信息，将用户界面的相应图层图片变换为用户输入的颜色。

例如读取以上述XML描述文件中的appearance标签，加载appearance标签中的所有图片，将图片各个组成部分的前景图片颜色更换为用户指定的颜色。

在步骤S106中，合并包括颜色变换后的相应图层图片在内的各层图片，生成新用户界面。例如将背景图片、前景图片、光影效果图片进行合并，合并后，当用户界面分为多个组成部分时，每个组成部分只对应一张图片。

在步骤S107中，存储新用户界面的配置数据，例如新用户界面对应的颜色信息，合并生成的新用户界面数据，或者颜色变换后合并生成前用户界面的分层配置信息，以便于下次操作，当然也可以不存储新用户界面的配置数据，下次启动时由用户在原始用户界面的基础上重新生成新用户界面。

实现上述方法的软件可以存储于一计算机可读存取介质中，存储介质可以是ROM/RAM、磁盘、光盘等。该软件在执行时，包括如下步骤：

1.接收用户输入的颜色信息；

2.读取用户界面的分层配置信息，根据用户输入的颜色信息生成预览图；

3.将用户界面相应层的图片变换为用户输入的颜色；

4.合并包括颜色变换后的相应图层图片在内的各层图片，生成新用户界面；

5.存储新用户界面的配置数据。

图2示出了本发明实施例中提供的用户界面变换系统的结构，为了便于说明，仅示出了与本发明相关的部分。

软件启动后，用户触发用户界面变换功能，颜色信息接收模块201接收用户输入的颜色信息。当软件提供预览图功能，或者用户启动预览功能时，预览图生成模块202读取用户界面的分层配置信息，根据颜色信息接收模块201接收的颜色信息，生成对应的用户界面预览图，显示给用户。

用户选择确定满意的颜色后，颜色变换模块203将用户界面相应图层图片的颜色变换为用户输入的颜色信息对应的颜色。

在本发明实施例中，用户界面分为背景图片与前景图片两层、前景图片与光影效果图片两层，或者背景图片、前景图片与光影效果图片三层。为了使得用户能够对用户界面的视觉效果进行更加灵活的配置，可以将用户界面分成多个组成部分，每个组成部分支持单独变换颜色。

作为本发明的一个实施例，颜色变换模块203在对用户界面相应图层图片的颜色进行变换时，变换用户界面相应层的图片在HSV模式下的H值，保持S值和V值不变。

用户界面生成模块204合并包括颜色变换后的相应图层图片在内的各层图片，生成新用户界面。作为本发明的一个实施例，通过配置数据存储模块205存储生成的新用户界面的配置数据，以备下次操作。用户界面的配置数据可以是新用户界面对应的颜色信息，合并生成的新用户界面数据，或者颜色变换后合并生成前用户界面的分层配置信息。

为了便于理解，在上述描述中，本发明实施例中采用了XML描述文件对用户界面的配置数据进行了说明，显然可以采取其他语言或者方式来实现。

在本发明实施例中，允许用户指定用户界面的颜色，同时对用户界面的图片进行分层处理，可以防止变换颜色后，用户界面的光影效果明显损失，软件用户界面的颜色变换更为灵活，色彩更为绚丽，给用户更好的视觉体验，并有助于缩短软件外包商定制用户界面颜色的周期，降低开发成本。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims

1、一种用户界面变换方法，其特征在于，所述方法包括下述步骤：

接收用户输入的颜色信息；

2、如权利要求1所述的方法，其特征在于，所述用户界面分为背景图片与前景图片两层、前景图片与光影效果图片两层，或者背景图片、前景图片与光影效果图片三层。

3、如权利要求1或2所述的方法，其特征在于，所述用户界面包括多个组成部分，每个组成部分支持单独变换颜色。

4、如权利要求1或2所述的方法，其特征在于，在对用户界面相应图层图片的颜色进行变换时，变换用户界面相应图层图片在HSV模式下的H值，保持S值和V值不变。

5、如权利要求1或2所述的方法，其特征在于，在所述合并包括颜色变换后的相应图层图片在内的各层图片，生成新用户界面的步骤前，所述方法进一步包括下述步骤：

读取用户界面的分层配置信息，生成与所述用户输入的颜色信息对应的用户界面预览图。

6、如权利要求1或2所述的方法，其特征在于，所述方法进一步包括下述步骤：

存储所述新用户界面的配置数据；

所述配置数据为所述新用户界面对应的颜色信息，合并生成的所述新用户界面数据，或者颜色变换后合并生成前用户界面的分层配置信息。

7、一种用户界面变换系统，其特征在于，所述系统包括：

颜色信息接收模块，用于接收用户输入的颜色信息；

8、如权利要求7所述的系统，其特征在于，所述用户界面分为背景图片与前景图片两层、前景图片与光影效果图片两层，或者背景图片、前景图片与光影效果图片三层。

9、如权利要求7或8所述的系统，其特征在于，所述用户界面包括多个组成部分，每个组成部分支持单独变换颜色。

10、如权利要求7或8所述的系统，其特征在于，所述颜色变换模块对用户界面相应图层图片的颜色进行变换时，变换用户界面相应图层图片在HSV模式下的H值，保持S值和V值不变。

11、如权利要求7或8所述的系统，其特征在于，所述系统进一步包括：

预览图生成模块，用于读取用户界面的分层配置信息，生成与所述用户输入的颜色信息对应的用户界面预览图。

12、如权利要求7或8所述的系统，其特征在于，所述系统进一步包括：

颜色变换数据存储模块，用于存储所述新用户界面的配置数据，所述配置数据为所述新用户界面对应的颜色信息，合并生成的所述新用户界面数据，或者颜色变换后合并生成前用户界面的分层配置信息。