发明内容
有鉴于此,本发明所要解决的技术问题是提供了一种自定义用户界面的皮肤的方法,可视化标识直接由图片携带,以此替代数据文件,极大地方便了使用,而标注绘制的操作本身相对编写数据文件更为简单,显示效果更为直观。
为了解决上述技术问题,本发明公开了一种自定义用户界面的皮肤的方法,包括:在皮肤图片上根据用户指示通过用于标识皮肤组件位置的可视化标识绘制皮肤的组件布局;识别所述皮肤图片的可视化标识,并根据所述可视化标识将各皮肤组件放置在所述组件布局的相应位置。
进一步地,所述可视化标识,包括:所述皮肤图片上所占用面积小于一阈值的颜色和/或透明度;所述可视化标识使用不同的颜色和/或不同的透明度来区别不同的皮肤组件。
进一步地,识别所述皮肤图片的可视化标识,并根据所述可视化标识将各皮肤组件放置在所述组件布局的相应位置的步骤,包括:识别所述皮肤图片的可视化标识,并根据所述可视化标识将各皮肤组件的仿真图片放置在所述组件布局的相应位置从而生成一效果图,所述效果图用于模拟加载了所述皮肤后的用户界面。
进一步地,所述皮肤组件的仿真图片放置后覆盖所述皮肤图片的可视化标识。
进一步地,所述可视化标识使用不同的颜色和/或不同的透明度来区别不同的皮肤组件的仿真图片;读取所述可视化标识的颜色和/或透明度获取所绘制的一皮肤组件的位置,依据所述颜色和/或透明度选择对应的皮肤组件的仿真图片放置在所述皮肤组件的位置上,并使所述皮肤组件的仿真图片与其所在位置的形状和/或大小适应。
进一步地,识别所述皮肤图片的可视化标识,并根据所述可视化标识将各皮肤组件放置在所述组件布局的相应位置的步骤,包括:识别所述皮肤图片的可视化标识,并根据所述可视化标识将各皮肤组件放置在所述组件布局的相应位置从而生成用户界面,所述用户界面为加载所述皮肤图片后的用户界面。
进一步地,所述皮肤组件放置后覆盖所述皮肤图片的可视化标识。
进一步地,所述可视化标识使用不同的颜色和/或不同的透明度来区别不同的皮肤组件;读取所述可视化标识的颜色和/或透明度获取所绘制的一皮肤组件的位置,依据所述颜色和/或透明度选择对应的皮肤组件放置在所述皮肤组件的位置上,并使所述皮肤组件与其所在位置的形状和/或大小适应。
进一步地,所述组件布局,包括:所述用户界面上各皮肤组件的摆放位置、以及各皮肤组件的形状和/或大小。
进一步地,所述皮肤图片为一背景透明的图片。
进一步地,在皮肤图片上根据用户指示通过用于标识皮肤组件位置的可视化标识绘制皮肤的组件布局的步骤,包括:在所述背景透明的图片上通过所述可视化标识绘制皮肤的组件布局,从而得到一布局模板,所述布局模板为背景透明、组件布局用可视化标识标出的布局框架图片。
进一步地,识别所述皮肤图片的可视化标识,并根据所述可视化标识将各皮肤组件放置在所述组件布局的相应位置的步骤,包括:依据所述布局框架图片上的可视化标识将各皮肤组件放置在所述组件布局的相应位置,加载适配的存在画面设计的皮肤图片从而将皮肤加载到用户界面。
与现有的方案相比,本发明所获得的技术效果:
1)可视化标识直接由图片携带,以此替代数据文件,极大地方便了使用,而可视化标识作为一种信息可读性极强,对于用户容易识别,对于电脑程序识别也是非常方便的。
2)标注绘制的操作本身相对编写数据文件更为简单,显示效果更为直观,用户可以轻松了解组件布局在皮肤上的反映。
3)应用可视化标识直接在图片上进行标明,使得绘制组件布局变得简单直观,因此便于专业设计,有利于普通用户的自定义设计。
4)所以仿真图片或者皮肤组件放置后会覆盖所述皮肤图片的可视化标识,保证皮肤图片不会被破坏。
5)通过可视化标识生成布局模板的方式可以通过非常形象直观的手段对组件布局进行标准化加工,使用标准化的模板来对皮肤图片生成皮肤非常容易操作,而且实现起来简便高效。
具体实施方式
以下将配合图式及实施例来详细说明本发明的实施方式,藉此对本发明如何应用技术手段来解决技术问题并达成技术功效的实现过程能充分理解并据以实施。
本发明的核心构思在于:使用皮肤图片携带可视化标识,以此替代数据文件。
所述可视化标识,包括:所述皮肤图片上所占用面积小于一阈值的颜色和/或透明度,优选采用皮肤图片上没有出现的颜色和/或透明度,即阈值取0。可视化标识更直观简单,对于电脑程序和普通用户来说都是可读的。
具体来说,在皮肤图片上根据用户指示通过用于标识皮肤组件位置的可视化标识绘制皮肤的组件布局;识别所述皮肤图片的可视化标识,并根据所述可视化标识将各皮肤组件放置在所述组件布局的相应位置。所述组件布局,包括:所述用户界面上各皮肤组件的摆放位置、以及各皮肤组件的形状和/或大小。所述皮肤组件,包括:菜单条、工具栏、地址栏、工具箱、状态栏、滚动条、标签位、单选/复选框、列表框和/或按钮等。
以下以一实施例对本发明的整体方案进行说明。如图1所示,执行如下操作:
步骤10,在皮肤图片上根据用户指示通过用于标识皮肤组件位置的可视化标识绘制皮肤的组件布局;所述可视化标识还用于标示各皮肤组件的形状和/或大小;
所述组件布局一般来说,主要包括:各皮肤组件的位置、以及各皮肤组件的形状和/或大小;即三种情况:1)各皮肤组件的位置、形状和大小;2)各皮肤组件的位置以及形状;3)各皮肤组件的位置以及大小;
所述可视化标识,包括:所述皮肤图片上所占面积小于一阈值的颜色和/或透明度;在实际使用中,可以使用色块、色条或者带有颜色的线段、带有透明度的框块、条状、线段等来标出各皮肤组件的位置、形状、大小;
这里需要说明的是,可视化标识是使用可视化手段进行标注的标识。1)在极端情况下,可以肉眼不可读而电脑程序可读(用肉眼不可识别的色差或者透明度差别标识,或者肉眼不可识别的尺寸标出),但是一般是用作特殊用途,但是标注绘制这个操作本身相对编写数据文件是非常简单直观;2)但是一般来说它对于肉眼和电脑程序都可读,这样不仅标注绘制这个操作本身相对编写数据文件是非常简单直观,显示效果上就更为直观了,用户可以轻松了解组件布局在皮肤上的反映。
用户可以指普通用户,也可以是专业设计人员,而因为应用可视化标识直接在图片上进行标明,使得绘制组件布局变得简单直观,因此便于专业设计,有利于普通用户的自定义设计。
步骤20,识别所述皮肤图片的可视化标识,并根据所述可视化标识将各皮肤组件放置在所述组件布局的相应位置;
皮肤图片的样子就是带有颜色、透明度标出组件位置大小形状的图片,整个图片看起来像打着很多“补丁”的图片;这些“补丁”就是皮肤组件的位置,“补丁”的尺寸和形状就是皮肤组件适应的形状和大小;
这些可视化标识直接由图片携带,直观方便,而可视化标识作为一种信息可读性极强,对于用户容易识别,对于电脑程序识别也是非常方便的。
以下再以一实施例对本发明的整体方案另一种应用进行说明。原始皮肤图片可以是具有画面设计的图片,也可以是背景透明的图片。
当皮肤图片是背景透明的图片时,步骤10中通过可视化标识绘制后皮肤图片就成为了所述布局模板为背景透明、组件布局用可视化标识标出的布局框架图片;布局框架图片看起来像打着很多“补丁”的透明图片;这些“补丁”就是皮肤组件的位置,“补丁”的尺寸和形状就是皮肤组件适应的形状和大小。
步骤20中依据所述布局框架图片上的可视化标识将各皮肤组件放置在所述组件布局的相应位置,就可以搭出用户界面的架子,然后再将任意与布局框架图片适配的原始未处理的皮肤图片加载到这个搭好的架子里就可以将皮肤加载到用户界面了。
所述布局框架图片适配皮肤图片的意义在于,很多皮肤图片上都有非常美观的画面设计,所以组件布局应该尽量回避破坏这些画面的位置,例如皮肤图片上画有一个人物形象,那组件布局应该尽量不要占用人物形象的位置,否则会破坏皮肤图片的整体美感;因此,布局框架图片上标出的组件布局应该适配对应的皮肤图片的构图设计。
通过上述可视化标识生成布局模板的方式可以通过非常形象直观的手段对组件布局进行标准化加工,使用标准化的模板来对皮肤图片生成皮肤非常容易操作,而且实现起来简便高效。
步骤20具体来说,可以包括以下两个层面的操作:
1)预览效果图
识别所述皮肤图片的可视化标识,并根据所述可视化标识将各皮肤组件的仿真图片放置在所述组件布局的相应位置从而生成一效果图,所述效果图用于模拟加载了所述皮肤后的用户界面;
皮肤组件的仿真图片是模拟皮肤组件的样子创建的图片,将这些图片放置到可视化标识标出的组建的位置,模拟出加载所述皮肤后的用户界面的效果图,让用户直观地浏览;
因为可视化标识所绘制的皮肤组件的大小形状与所述皮肤组件的仿真图片相适应,所以仿真图片放置后覆盖所述皮肤图片的可视化标识,保证皮肤图片不会被破坏。
2)直接加载皮肤到用户界面
接收用户对效果图的确认后,识别所述皮肤图片的可视化标识,并根据所述可视化标识将各皮肤组件放置在所述组件布局的相应位置从而生成用户界面,所述用户界面为加载所述皮肤图片后的用户界面;
因为可视化标识所绘制的皮肤组件的大小形状与所述皮肤组件的相适应,所以皮肤组件放置后覆盖所述皮肤图片的可视化标识,保证皮肤图片不会被破坏。
以上需要说明的是,以上两个层面的处理可以都执行,先生成效果图供用户预览,然后根据用户确认在加载皮肤到用户界面。当然,也可以不生成效果图,直接加载皮肤到用户界面。另外,也可以生成效果图预览,但是最终不加载皮肤到用户界面。
以下再以一实施例对上述“根据所述可视化标识将各皮肤组件放置在所述组件布局的相应位置”进行说明。如图2所示,执行如下操作:
步骤400,读取所述可视化标识的颜色和/或透明度获取所绘制的一皮肤组件的位置;
预先保存所述颜色和/或透明度,电脑程序读取到所述颜色和/或透明度就可以认为碰到了皮肤组件的摆放设置。
步骤401,依据所述颜色和/或透明度查找对应的皮肤组件;
不同的皮肤组件使用不同的颜色和/或不同的透明度进行区别;电脑程序内保存有不同的颜色和/或不同的透明度与皮肤组件的对应关系,依据这个对应关系来查找皮肤组件;
当然,在最初使用可视化标识进行绘制皮肤组件布局时,用户也要按照预想放置的皮肤组件布局来使用相应的颜色和/或透明度来绘制。
步骤402,将找到的皮肤组件放置在所述皮肤组件的位置上,并使所述皮肤组件与其所在位置的形状和/或大小适应;
这样所述皮肤组件放置后正好就覆盖了所述皮肤图片的可视化标识,保证图片的完整、没有被破坏。
以下再以一实施例对上述“预览效果图”进行说明,可以参考上述流程,区别在于:不同的皮肤组件的仿真图片可以使用不同的颜色和/或不同的透明度进行区别;查找放置对象变为仿真图片,其他操作相同,不再赘述。
上述说明示出并描述了本发明的若干优选实施例,但如前所述,应当理解本发明并非局限于本文所披露的形式,不应看作是对其他实施例的排除,而可用于各种其他组合、修改和环境,并能够在本文所述发明构想范围内,通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围,则都应在本发明所附权利要求的保护范围内。