20191005

前言

今天的內容一樣是代辦清單的實作，首先從樣板的轉換開始，接者先做一個沒有資料的App畫面。

現在，我們馬上開始！

Sketch樣板

1. 我們先將需要轉換為圖片的圖層，設定為可輸出(按下＋號)，有不少需要調整一下，滿花時間的。
   

2. 接者將樣板輸出到Ziplin
   

3. 在Ziplin內的圖片，即可直接下載
   

4. 相關的大小可以透過Ziplin觀察
   

練習專案

在專案中參考Ziplin的畫面，陸續加入背景與幾個UI元件。
並列出一些練習上的操作，當然每個人作法可能會略有不同。

• 使用UIImageView滿版，作為背景圖

• 上方的人像圖也是使用一個UIImageView

• 上方的SearchBar，使用一張圖片，並加上一個按鈕一個TextVeiew

• 下方的『Add New Task』使用UIButton按鈕，並設定背景圖

• 中間的清單使用TableView來達成

• 由於ViewController不支援TableView Static Cell，因此使用『Container View』來做包裝

• TableViewController中的Cell，先填入固定資料用來顯示畫面

完成圖

本日完成進度圖

總結

在今天的練習中，在UI相關的部分花了不少時間，因此只完成了第一個靜態頁面，另外一頁將會在隔天的文章繼續做介紹。此外，關於Sketch & Ziplin有興趣的讀者，可以參考其他資料，作者也是剛接觸不久。規劃功能所使用的心智圖檔，也會持續更新內容，也放在Github上。

今天的內容就到這邊，感謝讀者們的閱讀。

Github:

https://github.com/chiron-wang/IT30_11

參考資料與延伸閱讀

1. 深入淺出 iPhone 開發 (使用 Swift4) - WeiWei
   https://www.udemy.com/course/iphone-swift4/

2. iOS 12 App 開發快速入門與實戰(繁體中文)
   https://www.udemy.com/course/ios-12-app/

3. 心智圖軟體Xmind
   https://www.xmind.net/

[樣板來源網站]

4. sketchappsources
   https://www.sketchappsources.com/

5. sketchrepo
   https://sketchrepo.com/

6. freebiesbug
   https://freebiesbug.com/sketch-freebies/

7. mockplus
   https://www.mockplus.com/blog/post/sketch-app-resources

[Sketch & Ziplin]

8. 如何將 sketch 畫面裡的圖片輸出到 zeplin，輸出 App 需要的 assets
   https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E5%A6%82%E4%BD%95%E5%B0%87-sketch-%E7%95%AB%E9%9D%A2%E8%A3%A1%E7%9A%84%E5%9C%96%E7%89%87%E8%BC%B8%E5%87%BA%E5%88%B0-zeplin-9faa86ce1c90

9. 給工程師的 Sketch Prototyping 簡易入門教學
   https://blog.techbridge.cc/2016/06/04/sketch-prototyping-for-engineer/

10. 自學介面設計及Sketch資源分享
    https://vocus.cc/kylehsiadesign/5c7d452afd897800016d59ad

11. Zeplin, 跨越工程師與設計師的鴻溝
    https://wcc723.github.io/tools/2015/04/09/zeplin-intro/