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

工欲善其事必先利其器。

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

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

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

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

问题场景再现

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

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

插件使用方法

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

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

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

结语

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

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

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