App Icon 設計技能
觸發條件
用於任何新的 App 圖示、圖示重新設計、圖示審查或 Apple App 圖示匯出請求。當生產規格重要時，請查閱 Apple 最新的設計與技術文件。
流程
- 確定 App 的核心目的與品牌語言。如果先前已建立品牌形象，請沿用；否則，選擇一個獨特的視覺隱喻。
- 將隱喻簡化為一個可辨識的核心符號，採用大膽、填充、簡單的形狀與清晰的輪廓。避免微小的細節、雜亂的紋理、細線條、螢幕截圖、不必要的文字以及過度的光澤感。
- 選擇經過深思熟慮且克制的色板，並確保前景/背景有清晰的對比。將主要圖示在視覺上居中，並為系統遮罩預留足夠的安全區域。
- 設計時要確保在小尺寸下仍可辨識。分別以完整尺寸、180 px、60 px 和 30 px 進行預覽 (這些是設計測試，非 Apple 規定的像素要求)。
- 考慮預設、深色、淺色與著色模式。在各種外觀模式下都要保持概念與可辨識性。
- 檢視 QA 檢查清單；簡化任何在小尺寸下會變成雜訊的元素。
- 以可用工具實際支援的格式產出最高品質的素材。切勿聲稱擁有尚未製作的向量/可編輯來源或變體。
Apple 人機介面指南
- 偏好簡潔與即時可辨識性。一旦系統添加了高光與陰影，精細的特徵可能會變得雜亂。
- 偏好插圖而非照片，且不要單純複製 App 的 UI。
- 避免使用極細的線條和尖銳的角度，因為它們的細節在小尺寸下會遺失。
- 避免使用非必要的文字、口號或特定平台的陳述。
- 不要複製 Apple 硬體。
- 使用未經遮罩的正方形圖層；系統會自行套用圓角/圓形遮罩。請不要將圓角直接融入基礎圖稿中。
- 將重要內容居中放置，以免系統遮罩將其截斷。
- 圖示應在不同裝置與外觀模式下保持視覺一致性。
Apple 尺寸與系統形狀 (驗證日期：2026-10-24)
| 目標平台 | 畫布尺寸 | 系統遮罩 |
|---|---|---|
| iOS, iPadOS, macOS | 1024 × 1024 px | 圓角矩形 |
| watchOS | 1088 × 1088 px | 圓形 |
| visionOS | 1024 × 1024 px | 圓形 |
| tvOS | 800 × 480 px | 圓角矩形 |
- 對於便攜式匯出，使用 sRGB；根據文件說明，Apple 平台也支援 Display P3。
- 對於現代的 Apple 工作流程，建議使用分層圖稿和 Icon Composer 來預覽各平台與外觀變體 (預設、深色、淺色淺色/深色、著色淺色/深色)。
- 盡可能以向量格式繪製圖稿，並將每個可獨立調整的圖層匯出為 SVG，同時將文字轉換為外框。如果 SVG 功能不受支援，PNG 圖層也是合適的選擇。
- 在準備 Liquid Glass 分層圖示時，推遲模糊、陰影、高光效果、半透明、不透明度、漸層與背景效果，交由 Icon Composer 處理。
- 背景必須覆蓋整個畫布。對於靜態 iOS 圖示，預設使用完全不透明且滿版的背景。透明的孤立字形是不同類型的素材，而非完整的圖示。
- 系統會套用遮罩；請勿在圖稿圖層上匯出遮罩幾何形狀。
- 對於靜態圖示工作流程，可以交付平坦的 1024px PNG，但它不等同於分層的 Icon Composer
.icon素材。
QA 檢查清單
- 一個令人難忘的概念，可辨識的輪廓
- 在小尺寸和灰階下清晰可讀
- 有限的色彩與強烈的對比
- 無不必要的文字、紋理、精細細節或螢幕截圖
- 視覺居中與安全的邊緣間距
- 來源圖稿為正方形且未經遮罩，背景為滿版
- 已針對深色、著色和淺色外觀進行審查
- 正確的目標平台尺寸、色彩空間與匯出格式
- 關於可編輯性、圖層和格式的聲明與實際檔案相符
使用者目前的腦力/數學 App：可選的品牌特定外觀覆蓋
僅針對此特定專案使用，而非所有 App：
- 使用最多三種純色；色板取自鈷藍色/電光藍、紫色與洋紅-粉紅色 (或適當情況下的深海軍藍)。
- 除非使用者覆寫，否則不使用漸層。
- 抽象、簡化的腦部輪廓，搭配少數幾個大膽的腦葉；不使用超詳細的解剖學插圖。
- 在小圖示尺寸下應簡潔、可辨識且具有吸引力。深度應有所節制，且不應增加更多顏色。
- App 圖示背景是構圖的一部分，不應透明 (除非要求單獨的符號圖層)。
影像生成提示範本
「為 [APP] 建立一個正方形的 App 圖示，包含一個令人難忘的中心符號 [SYMBOL]，由少量、純色、高對比的形狀構成，採用 [PALETTE] 色板，置於滿版不透明的 [BACKGROUND] 背景上。根據視覺重量居中，在外部邊緣周圍預留充足的呼吸空間，避免漸層 [如果要求]、文字、介面元素與細微細節，確保在小尺寸下具有強烈的可辨識性，且不使用內建的圓角遮罩。」
資訊來源
- Apple HIG App 圖示：https://developer.apple.com/design/human-interface-guidelines/app-icons
- Apple 的 Icon Composer 工作流程：https://developer.apple.com/documentation/xcode/creating-your-app-icon-using-icon-composer
- Apple 設計資源：https://developer.apple.com/design/resources/
- Apple Icon Composer：https://developer.apple.com/icon-composer/
設計建議是綜合性的；請在發布前檢查最新的 Apple 規格。此為可攜式技能文件，不代表其已註冊為可執行系統/插件技能。