最好用的Sketch設(shè)計(jì)稿實(shí)時(shí)預(yù)覽工具【網(wǎng)頁(yè)手機(jī)都可預(yù)覽】

時(shí)間：2023-07-03 04:18:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-03 04:18:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

最好用的Sketch設(shè)計(jì)稿實(shí)時(shí)預(yù)覽工具【網(wǎng)頁(yè)手機(jī)都可預(yù)覽】：大家在做UI設(shè)計(jì)工作的時(shí)候，都要再手機(jī)或者瀏覽器真實(shí)環(huán)境中預(yù)覽設(shè)計(jì)稿，或者平時(shí)的設(shè)計(jì)稿評(píng)審也是需要將設(shè)計(jì)稿給對(duì)方預(yù)覽。這里介紹兩款工具能夠?qū)崟r(shí)預(yù)覽Sketch設(shè)計(jì)稿的：

1、Sketch Mirror

平時(shí)使用iPhone的設(shè)計(jì)師可在APPstore下載這個(gè)應(yīng)用,

使用教程

使用這個(gè)應(yīng)用可以通過(guò)WIFI或者連接USB預(yù)覽sketch的設(shè)計(jì)稿。

打開(kāi)iPhone 上打開(kāi)mirror APP，Mac上打開(kāi)需要實(shí)時(shí)預(yù)覽的設(shè)計(jì)稿。

確認(rèn)Mac與iPhone同處于一個(gè)局域網(wǎng)內(nèi)，在Sketch軟件右上方通知可查看連接狀態(tài)，如果連接上了，就可以預(yù)覽畫(huà)板了。

應(yīng)用局限性：

01：預(yù)覽需要下載APP，如果是自己預(yù)覽還好，但如果需要交付給其他人預(yù)覽就很不方便。

02：只支持iPhone用戶下載APP，不支持安卓手機(jī)。

03：無(wú)法在PC真實(shí)瀏覽器環(huán)境下預(yù)覽設(shè)計(jì)稿，只能通過(guò)Sketch軟件右上角preview功能預(yù)覽設(shè)計(jì)稿。

2.標(biāo)記獅

相較于Sketch Mirror， 標(biāo)記獅的預(yù)覽方式更加便捷，支持Mac/Win操作系統(tǒng)，支持Adobe XD/Sketch兩個(gè)工具。




并且實(shí)時(shí)預(yù)覽功能是免費(fèi)使用的。







01 下載：

下載地址：http://www.marklion.net

下載后安裝軟件客戶端

02 使用環(huán)境

無(wú)要求，iOS/安卓/iPadOS/Windows/macOS都可以

03 連接方式

通過(guò)WIFI連接，局域網(wǎng)內(nèi)的設(shè)備都可預(yù)覽

WIFI 環(huán)境：將設(shè)計(jì)軟件和手機(jī)連接到相同的wifi環(huán)境下, 通過(guò)掃描預(yù)覽二維碼就可以預(yù)覽。支持多個(gè)設(shè)備同時(shí)連接，可以將多臺(tái)手機(jī)，平板等設(shè)備同時(shí)連接，同步預(yù)覽，同步刷新。

04 使用教程

1.iOS設(shè)備預(yù)覽

點(diǎn)擊iOS的相機(jī)應(yīng)用掃描標(biāo)記獅客戶端右側(cè)展示的二維碼，在彈窗中點(diǎn)擊在“Safari瀏覽器”中打開(kāi)。

iOS系統(tǒng)特性直接在瀏覽器中預(yù)覽不能全屏，所以為了全屏預(yù)覽，需要在瀏覽器中將這一預(yù)覽網(wǎng)頁(yè)添加到主屏幕，點(diǎn)開(kāi)這個(gè)主屏幕的快捷方式就可以進(jìn)行全屏預(yù)覽了。













如果你的局域網(wǎng)未更換，每次新的預(yù)覽不需要再重新掃碼，直接點(diǎn)開(kāi)這個(gè)快捷方式就可以繼續(xù)預(yù)覽。

2. 安卓設(shè)備預(yù)覽

使用微信或QQ掃描預(yù)覽二維碼，雙擊手機(jī)屏幕實(shí)現(xiàn)全屏預(yù)覽，如果使用瀏覽器預(yù)覽建議使用Chrome瀏覽器進(jìn)行預(yù)覽。







3. Mac/Pc瀏覽器中預(yù)覽

點(diǎn)擊軟件右側(cè)瀏覽器打開(kāi)按鈕即可在瀏覽器中預(yù)覽設(shè)計(jì)稿。

通過(guò)窗口右下方切換按鈕實(shí)現(xiàn)畫(huà)板切換，或在Sketch/Adobe XD中切換畫(huà)板。


4. 分享預(yù)覽地址

可以通過(guò)分享預(yù)覽的二維碼來(lái)實(shí)現(xiàn)多端預(yù)覽，或通過(guò)復(fù)制標(biāo)記獅給的預(yù)覽鏈接地址也可以實(shí)現(xiàn)多端預(yù)覽。

只要預(yù)覽設(shè)備處于同一局域網(wǎng)下就可以。

如果你需要這些工具，就快去下載用起來(lái)吧！