@JingDesign?：設(shè)計師最苦逼的事情莫過于被折翼的天使指點江山，鑒于此，靜電選擇了離神靈比較近的雍和宮附近上班，以求得到保佑和庇護(hù)。香也上了，頭也磕了，可是效果如何呢？佛祖說，要有一顆虔誠的心，所以他賜予了我sketch；佛祖說，要有敬畏之心，于是Mirror來了，每天照照鏡子，看到里邊的自己，哇，超帥！瞬間工作動力UP有木有？ 言歸正傳，看看sketch的絕配，Mirror能給我們帶來什么驚喜！

這已經(jīng)是靜電的Sketch教室的第五章了，各位做APP設(shè)計的小伙伴們，一定會有這樣的需求，就是將自己的設(shè)計稿導(dǎo)入到自己的手機中看效果。的確，顯示器顯示效果與手機顯示效果有本質(zhì)的區(qū)別，分辨率與精度，物理尺寸都不一樣，所以只有在手機中，才能切切實實的感受到做APP感覺. 所以，靜電建議那些初學(xué)APP設(shè)計或者從網(wǎng)頁轉(zhuǎn)到APP設(shè)計的同學(xué)，一定要將設(shè)計稿在手機端查看，找感覺，感覺到了，以后就可以更方便來使用電腦來做APP設(shè)計稿了.

在移動設(shè)備上預(yù)覽設(shè)計稿的幾種方式

1.如果是安卓手機，那么使用數(shù)據(jù)線連接電腦，將設(shè)計稿拷貝到手機，再使用手機的圖片查看功能就可以看了。

2.iOS系統(tǒng)呢，稍微麻煩一點，需要你使用itunes將設(shè)計稿同步到手機，然后使用照片功能來查看。

3.還有稍微簡化一點的，我們可以使用現(xiàn)成的工具，在電腦和手機端同時登錄一個QQ賬號，使用QQ的傳文件到手機功能，即可查看設(shè)計稿了。

4.使用Psplay軟件。具體可以直接在手機的應(yīng)用商店中搜索此軟件。安卓與iOS端都可以使用。

這個軟件超級方便！想要下載的同學(xué)右戳：《騰訊ISUX移動終端設(shè)計神器：Ps Play！移動設(shè)計零阻力》

這個時候，我們會遇到一個問題，通過以上的方法，不是不可以查看，只是這么預(yù)覽，大家不會感到特別麻煩嗎？當(dāng)然，在我們使用photoshop進(jìn)行設(shè)計的時候，有騰訊出品的預(yù)覽神器Ps play，但這個時候遇到一個最大的問題，就是sketch的文件不支持ps中直接預(yù)覽，我們需要在sketch中將設(shè)計稿導(dǎo)出為一般的圖片格式，比如png，jpg等，然后拖到photoshop中使用psplay預(yù)覽。這個過程也是稍顯繁瑣。靜電在沒有購買這款Mirror的時候，也是使用這種方式來預(yù)覽的。但是隨著設(shè)計稿越來越多，我實在受不了了。那個Mirror的圖標(biāo)點了又點，今天，終于忍不住，打算入手這款付費軟件了。

Mirror的購買方法

我們打開sketch，大家看到工具欄右側(cè)的一個名為Mirror圖標(biāo)了嗎？如下圖：

但這個功能是需要付費使用的，或者說，他就是一個付費的iOS應(yīng)用而已. 所以，直接拿起iphone，打開APPstore， 搜索Sketch Mirror，交30RMB購買吧. 這個時候有同學(xué)可能會問，android端有mirror嗎？靜電特地去官網(wǎng)看了一下，很抱歉，木有，官網(wǎng)的Q&A中，作者明確表示他們沒有興趣開發(fā)安卓版本，那么使用安卓手機的朋友還是暫時使用Ps play吧。

使用Mirror的環(huán)境需求

以下兩種環(huán)境均可使用mirror，大家視自己的設(shè)備情況，自選一種即可。

1.使用wifi環(huán)境

mirror的使用環(huán)境很簡單，我們必須要保證運行sketch的電腦和運行Mirror的移動設(shè)備處于同一個網(wǎng)絡(luò)環(huán)境下。比如你使用自己的路由器上網(wǎng)，那么pc和mirror保持在一個局域網(wǎng)內(nèi)即可。如果在公司使用，因為網(wǎng)絡(luò)環(huán)境稍顯復(fù)雜，如果實在無法確保在一個網(wǎng)段中，靜電建議大家購買一個小型的路由器，建立一個簡單的無線網(wǎng)絡(luò)，這樣即可保證運行mirror的環(huán)境了。

2.使用數(shù)據(jù)線，將手機連接電腦

如果沒有wifi環(huán)境，使用usb數(shù)據(jù)線將手機連接在電腦上也是可以的，但靜電在測試中發(fā)現(xiàn)這種連接方式貌似不太穩(wěn)定，有時候是沒法預(yù)覽的。所以還是推薦第一種方式連接。如果連接有問題，可以和靜電聯(lián)系，微信jingdesign91。

Mirror使用步驟

使用上面的方式設(shè)置好后，我們就可以使用mirror直接預(yù)覽sketch中的設(shè)計稿了。

1.手機端，打開mirror，此時顯示的是一幅靜止畫面，告訴你要在sketch中進(jìn)行操作才能查看文檔。這個時候手機端是無法進(jìn)行任何操作的。

2.接著我們在電腦上使用sketch打開已經(jīng)設(shè)計好的文件。如果一切正常，那么我們會發(fā)現(xiàn)，sketch界面mirror圖標(biāo)的變化。mirror字樣變?yōu)閏onnect。我們點擊connect，sketch中打開的設(shè)計稿即可在手機的mirror中顯示了。此時connect字樣變?yōu)閐isconnect，點擊disconnect，將中斷連接。

3.連接后如圖所示，文檔中的一個artboard將會出現(xiàn)在手機上。

4.此時，如果我們想切換page或者artboard，則要通過手機來操作，如下圖。這一點換個Ps play的所見即所得功能不太一樣。點擊下面界面的左下角或者右下角即可切換page或者artboard，左右滑動可以切換artboard，非常方便。靜電這里要贊一下mirror，文件切換速度非常快，相比Ps play的速度，mirror的速度明顯優(yōu)于Ps play。

Mirror與PSplay對比

至此，mirror就演示完畢了。對比Ps play，這兩款預(yù)覽工具可以說是各有優(yōu)劣。但畢竟mirror是sketch自帶的預(yù)覽工具，兼容性和執(zhí)行效率都高于psplay。但是，Ps play仍然有著自己的獨特之處。

1.mirror可以有效提升我們使用sketch來設(shè)計app界面的效率

2.相對于psplay，預(yù)覽效率高。

3.左右滑動即可切換artboard。

4.缺點：無法設(shè)置預(yù)覽密碼，保密性差。另外，同一網(wǎng)絡(luò)中如有多臺電腦運行sketch，不知如何進(jìn)行判定以便選擇預(yù)覽的目標(biāo)pc。

5.無法進(jìn)行設(shè)計稿在手機端的保存。

6.無法運行于安卓設(shè)備。

總之，mirror作為與sketch密切結(jié)合的軟件，表現(xiàn)已經(jīng)超出靜電的預(yù)期。mirror與sketch結(jié)合將大大提升設(shè)計師的效率。在這個效率高于一切的時代，你還在等什么，說不定，我們焦急等待的幾秒鐘內(nèi)，無數(shù)靈感已從大腦中飛逝而過，所以30元人民幣還是物超所值的，馬上去APP store下載吧。

mirror下載地址：https://itunes.apple.com/cn/app/sketch-mirror/id677296955?mt=8

關(guān)注我的微信：jingdesign91

Sketch設(shè)計教室系列好文：

附上貼心小技巧：
《UI設(shè)計師新寵！聊聊sketch那些方便好用的貼心功能》

從零開始學(xué)Sketch教程合集！
《SKETCH設(shè)計教室！從零開始學(xué)APP設(shè)計利器SKETCH（一）》
《SKETCH設(shè)計教室！從零開始學(xué)APP設(shè)計利器SKETCH（二）》
《SKETCH設(shè)計教室！帶你了解超好用的SKETCH插件》

原文地址：bbs.guimobile
作者：@JingDesign
uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量77萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：