搭配 sketch & zeplin 製作 iOS 的健康 App 和 App Store 畫面 — 漂亮的ＵＩ設計！！！

這次模仿製作IOS的APP設計，第一次使用sketch和zeplin兩個軟體模仿，這真的是像我這種沒有設計感的人的救星啊！！！，你可以從sketch去分析你要的圖片或者色塊，甚至設計你的UI版面。

這次是將sketch檔案中需要的圖片及文字分別進行make exportable，以此可以讓sketch需要傳輸到zeplin進行模仿。需要特別注意的是，若是要讓symbel類型的圖傳送到zeplin，則需要點兩下會帶到symbel區塊，找到要傳輸的symbel，才能進行make exportable。最後選擇左上角 plugins -> zeplin -> Exported Selected…，將已處理好的檔案輸出到zeplin。

在zeplin中，可由剛剛傳輸過來的檔案進行分析，尤其是UI元件的位置及大小，真的會讓我們在模仿的過程容易並精準很多，甚至更容易去設計出類似的APP。

這次我是先參考圖中的設計去自行模仿，看自己的能力到哪裡，而之中遇到的問題原本我以為是在cells中加入上方四格圖片，後來參考潘帥之後，才發現可以在table view和navigation bar 之間加入一個view進行設計。

另外就是aligment欄位可將文字自動靠左上固定，然後在設計文字在圖片中的距離可以發現，裡面的距離是指你所在範圍的距離，而不是你離整個ＡＰＰ版面的距離，這點可以注意一下。

另外，我們可以在Tint部份去改變icon的圖片顏色，這點我自己是覺得很神奇啊～

最後的最後，之後應該會花點時間學習應用sketch看能不能增加一點自己的設計力，看什麼時候可以設計出那麼漂亮的版面！！！