CN102419706A - 一种编辑用户界面的皮肤的方法 - Google Patents

一种编辑用户界面的皮肤的方法 Download PDF

Info

Publication number
CN102419706A
CN102419706A CN2011103050066A CN201110305006A CN102419706A CN 102419706 A CN102419706 A CN 102419706A CN 2011103050066 A CN2011103050066 A CN 2011103050066A CN 201110305006 A CN201110305006 A CN 201110305006A CN 102419706 A CN102419706 A CN 102419706A
Authority
CN
China
Prior art keywords
skin
assembly
picture
layout
visual sign
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN2011103050066A
Other languages
English (en)
Other versions
CN102419706B (zh
Inventor
万立新
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Qizhi Business Consulting Co ltd
Beijing Qihoo Technology Co Ltd
Original Assignee
Qizhi Software Beijing Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Qizhi Software Beijing Co Ltd filed Critical Qizhi Software Beijing Co Ltd
Priority to CN201110305006.6A priority Critical patent/CN102419706B/zh
Publication of CN102419706A publication Critical patent/CN102419706A/zh
Application granted granted Critical
Publication of CN102419706B publication Critical patent/CN102419706B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Landscapes

  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种编辑用户界面的皮肤的方法,包括:识别本地的用户界面当前皮肤的组件布局,所述组件布局用于标示各皮肤组件的位置;根据当前皮肤的组件布局在一皮肤图片上绘制所述可视化标识,并通过调整所述皮肤图片的可视化标识来调整皮肤组件位置从而获得新的组件布局;识别所述皮肤图片的可视化标识并据此将各皮肤组件放置在新的组件布局的相应位置。其组件布局使用可视化标识进行绘制,可视化标识使得组件布局具有可移植性、并且非常易于编辑重塑,这些操作实现起来简单直观。

Description

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

Claims (10)

1.一种编辑用户界面的皮肤的方法,其特征在于,包括:
识别本地的用户界面当前皮肤的组件布局,所述组件布局用于标示各皮肤组件的位置;
根据当前皮肤的组件布局在一皮肤图片上绘制所述可视化标识,并通过调整所述皮肤图片的可视化标识来调整皮肤组件位置从而获得新的组件布局;
识别所述皮肤图片的可视化标识并据此将各皮肤组件放置在新的组件布局的相应位置。
2.如权利要求1所述的方法,其特征在于,
所述可视化标识,包括:所述皮肤图片上所占用面积小于一阈值的颜色和/或透明度。
3.如权利要求1所述的方法,其特征在于,
所述皮肤组件放置在组件布局的相应位置后覆盖所述皮肤图片的可视化标识。
4.如权利要求1所述的方法,其特征在于,通过调整所述皮肤图片的可视化标识来调整皮肤组件位置从而获得新的组件布局的步骤,进一步包括:
所述可视化标识还用于标示各皮肤组件的形状和/或大小,从而通过调整可视化标识来调整皮肤组件的形状和/或大小从而获得新的组件布局。
5.如权利要求1所述的方法,其特征在于,通过调整所述皮肤图片的可视化标识来调整皮肤组件位置从而获得新的组件布局的步骤,进一步包括:
还通过对所述可视化标识的编辑来新增/删除/修改皮肤组件从而获得新的组件布局。
6.如权利要求1所述的方法,其特征在于,
所述皮肤图片,包括:当前皮肤的皮肤图片或不同于当前皮肤的皮肤图片的新皮肤图片。
7.如权利要求1所述的方法,其特征在于,识别所述皮肤图片的可视化标识并据此将各皮肤组件放置在新的组件布局的相应位置的步骤,进一步包括:
所述可视化标识使用不同的颜色和/或不同的透明度来区别不同的皮肤组件;
读取所述可视化标识的颜色和/或透明度获取所绘制的一皮肤组件的位置,依据所述颜色和/或透明度选择对应的皮肤组件放置在所述皮肤组件的位置上,并使所述皮肤组件与其所在位置的形状和/或大小适应。
8.如权利要求1所述的方法,其特征在于,
所述当前皮肤的组件布局使用布局模板作为载体,所述布局模板携带有通过所述可视化标识所绘制出的皮肤组件位置;或者,
所述当前皮肤的组件布局使用数据文件作为载体,所述数据文件携带有通过坐标代码编写出的皮肤组件位置。
9.如权利要求8所述的方法,其特征在于,
所述布局模板为背景透明、所述组件布局使用可视化标识标出的布局框架图片。
10.如权利要求9所述的方法,其特征在于,根据当前皮肤的组件布局在一皮肤图片上绘制所述可视化标识的步骤,进一步包括:
将所述皮肤图片和所述布局框架图片合并,得到经过可视化标识绘制的皮肤图片。
CN201110305006.6A 2011-09-29 2011-09-29 一种编辑用户界面的皮肤的方法 Active CN102419706B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201110305006.6A CN102419706B (zh) 2011-09-29 2011-09-29 一种编辑用户界面的皮肤的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201110305006.6A CN102419706B (zh) 2011-09-29 2011-09-29 一种编辑用户界面的皮肤的方法

Publications (2)

Publication Number Publication Date
CN102419706A true CN102419706A (zh) 2012-04-18
CN102419706B CN102419706B (zh) 2014-08-13

Family

ID=45944128

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201110305006.6A Active CN102419706B (zh) 2011-09-29 2011-09-29 一种编辑用户界面的皮肤的方法

Country Status (1)

Country Link
CN (1) CN102419706B (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103337086A (zh) * 2013-06-17 2013-10-02 北京金山安全软件有限公司 用于移动终端的图片编辑方法、装置和移动终端
CN108874495A (zh) * 2018-06-25 2018-11-23 北京金山安全软件有限公司 一种主题资源转换方法、装置及电子设备

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040250213A1 (en) * 2003-06-03 2004-12-09 International Business Machines Corporation System and method for dynamic uploading of user interface generation logic
WO2008043580A2 (en) * 2006-10-13 2008-04-17 Sony Ericsson Mobile Communications Ab Method for generating a graphical user interface
CN101382887A (zh) * 2008-09-19 2009-03-11 金蝶软件(中国)有限公司 一种调整界面布局的方法及装置
CN101656867A (zh) * 2008-08-21 2010-02-24 上海贝尔阿尔卡特股份有限公司 一种iptv中映射epg组件的方法和装置
CN102163340A (zh) * 2011-04-18 2011-08-24 宁波万里电子科技有限公司 计算机系统中实现三维动态几何图形数据信息标注的方法

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040250213A1 (en) * 2003-06-03 2004-12-09 International Business Machines Corporation System and method for dynamic uploading of user interface generation logic
WO2008043580A2 (en) * 2006-10-13 2008-04-17 Sony Ericsson Mobile Communications Ab Method for generating a graphical user interface
CN101656867A (zh) * 2008-08-21 2010-02-24 上海贝尔阿尔卡特股份有限公司 一种iptv中映射epg组件的方法和装置
CN101382887A (zh) * 2008-09-19 2009-03-11 金蝶软件(中国)有限公司 一种调整界面布局的方法及装置
CN102163340A (zh) * 2011-04-18 2011-08-24 宁波万里电子科技有限公司 计算机系统中实现三维动态几何图形数据信息标注的方法

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103337086A (zh) * 2013-06-17 2013-10-02 北京金山安全软件有限公司 用于移动终端的图片编辑方法、装置和移动终端
CN103337086B (zh) * 2013-06-17 2015-11-25 北京金山安全软件有限公司 用于移动终端的图片编辑方法和装置
CN108874495A (zh) * 2018-06-25 2018-11-23 北京金山安全软件有限公司 一种主题资源转换方法、装置及电子设备
CN108874495B (zh) * 2018-06-25 2022-02-11 北京金山安全软件有限公司 一种主题资源转换方法、装置及电子设备

Also Published As

Publication number Publication date
CN102419706B (zh) 2014-08-13

Similar Documents

Publication Publication Date Title
US8682083B2 (en) Method and system for webpage regression testing
CN104731584B (zh) 一种开放式数控系统人机界面可定制的组态设计方法
JP6250901B2 (ja) Cncとロボット制御装置が通信ネットワークを介して接続されたロボットシステム
WO2018049869A1 (zh) 展示页面扩展点的装置及方法
EP3220249A1 (en) Method, device and terminal for implementing regional screen capture
CN102446097B (zh) 一种更换用户界面的皮肤的方法
CN110598263A (zh) 用于规范化管理元器件封装的方法
US20150074519A1 (en) Method and apparatus of controlling page element
CN102360293B (zh) 一种更换用户界面的皮肤的方法
CN102419706B (zh) 一种编辑用户界面的皮肤的方法
CN102436374B (zh) 一种自定义用户界面的皮肤的方法
AU2019229348A1 (en) Pre-filtering for visual object searching of documents
CN108053460B (zh) 一种电力系统图的绘制方法及其装置
CN104951749A (zh) 图像内容识别装置和方法
CN111258569A (zh) 网页组件编辑方法、装置、设备和计算机可读存储介质
CN105278953A (zh) 圆形屏幕的界面显示方法和装置
CN103144145B (zh) Sim卡的剪卡方法
CN112859748B (zh) G代码加工文件的生成方法、生成装置和处理器
CN103294330B (zh) 一种在开放平台桌面上添加本地应用的方法和系统
CN114519213A (zh) 使用机器学习从标记中实现计算机辅助绘制图自动化
CN103577055B (zh) 图形用户界面的定位显示系统及方法
CN205721819U (zh) 基于nfc感应实时交互式数字化三维标识
CN102508653A (zh) 一种用户界面的拉伸控制的方法
CN103984580A (zh) Dbp配置文件以及监控装置配置方法、监控装置
CN111968729A (zh) 一种医学信息标注方法、系统、智能终端及存储介质

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
C14 Grant of patent or utility model
GR01 Patent grant
CP01 Change in the name or title of a patent holder
CP01 Change in the name or title of a patent holder

Address after: 100016 East unit, 4th floor, Zhaowei building, 14 Jiuxianqiao Road, Chaoyang District, Beijing

Patentee after: Beijing Qizhi Business Consulting Co.,Ltd.

Address before: 100016 East unit, 4th floor, Zhaowei building, 14 Jiuxianqiao Road, Chaoyang District, Beijing

Patentee before: Qizhi software (Beijing) Co.,Ltd.

TR01 Transfer of patent right
TR01 Transfer of patent right

Effective date of registration: 20220207

Address after: Room 801, 8th floor, No. 104, 1st to 19th floors, building 2, yard 6, Jiuxianqiao Road, Chaoyang District, Beijing 100020

Patentee after: BEIJING QIHOO TECHNOLOGY Co.,Ltd.

Address before: 100016 East unit, 4th floor, Zhaowei building, 14 Jiuxianqiao Road, Chaoyang District, Beijing

Patentee before: Beijing Qizhi Business Consulting Co.,Ltd.