CN102929617A - Skin exchanging method for Web software UI (User Interface) - Google Patents
Skin exchanging method for Web software UI (User Interface) Download PDFInfo
- Publication number
- CN102929617A CN102929617A CN2012103970142A CN201210397014A CN102929617A CN 102929617 A CN102929617 A CN 102929617A CN 2012103970142 A CN2012103970142 A CN 2012103970142A CN 201210397014 A CN201210397014 A CN 201210397014A CN 102929617 A CN102929617 A CN 102929617A
- Authority
- CN
- China
- Prior art keywords
- interface
- picture
- skin
- color
- web software
- 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.)
- Pending
Links
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a skin exchanging method for a Web software UI (User Interface). The method comprises the following steps of: 1) manufacturing a pattern UI and cutting a map; 2) setting the transparency of the map and storing as a PNG (Portable Network Graphic) format type picture; 3) adopting an HTML (Hypertext Markup Language) container label to apply the PNG format type picture on the UI; and 4) according to a color selected by a user, dynamically applying the color to a CSS (Cascading Style Sheet) file by the UI; and generating skins with different color tones by the UI. By using mixed color tones of a background picture and a label bottom color, the skin exchanging effect of the Web software UI is realized. According to the method, one label only needs one background picture and the skin exchanging effect is finally realized by realizing the mixing of the background picture and the label bottom color through utilizing the transparency; and the difficulty of Web software development and maintenance is reduced by using the method.
Description
Technical field
The invention belongs to UI interface skin change method, the skin change method at especially a kind of Web software UI interface.
Background technology
Along with the development of Personalized society and the development of Web designing technique, now much all support to change the skin function based on the software of Web, allow the user to come the outward appearance of customized software according to own actual needs.Existing method for designing generally all is to realize by the needed CSS pattern of dynamic change file, and its principle is as follows:
When design Web interface, content and the layout of at first coming design interface to show by html tag, then realize display effect and the style at interface by the design of CSS pattern file, comprise height, the width of label, font size and color, background picture etc.Each colour of skin style that will provide for the Web interface, design one cover style sheet, i.e. CSS file, and place it in the different files.Simultaneously, for each colour of skin style, design corresponding background picture, also be put into below file corresponding to corresponding CSS file.When a certain target colour of skin of user selection, browser refreshes the corresponding CSS pattern file of loading and background picture again, and then realizes the replacing of colour of skin style.
Although the method can realize that exquisite Web interface changes the skin effect, but there is following distinct disadvantage in actual use in it: first, need to design and develop workload larger for each colour of skin effect design corresponding CSS pattern file and background picture, especially for the Web software of complexity; The second, when carrying out colour of skin replacing, need browser to re-start and refresh, load corresponding CSS pattern file and background picture, efficient is lower.And need corresponding design to preserve Web interface data mode at that time, further increased the difficulty of designing and developing.
Summary of the invention
In order to overcome the defective of prior art, the present invention proposes the skin change method at a kind of Web software UI interface, to simplify the implementation of existing software UI interface skin change method.
To achieve these goals, technical scheme of the present invention is:
The skin change method at a kind of Web software UI interface may further comprise the steps:
1) make figure UI interface, and the well cutting pinup picture;
2) transparency of pinup picture is set, and saves as the PNG format picture;
3) adopt the HTML containers labels that the PNG format picture is applied on the UI interface;
4) according to the color of user selection, to the HTML containers labels, the UI interface generates the skin of different tones with the color dynamic application at the UI interface.
At first make figure UI interface in the step 1), by image processing software, the part that needs in the UI interface layout to carry out pinup picture cliped and pasted one by one, with the pinup picture of well cutting corresponding to corresponding HTML containers labels.The color selection function is provided in the UI interface, has been used for the different color of user selection.Pinup picture adopts the transparent effect of PNG form stronger, and transparent being not limited to of PNG form only is fully transparent or opaque, also has the transparent of different levels.
Further, the tone of step 1) pinup picture mixes realization by background picture, label background color or background picture and label background color.
Further, the transparency of described pinup picture is 0% ~ 100%.Be that some place does not need the background color tone fully, only need the effect on the background picture, some place does not then need the background picture effect fully, only uses the label background color.More precisely, needs are realized the part of tone reversal is chosen out, certain transparency is set, all the other places then can be set to fully transparent or opaque.The transparency of the remainder of this pinup picture is set to 0%, and is namely fully transparent, and complete transparent place only adopts the label background color to realize tonal effect; Transparency is set to 100%, and is namely opaque, and opaque place only keeps the tonal effect on the background picture.
Further, the transparency of described transparent pinup picture is 50%.
Further, described step 3) utilizes HTML containers labels and CSS file that the PNG format picture is applied on the UI interface for adopting the HTML containers labels to make the CSS file.
Further, the user of described step 4) utilizes browser to enter the UI interface.The user enters the UI interface by browser, thereby selects different colors.
Beneficial effect of the present invention: transfer to realize the effect that skin is changed at Web software UI interface by the color mixture of background picture and label background color.In this law, only need one group of background picture, realize that by utilizing its transparency background picture and the mixing of html tag background color finally realize the effect of the interface skin of various different tones; Utilize this law to reduce the difficulty of Web software development and maintenance.
Description of drawings
Fig. 1 is process flow diagram of the present invention;
Fig. 2 is design sketch of the present invention.
Embodiment
As shown in Figure 1, the skin change method at a kind of Web software UI interface may further comprise the steps:
1) make figure UI interface, and the well cutting pinup picture;
2) transparency of pinup picture is set, and saves as the PNG format picture;
3) adopt the HTML containers labels to make the CSS file; Adopt HTML containers labels and CSS file that the PNG format picture is applied on the UI interface;
5) in the UI interface, provide the color selection function;
6) utilize browser to enter figure UI interface;
7) user selection color, to the CSS file, the UI interface generates the skin of different tones with the color dynamic application at the UI interface.
UI interface engineering teacher produces the layout at Web software UI interface, and by the processing of Photoshop image processing software, the part that needs in the UI interface layout to carry out pinup picture is cliped and pasted out one by one, corresponding to corresponding HTML containers labels, then determining needs to mix the pinup picture of realizing tonal effect by the part in background picture or the picture and label background color; Pinup picture is carried out the transparency setting, and it is saved as the PNG file of PNG-24 format picture band transparency attribute.Pinup picture is carried out transparency when arranging, the transparency all or part of to pinup picture is set to 50%, for only need partly being set to transparent pinup picture, remainder is set to opaque, and namely transparency is set to 100%, such as the LOGO of certain company picture as a setting, for the LOGO of guarantee company can know embodiment, then the transparency of this LOGO place pinup picture arranges 100%, and is namely opaque, namely just realizes tonal effect by background picture herein.Only need to realize tonal effect by the label background color such as the somewhere, then transparency herein be arranged 0%.
The all or part of transparency of pinup picture is set, to determine according to needed effect, when the outstanding background picture of needs and label background color mixing realization tonal effect, if need the outstanding background picture that reveal, then arranging of pinup picture transparency can be slightly high, such as 60% or 80%; If need outstanding label background color, then the setting of pinup picture transparency is slightly low, such as 20% or 40%; Generalized case, the transparency of pinup picture is set to 50%, and namely the effect of pinup picture adopts background picture and the impartial realization of label background color.
According to UI interface layout figure, relate to content and the layout thereof that the UI interface will show by the HTML containers labels, make simultaneously corresponding CSS file and realize display effect and the style at UI interface, and adopt HTML containers labels and CSS file that the PNG format picture is put in same catalogue, provide several color for user selection at the UI interface.When starting browser, will generate corresponding UI interface by loading html file and CSS file, and generate the tone at interface according to the background picture of the label background color in the CSS pattern file and each label, as shown in Figure 2.
The course of work of the present invention: the user according to actual needs or personal preference when changing a kind of UI interface color, browser calls this color and adjusts label background color in the UI interface, and regenerate corresponding interface tone according to label background color and background picture and transparency thereof, realize the effect of changing skin thereby reach.
Claims (6)
1. the skin change method at a Web software UI interface is characterized in that may further comprise the steps:
1) make figure UI interface, and the well cutting pinup picture;
2) transparency of pinup picture is set, and saves as the PNG format picture;
3) adopt the HTML containers labels that the PNG format picture is applied on the UI interface;
4) according to the color of user selection, to the HTML containers labels, the UI interface generates the skin of different tones with the color dynamic application at the UI interface.
2. the skin change method at described Web software UI interface according to claim 1 is characterized in that described step 1) pinup picture need to mix by background picture or background picture and label background color to realize tonal effect.
3. the skin change method at described Web software UI interface according to claim 1 is characterized in that described step 2) in the transparency of pinup picture be 0% ~ 100%.
4. the skin change method at described Web software UI interface according to claim 3, the transparency that it is characterized in that described transparent pinup picture is 50%.
5. the skin change method at described Web software UI interface according to claim 1 is characterized in that described step 3) for adopting the HTML containers labels to make the CSS file, utilizes HTML containers labels and CSS file that the PNG format picture is applied on the UI interface.
6. the skin change method at described Web software UI interface according to claim 1 is characterized in that the user of described step 4) utilizes browser to enter the UI interface.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2012103970142A CN102929617A (en) | 2012-10-18 | 2012-10-18 | Skin exchanging method for Web software UI (User Interface) |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2012103970142A CN102929617A (en) | 2012-10-18 | 2012-10-18 | Skin exchanging method for Web software UI (User Interface) |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN102929617A true CN102929617A (en) | 2013-02-13 |
Family
ID=47644430
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN2012103970142A Pending CN102929617A (en) | 2012-10-18 | 2012-10-18 | Skin exchanging method for Web software UI (User Interface) |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN102929617A (en) |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103473086A (en) * | 2013-08-29 | 2013-12-25 | 上海斐讯数据通信技术有限公司 | ADSL modem web interface switching method |
| CN104102504A (en) * | 2013-04-15 | 2014-10-15 | 腾讯科技（深圳）有限公司 | Client skin picture drawing method and client skin picture drawing device |
| CN104182237A (en) * | 2014-08-28 | 2014-12-03 | 北京金山安全软件有限公司 | Browser label display method and device and terminal |
| WO2014206169A1 (en) * | 2013-06-28 | 2014-12-31 | 优视科技有限公司 | Method, device, and storage medium for drawing webpage text element based on html5 |
| CN104361011A (en) * | 2014-10-13 | 2015-02-18 | 广东威创视讯科技股份有限公司 | Dynamic color display implementation method and device |
| CN104536656A (en) * | 2014-12-16 | 2015-04-22 | 北京京东尚科信息技术有限公司 | Method and system used for generating operation detail page of intelligent equipment |
| CN104915186A (en) * | 2014-03-12 | 2015-09-16 | 腾讯科技（深圳）有限公司 | Method and device for making page |
| CN106293758A (en) * | 2016-08-17 | 2017-01-04 | 深圳市金证科技股份有限公司 | The method and apparatus that a kind of Web application interface changes skin |
| CN110727482A (en) * | 2018-07-16 | 2020-01-24 | 阿里巴巴集团控股有限公司 | Interface updating method and device |
| CN115309306A (en) * | 2021-05-08 | 2022-11-08 | Oppo广东移动通信有限公司 | Label control method and device, terminal equipment and storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101493768A (en) * | 2009-03-13 | 2009-07-29 | 腾讯科技（深圳）有限公司 | Method and device for setting display effect of skin element |
| CN101706724A (en) * | 2009-09-29 | 2010-05-12 | 宇龙计算机通信科技(深圳)有限公司 | Icon generation method and icon processing device |
| CN102156999A (en) * | 2010-02-11 | 2011-08-17 | 腾讯科技（深圳）有限公司 | Generation method and device thereof for user interface |
| CN102622214A (en) * | 2011-01-27 | 2012-08-01 | 腾讯科技（深圳）有限公司 | Method and device for realizing multiple-display mode universal icons |
-
2012
- 2012-10-18 CN CN2012103970142A patent/CN102929617A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101493768A (en) * | 2009-03-13 | 2009-07-29 | 腾讯科技（深圳）有限公司 | Method and device for setting display effect of skin element |
| CN101706724A (en) * | 2009-09-29 | 2010-05-12 | 宇龙计算机通信科技(深圳)有限公司 | Icon generation method and icon processing device |
| CN102156999A (en) * | 2010-02-11 | 2011-08-17 | 腾讯科技（深圳）有限公司 | Generation method and device thereof for user interface |
| CN102622214A (en) * | 2011-01-27 | 2012-08-01 | 腾讯科技（深圳）有限公司 | Method and device for realizing multiple-display mode universal icons |
Cited By (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104102504A (en) * | 2013-04-15 | 2014-10-15 | 腾讯科技（深圳）有限公司 | Client skin picture drawing method and client skin picture drawing device |
| WO2014206169A1 (en) * | 2013-06-28 | 2014-12-31 | 优视科技有限公司 | Method, device, and storage medium for drawing webpage text element based on html5 |
| CN103473086A (en) * | 2013-08-29 | 2013-12-25 | 上海斐讯数据通信技术有限公司 | ADSL modem web interface switching method |
| CN104915186A (en) * | 2014-03-12 | 2015-09-16 | 腾讯科技（深圳）有限公司 | Method and device for making page |
| CN104915186B (en) * | 2014-03-12 | 2019-11-19 | 腾讯科技（深圳）有限公司 | A kind of method and apparatus making the page |
| CN104182237A (en) * | 2014-08-28 | 2014-12-03 | 北京金山安全软件有限公司 | Browser label display method and device and terminal |
| CN104182237B (en) * | 2014-08-28 | 2017-11-07 | 北京金山安全软件有限公司 | Browser label display method and device and terminal |
| CN104361011A (en) * | 2014-10-13 | 2015-02-18 | 广东威创视讯科技股份有限公司 | Dynamic color display implementation method and device |
| CN104536656A (en) * | 2014-12-16 | 2015-04-22 | 北京京东尚科信息技术有限公司 | Method and system used for generating operation detail page of intelligent equipment |
| CN106293758A (en) * | 2016-08-17 | 2017-01-04 | 深圳市金证科技股份有限公司 | The method and apparatus that a kind of Web application interface changes skin |
| CN106293758B (en) * | 2016-08-17 | 2019-09-17 | 深圳市金证科技股份有限公司 | A kind of method and apparatus that Web application interface changes skin |
| CN110727482A (en) * | 2018-07-16 | 2020-01-24 | 阿里巴巴集团控股有限公司 | Interface updating method and device |
| CN110727482B (en) * | 2018-07-16 | 2023-05-12 | 阿里巴巴集团控股有限公司 | Interface updating method and device |
| CN115309306A (en) * | 2021-05-08 | 2022-11-08 | Oppo广东移动通信有限公司 | Label control method and device, terminal equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102929617A (en) | Skin exchanging method for Web software UI (User Interface) | |
| CN105867931B (en) | The variation and device at information displaying interface | |
| CN102591848B (en) | Selection of foreground characteristics based on background | |
| US20050216834A1 (en) | Method, apparatus, and computer-readable medium for dynamically rendering a user interface menu | |
| CN108268262A (en) | Realize the method, apparatus and system that HTML is converted to wechat small routine | |
| CN110489499A (en) | A kind of on-line intelligence special map plotting method | |
| CN104380280A (en) | System and method for dynamically converting webpage, and computer-readable recording medium | |
| WO2014190826A1 (en) | Text template generation method | |
| Li et al. | The design and implementation of responsive web page based on HTML5 and CSS3 | |
| US20110185205A1 (en) | Power-saving display information converting system and method | |
| CN110516186A (en) | Page skeleton automatic generating method, equipment, storage medium and device | |
| CN103065338A (en) | Method and device providing shadow for foreground image in background image | |
| CN104850498B (en) | A kind of filling information method of testing and system | |
| CN106610826A (en) | Making method and device for online scenario application | |
| CN105528389A (en) | A logic control method and device based on mobile phone browser core | |
| TW201401254A (en) | Electronic display | |
| Kaluvakuri et al. | Harnessing the Potential of CSS: An Exhaustive Reference for Web Styling | |
| CN106293758B (en) | A kind of method and apparatus that Web application interface changes skin | |
| CN107862054A (en) | A kind of pattern rendering intent | |
| CN108961361A (en) | Generate method and system, the computer equipment of literal with special effect image | |
| US6690395B2 (en) | Progressively rolling animation display method on cellular phones | |
| CN112487330A (en) | UI skin changing method, system, device and storage medium based on XML | |
| CN109190078A (en) | Webpage construction method, device and storage medium | |
| CN115543318A (en) | Implementation method for rapidly forming H5 application into multi-terminal application based on vue development | |
| CN109814977A (en) | A kind of character displaying method, calculates equipment and storage medium at device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C12 | Rejection of a patent application after its publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20130213 |