分享一下工作上使用到的好用工具，設計 APP UI 時，常常抓不準手機上看起來的感覺，因為電腦顯示器的效果跟手機顯示的效果不太一樣，而造成將設計導入到後的無論字體大小、欄位占比都跟實際在電腦上看得有落差，所以設計 APP 到最後，常常會希望將自己在 Sketch 設計的畫面同步導入到手機上觀看，來確實的掌握產品設計甚至動線。
當然可以把視覺設計圖輸出成 .png or .jpg 然後傳到手機或雲端空間，在用手機打開圖檔查看，但這種方式不但繁瑣，且若設計稿一多，設計師就崩潰了⋯
這篇主要是搭配 Sketch 軟體，介紹有同步預覽的功能的工具，PS 有另解，改天再說⋯。
Sketch Preview For IOS
下載地址：https://itunes.apple.com/us/app/sketch-mirror/id677296955?mt=8 （手機端下載 ）
軟體費用：$4.99 美金
環境條件：手機與電腦須在同一個 WIFI 下。
在 App Store 搜尋 Sketch Mirror App，從手機下載，
下載完，從手機端打開 Sketch Mirror App，
此時電腦 Sketch 軟體右上角的 Mirror 字樣會變成 Connent 字樣，代表手機與電腦 Sketch 已連結成功，
這時候只要勇敢大力地按下 Connent 按鈕，再瞧瞧你的手機，
Sketch 繪的 UI 界面出現在手機端啦！
此時只要像瀏覽照片的方式把手機往左或往右滑，即可切換 Sketch 裡的 Artboard ，是不是非常方便！
Sketch Preview For Android
Skala Preview 下載地址：http://bjango.com/mac/skalapreview/ （手機端＆Mac 端下載 ）
Sketch Preview Plugins 下載地址：https://github.com/marcisme/sketch-preview （ Mac 端下載 ）
軟體費用：All Free
由於 Sketch Mirror 目前只支援 IOS，所以為了要讓 Android 也能所見即所得，要準備的前置軟體比較多，
把 Skala Preview 跟 Sketch Preview Plugins 都分別下載完，使用前先確認：
1. 手機與電腦都在同一個 WIFI 下。
2. 正確 Sketch Preview Plugins 已安裝到 Sketch 中。
以上兩點確認完畢後，執行以下步驟
1. 先在手機端把 Android Skala Preview 打開
2. 在 Sketch 欲預覽的頁面（Artboard）按 Command + p 快捷鍵
這時會發現，剛剛下載電腦端的 Skala Preview 自動開起來了，等待手機與電腦的 Skala 自動連結後，Sketch 繪的 UI 界面出現在手機端啦！
但有一個小缺點，
此時無法再靠左右滑動來切換 Artboard 了，
若要看下一個 Artboard 則必須在下個 Artboard 再按一次 Command + p ，
有免麻煩～不過即使是這樣，對我來說已經算很方便了，畢竟這些軟體都是免費來著！
留言列表
