CN102446097B - 一种更换用户界面的皮肤的方法 - Google Patents

Abstract

本发明公开了一种更换用户界面的皮肤的方法，包括：建立皮肤图片与皮肤的组件布局的对应关系，所述皮肤的组件布局适配于对应的皮肤图片，所述皮肤的组件布局通过用于标示皮肤组件位置的可视化标识进行绘制；根据用户选定的皮肤图片，查找对应的一个或多个适配的组件布局推荐给用户；对所述一个或多个适配的组件布局识别其中用于标示皮肤组件位置的可视化标识，并据此将各皮肤组件放置在组件布局的相应位置。本发明结合可视化标识预先制作好适当的组件布局，根据用户选定的皮肤图片提供各种适合的组件布局的预览，给于用户多种选择进行换肤。

Description

一种更换用户界面的皮肤的方法

技术领域

本发明属于计算机领域，具体地说，涉及一种更换用户界面的皮肤的方法。

背景技术

如今，在用户终端上安装有各种各样的客户端软件，每种客户端软件都有各自的用户界面，通过用户界面完成客户端软件与用户的交互，可以说用户界面就是客户端软件的门户。

软件厂家通常都会为用户界面设计皮肤，皮肤的设计在考虑美观的同时，还要兼顾用户界面上皮肤组件摆放布局的合理使用。设计者在设计皮肤时，往往首先会设计出适合用户界面的皮肤图片；之后再针对皮肤图片编写一个数据文件，这个数据文件中会以代码或者数据表格的形式记录在皮肤图片上所有皮肤组件摆放的位置坐标以及尺寸、形状的参数，这个数据文件和皮肤图片可以认为构成了最基本的皮肤。这个数据文件对于普通用户来说是很难看懂的，但是电脑程序可以识别，要将所属皮肤加载到用户界面时，由电脑程序读取数据文件获知皮肤图片上的皮肤组件布局情况，然后在皮肤图片上进行摆放，最终就形成了用户界面。

可以看到，数据文件的编写在皮肤设计中是绝对的核心操作，但是其编写的复杂程度可想而知，而且所编写的数据非常繁琐，导致容易出现错误，为皮肤设计带来了很大的难度。因此需要提供一种方式，能使皮肤设计变得简单，尤其是使数据文件的编写这种专业操作变得相对友好、直观。

另外，因为对于皮肤中很多都是采用相同的组件布局而使用不同的皮肤图片来实现的，而这一类皮肤往往属于同一款的皮肤，如果能够对皮肤分款预先制作更具需要推荐给用户会带来非常好的用户感受。因此还需要提供一种方式，可以给用户提供标准化的用户界面的组件布局，并依据组件布局快速高效地提供多种标准化的皮肤，给予用户更多的选择。

发明内容

有鉴于此，本发明所要解决的技术问题是提供了一种更换用户界面的皮肤的方法，结合可视化标识预先制作好适当的组件布局，根据用户选定的皮肤图片提供各种适合的组件布局的预览，给于用户多种选择进行换肤。

为了解决上述技术问题，本发明公开了一种更换用户界面的皮肤的方法，包括：建立皮肤图片与皮肤的组件布局的对应关系，所述皮肤的组件布局适配于对应的皮肤图片，所述皮肤的组件布局通过用于标示皮肤组件位置的可视化标识进行绘制；根据用户选定的皮肤图片，查找对应的一个或多个适配的组件布局推荐给用户；对所述一个或多个适配的组件布局识别其中用于标示皮肤组件位置的可视化标识，并据此将各皮肤组件放置在组件布局的相应位置。

进一步地，所述可视化标识，包括：所述皮肤图片上所占用面积小于一阈值的颜色和/或透明度。

进一步地，所述一幅皮肤图片携带用于绘制一种组件布局的可视化标识；根据所述多个组件布局中的每个组件布局，分别在所述皮肤图片相应的副本上绘制用于标示这种组件布局的可视化标识。

进一步地，所述可视化标识还用于标示皮肤组件的形状和/或大小。

进一步地，所述皮肤组件放置在组件布局的相应位置后覆盖所述皮肤图片的可视化标识。

进一步地，对所述一个或多个适配的组件布局识别其用于标示皮肤组件位置的可视化标识，并据此将各皮肤组件放置在组件布局的相应位置的步骤，包括：根据一个或多个皮肤的组件布局中的每一个组件布局，分别在所述皮肤图片上绘制用于标示皮肤组件位置的可视化标识，识别所述皮肤图片的可视化标识并据此将皮肤组件放置在所述组件布局的相应位置从而生成预览并展现给用户供其选择。

进一步地，对所述一个或多个适配的组件布局识别其用于标示皮肤组件位置的可视化标识，并据此将各皮肤组件放置在组件布局的相应位置的步骤，包括：根据一个或多个皮肤的组件布局中用户选中的组件布局，在所述皮肤图片上绘制用于标示皮肤组件位置的可视化标识，识别所述皮肤图片的可视化标识并据此将皮肤组件放置在所述组件布局的相应位置从而将所述皮肤图片加载到用户界面。

进一步地，通过所述可视化标识所绘制出的皮肤的组件布局使用布局模板作为载体，所述布局模板为背景透明、所述组件布局使用可视化标识标出的布局框架图片。

进一步地，对所述一个或多个适配的组件布局识别其用于标示皮肤组件位置的可视化标识，并据此将各皮肤组件放置在组件布局的相应位置的步骤，包括：根据一个或多个皮肤的组件布局中的每一个组件布局，分别识别其布局模板的用于标示皮肤组件位置的可视化标识，据此将皮肤组件放置在所述组件布局的相应位置并与所述皮肤图片合并而生成预览并展现给用户供其选择。

进一步地，对所述一个或多个适配的组件布局识别其用于标示皮肤组件位置的可视化标识，并据此将各皮肤组件放置在组件布局的相应位置的步骤，包括：根据一个或多个皮肤的组件布局中用户选中的组件布局，识别其布局模板的用于标示皮肤组件位置的可视化标识，据此将皮肤组件放置在所述组件布局的相应位置并与所述皮肤图片合并从而将所述皮肤图片加载到用户界面。

进一步地，其特征在于，识别用于标示皮肤组件位置的可视化标识，据此将皮肤组件放置在所述组件布局的相应位置的步骤，包括：所述可视化标识使用不同的颜色和/或不同的透明度来区别不同的皮肤组件；读取所述可视化标识的颜色和/或透明度获取所绘制的一皮肤组件的位置，依据所述颜色和/或透明度选择对应的皮肤组件放置在所述皮肤组件的位置上，并使所述皮肤组件与其所在位置的形状和/或大小适应。

与现有的方案相比，本发明所获得的技术效果：

1)结合可视化标识预先制作好适当的组件布局，根据用户选定的皮肤图片提供各种适合的组件布局的预览，给于用户多种选择进行换肤。

2)可视化标识直接由图片携带，以此替代数据文件，极大地方便了使用，而可视化标识作为一种信息可读性极强，对于用户容易识别，对于电脑程序识别也是非常方便的。

3)标注绘制的操作本身相对编写数据文件更为简单，显示效果更为直观，用户可以轻松了解组件布局在皮肤上的反映。

4)应用可视化标识直接在图片上进行标明，使得绘制组件布局变得简单直观，因此便于专业设计，有利于普通用户的自定义设计。

5)所以仿真图片或者皮肤组件放置后会覆盖所述皮肤图片的可视化标识，保证皮肤图片不会被破坏。

6)通过可视化标识生成布局模板的方式可以通过非常形象直观的手段对组件布局进行标准化加工，使用标准化的模板来对皮肤图片生成皮肤非常容易操作，而且实现起来简便高效。

附图说明

图1为本发明整体方案的方法流程图；

图2为本发明步骤300的方法流程图。

具体实施方式

以下将配合图式及实施例来详细说明本发明的实施方式，藉此对本发明如何应用技术手段来解决技术问题并达成技术功效的实现过程能充分理解并据以实施。

本发明的核心构思在于：使用皮肤图片携带可视化标识，以此替代数据文件；并在云端收集皮肤图片和组件布局，然后根据选定的皮肤图片向本地的用户界面推荐适合的组件布局。

所述可视化标识，包括：所述皮肤图片上所占用面积小于一阈值的颜色和/或透明度，优选采用皮肤图片上没有出现的颜色和/或透明度，即阈值取0。可视化标识更直观简单，对于电脑程序和普通用户来说都是可读的。

具体来说，在皮肤图片上根据用户指示通过用于标识皮肤组件位置的可视化标识绘制皮肤的组件布局；识别所述皮肤图片的可视化标识，并根据所述可视化标识将各皮肤组件放置在所述组件布局的相应位置。所述组件布局，包括：所述用户界面上各皮肤组件的摆放位置、以及各皮肤组件的形状和/或大小。所述皮肤组件，包括：菜单条、工具栏、地址栏、工具箱、状态栏、滚动条、标签位、单选/复选框、列表框和/或按钮等。

以下以一实施例对本发明的整体方案进行说明。如图1所示，执行如下操作：

步骤100，建立皮肤图片与皮肤的组件布局的对应关系，所述皮肤的组件布局适配于对应的皮肤图片，所述皮肤的组件布局通过用于标示皮肤组件位置的可视化标识进行绘制；所述可视化标识还用于标示各皮肤组件的形状和/或大小；

本步骤一般发生在云端，由云端收集所有的皮肤图片及组件布局，并建立维护这种对应关系，并由云端通过用于标示皮肤组件位置的可视化标识绘制所述皮肤的组件布局；

所述皮肤的组件布局适配于对应的皮肤图片的意义在于，很多皮肤图片上都有非常美观的画面设计，所以组件布局应该尽量回避破坏这些画面的位置，例如皮肤图片上画有一个人物形象，那组件布局应该尽量不要占用人物形象的位置，否则会破坏皮肤图片的整体美感；因此，组件布局应该适配对应的皮肤图片的构图设计；

所述组件布局一般来说，主要包括：各皮肤组件的位置、以及各皮肤组件的形状和/或大小；即三种情况：1)各皮肤组件的位置、形状和大小；2)各皮肤组件的位置以及形状；3)各皮肤组件的位置以及大小；

所述可视化标识，包括：所述皮肤图片上所占面积小于一阈值的颜色和/或透明度；在实际使用中，可以使用色块、色条或者带有颜色的线段、带有透明度的框块、条状、线段等来标出各皮肤组件的位置、形状、大小；

这里需要说明的是，可视化标识是使用可视化手段进行标注的标识。1)在极端情况下，可以肉眼不可读而电脑程序可读(用肉眼不可识别的色差或者透明度差别标识，或者肉眼不可识别的尺寸标出)，但是一般是用作特殊用途，但是标注绘制这个操作本身相对编写数据文件是非常简单直观；2)但是一般来说它对于肉眼和电脑程序都可读，这样不仅标注绘制这个操作本身相对编写数据文件是非常简单直观，显示效果上就更为直观了，用户可以轻松了解组件布局在皮肤上的反映。

步骤200，根据用户选定的皮肤图片，查找对应的一个或多个适配的组件布局推荐给用户；

云端向本地用户推荐各种皮肤图片的预览，用户选定其中的一个皮肤图片，结合皮肤图片与皮肤的组件布局的对应关系查找对应的一个或多个组件布局用户推荐；查找的过程可以由云端完成，也可以由云端将对应关系下发到本地，由本地完成；在步骤100和200中，皮肤图片就是原始的图片，不含有可视化标识。

步骤300，对所述一个或多个适配的组件布局识别其中用于标示皮肤组件位置的可视化标识，并据此将各皮肤组件放置在组件布局的相应位置；所述皮肤组件放置在组件布局的相应位置后覆盖所述可视化标识；

本步骤包括先后两步处理：步骤1，提供预览——对所述一个或多个适配的组件布局中的每一个组件布局，分别在所述皮肤图片上绘制用于标示皮肤组件位置的可视化标识，识别所述皮肤图片的可视化标识并据此将皮肤组件放置在所述组件布局的相应位置从而生成预览并展现给用户供其选择；步骤2，加载皮肤——对所述一个或多个适配的组件布局中用户选中的组件布局，在所述皮肤图片上绘制用于标示皮肤组件位置的可视化标识，识别所述皮肤图片的可视化标识并据此将皮肤组件放置在所述组件布局的相应位置从而将所述皮肤图片加载到用户界面；

所述一幅皮肤图片携带用于绘制一种组件布局的可视化标识，根据所述多个组件布局中的每个组件布局，分别在所述皮肤图片相应的副本上绘制用于标示这种组件布局的可视化标识；

本步骤中，经过绘制后的皮肤图片的样子就是带有颜色、透明度标出组件位置大小形状的图片，整个图片看起来像打着很多“补丁”的图片；这些“补丁”就是皮肤组件的位置，“补丁”的尺寸和形状就是皮肤组件适应的形状和大小；这些可视化标识直接由图片携带，直观方便，而可视化标识作为一种信息可读性极强，对于用户容易识别，对于电脑程序识别也是非常方便的。

在实际操作中，通过所述可视化标识所绘制出的皮肤的组件布局可以使用布局模板作为载体，所述布局模板为背景透明、组件布局用可视化标识标出的布局框架图片，所述可视化标识还用于标示各皮肤组件的形状和/或大小。通过可视化标识生成布局模板的方式可以通过非常形象直观的手段对组件布局进行标准化加工，使用标准化的模板来对皮肤图片生成皮肤非常容易操作，而且实现起来简便高效。

例如步骤300包括先后两步处理——提供预览和加载皮肤变化为：

1)提供预览

对所述一个或多个适配的组件布局中的每一个组件布局，分别识别其布局模板的用于标示皮肤组件位置的可视化标识，据此将皮肤组件放置在所述组件布局的相应位置并与所述皮肤图片合并而生成预览并展现给用户供其选择。

2)加载皮肤

对所述一个或多个适配的组件布局中用户选中的组件布局，识别其布局模板的用于标示皮肤组件位置的可视化标识，据此将皮肤组件放置在所述组件布局的相应位置并与所述皮肤图片合并从而将所述皮肤图片加载到用户界面。

以下再以一实施例对上述步骤300中“识别所述可视化标识并据此将各皮肤组件放置在组件布局的相应位置”的操作进行说明。如图2所示，执行如下操作：

步骤301，读取所述可视化标识的颜色和/或透明度获取所绘制的一皮肤组件的位置；

预先保存所述颜色和/或透明度，电脑程序读取到所述颜色和/或透明度就可以认为碰到了皮肤组件的摆放设置。

步骤302，依据所述颜色和/或透明度查找对应的皮肤组件；

不同的皮肤组件使用不同的颜色和/或不同的透明度进行区别；电脑程序内保存有不同的颜色和/或不同的透明度与皮肤组件的对应关系，依据这个对应关系来查找皮肤组件；

当然，在最初使用可视化标识进行绘制皮肤组件布局时，用户也要按照预想放置的皮肤组件布局来使用相应的颜色和/或透明度来绘制。

步骤303，将找到的皮肤组件放置在所述皮肤组件的位置上，并使所述皮肤组件与其所在位置的形状和/或大小适应；

这样所述皮肤组件放置后正好就覆盖了所述可视化标识，保证皮肤图片的完整、没有被破坏。

上述说明示出并描述了本发明的若干优选实施例，但如前所述，应当理解本发明并非局限于本文所披露的形式，不应看作是对其他实施例的排除，而可用于各种其他组合、修改和环境，并能够在本文所述发明构想范围内，通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围，则都应在本发明所附权利要求的保护范围内。

Claims (10)

1.一种更换用户界面的皮肤的方法，其特征在于，包括：

建立皮肤图片与皮肤的组件布局的对应关系，所述皮肤的组件布局适配于对应的皮肤图片，所述皮肤的组件布局通过用于标示皮肤组件位置的可视化标识进行绘制，而直接在所述皮肤图片上进行标明，并且适配于所述对应的皮肤图片的构图设计；

根据用户选定的皮肤图片，查找对应的一个或多个适配的组件布局推荐给用户；

对所述一个或多个适配的组件布局识别其中用于标示皮肤组件位置的可视化标识，并据此将各皮肤组件放置在组件布局的相应位置；

所述可视化标识，包括：所述皮肤图片上所占用面积小于一阈值的颜色和/或透明度。

2.如权利要求1所述的方法，其特征在于，

一幅皮肤图片携带用于绘制一种组件布局的可视化标识；

根据所述多个组件布局中的每个组件布局，分别在所述皮肤图片相应的副本上绘制用于标示这种组件布局的可视化标识。

3.如权利要求1所述的方法，其特征在于，

所述可视化标识还用于标示皮肤组件的形状和/或大小。

4.如权利要求1所述的方法，其特征在于，

所述皮肤组件放置在组件布局的相应位置后覆盖所述皮肤图片的可视化标识。

5.如权利要求1所述的方法，其特征在于，对所述一个或多个适配的组件布局识别其用于标示皮肤组件位置的可视化标识，并据此将各皮肤组件放置在组件布局的相应位置的步骤，进一步包括：

根据一个或多个皮肤的组件布局中的每一个组件布局，分别在所述皮肤图片上绘制用于标示皮肤组件位置的可视化标识，识别所述皮肤图片的可视化标识并据此将皮肤组件放置在所述组件布局的相应位置从而生成预览并展现给用户供其选择。

6.如权利要求1所述的方法，其特征在于，对所述一个或多个适配的组件布局识别其用于标示皮肤组件位置的可视化标识，并据此将各皮肤组件放置在组件布局的相应位置的步骤，进一步包括：

根据一个或多个皮肤的组件布局中用户选中的组件布局，在所述皮肤图片上绘制用于标示皮肤组件位置的可视化标识，识别所述皮肤图片的可视化标识并据此将皮肤组件放置在所述组件布局的相应位置从而将所述皮肤图片加载到用户界面。

7.如权利要求1所述的方法，其特征在于，

通过所述可视化标识所绘制出的皮肤的组件布局使用布局模板作为载体，所述布局模板为背景透明、所述组件布局使用可视化标识标出的布局框架图片。

8.如权利要求7所述的方法，其特征在于，对所述一个或多个适配的组件布局识别其用于标示皮肤组件位置的可视化标识，并据此将各皮肤组件放置在组件布局的相应位置的步骤，进一步包括：

根据一个或多个皮肤的组件布局中的每一个组件布局，分别识别其布局模板的用于标示皮肤组件位置的可视化标识，据此将皮肤组件放置在所述组件布局的相应位置并与所述皮肤图片合并而生成预览并展现给用户供其选择。

9.如权利要求7所述的方法，其特征在于，对所述一个或多个适配的组件布局识别其用于标示皮肤组件位置的可视化标识，并据此将各皮肤组件放置在组件布局的相应位置的步骤，进一步包括：

根据一个或多个皮肤的组件布局中用户选中的组件布局，识别其布局模板的用于标示皮肤组件位置的可视化标识，据此将皮肤组件放置在所述组件布局的相应位置并与所述皮肤图片合并从而将所述皮肤图片加载到用户界面。

10.如权利要求5、6、8或9中任一所述的方法，其特征在于，识别用于标示皮肤组件位置的可视化标识，据此将皮肤组件放置在所述组件布局的相应位置的步骤，进一步包括：

所述可视化标识使用不同的颜色和/或不同的透明度来区别不同的皮肤组件；

读取所述可视化标识的颜色和/或透明度获取所绘制的一皮肤组件的位置，依据所述颜色和/或透明度选择对应的皮肤组件放置在所述皮肤组件的位置上，并使所述皮肤组件与其所在位置的形状和/或大小适应。