CN102436374A - Method for customizing skin of user interface - Google Patents

Abstract

Translated fromChinese

本发明公开了一种自定义用户界面的皮肤的方法，包括：在皮肤图片上根据用户指示通过用于标识皮肤组件位置的可视化标识绘制皮肤的组件布局；识别所述皮肤图片的可视化标识，并根据所述可视化标识将各皮肤组件放置在组件布局的相应位置。本发明的可视化标识直接由图片携带，以此替代数据文件，极大地方便了使用，而标注绘制的操作本身相对编写数据文件更为简单，显示效果更为直观。

The present invention discloses a method for customizing the skin of a user interface, comprising: drawing the component layout of the skin on a skin picture according to a user instruction through a visual identifier for identifying the position of the skin component; identifying the visual identifier of the skin picture, and placing each skin component at a corresponding position of the component layout according to the visual identifier. The visual identifier of the present invention is directly carried by the picture, replacing the data file, which greatly facilitates the use, and the operation of marking and drawing itself is simpler than writing a data file, and the display effect is more intuitive.

Description

A kind of method of the skin that Customizes User Interface

Technical field

The invention belongs to computer realm, specifically, relate to a kind of method of the skin that Customizes User Interface.

Background technology

Nowadays, various client softwares are installed on user terminal, every kind of client software all has user interface separately, accomplishes the mutual of client software and user through user interface, we can say that user interface is exactly the door of client software.

Software vendors all can be user-interface design skin usually, the design of skin consider attractive in appearance in, also to take into account the reasonable use that skin assembly on the user interface is put layout.The deviser often at first can design the skin picture that is fit to user interface when design skin; Write a data files to skin picture more afterwards; Can be recorded in the parameter of all skin assemblies are put on the skin picture position coordinates and size, shape in this data files with the form of code or data form, this data files and skin picture can be thought and constituted the most basic skin.This data files is difficult to understand for domestic consumer; But computer program can be discerned; In the time of will affiliated skin being loaded into user interface; Know the skin assembly layout situation on the skin picture by the computer program read data files, on skin picture, put then, finally just formed user interface.

Can see that being programmed in the skin design of data file is absolute core operation, but its complexity of writing well imagines that and the data of being write are very loaded down with trivial details, cause occurring easily mistake, for skin design has been brought very big difficulty.

Consider from another point of view, if the user hopes to come the own skin that designs through self-defining mode, data file write this too professional operation, cause the User Defined pattern can not realize basically.

Therefore a kind of mode need be provided; Can make skin design become simple efficient; Especially make this specialty operation of writing of data file become friendly relatively, directly perceived; For anyone, be that domestic consumer or professional designer do not need professional technique just can carry out skin design, make user-defined skin design become feasible.

Summary of the invention

In view of this; Technical matters to be solved by this invention has provided a kind of method of the skin that Customizes User Interface; Visual sign is directly carried by picture, with this alternate data file, is very easy to use; And that data file is write in the operation itself that mark is drawn relatively is more simple, and display effect is more directly perceived.

In order to solve the problems of the technologies described above, the invention discloses a kind of method of the skin that Customizes User Interface, comprising: the assembly layout of on skin picture, drawing skin through the visual sign that is used to identify the skin module position according to user indication; Discern the visual sign of said skin picture, and each skin assembly is placed on the relevant position of said assembly layout according to said visual sign.

Further, said visual sign comprises: shared area is less than the color and/or the transparency of a threshold value on the said skin picture; Said visual sign uses various colors and/or different transparencies to distinguish different skin assemblies.

Further; Discern the visual sign of said skin picture; And according to said visual sign each skin assembly is placed on the step of the relevant position of said assembly layout; Comprise: discern the visual sign of said skin picture, thereby and according to said visual sign the relevant position that the emulation picture of each skin assembly is placed on said assembly layout is generated a design sketch, the user interface behind said design sketch the has been used for simulation loading said skin.

Further, the emulation picture of said skin assembly is placed the visual sign that the back covers said skin picture.

Further, said visual sign uses various colors and/or different transparencies to distinguish the emulation picture of different skin assemblies; Read the color of said visual sign and/or the position that transparency is obtained a skin assembly of being drawn; Select the emulation picture of corresponding skin assembly to be placed on the position of said skin assembly according to said color and/or transparency, and the emulation picture of said skin assembly and the shape and/or the size of its position are adapted to.

Further; Discern the visual sign of said skin picture; And according to said visual sign each skin assembly is placed on the step of the relevant position of said assembly layout; Comprise: discern the visual sign of said skin picture, thereby and according to said visual sign the relevant position that each skin assembly is placed on said assembly layout is generated user interface, said user interface is for loading the user interface behind the said skin picture.

Further, said skin assembly is placed the visual sign that the back covers said skin picture.

Further, said visual sign uses various colors and/or different transparencies to distinguish different skin assemblies; Read the color of said visual sign and/or the position that transparency is obtained a skin assembly of being drawn; Select corresponding skin assembly to be placed on the position of said skin assembly according to said color and/or transparency, and the shape of said skin assembly and its position and/or size are adapted to.

Further, said assembly layout comprises: the shape and/or the size of the putting position of each skin assembly and each skin assembly on the said user interface.

Further, said skin picture is the picture of a background transparent.

Further; The step of on skin picture, drawing the assembly layout of skin through the visual sign that is used to identify the skin module position according to user indication; Comprise: the assembly layout of on the picture of said background transparent, drawing skin through said visual sign; Thereby obtain a layout templates, said layout templates is the layout framework picture that background transparent, assembly layout mark with visual sign.

Further; Discern the visual sign of said skin picture; And according to said visual sign each skin assembly is placed on the step of the relevant position of said assembly layout; Comprise: according to the visual sign on the said layout framework picture each skin assembly is placed on the relevant position of said assembly layout, skin is loaded into user interface thereby load the adaptive skin picture that has the picture design.

Compare the technique effect that the present invention obtained with existing scheme:

1) visual sign is directly carried by picture, with this alternate data file, be very easy to use, and visual sign is extremely strong as a kind of information readability, and for user easier identification, identification also is very easily for computer program.

2) to write data file relatively more simple in the mark operation of drawing itself, and display effect is more directly perceived, and the user can easily understand the reflection of assembly layout on skin.

3) application visualizes sign is directly bright at the enterprising rower of picture, makes the render component layout simple, intuitive that becomes, and therefore is convenient to Specialty Design, helps the self-definition design of domestic consumer.

4) so can cover the visual sign of said skin picture after emulation picture or skin assembly are placed, guarantee that skin picture can not be destroyed.

5) can carry out standardization processing to assembly layout through very visual in image means through the mode of visual sign generation layout templates, use standardized template to come that skin picture is generated skin and be very easy to operation, and implement simple and effective.

Description of drawings

Fig. 1 is the method flow diagram of overall plan of the present invention;

Fig. 2 is the thin portion of a present invention method of operating process flow diagram.

Embodiment

Below will cooperate graphic and embodiment specifies embodiment of the present invention, by this to the present invention how the application technology means implementation procedure that solves technical matters and reach technological effect can make much of and implement according to this.

Core idea of the present invention is: use skin picture to carry visual sign, with this alternate data file.

Said visual sign comprises: shared area preferably adopts the color and/or the transparency that do not have appearance on the skin picture less than the color and/or the transparency of a threshold value on the said skin picture, and promptly threshold value gets 0.Visual sign is more directly perceived simple, all is readable for computer program and domestic consumer.

Specifically, on skin picture, draw the assembly layout of skin through the visual sign that is used to identify the skin module position according to user indication; Discern the visual sign of said skin picture, and each skin assembly is placed on the relevant position of said assembly layout according to said visual sign.Said assembly layout comprises: the shape and/or the size of the putting position of each skin assembly and each skin assembly on the said user interface.Said skin assembly comprises: menu bar, toolbar, address field, tool box, status bar, scroll bar, tag bits, Dan Xuan/check box, list box and/or button etc.

Below with an embodiment overall plan of the present invention is described.As shown in Figure 1, carry out operation as follows:

Step 10 is drawn the assembly layout of skin through the visual sign that is used to identify the skin module position according to user indication on skin picture; Said visual sign also is used to indicate the shape and/or the size of each skin assembly;

In general said assembly layout mainly comprises: the shape and/or the size of the position of each skin assembly and each skin assembly; I.e. three kinds of situation: 1) position of each skin assembly, shape and size; 2) position of each skin assembly and shape; 3) position of each skin assembly and size;

Said visual sign comprises: area occupied is less than the color and/or the transparency of a threshold value on the said skin picture; In actual use, can use color lump, vitta or have the line segment of color, frame piece, strip, the line segment that has a transparency waits position, shape, the size that marks each skin assembly;

Here need to prove the sign that visual sign is to use visual means to mark.1) under extreme case; Can naked eyes not readable and computer program is readable (with the naked eye unrecognizable aberration or transparency difference sign; Perhaps the unrecognizable size of naked eyes marks); But generally be as specific use, to write data file relatively be unusual simple, intuitive but mark is drawn this operation itself; But in general 2) it is all readable for naked eyes and computer program; So not only mark is drawn this operation itself to write data file relatively is unusual simple, intuitive; Just more directly perceived on the display effect, the user can easily understand the reflection of assembly layout on skin.

The user can refer to domestic consumer, also can be the professional designer, and because application visualizes sign is directly bright at the enterprising rower of picture, makes the render component layout simple, intuitive that becomes, and therefore is convenient to Specialty Design, helps the self-definition design of domestic consumer.

Step 20 is discerned the visual sign of said skin picture, and each skin assembly is placed on the relevant position of said assembly layout according to said visual sign;

The appearance of skin picture is exactly to have the picture that color, transparency mark the module position size shape, and whole picture looks like the picture of beating a lot " patch "; These " patches " are exactly the position of skin assembly, and the size and dimension of " patch " is exactly shape and the size that the skin assembly adapts to;

These visual signs are directly carried by picture, intuitive and convenient, and visual sign is extremely strong as a kind of information readability, for user easier identification, identification also is very easily for computer program.

Below with an embodiment another kind of application of overall plan of the present invention described again.Original skin picture can be the picture with picture design, also can be the picture of background transparent.

When skin picture was the picture of background transparent, just becoming said layout templates through visual sign drafting back skin picture in the step 10 was the layout framework picture that background transparent, assembly layout mark with visual sign; Layout framework picture looks like the transparent picture of beating a lot " patch "; These " patches " are exactly the position of skin assembly, and the size and dimension of " patch " is exactly shape and the size that the skin assembly adapts to.

Visual sign in the step 20 on the said layout framework picture of foundation is placed on each skin assembly the relevant position of said assembly layout; Just can take out the shelf of user interface, and then will be arbitrarily and the adaptive original untreated skin picture of layout framework picture be loaded in this shelf of putting up and just can skin be loaded into user interface.

The meaning of the adaptive skin picture of said layout framework picture is; Picture design very attractive in appearance is all arranged on a lot of skin pictures; So assembly layout should be avoided the position of destroying these pictures as far as possible; For example be decorated with a figure image on the skin picture, that assembly layout should try not to take figural position, otherwise can destroy the overall aesthetic of skin picture; Therefore, the assembly layout that marks on the layout framework picture should adaptive correspondence the Composition Design of skin picture.

The mode that generates layout templates through above-mentioned visual sign can be carried out standardization processing to assembly layout through very visual in image means, uses standardized template to come that skin picture is generated skin and is very easy to operation, and implement simple and effective.

Step 20 can comprise the operation of following two aspects specifically:

1) preview design sketch

Discern the visual sign of said skin picture; And according to said visual sign thereby the relevant position that the emulation picture of each skin assembly is placed on said assembly layout is generated a design sketch, the user interface behind said design sketch the has been used for simulation loading said skin;

The emulation picture of skin assembly is the picture that the appearance of simulated skin assembly is created, and these pictures are placed into the position of the establishment that visual sign marks, and simulates the design sketch that loads the user interface behind the said skin, lets the user browse intuitively;

Because the size shape of the skin assembly that visual sign is drawn and the emulation picture of said skin assembly adapt,, guarantee that skin picture can not be destroyed so the emulation picture is placed the visual sign that the back covers said skin picture.

2) directly load skin to user interface

After receiving the affirmation of user to design sketch; Discern the visual sign of said skin picture; And according to said visual sign thereby the relevant position that each skin assembly is placed on said assembly layout is generated user interface, said user interface is for loading the user interface behind the said skin picture;

Because size shape of skin assembly that visual sign is drawn and adapting of said skin assembly so the skin assembly is placed the visual sign that the back covers said skin picture, guarantee that skin picture can not be destroyed.

More than need to prove, more than the processing of two aspects can all carry out, Mr. becomes design sketch to supply user's preview, confirms loading skin to user interface according to the user then.Certainly, also can not generate design sketch, directly load skin to user interface.In addition, also can generate the design sketch preview, but finally not load skin to user interface.

Below with an embodiment above-mentioned " each skin assembly being placed on the relevant position of said assembly layout according to said visual sign " described again.As shown in Figure 2, carry out operation as follows:

Step 400 reads the color of said visual sign and/or the position that transparency is obtained a skin assembly of being drawn;

Preserve said color and/or transparency in advance, computer program reads said color and/or transparency just can think the setting of putting of having run into the skin assembly.

Step 401 is searched corresponding skin assembly according to said color and/or transparency;

Different skin assemblies uses various colors and/or different transparencies to distinguish; Preserve various colors and/or different transparency and the corresponding relation of skin assembly in the computer program, search the skin assembly according to this corresponding relation;

Certainly, when the visual sign of initial use was drawn the skin assembly layout, the user also will use corresponding color and/or transparency to draw according to the skin assembly layout that anticipation is placed.

Step 402 is placed on the skin assembly that finds on the position of said skin assembly, and the shape of said skin assembly and its position and/or size are adapted to;

Just in time just covered the visual sign of said skin picture after said like this skin assembly is placed, guarantee picture complete, be not destroyed.

Below with an embodiment above-mentioned " preview design sketch " described again, can be with reference to above-mentioned flow process, difference is: the emulation picture of different skin assemblies can use various colors and/or different transparencies to distinguish; Search placing objects and become the emulation picture, other operations are identical, repeat no more.

Above-mentioned explanation illustrates and has described some preferred embodiments of the present invention; But as previously mentioned; Be to be understood that the present invention is not limited to the form that this paper discloses, should do not regard eliminating as, and can be used for various other combinations, modification and environment other embodiment; And can in invention contemplated scope described herein, change through the technology or the knowledge of above-mentioned instruction or association area.And change that those skilled in the art carried out and variation do not break away from the spirit and scope of the present invention, then all should be in the protection domain of accompanying claims of the present invention.

Claims (12)

Translated fromChinese

1.一种自定义用户界面的皮肤的方法，其特征在于，包括：1. A method for customizing the skin of the user interface, comprising:在皮肤图片上根据用户指示通过用于标识皮肤组件位置的可视化标识绘制皮肤的组件布局；Draw the component layout of the skin on the skin picture according to the user's instructions through the visual identification used to identify the position of the skin components;识别所述皮肤图片的可视化标识，并根据所述可视化标识将各皮肤组件放置在所述组件布局的相应位置。Identifying the visual identification of the skin picture, and placing each skin component at a corresponding position of the component layout according to the visual identification.2.如权利要求1所述的方法，其特征在于，2. The method of claim 1, wherein所述可视化标识，包括：所述皮肤图片上所占用面积小于一阈值的颜色和/或透明度；The visual identification includes: the color and/or transparency of the area occupied by the skin picture is smaller than a threshold;所述可视化标识使用不同的颜色和/或不同的透明度来区别不同的皮肤组件。The visual identification uses different colors and/or different transparency to distinguish different skin components.3.如权利要求1所述的方法，其特征在于，识别所述皮肤图片的可视化标识，并根据所述可视化标识将各皮肤组件放置在所述组件布局的相应位置的步骤，进一步包括：3. The method according to claim 1, wherein the step of identifying the visual identification of the skin picture, and placing each skin component at the corresponding position of the component layout according to the visual identification further comprises:识别所述皮肤图片的可视化标识，并根据所述可视化标识将各皮肤组件的仿真图片放置在所述组件布局的相应位置从而生成一效果图，所述效果图用于模拟加载了所述皮肤后的用户界面。Recognize the visual identification of the skin picture, and place the simulation pictures of each skin component at the corresponding position of the component layout according to the visual identification to generate an effect diagram, which is used to simulate the loading of the skin user interface.4.如权利要求3所述的方法，其特征在于，4. The method of claim 3, wherein,所述皮肤组件的仿真图片放置在组件布局的相应位置后覆盖所述皮肤图片的可视化标识。After the simulation picture of the skin component is placed at the corresponding position of the component layout, it covers the visual identification of the skin picture.5.如权利要求3所述的方法，其特征在于，5. The method of claim 3, wherein,所述可视化标识使用不同的颜色和/或不同的透明度来区别不同的皮肤组件的仿真图片；The visual identification uses different colors and/or different transparency to distinguish different simulation pictures of skin components;读取所述可视化标识的颜色和/或透明度获取所绘制的一皮肤组件的位置，依据所述颜色和/或透明度选择对应的皮肤组件的仿真图片放置在所述皮肤组件的位置上，并使所述皮肤组件的仿真图片与其所在位置的形状和/或大小适应。Read the color and/or transparency of the visual identification to obtain the position of a drawn skin component, select the simulation picture of the corresponding skin component according to the color and/or transparency and place it on the position of the skin component, and make The simulated image of the skin component adapts to the shape and/or size of its location.6.如权利要求1所述的方法，其特征在于，识别所述皮肤图片的可视化标识，并根据所述可视化标识将各皮肤组件放置在所述组件布局的相应位置的步骤，进一步包括：6. The method according to claim 1, wherein the step of identifying the visual identification of the skin picture, and placing each skin component in the corresponding position of the component layout according to the visual identification further comprises:识别所述皮肤图片的可视化标识，并根据所述可视化标识将各皮肤组件放置在所述组件布局的相应位置从而生成用户界面，所述用户界面为加载所述皮肤图片后的用户界面。Identifying the visual identification of the skin picture, and placing each skin component at a corresponding position of the component layout according to the visual identification to generate a user interface, where the user interface is a user interface after loading the skin picture.7.如权利要求6所述的方法，其特征在于，7. The method of claim 6, wherein,所述皮肤组件放置在组件布局的相应位置后覆盖所述皮肤图片的可视化标识。After the skin component is placed at the corresponding position of the component layout, the visual identification of the skin picture is overlaid.8.如权利要求6所述的方法，其特征在于，8. The method of claim 6, wherein,所述可视化标识使用不同的颜色和/或不同的透明度来区别不同的皮肤组件；The visual identification uses different colors and/or different transparency to distinguish different skin components;读取所述可视化标识的颜色和/或透明度获取所绘制的一皮肤组件的位置，依据所述颜色和/或透明度选择对应的皮肤组件放置在所述皮肤组件的位置上，并使所述皮肤组件与其所在位置的形状和/或大小适应。Read the color and/or transparency of the visual identification to obtain the position of a drawn skin component, select the corresponding skin component according to the color and/or transparency and place it on the position of the skin component, and make the skin Components adapt to the shape and/or size of their location.9.如权利要求1所述的方法，其特征在于，9. The method of claim 1, wherein,所述可视化标识还用于标示各皮肤组件的形状和/或大小。The visual markers are also used to indicate the shape and/or size of each skin component.10.如权利要求1所述的方法，其特征在于，10. The method of claim 1, wherein,所述皮肤图片为一背景透明的图片。The skin picture is a picture with a transparent background.11.如权利要求10所述的方法，其特征在于，在皮肤图片上根据用户指示通过用于标识皮肤组件位置的可视化标识绘制皮肤的组件布局的步骤，进一步包括：11. The method according to claim 10, wherein the step of drawing the component layout of the skin on the skin picture according to the user's instruction through the visual identification for identifying the position of the skin component further comprises:在所述背景透明的图片上通过所述可视化标识绘制皮肤的组件布局，从而得到一布局模板，所述布局模板为背景透明、组件布局用可视化标识标出的布局框架图片。The component layout of the skin is drawn on the picture with a transparent background through the visual mark to obtain a layout template, and the layout template is a layout frame picture with a transparent background and component layout marked with a visual mark.12.如权利要求11所述的方法，其特征在于，识别所述皮肤图片的可视化标识，并根据所述可视化标识将各皮肤组件放置在所述组件布局的相应位置的步骤，进一步包括：12. The method according to claim 11, wherein the step of identifying the visual identification of the skin picture, and placing each skin component at the corresponding position of the component layout according to the visual identification further comprises:依据所述布局框架图片上的可视化标识将各皮肤组件放置在所述组件布局的相应位置，加载适配的存在画面设计的皮肤图片从而将皮肤加载到用户界面。Place each skin component in the corresponding position of the component layout according to the visual identification on the layout frame picture, and load the adapted skin picture existing in the screen design so as to load the skin into the user interface.

Images