CN106325875A - 一种网页ui界面与网页设计图的对比方法 - Google Patents

一种网页ui界面与网页设计图的对比方法 Download PDF

Info

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
Application number
CN201610744582.3A
Other languages
English (en)
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.)
Inspur Software Group Co Ltd
Original Assignee
Inspur Software Group 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 Inspur Software Group Co Ltd filed Critical Inspur Software Group Co Ltd
Priority to CN201610744582.3A priority Critical patent/CN106325875A/zh
Publication of CN106325875A publication Critical patent/CN106325875A/zh
Pending legal-status Critical Current

Links

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界面与网页设计图的对比方法
技术领域
本发明涉及计算机信息技术领域，具体地说是一种实用性强、网页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技术，调整设计图的透明度。
CN201610744582.3A 2016-08-29 2016-08-29 一种网页ui界面与网页设计图的对比方法 Pending CN106325875A (zh)

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)

* Cited by examiner, † Cited by third party
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)

* Cited by examiner, † Cited by third party
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 优视科技有限公司 一种基于合成渲染加速的网页更新方法和装置

Patent Citations (3)

* Cited by examiner, † Cited by third party
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)

* Cited by examiner, † Cited by third party
Title
CINDY: "设计图与实际效果对比：1px", 《HTTP://CHROMECJ.COM/WEBDEVELOPMENT/》 *
向宇: "用jquery向网页添加背景图片拉伸模糊遮罩层代码", 《HTTPS://WWW.CNBLOGS.COM/ANDREWXU/P/5294824.HTML》 *

Cited By (8)

* Cited by examiner, † Cited by third party
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界面与网页设计图的对比方法
US9596899B2 (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
Kwok et al. A structural topology design method based on principal stress line
Williams et al. Energy stable flux reconstruction schemes for advection–diffusion problems on triangles
Tavelli et al. A staggered semi-implicit discontinuous Galerkin method for the two dimensional incompressible Navier–Stokes equations
CN103678737B (zh) 一种杠杆系统虚拟装配方法
CN106126645A (zh) 一种提高web页面渲染性能的装置
Lourenço et al. Floorplan-aware analog IC sizing and optimization based on topological constraints
Gonzalez et al. Reinforcing the link between the double red clump and the X-shaped bulge of the Milky Way
Gerritsma An introduction to a compatible spectral discretization method
CN104036059A (zh) 一种基于图元的工程协同设计方法和系统
CN103279345B (zh) 一种对页面元素进行锁定的方法及装置
Casals et al. Classification of Engel knots
Obergrießer et al. Infrastructural BIM standards–Development of an Information Delivery Manual for the geotechnical infrastructural design and analysis process
Längst et al. The potentials of isogeometric analysis methods in integrated design processes
Dikaros et al. Generalized warping analysis of composite beams of an arbitrary cross section by BEM. II: Numerical applications
Su et al. An automatic grid generation approach over free-form surface for architectural design
d’Hueppe et al. Coupling a two-temperature model and a one-temperature model at a fluid-porous interface
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
Ponce et al. Unravelling the dynamical richness of 3D canonical memristor oscillators
EP1679628A1 (en) Printed circuit board design instruction support method and device
CN103020402B (zh) 建模方法和装置
CN104111823A (zh) 一种在线交互块式编辑方法及编辑器
JP2800708B2 (ja) Ｆｅｍ解析モデルのメッシュ修正方法

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