如何模仿製作現成的 iOS App 畫面

有兩個方法，搭配 Sketch 和 Zeplin & 搭配預覽程式 App。剛開始學習的朋友，可先採用比較簡單的第二個方法，搭配預覽程式 App。

方法一: 搭配 Sketch 和 Zeplin

Sketch App 下載連結

The digital design toolkit

Zeplin App 下載連結

Zeplin

從以下連結下載喜歡的 App 畫面 sketch 檔

iOS App 畫面 sketch 檔下載資源

關於如何使用 sketch & zeplin 取得畫面裡元件的大小位置顏色，以及如何生成 App 用到的 assets，可參考以下連結。

如何從 Zeplin 查詢 App 畫面規格

實例說明: 搭配 sketch & zeplin 製作 iOS 的健康 App 和 App Store 畫面。

搭配 sketch & zeplin 製作 iOS 的健康 App 和 App Store 畫面

如果還不太會 Sketch 和 Zeplin 的朋友，也可以先採用比較簡單的方法二。

方法二: 搭配預覽程式 App

• 取得 App 畫面。

從 iPhone 螢幕截圖，用 AirDrop 傳到 Mac。(ps: 不要用 LINE，LINE 會壓縮圖片)

• 使用預覽程式 App 測量元件的大小位置。

從 preview (預覽程式) 查詢 App 畫面裡元件的大小位置