HIG iOS 翻譯 Icons and Images｜Icon和圖像
Icons and Images Icon和圖像
Image Size and Resolution 影像尺寸和解析度
App Icon
System Icons 系統IconImage Size and Resolution 影像尺寸和解析度
iOS螢幕使用點（Points）作為最基本的單位，這些點顯示在畫面的像素（Pixel）。標準解析度為1:1（或@1x），一像素等於一點。高解析度顯示有更高像素密度，如2.0或3.0（@2x和@3x）。結論而言，高解析度的顯示裝置需要更高畫素的影像
舉例，假設你有個標準解析度（@1x）圖片為100px × 100px，那@2x版本的圖片應為200px × 200px，@3x為300px × 300px
為所有裝置提供高解析度的影像 根據設備的不同，你必須依照特定尺寸來輸出多種尺寸的影像
設計高解析圖稿
使用8px × 8px 網格*¹ 網格使線條保持精準並確保內容在所有尺寸需要更少修飾和銳化。將影像邊界對齊網格，在縮小時可能會出現可能會出現半格像素或模糊細節
以合適的格式產出圖稿 一般來說，點陣圖*²使用去交錯*³PNG檔案。PNG支援不透明度、無損，所以壓縮圖檔不會模糊細節或改變顏色。對於使用陰影效果、材質複雜的圖稿是個好選擇。照片使用JPEG。它的壓縮算法通常會產出無損格式且難以發現失真。然而，PNG的擬真App Icon看起來最好。將PDF用於需要高解析度的Glyph和其他向量圖稿
PNG圖稿使用8-bit色彩，不需24-bit色彩 使用8-bit在不影響影下品質的情況下減少檔案大小，此方式不適用於圖片
在檔案大小與品質之間找到平衡 大部分的JPEG可以在不被發現降低解析度的情況下壓縮。即使是小量壓縮也能節省大量空間。試著壓縮每個相片以找尋最佳數值和可接受的結果
提供替代的影像文字標籤或Icon 替代文字標籤在螢幕中是不可見的，但它使得可聽見的VoiceOver描述螢幕中的內容，使視力障礙者容易體驗
App Icon
每個App都需要美觀、容易記得的Icon，在App Store或主畫面中吸引目光。Icon作為第一個和使用者溝通的物件， 用途需要一目瞭然。它也將出現在整個系統之中，例如設定或搜尋結果
簡化 找到App單一元素以及App目的並以簡單的元素傳達，以簡單、獨特的造形呈現。謹慎地增加細節。若Icon的造形太過複雜，細節可能會難以辨認，尤其是在較小的尺寸
提供單一焦點 以單一、中心點設計Icon以吸引目光並清楚辨識你的App
設計易辨識的Icon 人們不必別分析即可了解Icon代表什麼。例如Mail以信封呈現，它的通用性指向所有郵件功能。花時間設計美觀的Icon並確保抽象的Icon可以清楚傳達App的功能及目的
保持背景簡化並避免半透明 確保Icon是不透明的且背景不混亂。提供簡單的背景以避免視覺壓迫其他App。不要將內容填滿整個Icon
只在必要時使用文字，或者文字是LOGO的一部份 主畫面中的Icon下方即App的名稱。不需要包含非必要文字和名稱重複，或告訴使用者該怎麼做，像是“觀看”或“播放”。若設計中包含文字，強調和App服務相關的用語
勿包含圖片、螢幕截圖或介面元素 相片細節在小尺寸中難以觀看。App Icon以截圖呈現過於複雜，且無法幫助傳達App目標。Icon中使用介面元素使人誤導或困惑
勿複製Apple產品 Apple產品均受版權保護，無法重製於Icon或圖像中。一般來說，避免顯示裝置的拷貝，由於設計經常更改，若無即時更新可能會使Icon顯得過時
勿在整個App中放置Icon 在App不同功能的頁面看到相同Icon可能會造成混淆。取而代之，可以考慮以Icon色彩整合。參閱Color
針對不同的背景測試Icon 你無法預測人們將使用什麼樣的背景在主畫面，所以，不要只在淺色或深色背景測試Icon。看看他在不同圖片中會怎麼呈現。試著在具有動態背景的實體設備上測試，動態背景會隨著設備移動改變視角
方形Icon 系統將自動應用圓角遮罩
App Icon屬性
所有App Icon應遵守下列規格
App Icon尺寸
在主畫面、整個系統每個App都需支援較小的Icon，而較大Icon在App Store中
在不同裝置上提供不同尺寸 確保在所有它支援的裝置上Icon都能保持美觀
模擬App Store的小Icon 儘管App Store Icon的用途和小Icon不同，但仍是你的App Icon。它應該合乎較小的外觀，雖然它沒有視覺效果，但可以巧妙的豐富細節
在Spotlight、Setting、Notification中的Icon
每個App應提供小Icon，以應用在Spotlight搜尋、內建Setting、Notification中。此外，設定中需提供小Icon以供顯示，而支援通知的App需提供再通知顯示的Icon。所有Icon都應當可以清楚辨識App，如理想中的和App搭配。如果不提供這些Icon，iOS可能縮小你的主要Icon來顯示
不須在Setting中的Icon覆蓋或增加邊框 設定中，iOS自動增加1px線條邊框在白背景上
提示
若你的App可以創建文件，不需要再設計文件Icon，因為iOS自動套用用App Icon來製作文件Icon使用者可選取（User-Selectable）的App Icon
某些App中，自定義功能可以喚起個人連結與增強使用者經驗。若能夠增加價值，你可以讓人們選用備用的預定義替代Icon。像是運動App可以因應不同隊伍提供Icon，或者在淺色、深色模式顯示相應Icon。注意你的App Icon只能在使用者同意的情況下變更，透過系統向使用者提供確認訊息
提供視覺一致的備用Icon，並包含所有必要尺寸 就像主要Icon一樣，每個備用Icon都是一個組合，包含多個尺寸。當使用者選用備用Icon，該Icon將取代主畫面、Spotlight、Notification中的主Icon。為確保在整個App中Icon保持一致性，使用者不應該在主畫面和設定中看到不同Icon，提供與App Icon尺寸相應的尺寸。參閱App Icon Sizes
開發者指南請參閱UIApplication中的setAlternateIconName
注意
備用Icon須接受App Review審查，並遵守App Review GuidelinesSystem Icons（iOS 12或更早）
在iOS13或更新，建議在App中使用SF Symbols去執行工作和內容種類。如果是iOS12或更早，遵循以下指南
系統提供內建Icon來傳達共同工作和在各種情境時的內容
在iOS12或更早，由於人們已經相當熟悉，建議盡可能使用熟悉的內建Icon
依照預期使用系統Icon 每個系統提供的圖像都有特定、廣為人知的含義。為避免使人困惑，必須根據其含義和建議用法使用每個圖像
為Icon提供備用文字標籤 備用文字標籤在螢幕上不可見，但他們始可聽見的VoiceOver描述什麼在畫面上，使視覺障礙者更容易導覽
若在系統提供的Icon中找不到合適圖像，設計自訂的Icon， 比起誤用系統提供Icon，設計自訂Icon更佳。參閱Glyphs
Navigation Bar和Toolbar的Icons
使用下列Navigation Bar和Toolbar Icons中的Icon。開發者指南請參閱UIBarButtonSystemItem
提示
你可以在Navigation Bar和Toolbar以文字表示。舉例，行事曆使用“今天”、“行事曆”、“收件匣”在Toolbar。你還可以使用固定空格元素在Navigation Bar和Toolbar之間提供Padding
Tab Bar Icons
使用下列Tab Bar Icons。開發者指南請參閱UITabBarSystemItem
主畫面快速動作Icon
使用Home Screen Quick Action選單中的Icon。開發者指南請參閱UIApplicationShortcutIconType
*¹ 網格：Grid
*² 點陣圖：Bitmap/Raster
*³ 去交錯：De-interlaced下一篇
上一篇
