20191006

前言

今天的內容一樣是代辦清單的實作，接者製作第二個頁面(新增)與第三個頁面(編輯)。

現在，我們馬上開始！

練習紀錄

新增頁面

1. 上方有個Back，是因為有加入了Navagation Controller

2. 背景色為RGB(126/201/255)，之後考慮在用程式製作漸層色
   

3. Button文字搭配SF Symbols符號，請搭配iOS13服用 (ref12)

4. Title直接使用UILabel

5. 文字輸入使用UITextField

6. 使用UIButton按鈕

SF Symbols

從Apple開發者頁面(ref12)下載後，可以看到完整版，使用上非常方便

編輯頁面

直接偷懶複製新增頁面來修改，大致上與新增頁面相同，差別在文字與按鈕不同而已

• 複製整個View Controller => 先選擇左邊選單中的View Controller，然後直接按下『cmd+c => cmd+v』複製

完成圖

本日完成進度圖

左到右: List, Create, Edit

總結

在今天的練習中，加入了第二頁新增與第三頁編輯的頁面，並搭配了SF Symbols圖案(ref12)，有興趣的讀者可以自行下載使用。由於作者也不是設計的，UI設計上十分簡陋，還請多多包涵。

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

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/

12. Apple SF Symbols
    https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/