如何優(yōu)雅便捷地實(shí)時(shí)預(yù)覽自己的網(wǎng)頁設(shè)計(jì)稿
時(shí)間：2023-07-03 04:21:01 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-03 04:21:01 來源：網(wǎng)站運(yùn)營(yíng)
如何優(yōu)雅便捷地實(shí)時(shí)預(yù)覽自己的網(wǎng)頁設(shè)計(jì)稿：
工欲善其事必先利其器。
作為UI設(shè)計(jì)師，你的項(xiàng)目是需要隨時(shí)預(yù)覽的，以便及時(shí)發(fā)現(xiàn)設(shè)計(jì)問題，于是了PSplay，sketch mirror等工具，可以非常方便地在手機(jī)中預(yù)覽APP設(shè)計(jì)稿，極大地提高了設(shè)計(jì)效率。
不過用sketch設(shè)計(jì)pc網(wǎng)頁的時(shí)候該如何實(shí)時(shí)預(yù)覽呢？
看完本文你將解決以下問題
- 使用sketch插件，一鍵預(yù)覽網(wǎng)頁設(shè)計(jì)稿
問題場(chǎng)景再現(xiàn)
A同學(xué)設(shè)計(jì)好了一個(gè)官網(wǎng)主頁，1920px寬，自己電腦是1440px，預(yù)覽的時(shí)候非常麻煩，先導(dǎo)出圖片，然后鼠標(biāo)拖動(dòng)圖片放大查看……關(guān)鍵沒有真實(shí)瀏覽器里面看的感覺。比在sketch mirror里面預(yù)覽手機(jī)界面體驗(yàn)差多了。
于是這個(gè)sketch插件應(yīng)運(yùn)而生，preview in browser ，一款可以實(shí)時(shí)預(yù)覽網(wǎng)頁設(shè)計(jì)的工具。
插件使用方法
下載地址
點(diǎn)擊下載 密碼: 5mks
在設(shè)計(jì)過程中，只要按快捷鍵
shift+cmd+.運(yùn)行插件，你的pc網(wǎng)頁就會(huì)用默認(rèn)瀏覽器打開，非常方便。
結(jié)語
需要注意的是，如果設(shè)計(jì)稿大于你的屏幕尺寸，比如設(shè)計(jì)圖是1920，電腦是1440，那么瀏覽器打開后是偏移的。因?yàn)轭A(yù)覽的html里面是img圖片展示，而非background-image展示，導(dǎo)致屏幕容納不下圖片。
解決方案是，你的電腦尺寸是多少，設(shè)計(jì)圖也需要是多少，這樣預(yù)覽出來就是100%還原了。效果和真實(shí)網(wǎng)頁一模一樣。
熟悉快捷鍵后，在平時(shí)設(shè)計(jì)網(wǎng)頁時(shí)，會(huì)非常方便地實(shí)時(shí)預(yù)覽網(wǎng)頁界面。
在線咨詢
