#14 搭配 Sketch 和 Zeplin ，製作 iOS App 畫面

作業目的: 學習搭配 Sketch 和 Zeplin， 製作 iOS App 畫面。

• 簡單版: 沒有搭配 Auto Layout。
• 進階版: 搭配 Auto Layout。

開發 iOS App 時，工程師和設計師的溝通一直是個麻煩的問題。從前設計師往往要在 App 畫面上標示元件的位置大小顏色等資訊，雙方也要不斷地訊息討論，工程師才能了解畫面排版的細節。(因此工程師和設計師還滿容易日久生情的 ? )

現在有了 Zeplin 的幫忙，設計師只要將 sketch 或 photoshop 製作的 App 畫面加到 Zeplin 的專案裡，工程師即可從專案看到 Zeplin 自動標示的 App 畫面細節。

Sketch 下載連結

Professional Digital Design for Mac

Zeplin 下載連結

Zeplin

請從以下網路上設計師們分享的 iOS App sketch，挑選兩個畫面加到 Zeplin 專案，再依據標示的畫面細節，從 Xcode 練習製作畫面。

iOS 11 GUI for iPhone X and iPhone 8

注意: 由於許多 sketch 檔設計的畫面用到字型 San Francisco，建議在 Mac 上安裝字型 San Francisco，到時候 sketch 顯示的 App 畫面才不會跑版。

安裝 San Francisco 字型檔，讓 sketch 顯示的 App 畫面不再跑版

iOS App 畫面的 Sketch 檔資源

iOS App 畫面 sketch 檔下載資源

相關教學文章

如何將 Sketch 的 App 畫面加入 Zeplin 專案

如何從 Zeplin 查詢 App 畫面規格

從 Zeplin 將顏色 & 圖片輸出到 Xcode 的 assets

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

有興趣的同學也可以參考六角學院的精神時光屋，裡面有許多設計者創作的 iOS App 畫面，有些包含了方便我們開發 App 的線上標示文件。

The F2E - 前端 & UI 修練精神時光屋

作品集

[AppDev] #4 善用Sketch與Zeplin快速仿作單頁 App

AutoLayout Practice

搭配 sketch & zeplin 製作 iOS 的Apple Music畫面