如何优雅便捷地实时预览自己的网页设计稿

工欲善其事必先利其器。

作为UI设计师，你的项目是需要随时预览的，以便及时发现设计问题，于是了PSplay，sketch mirror等工具，可以非常方便地在手机中预览APP设计稿，极大地提高了设计效率。

不过用sketch设计pc网页的时候该如何实时预览呢？

看完本文你将解决以下问题

使用sketch插件，一键预览网页设计稿

问题场景再现

A同学设计好了一个官网主页，1920px宽，自己电脑是1440px，预览的时候非常麻烦，先导出图片，然后鼠标拖动图片放大查看……关键没有真实浏览器里面看的感觉。比在sketch mirror里面预览手机界面体验差多了。

于是这个sketch插件应运而生，preview in browser ，一款可以实时预览网页设计的工具。

插件使用方法

下载地址点击下载密码: 5mks

在设计过程中，只要按快捷键shift+cmd+.运行插件，你的pc网页就会用默认浏览器打开，非常方便。

结语

需要注意的是，如果设计稿大于你的屏幕尺寸，比如设计图是1920，电脑是1440，那么浏览器打开后是偏移的。因为预览的html里面是img图片展示，而非background-image展示，导致屏幕容纳不下图片。

解决方案是，你的电脑尺寸是多少，设计图也需要是多少，这样预览出来就是100%还原了。效果和真实网页一模一样。

熟悉快捷键后，在平时设计网页时，会非常方便地实时预览网页界面。

---

更多UI设计干货文章请关注UI黑客

微信公众号 uihacker

UI黑客官网http://www.uihacker.com/

UI黑客论坛http://bbs.uihacker.com/

---