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