一种更换用户界面的皮肤的方法 【技术领域】
本发明属于计算机领域， 具体地说， 涉及一种更换用户界面的皮肤的方法。背景技术 如今， 在用户终端上安装有各种各样的客户端软件， 每种客户端软件都有各自的 用户界面， 通过用户界面完成客户端软件与用户的交互， 可以说用户界面就是客户端软件 的门户。
软件厂家通常都会为用户界面设计皮肤， 皮肤的设计在考虑美观的同时， 还要兼 顾用户界面上皮肤组件摆放布局的合理使用。设计者在设计皮肤时， 往往首先会设计出适 合用户界面的皮肤图片 ； 之后再针对皮肤图片编写一个数据文件， 这个数据文件中会以代 码或者数据表格的形式记录在皮肤图片上所有皮肤组件摆放的位置坐标以及尺寸、 形状的 参数， 这个数据文件和皮肤图片可以认为构成了最基本的皮肤。这个数据文件对于普通用 户来说是很难看懂的， 但是电脑程序可以识别， 要将所属皮肤加载到用户界面时， 由电脑程
序读取数据文件获知皮肤图片上的皮肤组件布局情况， 然后在皮肤图片上进行摆放， 最终 就形成了用户界面。
可以看到， 数据文件的编写在皮肤设计中是绝对的核心操作， 但是其编写的复杂 程度可想而知， 而且所编写的数据非常繁琐， 导致容易出现错误， 为皮肤设计带来了很大的 难度。 因此需要提供一种方式， 能使皮肤设计变得简单， 尤其是使数据文件的编写这种专业 操作变得相对友好、 直观。
另外， 因为对于皮肤中很多都是采用相同的组件布局而使用不同的皮肤图片来实 现的， 而这一类皮肤往往属于同一款的皮肤， 如果能够对皮肤分款预先制作更具需要推荐 给用户会带来非常好的用户感受。因此还需要提供一种方式， 可以给用户提供标准化的用 户界面的组件布局， 并依据组件布局快速高效地提供多种标准化的皮肤， 给予用户更多的 选择。 发明内容
有鉴于此， 本发明所要解决的技术问题是提供了一种更换用户界面的皮肤的方 法， 结合可视化标识预先制作好适当的皮肤图片， 根据本地的组件布局提供各种适合的皮 肤的预览， 给于用户多种选择进行换肤。
为了解决上述技术问题， 本发明公开了一种更换用户界面的皮肤的方法， 包括 ： 在 云端建立皮肤图片与皮肤的组件布局的对应关系， 所述皮肤图片通过用于标示皮肤组件位 置的可视化标识绘制皮肤的组件布局 ； 识别本地的用户界面当前使用的组件布局， 根据所 述组件布局查找对应的一幅或多幅皮肤图片推荐到本地 ； 在本地针对一幅或多幅皮肤图 片， 识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组件布局的相应位 置。
进一步地， 所述一幅皮肤图片携带用于绘制一种皮肤的组件布局的可视化标识。进一步地， 所述可视化标识， 包括 ： 所述皮肤图片上所占用面积小于一阈值的颜色 和 / 或透明度。
进一步地， 识别本地的用户界面当前使用的组件布局， 根据所述组件布局在云端 查找对应的一幅或多幅皮肤图片推荐到本地的步骤， 包括 ： 在本地通过识别所述用户界面 当前的组件布局得到布局模板并上报到云端， 所述布局模板用于承载通过可视化标识绘制 出的组件布局 ； 在云端根据所述上报的布局模板获取组件布局， 结合皮肤图片与皮肤的组 件布局的对应关系查找对应的一幅或多幅皮肤图片推荐到本地。
进一步地， 在本地针对一幅或多幅皮肤图片， 识别其中的可视化标识并依据所述 可视化标识将各皮肤组件放置在组件布局的相应位置的步骤， 包括 ： 针对每幅皮肤图片， 分 别识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组件布局的相应位 置从而生成预览并展现给用户供其选择。
进一步地， 在本地针对一幅或多幅皮肤图片， 识别其中的可视化标识并依据所述 可视化标识将各皮肤组件放置在组件布局的相应位置的步骤， 进一步包括 ： 针对一幅或多 幅皮肤图片中用户选中的皮肤图片， 识别其中的可视化标识并依据所述可视化标识将各皮 肤组件放置在组件布局的相应位置从而将所述皮肤图片加载到用户界面。
进一步地， 识别其中的可视化标识并依据所述可视化标识将各皮肤组件放置在组 件布局的相应位置的步骤， 包括 ： 所述可视化标识使用不同的颜色和 / 或不同的透明度来 区别不同的皮肤组件 ； 读取所述可视化标识的颜色和 / 或透明度获取所绘制的一皮肤组件 的位置， 依据所述颜色和 / 或透明度选择对应的皮肤组件放置在所述皮肤组件的位置上， 并使所述皮肤组件与其所在位置的形状和 / 或大小适应。
进一步地， 所述皮肤组件放置在组件布局的相应位置后覆盖所述皮肤图片的可视 化标识。
进一步地， 所述可视化标识还用于标示各皮肤组件的形状和 / 或大小。
进一步地， 所述皮肤组件， 包括 ： 菜单条、 工具栏、 地址栏、 工具箱、 状态栏、 滚动条、 标签位、 单选 / 复选框、 列表框和 / 或按钮。
与现有的方案相比， 本发明所获得的技术效果 ：
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， 将找到的皮肤组件放置在所述皮肤组件的位置上， 并使所述皮肤组件与 其所在位置的形状和 / 或大小适应 ；
这样所述皮肤组件放置后正好就覆盖了所述皮肤图片的可视化标识， 保证图片的 完整、 没有被破坏。
上述说明示出并描述了本发明的若干优选实施例， 但如前所述， 应当理解本发明 并非局限于本文所披露的形式， 不应看作是对其他实施例的排除， 而可用于各种其他组合、 修改和环境， 并能够在本文所述发明构想范围内， 通过上述教导或相关领域的技术或知识 进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围， 则都应在本发 明所附权利要求的保护范围内。