模仿 App Store 上架的 App，製作一頁精美的 App 畫面
Published in
8 min readDec 5, 2016
模仿 App Store 上架的 App，製作一頁精美的 App 畫面。
ps: 修課大學生須使用 SwiftUI。
範例。
功能需求
- 模仿 App Store 上架的 App，製作一頁精美的 App 畫面。
- 只須做出一頁的靜態畫面，不用做出畫面點擊或捲動的效果。
- 作業發表時，分別放上 App 畫面的螢幕截圖跟自己製作的 App 畫面，兩者愈像分數愈高。
- 內容的圖片跟文字不用跟 App 一樣，比方音樂 App 畫面上的專輯圖片可以採用自己喜歡的圖片。
如何取得上架 App 的畫面截圖
- 方法 1: 從 iPhone 或 Apple silicon Mac 的 App Store 下載 App，然後螢幕截圖，再用 AirDrop 傳到 Mac。(ps: 不要用 LINE，LINE 會壓縮圖片)
- 方法 2: 打開模擬器內建的 App，然後螢幕截圖，產生的圖片將存在桌面。
- 方法 3: 只有 Android 的同學，也可以模仿 Android App。
調整圖片的尺寸
iPhone 有不同的解析度，比方 iPhone 15 pro 是 3x 解析度，iPhone 8 是 2x 解析度。而開發 App 時，元件位置大小的單位是 point。3x 解析度的圖片尺寸除 3 後才是 point 的數字， 2x 解析度的圖片尺寸除 2 後才是 point 的數字。比方 iPhone 15 pro 的圖片尺寸為 1179 * 2556 pixel，它將等於 393 * 852 point。
關於各個 iPhone 機型是 2x 或 3x 的解析度，可參考以下連結。
因此我們截圖後可先調整圖片的尺寸，依據 3x 或 2x 解析度將它改成除 3 或除 2 的大小，方便等下查詢畫面裡元件的大小位置。
查詢畫面裡元件的大小位置顏色
- 方法 1: 將圖片上傳到 iview，從網站查詢。
https://yangcha.github.io/iview/iview.html
- 方法 2: 從 preview App 查詢。
- 方法 3: 使用 Mac 內建的 Digital Color Meter 獲取顏色的 RGB。
