如何优雅便捷地实时预览自己的网页设计稿
时间：2023-07-03 04:21:01 | 来源：网站运营
时间：2023-07-03 04:21:01 来源：网站运营
如何优雅便捷地实时预览自己的网页设计稿：
工欲善其事必先利其器。
作为UI设计师，你的项目是需要随时预览的，以便及时发现设计问题，于是了PSplay，sketch mirror等工具，可以非常方便地在手机中预览APP设计稿，极大地提高了设计效率。
不过用sketch设计pc网页的时候该如何实时预览呢？
看完本文你将解决以下问题
问题场景再现
A同学设计好了一个官网主页，1920px宽，自己电脑是1440px，预览的时候非常麻烦，先导出图片，然后鼠标拖动图片放大查看……关键没有真实浏览器里面看的感觉。比在sketch mirror里面预览手机界面体验差多了。
于是这个sketch插件应运而生，preview in browser ，一款可以实时预览网页设计的工具。
插件使用方法
下载地址
点击下载 密码: 5mks
在设计过程中，只要按快捷键
shift+cmd+.运行插件，你的pc网页就会用默认浏览器打开，非常方便。
结语
需要注意的是，如果设计稿大于你的屏幕尺寸，比如设计图是1920，电脑是1440，那么浏览器打开后是偏移的。因为预览的html里面是img图片展示，而非background-image展示，导致屏幕容纳不下图片。
解决方案是，你的电脑尺寸是多少，设计图也需要是多少，这样预览出来就是100%还原了。效果和真实网页一模一样。
熟悉快捷键后，在平时设计网页时，会非常方便地实时预览网页界面。
在线咨询
