搭配 sketch & zeplin 製作 iOS 的健康 App 和 App Store 畫面
sketch & zeplin 製作過程心得
App Store 畫面製作介紹
雖然此Monument Valley 2 App Store 畫面是iOS11版本的模板，但我同時有參考目前最新版本思考實際使用體驗來安排元件製作。
例如價錢、目錄、評分星星都有互動性，並且評分星星之後可以用寫程式方做出滑動評分的效果，所以選擇用UIButton。
中間灰色App資訊列和圖片展示在新版本中因往右滑動有更多資訊 (模板顯現不出來)，所以使用Scroll View 。
另外，頁面裡點選元件後，頁面就會自動往下滑到那個元件內容的位置的效果之後寫程式就可以做到，所以現階段使用的元件就不影響了。
iOS 健康 App畫面製作介紹
學習就從模仿開始，使用Sketch、Zeplin製作一個 iOS 的健康 App！
製作大致流程為：
- Sketch：找到要製作的模板(Screen)後，剪下需要的模板、圖片、icon後，輸出至Zeplin
- Zeplin：將顏色、圖片、icon等檔案輸出至Xcode的 Assets.xcassets
- Xcode：製作及排版過程中，會隨時回去Zeplin確認各個元件間的距離(points)、尺寸、設計等
詳細製作流程請見Peter的文章：
以下是製作後覺得可以先看過再動工的心得整理：
Sketch：設計使用者介面的工具
Sketch很清楚的把畫面的每個素材分好圖層了，所以可以先思考之後Xcode中元件如何設計，再去剪圖層才會比較省事。
- 畫面中會用到的圖層和屬性：圖片、Icon等確認後盡量一次輸出，
(基本流程：加入整個Screen →剪下圖片 →剪下Icon)
避免進入Xcode中作業後還要一直回「從Sketch 輸出圖層到Zeplin的流程」 - 剪下圖層的時 (圖層旁邊會顯示小刀子)，注意剪下最上層的資料夾只代表下該資料夾圖層而已，不等於把資料夾下的所有內容一起剪下了。
以下面連接到Activity分頁的按鈕為例，在Xcode中製作時需要的元件是Image View＋Button，所以只需要Image View中【背景帶透的腳踏車】圖。（Button在Xcode中設定紅底、圓角、白字即可）
圖1的圖層外觀在Sketch中如下圖2，有注意到已經剪下了Activity資料夾但資料夾內的小圖示旁卻沒有小刀子嗎？所以就需要把Activity的圖層展開找到【背景帶透的腳踏車】把他剪下來，如圖3
3. 有些icon被歸在Symbols的範疇內，所以第二點的圖層找不到時就要到Symbols裡剪。剪完後回到Screen，點選最外層的頁面資料夾(Health Data)，點選Plugins>Zeplin>Export Selected輸出。
每次只要發現漏剪要回頭補剪素材時，都要重新走過一次上面的流程。如果有更方便的方法，拜偷跟我分享一下！
【補充：關於同名稱元件命名這回事】
在Sketch中同名稱的元件(例如很多圖片都叫bitmap)，即使輸出到Zeplin中更改其中一個元件名稱，另一個同名元件會像是連動一樣的被一併更改。以下是我的解決方式：
- Sketch重新命名後再輸出到Zeplin
- 同名稱的元件先輸出一個進Xcode改名後，另一個再比照辦理
Zeplin : 解析元件屬性的工具
從Zeplin輸出顏色、圖片、Icon到Xcode。之後製作過程也需要隨時回Zeplin確認頁面元件絕對位置 、相對距離、尺寸、顏色等。
- Zeplin可以很方便的一次更改元件名稱後，一口氣輸出全部元件到Xcode。但如果有同名稱的元件的情況，就會被瘋狂覆蓋掉，所以要特別注意前面提到的改名稱問題。
- 點選元件，修改name的欄位就可以更改名稱了。
2. 絕對距離、相對距離、尺寸、顏色確認方式
以下面的分頁為例，元件選取後顯示紅框，元件資訊顯示在右側
- 絕對距離：選取元件左上角的點x,y(20,288)與頁面左上角x,y(0,0)的距離。單位為point。
- 相對距離：點選元件出現紅框後，游標滑到要比較的元件上。
Xcode中的元件或view座標是以Subview為原點，和Zeplin不太一樣
- 元件尺寸：點選元件後顯示在右側｛Width, Height｝，或是游標移到元件的邊緣
- 顏色：點選元件後顯示在右側Colors，輸出方式見第一點的文章連結
Xcode
- 因為我參考的for iphone 8的模板，所以要注意模擬器和畫布的尺寸要一起配合。但因為Xcode中沒有 iphone 8的選項，所以我選擇螢幕尺寸和 iphone 8同樣是4.7吋的iphone SE二代
- 用到Tab Bar Controller 、Navigation Controller、Table View Controller，所以熟悉個別的做法後比較好上手
