5 圖標和圖像設計

5.1 圖標和圖像尺寸

任何app都需要app圖標和啟動文件或者圖片。除此之外，一些app需要自定義圖標來代表app中導航欄、工具欄、標簽欄和其他地方的特定的內容、功能或者模式。表45-1列出了這些自定義圖標和圖像的尺寸。

表45-1 圖標和圖像尺寸（以像素為單位）

注意
如果你需要為主屏幕快捷操作創建自定義圖標，查看Home Screen Quick Actions了解詳情。你也可以從https://developer.apple.com/design/downloads/Quick-Action-Guides.zip下載Home Screen Quick Action Icon Template。

除了AppStore的圖標必須以iTunesArtwork來命名以外，你可以隨意命名圖標。在Xcode項目中，你可以使用圖片資源目錄來管理app的圖標文件。如果要添加圖標，可以將相應的圖片添加到你的項目的圖片資源目錄下。在編譯過程中，Xcode會將適當的鍵值加入到app的Info.plist文件中并且將圖片打包進app中。iOS根據所要用到的位置來選擇合適大小的圖標。查看Asset Catalog Help了解更多資源目錄相關信息。

對于所有圖片和圖標，推薦使用PNG格式。避免使用交錯的PNG圖片。

圖標和圖像的標準位深(bit depth)是24位。

5.2 app圖標

每個app都需要一個漂亮的、容易記憶的app圖標來在AppStore中吸引用戶的注意并且在主屏幕上脫穎而出。iOS會在游戲中心、搜索結果、設置和代表app的文檔中使用不同尺寸的app圖標。

為了得到最好的效果，可以求助于專業的圖形設計師。 有經驗的圖形設計師可以為你的app形成統一的視覺設計風格并且將這種風格應用到圖標和圖片中。

使用便于識別的通用圖像。 通常來說，避免使用視覺元素的次要意象，或者使用意義晦澀的元素。比如，郵件應用的圖標使用一個信封的圖形，而不是郵箱、郵差包或者郵局標志。

擁抱簡約。 尤其是避免使用大量的圖像填滿你的app圖標。找到一個可以代表你的app精髓的單一的元素，然后以簡單、獨特的形狀來表現這個元素。謹慎地增加細節。如果一個圖標的內容或形狀過于復雜，那圖標的細節就會很令人費解而且在小尺寸下會顯得很模糊。

提示
為了測試圖標在小尺寸下的效果，可以將它移到主屏幕上的一個文件夾里。最好可以移入更多app圖標，然后再看你的app圖標是否好看且仍舊與眾不同。

以較抽象的方式表達你app的意圖。 在app圖表中使用照片或者屏幕截圖并不是一個好主意，因為在小尺寸下很難看清。最好進行一定的藝術處理，因為這樣才能強調那些你希望用戶注意到的方面。

如果一定要使用擬物化設計，一定要注意準確無誤。 擬物化設計的圖標必須準確地反映對象的材質例如布料、玻璃或者金屬，并且要能傳達對象的重量和質感。

確保在各種背景下app圖標看起來都不錯。 不要只在淺色或深色背景下測試你的app圖標，因為你無法預知用戶會使用什么樣的壁紙。

避免使用透明度。 app的圖標應該是不透明的。如果圖標的邊界小于推薦的尺寸，或者在圖標內加入了透明的區域，那么圖標就會浮在深色的背景上，這樣在用戶的漂亮壁紙上你的app圖標就會缺少吸引力。

不要在你的設計中使用iOS界面元素。 你肯定不希望用戶混淆你的app圖標、圖片和iOS的UI。

不要在你的設計中使用Apple的硬件產品標志。 Apple產品的標志受到版權保護，所以不能在你的app圖標或圖片中使用。通常來說，在你的設計中不要使用特定的設備標志，因為設備的設計會頻繁改變，因而基于它們的設計也會很快過時。

不要在你的界面中復用蘋果自帶app的圖標。 在系統的不同位置使用相同的圖標來代表具有輕微不同的事物會使用戶感到困惑。

為不同的設備設計不同尺寸的app圖標。 你肯定希望app的圖標在所有支持的設備上看起來都非常不錯。查看表45-1，了解常用設備尺寸。

當iOS在設備的主屏幕上顯示app圖標時，它會自動給圖標加上一個圓角的遮罩。確保你的圖標是90度直角，這樣加上遮罩后會比較好看。

準備一個大尺寸的app圖標用于AppStore展示。 盡管這個尺寸的app圖標要讓用戶能一眼認出，但是可以適當增加一些細節。這個尺寸的app圖標不會增加額外的視覺效果。

如表45-1所示，大尺寸app圖標的大小為1024×1024像素，且需要命名為iTunesArtwork@2x。（如果需要適配@1x設備，可以準備一個512*512像素大小的圖標并且命名為iTunesArtwork。）查看Platform Version Information，了解更多改尺寸app圖標的相關信息。

注意
iOS可能會把大尺寸圖片用作其他用途。在iPad應用中，iOS會將大尺寸圖片用于生成大的文件圖標。

如果你開發了一個以ad-hoc方式發布的app（即內部使用，不通過AppStore），也必須提供大尺寸的app圖標。這個圖標將被用于iTunes。

5.2.1 文檔圖標

如果你的iOS app以自定義格式創建文檔，你肯定希望你的用戶能一眼認出政協文檔。你不需要另外設計一個自定義圖標，因為iOS會使用app圖標來為你生成文檔圖標。

5.2.2 Spotlight和Setting的圖標

當app的名字匹配Spotlight的搜索詞時，app需要提供一個小尺寸的圖標用于顯示。支持設置功能的app也需要提供一個小尺寸的圖標用于在系統的設置應用中顯示。

這些圖標必須清楚地標識你的app，這樣用戶才能在搜索列表或者設置應用列表中識別出你的app。比如，盡管內置應用的圖標很小，但是在設置應用中很易辨識。

跟app圖標一樣，你也可以任意命名這些小圖標，因為iOS會基于使用目的來選擇尺寸合適的圖標。

為所有設備分別提供用于Spotlight搜索結果和設置應用的圖標。如果不提供，iOS會縮小你的app圖標來用于這些位置的顯示。查看表45-1，了解具體尺寸。

注意
如果你的app圖標背景是白色的，不要為了在設置應用中提升加辨識度而增加灰色遮罩。iOS會給圖標增加1像素的描邊，這樣所有圖標在設置應用的白色背景下都會很好看。

5.3 啟動文件

啟動文件（或圖片）是app啟動時iOS顯示的簡單占位圖。這樣的占位圖能夠給用戶一個app很快而且反應靈敏的印象，因為占位圖是即刻出現的，而且很快會被app的第一屏取代。每個app都需要提供啟動文件或者至少一張靜態圖片。

在iOS8或者更高的系統版本，你可以創建一個XIB或者故事板文件來取代靜態的啟動圖片。當你在Interface Builder中創建啟動文件時，可以使用尺寸類型來為不同的顯示環境定義不同的布局，然后使用Auto Layout來作最少的適配。使用尺寸類型和Auto Layout意味著你只用創建一個啟動文件就能適配所有的設備和顯示環境。（查看Build In Adaptivity，了解顯示環境和尺寸類型概覽；查看Size Classes Design Help，學習如何在Interface Builder中使用尺寸環境。）

如果你需要適配早期iOS版本，除了啟動文件之外，你仍舊可以提供靜態的啟動圖片。

重要
使用XIB或者故事板文件意味著你的app在iPhone6或者iPhone6 Plus上運行。

一下設計規則同時適用于啟動文件和靜態啟動圖片。

設計簡潔明了、可以提升用戶體驗的啟動圖片。 尤其注意，啟動圖片不適用于：

• “app啟動體驗”，比如閃屏
• “關于”窗口
• 品牌元素，除非它們也是app第一屏靜態內容的一部分

用戶會在app之間頻繁切換，你需要盡可能地減少app的啟動時間，你的啟動圖片設計應該降低用戶對啟動過程的感知，而不是強調這個過程。

設計與app首屏一樣的啟動圖片， 除非：

• 文本。 啟動圖片是靜態的，所以顯示的文本沒有局限性。
• 可能會改變的UI元素。 如果包含了啟動完成后會改變的元素，用戶可能會因為從啟動圖片到app首屏突然的變化而感到不愉快。

如果你認為遵循了以上規則會導致啟動畫面過于簡單和乏味，那也無可厚非。但是要記住，啟動圖片并不是為了藝術表現。它只是為了強化用戶對于app啟動快速且打開即能使用這樣一種認知。比如，設置和天氣應用只是將應用的背景作為啟動圖片。

如果你需要使用靜態啟動圖片，你需要為不同的設備提供不同尺寸的圖片。靜態啟動圖片需要包含狀態欄。具體尺寸參見表45-1.

雖然在iPhone6和iPhone6 Plus使用啟動文件是最好的，如果需要的話，你還是可以使用靜態啟動圖片。如果你需要為這些設備提供靜態啟動圖片，可以參考一下尺寸信息：

iPhone6：

• 豎屏:豎屏：750 x 1334 (@2x)
• 橫屏:橫屏：1334 x 750 (@2x)

iPhone 6 Plus:

• 豎屏:1242 x 2208 (@3x)
• 橫屏:2208 x 1242 (@3x)

5.4 模板圖標

你為欄或者主屏幕快捷操作自定義的圖標，也稱之為模板圖標或圖片，因為當你的app運行時，iOS會把它當作遮罩來生成你看到的圖標。

iOS定義了很多標準的小圖標，比如刷新、操作、增加和收藏圖標。你應該盡量使用這些按鈕或圖標來代表app內的常用的標準任務。（查看 Toolbar and Navigation Bar Buttons 和 Tab Bar Icons，了解更多你可以在欄上使用的標準按鈕和圖標。）

如果你的app包含某些任務或模式沒有標準圖標可以代表，或者標準圖標與你的app樣式不匹配，你可以設計你自己的小圖標。

• 簡單和線性的。 過多的細節會使得圖標顯得很亂且難以識別。
• 不容易與系統提供的圖標相混淆。 用戶應該能一眼就能區別你自定義的圖標和標準圖標。
• 易理解且被廣泛接受。 努力創造用戶能夠正確理解的標志，這樣才不會被用戶討厭。

重要
確保不要在你的設計中使用Apple產品圖片。這些標志受版權保護且產品設計會頻繁改變。

不管你只使用自定義圖標，還是與標準圖標混用，app內所有的圖標要在視覺尺寸、細節水平和視覺重量上保持一致。

比如，以下是所有的iOS欄圖標，注意它們如何通過尺寸、細節和重量上的一致性傳達和諧的整體感：

要想設計一套條理清楚連貫的圖標，關鍵是一致性：盡可能地使用相同的透視和相同的線條粗細。為了確保所有圖標的視覺尺寸一致，你可能需要設計一系列實際尺寸不同的圖標。比如，以下這組系統圖標視覺上大小是相同的，盡管收藏和語音郵件圖標實際上比其他圖標要大一些。

如果你正在設計自定義標簽欄圖標，你需要提供兩個版本——未選中狀態和選中狀態。選中狀態的圖標通常是未選中狀態圖標填充后的樣子，但有些設計需要在此基礎上進行調整。

在設計帶有內部細節的選中狀態下的圖標時（例如收音機圖標），反轉細節填充的顏色，這樣在選中狀態下細節依舊能夠得到突出。鍵盤圖標也有內部細節，但是如果對選中狀態的圖標填充背景，圓圈增加白色描邊，那樣會使得用戶難以理解和識別。

有些時候，對選中狀態下的圖標設計進行略微調整會有更好的效果。比如，計時器和博客圖標都包含一些開放區域，因此選中狀態圖標對線條進行壓縮然后置于一個圓形背景下。

如果圖標填充后變得不易識別，那選中狀態圖標就使用較粗的線條來描繪。比如，語音信箱和閱讀列表的選中圖標就是以2個點粗細的線條來繪制的，而未選中狀態圖標使用1點的線條。

有時，圖標包含了不適合進行描邊的細節。就像音樂和藝術家圖標，你可以同時將填充效果用于兩種狀態的圖標。用戶可以很容易地區分這類圖標的選中和未選中狀態，因為選中狀態的圖標會加上更加深的顏色。

設計自定義小圖標時，遵循以下規則：

• 使用透明度來區分圖標的形狀。iOS會過濾所有顏色信息，所以沒有必要使用一種以上的填充色。
• 不要添加陰影效果
• 使用抗鋸齒

如果你想設計類似iOS原生圖標的小圖標，那就使用細線條來繪制。具體來說，使用1點粗細的線條來繪制圖標（@2x分辨率下為2個像素）。

不管圖標的視覺樣式如何，都要參照表45-1的尺寸來自定義工具欄、導航欄和標簽欄的圖標。如果你在為主屏幕快捷操作設計自定義的模板圖標，查看Home Screen Quick Actions了解更多細節。

不要在自定義標簽欄圖標中加入文字。應該使用標簽欄API來為每個標簽設置標題（例如，initWithTitle:image:tag:）。如果你需要調整標題的自動布局，可以查看標題調節API，比如setTitlePositionAdjustment:。

5.5 Web Clip圖標

如果你有一個網頁app或一個網站，你可以使用Web Clip功能來創建一個自自定義圖標用來顯示在主屏幕上。用戶通過一次點擊圖標就能到達你的網頁。你可以設計一個圖標來代表整個網站，或者只是代表單個網頁。

iOS可以在Safari的收藏中顯示Web Clip圖標，當用戶在Safari中點擊URL區域或者打開一個新的標簽時，圖標會以格子的形式顯示。

如果你的網頁內容使用了熟悉的圖像或者易識別的配色方案，你的圖標也應該融入這樣的特點。但是，為了確保圖標在設備上的顯示效果，你也應該遵循本章的設計規范。（查看Specifying a Webpage Icon for Web Clip，了解如何在你的網站內容中加入代碼來生成自定義圖標。）

查看表45-1，了解相應的圖標尺寸。

注意
圖標最好命名為apple-touch-icon-precomposed.png。

5.6 創建可縮放的圖片

你可以創建可縮放的圖片來定制一些標準UI元素的背景，比如彈出框、按鈕、導航欄、標簽欄和工具欄（包括這些欄上的項）。為這些元素提供可縮放的圖片可以提升app的性能。

對于很多UI元素，你可以在背景基礎上指定端蓋。端蓋定義了一張圖片中不會被縮放的區域。比如，你可能會創建一張包含四個端蓋的可縮放的圖片，這四個端蓋定義了按鈕的四個角。當縮放圖片來填充按鈕的背景區域時，端蓋定義的部分不會發生變化。

根據你提供的可縮放圖片的尺寸規格，iOS會拉伸或者平鋪來來填充UI元素的背景區域。拉伸圖片意味著不考慮圖片原始的寬高比來放大圖片。拉伸具有較好的性能，但是對于拉伸后會失真的多像素圖片來說通常并不可取。平鋪圖片就是不斷重復原始圖片直到能夠填充滿整個目標區域。平鋪的性能要弱于拉伸，但這是獲得紋理和圖案效果的唯一途徑。

通常來說，你應該提供能夠達到想要效果的最小的圖片（除了端蓋）。比如：

• 如果你需要不包含漸變的純色圖片，可以創建一張1×1點的圖片
• 如果你需要垂直漸變的圖片，可以創建一張寬度為1點，高度與UI元素背景高度相等的圖像。
• 如果你需要紋理圖片，只需創建一張與紋理最小重復部分大小相同的圖片。
• 如果你需要不重復的紋理圖片，那就創建一張與UI元素背景同等大小的靜態圖片。