CN106325875A - 一种网页ui界面与网页设计图的对比方法 - Google Patents
一种网页ui界面与网页设计图的对比方法 Download PDFInfo
- Publication number
- CN106325875A CN106325875A CN201610744582.3A CN201610744582A CN106325875A CN 106325875 A CN106325875 A CN 106325875A CN 201610744582 A CN201610744582 A CN 201610744582A CN 106325875 A CN106325875 A CN 106325875A
- Authority
- CN
- China
- Prior art keywords
- webpage
- node
- design
- interface
- transparency
- 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
- 238000013461 design Methods 0.000 title claims abstract description 41
- 238000000034 method Methods 0.000 title claims abstract description 27
- 230000000694 effects Effects 0.000 claims abstract description 11
- 239000004606 Fillers/Extenders Substances 0.000 claims description 3
- 238000012795 verification Methods 0.000 abstract description 4
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 3
- 238000011161 development Methods 0.000 description 2
- 230000006855 networking Effects 0.000 description 1
- 238000012552 review Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种网页UI界面与网页设计图的对比方法,其实现过程为:通过浏览器自带扩展应用,在现有网页内容上添加一个与网页大小相同的图层,并将网页设计图按照网页实际大小加载至此图层,加载完成后,通过控制图片透明度,即可将设计图与网页实现效果进行对比,从而实现对网页实现效果进行检查的目的。该一种网页UI界面与网页设计图的对比方法与现有技术相比,方便设计人员对界面实现的审核,提高审核效率,实用性强,适用范围广泛,易于推广。
Description
技术领域
本发明涉及计算机信息技术领域,具体地说是一种实用性强、网页UI界面与网页设计图的对比方法。
背景技术
随着计算机网络技术的不断发展,BS架构的系统被广泛应用于各行各业,网页应用程序也越来越复杂,开发团队分工也越来越细致。现今,大多数网站制作团队中,界面UI设计与实现是由不同的人员协作完成,由于界面设计与界面实现的是分别会有不同的侧重点,因此会出现实现效果与设计图不一致的情况,基于此,现提供一种网页UI界面与网页设计图的对比方法,方便对界面实现的审核,以提高审核效率。
发明内容
本发明的技术任务是针对以上不足之处,提供一种实用性强、网页UI界面与网页设计图的对比方法。
一种网页UI界面与网页设计图的对比方法,其实现过程为:通过浏览器自带扩展应用,在现有网页内容上添加一个与网页大小相同的图层,并将网页设计图按照网页实际大小加载至此图层,加载完成后,通过控制图片透明度,即可将设计图与网页实现效果进行对比,从而实现对网页实现效果进行检查的目的。
添加图层的过程为:在浏览器中编写扩展程序,在网页加载完成后,读取网页的宽度及高度,根据读取的页面尺寸,生成一个独立的网页节点,再将效果图插入到此节点中作为节点背景图,最后将此节点插入到网页的body节点中,通过调整图片的透明度即可完成对比。
上述图层添加的具体过程为:
步骤一:网页加载完成后,读取网页宽度W和高度H;
步骤二:创建页面Dom节点N,并将宽度高度属性分别设置为W和H;
步骤三:将节点N的定位属性设置为绝对定位,层级设置为最高;
步骤四:用户选择并加载设计图P;
步骤五:将节点N的背景图设置为图片P;
步骤六:将节点N插入到网页body节点中;
步骤七:用户输入透明度的百分比数值a;
步骤八:读取用户输入的数值a;
步骤九:将节点P的透明度属性设置为输入的数值a;
步骤十:对比观察网页UI界面与设计图间是否存在差异,及位置偏移。
所述网页设计图通过浏览器加载至网页应用中,并覆盖至整个网页应用的最顶层,之后再通过HTML技术,调整设计图的透明度。
本发明的一种网页UI界面与网页设计图的对比方法,具有以下优点:
该发明的一种网页UI界面与网页设计图的对比方法,可以按照1:1的尺寸,直观的看到网页应用的界面与设计图之间是否完全匹配;使用Chrome浏览器自带扩展功能,无需对网页本身内容进行修改即可完成与设计图的精确对比;对于与设计图不匹配的应用,可以在不改变网页应用的前提下,精确对比出实现效果与设计图之间的偏移量;实用性强,适用范围广泛,易于推广。
附图说明
图1为本发明的实现流程图。
具体实施方式
下面结合附图及具体实施例对本发明作进一步说明。
如附图1所示,本发明提供一种网页UI界面与网页设计图的对比方法,为解决网页界面UI实现效果的与设计图之间的审核问题,其实现过程为:通过Chrome等浏览器自带扩展应用,在现有网页内容上添加一个与网页大小相同的图层,并将网页设计图按照网页实际大小加载至此图层,即覆盖至整个网页应用的最顶层,加载完成后,再通过HTML技术,通控制图片过透明度,即可将设计图与网页实现效果进行对比,从而实现对网页实现效果进行检查的目的。
添加图层的过程为:在Chrome浏览器中编写扩展程序,在网页加载完成后,读取网页的宽度及高度,根据读取的页面尺寸,生成一个独立的网页节点,再将效果图插入到此节点中作为节点背景图,最后将此节点插入到网页的body节点中,通过调整图片的透明度即可完成对比。
上述图层添加的具体过程为:
步骤一:网页加载完成后,读取网页宽度W和高度H;
步骤二:创建页面Dom节点N,并将宽度高度属性分别设置为W和H;
步骤三:将节点N的定位属性设置为绝对定位,层级设置为最高;
步骤四:用户选择并加载设计图P;
步骤五:将节点N的背景图设置为图片P;
步骤六:将节点N插入到网页body节点中;
步骤七:用户输入透明度的百分比数值a;
步骤八:读取用户输入的数值a;
步骤九:将节点P的透明度属性设置为输入的数值a;
步骤十:对比观察网页UI界面与设计图间是否存在差异,及位置偏移。
上述具体实施方式仅是本发明的具体个案,本发明的专利保护范围包括但不限于上述具体实施方式,任何符合本发明的一种网页UI界面与网页设计图的对比方法的权利要求书的且任何所属技术领域的普通技术人员对其所做的适当变化或替换,皆应落入本发明的专利保护范围。
Claims (4)
1.一种网页UI界面与网页设计图的对比方法,其特征在于,其实现过程为:通过浏览器自带扩展应用,在现有网页内容上添加一个与网页大小相同的图层,并将网页设计图按照网页实际大小加载至此图层,加载完成后,通过控制图片透明度,即可将设计图与网页实现效果进行对比,从而实现对网页实现效果进行检查的目的。
2.根据权利要求1所述的一种网页UI界面与网页设计图的对比方法,其特征在于,添加图层的过程为:在浏览器中编写扩展程序,在网页加载完成后,读取网页的宽度及高度,根据读取的页面尺寸,生成一个独立的网页节点,再将效果图插入到此节点中作为节点背景图,最后将此节点插入到网页的body节点中,通过调整图片的透明度即可完成对比。
3.根据权利要求2所述的一种网页UI界面与网页设计图的对比方法,其特征在于,上述图层添加的具体过程为:
步骤一:网页加载完成后,读取网页宽度W和高度H;
步骤二:创建页面Dom节点N,并将宽度高度属性分别设置为W和H;
步骤三:将节点N的定位属性设置为绝对定位,层级设置为最高;
步骤四:用户选择并加载设计图P;
步骤五:将节点N的背景图设置为图片P;
步骤六:将节点N插入到网页body节点中;
步骤七:用户输入透明度的百分比数值a;
步骤八:读取用户输入的数值a;
步骤九:将节点P的透明度属性设置为输入的数值a;
步骤十:对比观察网页UI界面与设计图间是否存在差异,及位置偏移。
4.根据权利要求1所述的一种网页UI界面与网页设计图的对比方法,其特征在于,所述网页设计图通过浏览器加载至网页应用中,并覆盖至整个网页应用的最顶层,之后再通过HTML技术,调整设计图的透明度。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201610744582.3A CN106325875A (zh) | 2016-08-29 | 2016-08-29 | 一种网页ui界面与网页设计图的对比方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201610744582.3A CN106325875A (zh) | 2016-08-29 | 2016-08-29 | 一种网页ui界面与网页设计图的对比方法 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN106325875A true CN106325875A (zh) | 2017-01-11 |
Family
ID=57791297
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201610744582.3A Pending CN106325875A (zh) | 2016-08-29 | 2016-08-29 | 一种网页ui界面与网页设计图的对比方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN106325875A (zh) |
Cited By (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109582345A (zh) * | 2018-10-22 | 2019-04-05 | 中国平安人寿保险股份有限公司 | 报告自动生成方法、装置、存储介质和计算机设备 |
CN109977337A (zh) * | 2019-02-25 | 2019-07-05 | 北京三快在线科技有限公司 | 一种网页设计对比方法、装置、设备及可读存储介质 |
CN110007987A (zh) * | 2018-01-05 | 2019-07-12 | 武汉斗鱼网络科技有限公司 | 一种视图对象的层级管理方法及系统 |
CN110473249A (zh) * | 2019-07-12 | 2019-11-19 | 平安普惠企业管理有限公司 | 一种网页用户界面与设计稿的对比方法、装置及终端设备 |
CN110807142A (zh) * | 2019-10-31 | 2020-02-18 | 拉扎斯网络科技(上海)有限公司 | 信息比对方法、装置、电子设备及存储介质 |
CN112015416A (zh) * | 2020-08-27 | 2020-12-01 | 北京字节跳动网络技术有限公司 | 开发网页的校验方法、装置、电子设备及计算机可读介质 |
CN113485707A (zh) * | 2021-07-26 | 2021-10-08 | 亿览在线网络技术(北京)有限公司 | 一种ui界面自动校对的方法 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US8689189B1 (en) * | 2008-02-15 | 2014-04-01 | Amazon Technologies, Inc. | Systems and methods for testing widgets |
CN105183478A (zh) * | 2015-09-11 | 2015-12-23 | 中山大学 | 一种基于颜色传递的网页重构方法及其装置 |
CN105335410A (zh) * | 2014-07-31 | 2016-02-17 | 优视科技有限公司 | 一种基于合成渲染加速的网页更新方法和装置 |
-
2016
- 2016-08-29 CN CN201610744582.3A patent/CN106325875A/zh active Pending
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US8689189B1 (en) * | 2008-02-15 | 2014-04-01 | Amazon Technologies, Inc. | Systems and methods for testing widgets |
CN105335410A (zh) * | 2014-07-31 | 2016-02-17 | 优视科技有限公司 | 一种基于合成渲染加速的网页更新方法和装置 |
CN105183478A (zh) * | 2015-09-11 | 2015-12-23 | 中山大学 | 一种基于颜色传递的网页重构方法及其装置 |
Non-Patent Citations (2)
Title |
---|
CINDY: "设计图与实际效果对比:1px", 《HTTP://CHROMECJ.COM/WEBDEVELOPMENT/》 * |
向宇: "用jquery向网页添加背景图片拉伸模糊遮罩层代码", 《HTTPS://WWW.CNBLOGS.COM/ANDREWXU/P/5294824.HTML》 * |
Cited By (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110007987A (zh) * | 2018-01-05 | 2019-07-12 | 武汉斗鱼网络科技有限公司 | 一种视图对象的层级管理方法及系统 |
CN110007987B (zh) * | 2018-01-05 | 2022-03-25 | 武汉斗鱼网络科技有限公司 | 一种视图对象的层级管理方法及系统 |
CN109582345A (zh) * | 2018-10-22 | 2019-04-05 | 中国平安人寿保险股份有限公司 | 报告自动生成方法、装置、存储介质和计算机设备 |
CN109977337A (zh) * | 2019-02-25 | 2019-07-05 | 北京三快在线科技有限公司 | 一种网页设计对比方法、装置、设备及可读存储介质 |
CN110473249A (zh) * | 2019-07-12 | 2019-11-19 | 平安普惠企业管理有限公司 | 一种网页用户界面与设计稿的对比方法、装置及终端设备 |
CN110807142A (zh) * | 2019-10-31 | 2020-02-18 | 拉扎斯网络科技(上海)有限公司 | 信息比对方法、装置、电子设备及存储介质 |
CN112015416A (zh) * | 2020-08-27 | 2020-12-01 | 北京字节跳动网络技术有限公司 | 开发网页的校验方法、装置、电子设备及计算机可读介质 |
CN113485707A (zh) * | 2021-07-26 | 2021-10-08 | 亿览在线网络技术(北京)有限公司 | 一种ui界面自动校对的方法 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN106325875A (zh) | 一种网页ui界面与网页设计图的对比方法 | |
Williams et al. | Energy stable flux reconstruction schemes for advection–diffusion problems on triangles | |
US20150351477A1 (en) | Apparatuses And Methods Of Interacting With 2D Design Documents And 3D Models And Generating Production Textures for Wrapping Artwork Around Portions of 3D Objects | |
Takayama et al. | Pattern‐Based Quadrangulation for N‐Sided Patches | |
CN103678737B (zh) | 一种杠杆系统虚拟装配方法 | |
CN106126645A (zh) | 一种提高web页面渲染性能的装置 | |
CN104036059A (zh) | 一种基于图元的工程协同设计方法和系统 | |
TWI836186B (zh) | 使用佈局的骨架表示開發微影遮罩之方法、系統、及非暫時性電腦可讀媒體 | |
Gerritsma | An introduction to a compatible spectral discretization method | |
Fairclough et al. | LayOpt: an educational web-app for truss layout optimization | |
Gulanová et al. | Generative engineering design methodology used for the development of surface-based components | |
Dikaros et al. | Generalized warping analysis of composite beams of an arbitrary cross section by BEM. II: Numerical applications | |
Längst et al. | The potentials of isogeometric analysis methods in integrated design processes | |
Shahzad et al. | A fixed point theorem in partial quasi-metric spaces and an application to software engineering | |
Bournival et al. | A mesh-geometry based method for coupling 1D and 3D elements | |
Brivadis et al. | The influence of quadrature errors on isogeometric mortar methods | |
Campoamor-Stursberg et al. | Symmetry preserving discretization of ordinary differential equations. Large symmetry groups and higher order equations | |
Carranza et al. | Killing boundary data for anti-de Sitter-like spacetimes | |
Ponce et al. | Unravelling the dynamical richness of 3D canonical memristor oscillators | |
CN104281575A (zh) | 一种网页数据获取方法及模版引擎 | |
US20080027701A1 (en) | Printed Circuit Board Design Instruction Support Method and Device | |
Chockalingam et al. | Coupled atomistic-continuum study of the effects of C atoms at α-Fe dislocation cores | |
JP2800708B2 (ja) | Fem解析モデルのメッシュ修正方法 | |
CN116186860B (zh) | 一种基于bim的大跨度结构出图方法 | |
CN105843973A (zh) | 一种基于案例的设计知识的描述方法及系统 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
RJ01 | Rejection of invention patent application after publication | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20170111 |