【 設計理論】詳細解析Sketch絕配神器Mirror搶先體驗

詳細解析Sketch絕配神器Mirror搶先體驗

這一次的教學是屬於設計理論領域中的設計理論的相關教學。

文章出處是來自優設的設計理論類文章,寫教學的作者是jingdesign91,感謝jingdesign91提供設計理論的實作教學。

教學大綱:

這已經是靜電的Sketch教室的第五章了,各位做APP設計的小夥伴們,一定會有這樣的需求,就是將自己的設計稿導入到自己的手機中看效果。的確,顯示器顯示效果與手機顯示效果有本質的區別,分辨率與精度,物理尺寸都不一樣,所以只有在手機中,才能切切實實的感


設計理論教學開始

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

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

在移動設備上預覽設計稿的幾種方式

1.如果是安卓手機,那麼使用數據線連接電腦,將設計稿拷貝到手機,再使用手機的圖片查看功能就可以看了。

2.iOS系統呢,稍微麻煩一點,需要你使用itunes將設計稿同步到手機,然後使用照片功能來查看。

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

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

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

Mirror的購買方法

我們打開sketch,大家看到工具欄右側的一個名為Mirror圖標了嗎?如下圖:

詳細解析Sketch絕配神器Mirror搶先體驗

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

使用Mirror的環境需求

以下兩種環境均可使用mirror,大家視自己的設備情況,自選一種即可。

1.使用wifi環境

mirror的使用環境很簡單,我們必須要保證運行sketch的電腦和運行Mirror的移動設備處於同一個網絡環境下。比如你使用自己的路由器上網,那麼pc和mirror保持在一個局域網內即可。如果在公司使用,因為網絡環境稍顯複雜,如果實在無法確保在一個網段中,靜電建議大家購買一個小型的路由器,建立一個簡單的無線網絡,這樣即可保證運行mirror的環境了。

2.使用數據線,將手機連接電腦

如果沒有wifi環境,使用usb數據線將手機連接在電腦上也是可以的,但靜電在測試中發現這種連接方式貌似不太穩定,有時候是沒法預覽的。所以還是推薦第一種方式連接。如果連接有問題,可以和靜電聯繫,微信jingdesign91。

Mirror使用步驟

使用上面的方式設置好后,我們就可以使用mirror直接預覽sketch中的設計稿了。

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

詳細解析Sketch絕配神器Mirror搶先體驗

2.接着我們在電腦上使用sketch打開已經設計好的文件。如果一切正常,那麼我們會發現,sketch界面mirror圖標的變化。mirror字樣變為connect。我們點擊connect,sketch中打開的設計稿即可在手機的mirror中顯示了。此時connect字樣變為disconnect,點擊disconnect,將中斷連接。

詳細解析Sketch絕配神器Mirror搶先體驗

詳細解析Sketch絕配神器Mirror搶先體驗

3.連接后如圖所示,文檔中的一個artboard將會出現在手機上。

詳細解析Sketch絕配神器Mirror搶先體驗

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

Mirror與PSplay對比

至此,mirror就演示完畢了。對比Ps play,這兩款預覽工具可以說是各有優劣。但畢竟mirror是sketch自帶的預覽工具,兼容性和執行效率都高於psplay。但是,Ps play仍然有着自己的獨特之處。

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

2.相對於psplay,預覽效率高。

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

4.缺點:無法設置預覽密碼,保密性差。另外,同一網絡中如有多台電腦運行sketch,不知如何進行判定以便選擇預覽的目標pc。

5.無法進行設計稿在手機端的保存。

6.無法運行於安卓設備。

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

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

關注我的微信:jingdesign91

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: 詳細解析Sketch絕配神器Mirror搶先體驗