品牌行銷策略，產品行銷與設計，各類型行銷推廣案例分享-品牌行銷點點讚
編輯導語：了解iOS操作系統對互聯網應用開發者來說十分重要，對其有所了解，將有助于產品工作的推進，并進一步保證用戶體驗的優化。上篇文章里，作者對iOS系統中的視覺規范作了介紹。本篇文章作者繼續對圖標和圖像規范進行介紹，一起來看一下。
iOS是運行于iPhone、iPad和iPod touch設備上、最常用的移動操作系統之一。作為互聯網應用的開發者、產品經理、體驗設計師，都應當理解并熟悉平臺的設計規范。這有利于提高我們的工作效率，保證用戶良好的體驗。
iOS設計規范系列共10篇。本文是第8篇，介紹圖標和圖像（Icons and Images)。
一、圖片尺寸和分辨率(Image Size and Resolution)
iOS屏幕上放置內容的坐標系統，是基于以點為單位的測量值，該測量值是映射到顯示器的像素。
標準分辨率顯示器的像素密度為1:1（或@1X），其中一個像素等于一個點。高分辨率顯示屏具有更高的像素密度，提供2.0或3.0的比例因子（稱為@2x和@3x）。因此，高分辨率顯示需要更多像素的圖像。
例如：假設你有一個100px×100px的標準分辨率（@ 1x）圖像。該圖像的@ 2x版本為200px×200px，@ 3x版本為300px×300px。為所有支持的設備，提供所有圖標/圖片的高分辨率圖像。
根據設備的不同，你可以將每個圖片中的像素數乘以特定的比例因子來實現這個目的。
設計高分辨率作品
1）使用8像素 x 8像素的網格。
網格可以使線條保持清晰，并確保所有尺寸的內容都盡可能清晰，減少修飾和銳化。將圖像邊界對齊到網格以最小化縮小時可能出現的半像素和模糊細節。
2）以適當的格式制作圖稿。
通常，對位圖/柵格圖稿使用逐行掃描的PNG文件。
PNG支持透明性，并且由于它是無損的，因此壓縮偽像不會模糊重要的細節或更改顏色。對于需要諸如陰影，紋理和高光之類的效果的復雜藝術品，這是一個不錯的選擇。
對照片使用JPEG。它的壓縮算法通常會產生比無損格式小的尺寸，并且偽像很難在照片中辨別。但是，逼真的應用程序圖標看起來最好是PNG。將PDF用于需要高分辨率縮放的字形和其他平面矢量插圖。
3）將8位調色板用于不需要全24位顏色的PNG圖形。
使用8位調色板可以減小文件大小，而不會降低圖像質量。此調色板不適用于照片。
4）優化JPEG文件以在大小和質量之間找到平衡。
可以壓縮大多數JPEG文件，而不會明顯降低所得圖像的質量。即使少量壓縮也可以節省大量磁盤空間。在每張圖像上進行壓縮設置實驗，以找到可以接受的最佳值。
5）提供圖像和圖標的替代文本標簽。
替代文本標簽在屏幕上不可見，但是它們使VoiceOver能夠以聽覺方式描述屏幕上的內容，從而使視力障礙者的導航更加輕松。
二、應用圖標（App Icon）
每個應用程序都需要一個美麗而令人難忘的圖標，該圖標在App Store中引起人們的注意，并在主屏幕上脫穎而出。您的圖標是交流您的應用目的的第一時間。它也出現在整個系統中，例如在“設置”和“搜索結果”中。
1）擁抱簡單。
找到一個可以捕捉應用程序本質的元素，并以簡單、獨特的形狀表達該元素。謹慎添加詳細信息。如果圖標的內容或形狀過于復雜，則可能難以分辨細節，尤其是在較小尺寸的情況下。
2）提供一個焦點。
設計帶有單個中心點的圖標，該圖標可以立即引起注意并清楚地標識您的應用程序。
3）設計一個可識別的圖標。
人們不必分析圖標就可以看出它所代表的含義。例如，“郵件”應用程序圖標使用一個信封，該信封通常與郵件相關聯。花時間設計一個美觀且引人入勝的抽象圖標，以藝術方式代表您的應用程序的目的。
4）保持背景簡單，避免透明。
確保您的圖標不透明，并且不要弄亂背景。給它一個簡單的背景，以免影響附近的其他應用程序圖標。您無需在整個圖標中填充內容。
5）僅在必不可少的徽標或徽標的一部分時使用單詞。
應用程序的名稱顯示在主屏幕上其圖標下方。請勿使用不必要的詞來重復名稱或告訴別人如何處理您的應用，例如“觀看”或“播放”。如果您的設計包含任何文本，請強調與應用程序提供的實際內容相關的詞。
6）不要包含照片，屏幕截圖或界面元素。
小尺寸的照片細節可能很難看清。屏幕截圖對于應用程序圖標而言過于復雜，通常無法幫助傳達應用程序的用途。圖標中的界面元素具有誤導性和混亂性。
7）不要使用Apple硬件產品的副本。
Apple產品受版權保護，不能在您的圖標或圖像中復制。通常，避免顯示設備的副本，因為硬件設計會經常更改，并且會使圖標顯得過時。
8）不要在整個界面中放置您的應用程序圖標。
在整個應用程序中看到用于不同目的的圖標可能會造成混淆。相反，請考慮合并圖標的配色方案。參見顏色。
9）針對不同的墻紙測試您的圖標。
您無法預測人們會為他們的主屏幕選擇哪些壁紙，因此，不要僅僅針對淺色或深色測試您的應用。查看不同照片的外觀。在具有動態背景的實際設備上嘗試使用該設備，該動態背景會隨著設備的移動而改變視角。
10）保持圖標四角方形。
系統應用一個自動將圖標角變圓的蒙版。
1. 應用程序圖標屬性
所有應用程序圖標都應符合以下規范：
2. 應用程序圖標大小
一旦安裝了應用程序，每個應用程序都必須提供小圖標以供在主屏幕和整個系統中使用，以及一個大圖標以在App Store中顯示。
- 為不同的設備提供不同大小的圖標。確保您的應用圖標在您支持的所有設備上看起來都不錯。
- 讓App Store圖標與小圖標相匹配。盡管App Store圖標的使用方式不同于小型圖標，但它仍然是您的應用程序圖標。它通常應與較小版本的外觀匹配，盡管由于沒有視覺效果應用于它，因此它可以更豐富、更細致。
3. Spotlight搜索、設置和通知圖標
每個APP還應提供一個小圖標，當APP名稱與Spotlight搜索中的關鍵詞匹配時，iOS可以顯示該圖標。
此外，提供可以顯示在系統內置的“設置”APP中的小圖標，支持通知功能的APP也應提供一個小圖標以顯示在通知中。確保所有圖標都能清楚地識別出你的APP，理想情況下，它們都應與你的APP圖標相匹配。
如果你不提供這些圖標，iOS可能會縮小你的主應用程序圖標顯示在這些位置上。
不要在“設置”圖標上添加疊加層或邊框。iOS會自動為所有圖標添加1像素描邊，以便它們在“設置”的白色背景上看起來更友好。
4. 用戶可選的應用程序圖標
對于某些APP來說，定制是一項能夠喚起用戶共鳴并增強用戶體驗的功能。如果它能在你的APP中提供價值，你可以從APP中嵌入的一組預定義圖標讓用戶來選擇一個作為備用應用圖標。
例如：一個體育APP可能為不同的球隊提供圖標，或者一個有明暗模式的APP可能會提供相應的明暗圖標。
請注意，APP圖標只能根據用戶的請求進行更改，并且系統始終會向用戶提供此類更改的確認。
提供所有尺寸并且視覺上一致的備用圖標。與主應用程序圖標一樣，每個備用圖標都作為一組大小不同的相關圖像提供。當用戶選擇備用圖標時，該圖標的相應大小將替換主屏幕、Spotlight和系統等其他位置的圖標。
為了確保備用圖標在整個系統中統一顯示，避免讓用戶在主屏幕上看到一個版本的圖標，又在設置中的看到完全不同的版本的圖標，例如：提供與主應用程序圖標相同尺寸的圖標（App Store圖標除外）。
三、系統圖標（System Icons）iOS12及更早版本
在iOS 13或更高版本中，更習慣使用SF符號來表示APP中的任務和模式。當你的APP在iOS 12或更早版本中運行時，請按照以下指南操作。系統提供內置圖標，表示各種用例中的常見任務和內容類型。
- 導航欄和工具欄圖標；
- 標簽欄圖標；
- 主屏幕快速操作圖標。
在運行iOS12及更早版本的APP中，盡可能使用這些內置圖標是個好辦法，因為它們對用戶來說已經很熟悉了。
- 按預期使用系統圖標。每個系統提供的圖像都有特定的、通用的含義。為了避免混淆用戶，每個圖像必須按照其含義和推薦的用法使用。
- 為圖標提供文本標簽。備選文字標簽在屏幕上不可見，但它們讓解說者可以直觀地描述屏幕上的內容，使視力障礙人士更容易導航。
- 如果在系統提供的圖標里找不到符合你要求的圖標，請設計自定義圖標。設計自己的設備比濫用系統提供的圖標要好。
1. 導航欄和工具欄圖標
在導航欄和工具欄中使用以下圖標。
注：可以使用文本代替圖標來表示導航欄或工具欄中的項目。例如：日歷在工具欄中使用“今日”、“日歷”和“收件箱”。
還可以使用固定空間元素在導航圖標和工具欄圖標之間提供填充。
2. 標簽欄圖標
在標簽欄中使用以下圖標。
3. 主屏幕快速行動圖標
在主屏幕快速操作菜單中使用以下圖標。
本文介紹了iOS的圖標和圖像（Icons and Images)，參考資料Apple Developer-Human Interface Guidelines。下一篇介紹系統能力（System Capabilities）。
#專欄作家#
曉吾，微信公眾號：體驗主義，人人都是產品經理專欄作家。騰訊高級交互設計師，前創新工場、新浪微博交互設計師。專注社交創新與娛樂產品設計。
本文由 @曉吾 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議