【HTML插件】帮你100%还原设计

设计狮们还在纠结重构还原到位了吗?U工们还在锻炼像素眼吗?来试试这款设计还原检查插件吧!

还原对比效果图

# 这是什么

Contrast.js插件主要用于检验移动端Web重构还原度,由于大部分设计稿是基于iPhone6以上(1334 x 750)设计的,所以该插件比较适合用iPhone6、iPhone7、iPhone8检查设计还原情况。

# 引入插件

    1. 准备好需要验证的设计稿,如bg.png

    2. 在重构稿中引入工具脚本contrast.js并设置图片路径

<script type="text/javascript" src="https://coderjunb.github.io/HTML-contrast/dist/contrast.js"></script>
<script type="text/javascript">
    Contrast.setBg({src:"img/bg.png"});
</script>    

3. 浏览页面,可以看到界面右下角多了个“对比工具”按钮

 

# 操作使用

    开启工具:点击“工具按钮”,插件展示操作引导(第一次加载才显示引导);

    关闭工具:点击“工具按钮”,插件隐藏;

    查看设计稿:在屏幕上半区向右滑动,左侧展示设计稿,右侧展示重构稿;

    设计稿透明度:在屏幕下半区向左滑动,设计稿逐渐透明;在屏幕下半区向右滑动,设计稿逐渐不透明;

    调整工具位置:拖拽“工具按钮”到要调整到位置;

    更换设计稿:长按“工具按钮”,选择相册,即可;

# 其他问题

    有没有设计稿背景规格?

    答:不限制规格,推荐宽750px的设计标准。

    会不会影响正常开发和上线?

    答:插件适用于检查还原度,上线时注释引用即可,不影响正常开发和上线。

设计稿有TitleBar,页面没有,该怎么办?

    答:在setBg的时候设置隐藏TitleBar,如下:

// 通过设置hideBar隐藏设计稿任务栏
Contrast.setBg({
    src:"bg.png",
    hideBar:true
});     

# 项目链接

https://github.com/coderjunb/Contrast

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极客编程

用Vue.js开发一个电影App的前端界面

我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目。这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WE...

2.5K10
来自专栏FD的专栏

前端下半场:构建跨框架的 UI 库

跨框架的 UI 库,即前端 UI 库可以不经任何修改,直接能运行在 React、Angular、Vue 等框架上。

11810
来自专栏IMWeb前端团队

切图工具/插件介绍

本文作者:IMWeb moonye 原文出处:IMWeb社区 未经同意,禁止转载 切图工具 切图插件 这里的插件都是ps的插件,比较小巧,易于安装和适...

39880
来自专栏微信小程序开发

小程序中布局突然乱掉了,到底是怎么个情况?

就在上周,突然很多用户反馈,都说小小签到布局乱掉了(线上有四款小程序都收到这样的反馈,这里我就不广告了),经过客服反复沟通,找到了布局乱掉的必现条件: 1、IO...

436160
来自专栏姬小光

姬小光前端兴趣班【第008期】- 真正的切图大法

上一期我们使用了 word 转存大法来生成网页,主要是为了帮助大家理解表格布局的原理。那么今天我们就来学习一下真正的切图大法。

14120
来自专栏腾讯社交用户体验设计

微信小程序初体验(上)

35120
来自专栏HTML5学堂

移动端项目经验 JavaScript

HTML5学堂:相对来说,JS在移动端要远远低于PC端的使用频率,因此积累的开发经验并不是太多。在这里简要整理一些JavaScript在移动端的项目经验,主要包...

38780
来自专栏Youngxj

一张好看的404页面源码

53660
来自专栏零基础使用Django2.0.1打造在线教育网站

爬取腾讯新闻首页资讯标题

终于进入到我们的实战内容篇了,因为是第一篇,所以找一个简单的例子给大家介绍爬取的详细过程,这既是对基础篇知识的运用,也是增强大家往后学习的动力。

49320
来自专栏IT技术精选文摘

Facebook构建高性能Android视频组件实践之路

其他的视频新闻类型可以播放生成的视频,赞助商的信息,或者短动画。 CoreVideoComponent是一个有着最简特性的任何视频新闻都需要的MountSpec...

415100

扫码关注云+社区

领取腾讯云代金券