前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【HTML插件】帮你100%还原设计

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

原创
作者头像
chiron
发布2018-06-07 15:32:06
1.8K0
发布2018-06-07 15:32:06
举报
文章被收录于专栏:杨俊标的专栏

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

还原对比效果图
还原对比效果图

# 这是什么

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

# 引入插件

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

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

代码语言:javascript
复制
<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,如下:

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

# 项目链接

https://github.com/coderjunb/Contrast

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • # 这是什么
  • # 引入插件
  • # 操作使用
  • # 其他问题
  • # 项目链接
  • https://github.com/coderjunb/Contrast
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档