专利名称：一种更换用户界面的皮肤的方法
技术领域：
本发明属于计算机领域，具体地说，涉及一种更换用户界面的皮肤的方法。
背景技术：
如今，在用户终端上安装有各种各样的客户端软件，每种客户端软件都有各自的用户界面，通过用户界面完成客户端软件与用户的交互，可以说用户界面就是客户端软件的门户。软件厂家通常都会为用户界面设计皮肤，皮肤的设计在考虑美观的同时，还要兼顾用户界面上皮肤组件摆放布局的合理使用。设计者在设计皮肤时，往往首先会设计出适合用户界面的皮肤图片；之后再针对皮肤图片编写一个数据文件，这个数据文件中会以代码或者数据表格的形式记录在皮肤图片上所有皮肤组件摆放的位置坐标以及尺寸、形状的参数，这个数据文件和皮肤图片可以认为构成了最基本的皮肤。这个数据文件对于普通用户来说是很难看懂的，但是电脑程序可以识别，要将所属皮肤加载到用户界面时，由电脑程序读取数据文件获知皮肤图片上的皮肤组件布局情况，然后在皮肤图片上进行摆放，最终就形成了用户界面。可以看到，数据文件的编写在皮肤设计中是绝对的核心操作，但是其编写的复杂程度可想而知，而且所编写的数据非常繁琐，导致容易出现错误，为皮肤设计带来了很大的难度。因此需要提供一种方式，能使皮肤设计变得简单，尤其是使数据文件的编写这种专业操作变得相对友好、直观。另外，因为对于皮肤中很多都是采用相同的组件布局而使用不同的皮肤图片来实现的，而这一类皮肤往往属于同一款的皮肤，如果能够对皮肤分款预先制作更具需要推荐给用户会带来非常好的用户感受。因此还需要提供一种方式，可以给用户提供标准化的用户界面的组件布局，并依据组件布局快速高效地提供多种标准化的皮肤，给予用户更多的选择。
发明内容
有鉴于此，本发明所要解决的技术问题是提供了一种更换用户界面的皮肤的方法，结合可视化标识预先制作好适当的皮肤图片，根据本地的组件布局提供各种适合的皮肤的预览，给于用户多种选择进行换肤。为了解决上述技术问题，本发明公开了一种更换用户界面的皮肤的方法，包括在云端建立皮肤图片与皮肤的组件布局的对应关系，所述皮肤图片通过用于标示皮肤组件位置的可视化标识绘制皮肤的组件布局；识别本地的用户界面当前使用的组件布局，根据所述组件布局查找对应的一幅或多幅皮肤图片推荐到本地；在本地针对一幅或多幅皮肤图片，识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组件布局的相应位置。进一步地，所述一幅皮肤图片携带用于绘制一种皮肤的组件布局的可视化标识。
进一步地，所述可视化标识，包括所述皮肤图片上所占用面积小于一阈值的颜色和/或透明度。进一步地，识别本地的用户界面当前使用的组件布局，根据所述组件布局在云端查找对应的一幅或多幅皮肤图片推荐到本地的步骤，包括在本地通过识别所述用户界面当前的组件布局得到布局模板并上报到云端，所述布局模板用于承载通过可视化标识绘制出的组件布局；在云端根据所述上报的布局模板获取组件布局，结合皮肤图片与皮肤的组件布局的对应关系查找对应的一幅或多幅皮肤图片推荐到本地。进一步地，在本地针对一幅或多幅皮肤图片，识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组件布局的相应位置的步骤，包括针对每幅皮肤图片，分别识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组件布局的相应位置从而生成预览并展现给用户供其选择。进一步地，在本地针对一幅或多幅皮肤图片，识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组件布局的相应位置的步骤，进一步包括针对一幅或多幅皮肤图片中用户选中的皮肤图片，识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组件布局的相应位置从而将所述皮肤图片加载到用户界面。进一步地，识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组件布局的相应位置的步骤，包括所述可视化标识使用不同的颜色和/或不同的透明度来区别不同的皮肤组件；读取所述可视化标识的颜色和/或透明度获取所绘制的一皮肤组件的位置，依据所述颜色和/或透明度选择对应的皮肤组件放置在所述皮肤组件的位置上， 并使所述皮肤组件与其所在位置的形状和/或大小适应。进一步地，所述皮肤组件放置在组件布局的相应位置后覆盖所述皮肤图片的可视化标识。进一步地，所述可视化标识还用于标示各皮肤组件的形状和/或大小。进一步地，所述皮肤组件，包括菜单条、工具栏、地址栏、工具箱、状态栏、滚动条、 标签位、单选/复选框、列表框和/或按钮。与现有的方案相比，本发明所获得的技术效果1)结合可视化标识预先制作好适当的皮肤图片，根据本地的组件布局提供各种适合的皮肤的预览，给于用户多种选择进行换肤；2)可视化标识直接由图片携带，以此替代数据文件，极大地方便了使用，而可视化标识作为一种信息可读性极强，对于用户容易识别，对于电脑程序识别也是非常方便的。3)标注绘制的操作本身相对编写数据文件更为简单，显示效果更为直观，用户可以轻松了解组件布局在皮肤上的反映。4)应用可视化标识直接在图片上进行标明，使得绘制组件布局变得简单直观，因此便于专业设计，有利于普通用户的自定义设计。5)所以仿真图片或者皮肤组件放置后会覆盖所述皮肤图片的可视化标识，保证皮肤图片不会被破坏。
图1为本发明整体方案的方法流程图2为本发明步骤200的方法流程图；图3为本发明步骤300的方法流程图。
具体实施例方式以下将配合图式及实施例来详细说明本发明的实施方式，藉此对本发明如何应用技术手段来解决技术问题并达成技术功效的实现过程能充分理解并据以实施。本发明的核心构思在于使用皮肤图片携带可视化标识，以此替代数据文件；并在云端收集皮肤图片，然后向本地的用户界面推荐适合的皮肤图片。所述可视化标识，包括所述皮肤图片上所占用面积小于一阈值的颜色和/或透明度，优选采用皮肤图片上没有出现的颜色和/或透明度，即阈值取0。可视化标识更直观简单，对于电脑程序和普通用户来说都是可读的。具体来说，在皮肤图片上根据用户指示通过用于标识皮肤组件位置的可视化标识绘制皮肤的组件布局；识别所述皮肤图片的可视化标识，并根据所述可视化标识将各皮肤组件放置在所述组件布局的相应位置。所述组件布局，包括所述用户界面上各皮肤组件的摆放位置、以及各皮肤组件的形状和/或大小。所述皮肤组件，包括菜单条、工具栏、地址栏、工具箱、状态栏、滚动条、标签位、单选/复选框、列表框和/或按钮等。以下以一实施例对本发明的整体方案进行说明。如图1所示，执行如下操作步骤100，建立皮肤图片与皮肤的组件布局的对应关系，所述皮肤图片通过用于标示皮肤组件位置的可视化标识绘制皮肤的组件布局；所述可视化标识还用于标示各皮肤组件的形状和/或大小；本步骤一般发生在云端，由云端收集所有的皮肤图片及组件布局，并建立维护这种对应关系，并由云端在所述皮肤图片上通过可视化标识绘制皮肤的组件布局；所述一幅皮肤图片携带用于绘制一种皮肤的组件布局的可视化标识；所述皮肤的组件布局与皮肤图片对应的意义在于，很多皮肤图片上都有非常美观的画面设计，所以组件布局应该尽量回避破坏这些画面的位置，例如皮肤图片上画有一个人物形象，那组件布局应该尽量不要占用人物形象的位置，否则会破坏皮肤图片的整体美感；因此，组件布局应该适配对应的皮肤图片的构图设计；所述组件布局一般来说，主要包括各皮肤组件的位置、以及各皮肤组件的形状和/或大小；即三种情况1)各皮肤组件的位置、形状和大小；2)各皮肤组件的位置以及形状；3)各皮肤组件的位置以及大小；所述可视化标识，包括所述皮肤图片上所占面积小于一阈值的颜色和/或透明度；在实际使用中，可以使用色块、色条或者带有颜色的线段、带有透明度的框块、条状、线段等来标出各皮肤组件的位置、形状、大小；这里需要说明的是，可视化标识是使用可视化手段进行标注的标识。1)在极端情况下，可以肉眼不可读而电脑程序可读(用肉眼不可识别的色差或者透明度差别标识，或者肉眼不可识别的尺寸标出)，但是一般是用作特殊用途，但是标注绘制这个操作本身相对编写数据文件是非常简单直观；2)但是一般来说它对于肉眼和电脑程序都可读，这样不仅标注绘制这个操作本身相对编写数据文件是非常简单直观，显示效果上就更为直观了，用户可以轻松了解组件布局在皮肤上的反映。
步骤200，识别本地的所述用户界面当前使用的组件布局，根据所述组件布局查找对应的一幅或多幅皮肤图片；本步骤可以发生在云端，云端接受本地识别出的所述用户界面当前使用的组件布局，在云端维护的对应关系中查找对应的一幅或多幅皮肤图片下发到本地；本步骤也可以发生在本地，由云端将所述对应关系下发到本地，本地识别出的所述用户界面当前使用的组件布局，并根据下发到本地的对应关系查找对应的一幅或多幅皮肤图片并向云端请求所述皮肤图片；此步骤的查找到的皮肤图片的样子就是带有颜色、透明度标出组件位置大小形状的图片，整个图片看起来像打着很多“补丁”的图片；这些“补丁”就是皮肤组件的位置，“补丁”的尺寸和形状就是皮肤组件适应的形状和大小；这些可视化标识直接由图片携带，直观方便，而可视化标识作为一种信息可读性极强，对于用户容易识别，对于电脑程序识别也是非常方便的。步骤300，针对一幅或多幅皮肤图片，识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组件布局的相应位置；本步骤一般发生在本地，包括先后两步处理第一步，提供预览本地针对查找到的并由云端获取的一幅或多幅的皮肤图片中的每一幅，分别识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组件布局的相应位置都生成用户界面的预览并一起展现给用户，供用户在这些预览中选择；第二步，加载皮肤针对一幅或多幅皮肤图片中用户选中的皮肤图片，识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组件布局的相应位置从而将所述皮肤图片加载到用户界面。以下再以一实施例对上述步骤200进行说明。如图2所示，执行如下操作步骤201，在本地通过识别所述用户界面当前的组件布局，从而得到所使用的布局模板上报到云端；所述布局模板用于承载通过可视化标识绘制出的组件布局；布局模板在实际实现中可以是一主体透明的布局框架图片；步骤202，云端根据所述上报的布局模板获取组件布局；在云端保存布局模板与组件布局的对应关系，根据布局模板获取对应的组件布局的标识；步骤203，云端根据所述组件布局，结合皮肤图片与皮肤的组件布局的对应关系查找对应的皮肤图片推荐到本地，可能找到一幅或多幅适合的皮肤图片。以下再以一实施例对上述步骤300中“依据所述可视化标识放置皮肤组件”的操作进行说明。如图3所示，执行如下操作步骤301，读取所述可视化标识的颜色和/或透明度获取所绘制的一皮肤组件的位置；预先保存所述颜色和/或透明度，电脑程序读取到所述颜色和/或透明度就可以认为碰到了皮肤组件的摆放设置。
步骤302，依据所述颜色和/或透明度查找对应的皮肤组件；不同的皮肤组件使用不同的颜色和/或不同的透明度进行区别；电脑程序内保存有不同的颜色和/或不同的透明度与皮肤组件的对应关系，依据这个对应关系来查找皮肤组件；当然，在最初使用可视化标识进行绘制皮肤组件布局时，用户也要按照预想放置的皮肤组件布局来使用相应的颜色和/或透明度来绘制。步骤303，将找到的皮肤组件放置在所述皮肤组件的位置上，并使所述皮肤组件与其所在位置的形状和/或大小适应；这样所述皮肤组件放置后正好就覆盖了所述皮肤图片的可视化标识，保证图片的完整、没有被破坏。上述说明示出并描述了本发明的若干优选实施例，但如前所述，应当理解本发明并非局限于本文所披露的形式，不应看作是对其他实施例的排除，而可用于各种其他组合、 修改和环境，并能够在本文所述发明构想范围内，通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围，则都应在本发明所附权利要求的保护范围内。
权利要求
1.一种更换用户界面的皮肤的方法，其特征在于，包括在云端建立皮肤图片与皮肤的组件布局的对应关系，所述皮肤图片通过用于标示皮肤组件位置的可视化标识绘制皮肤的组件布局；识别本地的用户界面当前使用的组件布局，根据所述组件布局查找对应的一幅或多幅皮肤图片推荐到本地；在本地针对一幅或多幅皮肤图片，识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组件布局的相应位置。
2.如权利要求1所述的方法，其特征在于，所述一幅皮肤图片携带用于绘制一种皮肤的组件布局的可视化标识。
3.如权利要求1所述的方法，其特征在于，所述可视化标识，包括所述皮肤图片上所占用面积小于一阈值的颜色和/或透明度。
4.如权利要求1所述的方法，其特征在于，识别本地的用户界面当前使用的组件布局， 根据所述组件布局在云端查找对应的一幅或多幅皮肤图片推荐到本地的步骤，进一步包括在本地通过识别所述用户界面当前的组件布局得到布局模板并上报到云端，所述布局模板用于承载通过可视化标识绘制出的组件布局；在云端根据所述上报的布局模板获取组件布局，结合皮肤图片与皮肤的组件布局的对应关系查找对应的一幅或多幅皮肤图片推荐到本地。
5.如权利要求1所述的方法，其特征在于，在本地针对一幅或多幅皮肤图片，识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组件布局的相应位置的步骤，进一步包括针对每幅皮肤图片，分别识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组件布局的相应位置从而生成预览并展现给用户供其选择。
6.如权利要求1所述的方法，其特征在于，在本地针对一幅或多幅皮肤图片，识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组件布局的相应位置的步骤，进一步包括针对一幅或多幅皮肤图片中用户选中的皮肤图片，识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组件布局的相应位置从而将所述皮肤图片加载到用户界
7.如权利要求5或6所述的方法，其特征在于，识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组件布局的相应位置的步骤，进一步包括所述可视化标识使用不同的颜色和/或不同的透明度来区别不同的皮肤组件； 读取所述可视化标识的颜色和/或透明度获取所绘制的一皮肤组件的位置，依据所述颜色和/或透明度选择对应的皮肤组件放置在所述皮肤组件的位置上，并使所述皮肤组件与其所在位置的形状和/或大小适应。
8.如权利要求1所述的方法，其特征在于，所述皮肤组件放置在组件布局的相应位置后覆盖所述皮肤图片的可视化标识。
9.如权利要求1所述的方法，其特征在于，所述可视化标识还用于标示各皮肤组件的形状和/或大小。
10.如权利要求1所述的方法，其特征在于，所述皮肤组件，包括菜单条、工具栏、地址栏、工具箱、状态栏、滚动条、标签位、单选/ 复选框、列表框和/或按钮。
全文摘要
本发明公开了一种更换用户界面的皮肤的方法，包括在云端建立皮肤图片与皮肤的组件布局的对应关系，所述皮肤图片通过用于标示皮肤组件位置的可视化标识绘制皮肤的组件布局；识别本地的用户界面当前使用的组件布局，根据所述组件布局查找对应的一幅或多幅皮肤图片推荐到本地；在本地针对一幅或多幅皮肤图片，识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组件布局的相应位置。本发明结合可视化标识预先制作好适当的皮肤图片，根据本地的组件布局提供各种适合的皮肤的预览，给于用户多种选择进行换肤。
文档编号G06F9/44GK102360293SQ20111030501
公开日2012年2月22日 申请日期2011年9月29日 优先权日2011年9月29日
发明者万立新 申请人:奇智软件(北京)有限公司