搭配 sketch & zeplin 製作 iOS 的健康 App 和 App Store 畫面
本篇文章的目標在讓剛學會 Storyboard 的朋友利用 sketch & zeplin，一步步模仿做出和 iOS 的健康 App 一模一樣的畫面。不過由於假設讀者還不會 Auto Layout 技術，因此接下來的教學將以做出符合 iPhone 8 尺寸的畫面為目標，不考慮其它尺寸，然後在文章的最後再補充一些以 Auto Layout 方式製作時需注意的地方。
實作健康 App 畫面
1 下載 Sketch App
Sketch App 是目前許多美術設計師拿來設計 App 的軟體。雖然他不是免費的，不過可以免費下載試用。
2 下載 iOS 11 畫面的 sketch 檔，裡面包含我們準備製作的健康 App 和 App Store 畫面。
健康 App 的畫面在 iOS 11 GUI for iPhone X and iPhone 8。
有興趣製作其它畫面的朋友，也可以參考 iOS 14 畫面的 sketch 檔。
3 雙擊 iPhone 8 iOS 11 GUI 的 sketch 檔。
4 從 Sketch 的視窗找尋我們準備製作的 Health Data 畫面。
5 參考以下連結，將 Health Data 畫面加到 Zeplin 專案。
6 從 Zeplin 將顏色 & 圖片輸出到 Xcode 的 assets
7 參考 Zeplin 的畫面，在 Main.storyboard 製作畫面。
畫面架構如下圖所示，我們只需用 table view controller 設計 Health Data Tab 的畫面，因此其它三個 tab 的畫面搭配空白的 view controller 就好。
8 設定 tab 的 icon 圖片和文字。
提示: 從 tab bar item 設定。
9 調整 tab icon 和文字的顏色。
從 Zeplin 點選紅色的 tab icon，查詢它的 rgb 數字。
從 tab bar 的 Image Tint 設定剛剛查到的 rgb 數字。
10 將 navigation bar 放大。
勾選 Navigation Bar 的 Prefers Large Titles。
11 設定 Navigation bar 的標題和 bar button item。
設定標題。
設定 bar button item。
12 設定 Navigation bar 上 button 的顏色。
設成跟 tab 一樣的紅色。
13 將 table view 變成 Static Cells。
14 加入 table view header 容納上方的四格圖片 。
我們想要加入 table view header 容納上方的四格圖片，不過首先我們必須從 Zeplin 查詢容納四格圖片需要的高度。
點選上方的 navigation bar，查詢 bar 底線的座標。
點選 Body Measurements 的 cell，查詢 cell 的 Y 座標。
navigation bar 的底線在 Y 座標 116，而第一個 cell 的 Y 是 470，所以容納四格圖片需要的高度為 470–116，等於 354。
從 Objects Library 拉出 View ，將它拖曳到 Table view 和 Section 之間，成為 Table view header。
將 View 的高度設為 354
15 在 table view header 裡製作四格圖片。
在 Zepline 查詢每格圖片的大小，座標，顏色。
點選紅色的 Activity 區塊查詢它的大小。
我們也可以查詢元件之間的距離，比方點選紅色的 Activity 區塊，然後再將游標移到 navigation bar，取得 Activity 區塊和 bar 的間距為 8。
點選文字 Activity，查詢文字的大小，顏色，字型。
用一個 button 和一個 image view 製作 Activity 區塊，製作時有以下幾點需注意的地方。
(1) button 的背景色為紅色，標題為 Activity，image view 則顯示腳踏車的圖片。
(2) 文字 Activity 是 button 的標題，我們特別調整它的 Alignment 欄位，讓文字靠左上。
(3) 為了讓文字跟旁邊有點距離，我們再調整 button 的 Title Insets。
至於 Insets 的數字，則可從 Zeplin 點選 Activity 後，移動游標查詢它跟周圍的間距得知。
在 Zeplin 點選文字時，還可點選右邊 Content 旁的圖片 copy 文字，然後再貼到 storyboard 上。
(4) 設定 button 的圓角。
圓角的數字可在點選 Activity 區塊後，由它的 Radius 欄位得知。
(5) image view 的大小跟顯示的圖片一致，可利用快速鍵 cmd + = 讓它等於圖片的大小。
App 執行後顯示的樣子。
接著請用一樣的方法，製作其它三格圖片。
16 製作下方的 cell 內容。
從 Zeplin 查詢 cell 的高度大概為 51。
在 Storyboard 點選 Table View，設定它的 Row Height。
在 Cell 裡放上一個 image view 和一個 label，並且設定 Cell 的 Accessory 為 Disclosure Indicator。
17 調整分隔線左邊的間距。
在 Zeplin 畫面點選分隔線，向左移動游標後，取得間距 70。
在 Storyboard 點選 Table View，將 Separator Inset 設為 Custom 後，設定 Left 調整間距。
App 執行後顯示的樣子。
Auto Layout 製作滿足不同 iPhone 尺寸的畫面
照著以上步驟，即可順利打造跟 iPhone 8 健康 App 一模一樣的畫面。如果之後想改用 Auto Layout，主要的差別在使用 Zeplin 時，將以測量元件彼此間的間距為主，因為 Auto Layout 大部分都是設定元件間的間距。比方下圖設定 Activity 區塊和左邊界的間距為 8。
另外採用 Auto Layout 時，元件的大小可能也會不太一樣。某些元件的大小將是維持固定比例，而不是固定大小。比方下圖 Activity 區塊的寬度將等於螢幕寬度扣除三個固定的間距後除以 2
Activity 區塊的寬度 =(螢幕寬度-8-8-7)/2
因此設定 Auto Layout 條件時，我們會設定 Activity & Mindfulness 的 button "Equal Widths”。
而 button 的高度則可以比例算出。原本 button 的寬高是 176 * 165，因此我們將 button 的 Aspect Ratio 條件設為 16:15。
補充: 實作 App Store 畫面的注意事項
App Store 上方的 navigation bar 是透明的，有興趣的朋友可參考以下連結。
