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

感覺每天都在趕作業🤣
工作忙碌又累只能分段完成階段性作業…..

原本看得眼花撩亂的 Sketch 和 Zeplin，原來他就像範本一樣，指導你如何輸入元件的比例和大小，再加上Peter的教學文和LINE指導，我才做得出來👏

首先！你要下載這兩個APP，和他的檔案！

再從 iPhone 8 iOS 11 GUI 的 sketch 檔中找到 Health Data 並開啟(如圖)

接著請透過以下連結，開啟並下載圖片檔。
https://www.dropbox.com/s/8jt29qvb4kfus81/Health%20Image.zip?dl=0
https://www.dropbox.com/s/ugg64ricq6kehk8/AppStore.zip?dl=0

將下載的圖片檔拖曳到 Assets.xcassets

接著就到了看圖說故事的時候了～

參考 Zeplin 的畫面，在 Main.storyboard 製作畫面！

而在storyboard中我們需要先設一個 Table View Controller 後，並叫出 navigation 和 tab bar controller，再設三個view將tab bar連結到其中！(如圖)

注意：
・tab bar controller 需要設定為 Is Initial View Controller 才不會黑頻。
・連接 Segue 時，需設定為 view controllers。

接著，依序新增 Icon 圖案！

依序點選 Zeplin 中的各項元件，得知參數。

再依序新增元件，如：Image view. Button. Label. 並依照 Zeplin 中的規格，仿照出一樣的 APP 畫面！

總結：
製作APP感覺越來越不簡單，即便只是個單一畫面，隨便都可以花上一兩小時，還不包含 Code，難怪製作一個完整的 APP ，需要一個團隊… 一個人可能會做到天荒地老…

最後，感謝大家觀賞，也感謝 Peter 的指導😁