5 圖標(biāo)和圖像設(shè)計(jì)

5.1 圖標(biāo)和圖像尺寸

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

表45-1 圖標(biāo)和圖像尺寸（以像素為單位）

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

除了AppStore的圖標(biāo)必須以iTunesArtwork來(lái)命名以外，你可以隨意命名圖標(biāo)。在Xcode項(xiàng)目中，你可以使用圖片資源目錄來(lái)管理app的圖標(biāo)文件。如果要添加圖標(biāo)，可以將相應(yīng)的圖片添加到你的項(xiàng)目的圖片資源目錄下。在編譯過(guò)程中，Xcode會(huì)將適當(dāng)?shù)逆I值加入到app的Info.plist文件中并且將圖片打包進(jìn)app中。iOS根據(jù)所要用到的位置來(lái)選擇合適大小的圖標(biāo)。查看Asset Catalog Help了解更多資源目錄相關(guān)信息。

對(duì)于所有圖片和圖標(biāo)，推薦使用PNG格式。避免使用交錯(cuò)的PNG圖片。

圖標(biāo)和圖像的標(biāo)準(zhǔn)位深(bit depth)是24位。

5.2 app圖標(biāo)

每個(gè)app都需要一個(gè)漂亮的、容易記憶的app圖標(biāo)來(lái)在AppStore中吸引用戶的注意并且在主屏幕上脫穎而出。iOS會(huì)在游戲中心、搜索結(jié)果、設(shè)置和代表app的文檔中使用不同尺寸的app圖標(biāo)。

為了得到最好的效果，可以求助于專業(yè)的圖形設(shè)計(jì)師。 有經(jīng)驗(yàn)的圖形設(shè)計(jì)師可以為你的app形成統(tǒng)一的視覺(jué)設(shè)計(jì)風(fēng)格并且將這種風(fēng)格應(yīng)用到圖標(biāo)和圖片中。

使用便于識(shí)別的通用圖像。 通常來(lái)說(shuō)，避免使用視覺(jué)元素的次要意象，或者使用意義晦澀的元素。比如，郵件應(yīng)用的圖標(biāo)使用一個(gè)信封的圖形，而不是郵箱、郵差包或者郵局標(biāo)志。

擁抱簡(jiǎn)約。 尤其是避免使用大量的圖像填滿你的app圖標(biāo)。找到一個(gè)可以代表你的app精髓的單一的元素，然后以簡(jiǎn)單、獨(dú)特的形狀來(lái)表現(xiàn)這個(gè)元素。謹(jǐn)慎地增加細(xì)節(jié)。如果一個(gè)圖標(biāo)的內(nèi)容或形狀過(guò)于復(fù)雜，那圖標(biāo)的細(xì)節(jié)就會(huì)很令人費(fèi)解而且在小尺寸下會(huì)顯得很模糊。

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

以較抽象的方式表達(dá)你app的意圖。 在app圖表中使用照片或者屏幕截圖并不是一個(gè)好主意，因?yàn)樵谛〕叽缦潞茈y看清。最好進(jìn)行一定的藝術(shù)處理，因?yàn)檫@樣才能強(qiáng)調(diào)那些你希望用戶注意到的方面。

如果一定要使用擬物化設(shè)計(jì)，一定要注意準(zhǔn)確無(wú)誤。 擬物化設(shè)計(jì)的圖標(biāo)必須準(zhǔn)確地反映對(duì)象的材質(zhì)例如布料、玻璃或者金屬，并且要能傳達(dá)對(duì)象的重量和質(zhì)感。

確保在各種背景下app圖標(biāo)看起來(lái)都不錯(cuò)。 不要只在淺色或深色背景下測(cè)試你的app圖標(biāo)，因?yàn)槟銦o(wú)法預(yù)知用戶會(huì)使用什么樣的壁紙。

避免使用透明度。 app的圖標(biāo)應(yīng)該是不透明的。如果圖標(biāo)的邊界小于推薦的尺寸，或者在圖標(biāo)內(nèi)加入了透明的區(qū)域，那么圖標(biāo)就會(huì)浮在深色的背景上，這樣在用戶的漂亮壁紙上你的app圖標(biāo)就會(huì)缺少吸引力。

不要在你的設(shè)計(jì)中使用iOS界面元素。 你肯定不希望用戶混淆你的app圖標(biāo)、圖片和iOS的UI。

不要在你的設(shè)計(jì)中使用Apple的硬件產(chǎn)品標(biāo)志。 Apple產(chǎn)品的標(biāo)志受到版權(quán)保護(hù)，所以不能在你的app圖標(biāo)或圖片中使用。通常來(lái)說(shuō)，在你的設(shè)計(jì)中不要使用特定的設(shè)備標(biāo)志，因?yàn)樵O(shè)備的設(shè)計(jì)會(huì)頻繁改變，因而基于它們的設(shè)計(jì)也會(huì)很快過(guò)時(shí)。

不要在你的界面中復(fù)用蘋果自帶app的圖標(biāo)。 在系統(tǒng)的不同位置使用相同的圖標(biāo)來(lái)代表具有輕微不同的事物會(huì)使用戶感到困惑。

為不同的設(shè)備設(shè)計(jì)不同尺寸的app圖標(biāo)。 你肯定希望app的圖標(biāo)在所有支持的設(shè)備上看起來(lái)都非常不錯(cuò)。查看表45-1，了解常用設(shè)備尺寸。

當(dāng)iOS在設(shè)備的主屏幕上顯示app圖標(biāo)時(shí)，它會(huì)自動(dòng)給圖標(biāo)加上一個(gè)圓角的遮罩。確保你的圖標(biāo)是90度直角，這樣加上遮罩后會(huì)比較好看。

準(zhǔn)備一個(gè)大尺寸的app圖標(biāo)用于AppStore展示。 盡管這個(gè)尺寸的app圖標(biāo)要讓用戶能一眼認(rèn)出，但是可以適當(dāng)增加一些細(xì)節(jié)。這個(gè)尺寸的app圖標(biāo)不會(huì)增加額外的視覺(jué)效果。

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

注意
iOS可能會(huì)把大尺寸圖片用作其他用途。在iPad應(yīng)用中，iOS會(huì)將大尺寸圖片用于生成大的文件圖標(biāo)。

如果你開(kāi)發(fā)了一個(gè)以ad-hoc方式發(fā)布的app（即內(nèi)部使用，不通過(guò)AppStore），也必須提供大尺寸的app圖標(biāo)。這個(gè)圖標(biāo)將被用于iTunes。

5.2.1 文檔圖標(biāo)

如果你的iOS app以自定義格式創(chuàng)建文檔，你肯定希望你的用戶能一眼認(rèn)出政協(xié)文檔。你不需要另外設(shè)計(jì)一個(gè)自定義圖標(biāo)，因?yàn)閕OS會(huì)使用app圖標(biāo)來(lái)為你生成文檔圖標(biāo)。

5.2.2 Spotlight和Setting的圖標(biāo)

當(dāng)app的名字匹配Spotlight的搜索詞時(shí)，app需要提供一個(gè)小尺寸的圖標(biāo)用于顯示。支持設(shè)置功能的app也需要提供一個(gè)小尺寸的圖標(biāo)用于在系統(tǒng)的設(shè)置應(yīng)用中顯示。

這些圖標(biāo)必須清楚地標(biāo)識(shí)你的app，這樣用戶才能在搜索列表或者設(shè)置應(yīng)用列表中識(shí)別出你的app。比如，盡管內(nèi)置應(yīng)用的圖標(biāo)很小，但是在設(shè)置應(yīng)用中很易辨識(shí)。

跟app圖標(biāo)一樣，你也可以任意命名這些小圖標(biāo)，因?yàn)閕OS會(huì)基于使用目的來(lái)選擇尺寸合適的圖標(biāo)。

為所有設(shè)備分別提供用于Spotlight搜索結(jié)果和設(shè)置應(yīng)用的圖標(biāo)。如果不提供，iOS會(huì)縮小你的app圖標(biāo)來(lái)用于這些位置的顯示。查看表45-1，了解具體尺寸。

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

5.3 啟動(dòng)文件

啟動(dòng)文件（或圖片）是app啟動(dòng)時(shí)iOS顯示的簡(jiǎn)單占位圖。這樣的占位圖能夠給用戶一個(gè)app很快而且反應(yīng)靈敏的印象，因?yàn)檎嘉粓D是即刻出現(xiàn)的，而且很快會(huì)被app的第一屏取代。每個(gè)app都需要提供啟動(dòng)文件或者至少一張靜態(tài)圖片。

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

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

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

一下設(shè)計(jì)規(guī)則同時(shí)適用于啟動(dòng)文件和靜態(tài)啟動(dòng)圖片。

設(shè)計(jì)簡(jiǎn)潔明了、可以提升用戶體驗(yàn)的啟動(dòng)圖片。 尤其注意，啟動(dòng)圖片不適用于：

• “app啟動(dòng)體驗(yàn)”，比如閃屏
• “關(guān)于”窗口
• 品牌元素，除非它們也是app第一屏靜態(tài)內(nèi)容的一部分

用戶會(huì)在app之間頻繁切換，你需要盡可能地減少app的啟動(dòng)時(shí)間，你的啟動(dòng)圖片設(shè)計(jì)應(yīng)該降低用戶對(duì)啟動(dòng)過(guò)程的感知，而不是強(qiáng)調(diào)這個(gè)過(guò)程。

設(shè)計(jì)與app首屏一樣的啟動(dòng)圖片， 除非：

• 文本。 啟動(dòng)圖片是靜態(tài)的，所以顯示的文本沒(méi)有局限性。
• 可能會(huì)改變的UI元素。 如果包含了啟動(dòng)完成后會(huì)改變的元素，用戶可能會(huì)因?yàn)閺膯?dòng)圖片到app首屏突然的變化而感到不愉快。

如果你認(rèn)為遵循了以上規(guī)則會(huì)導(dǎo)致啟動(dòng)畫面過(guò)于簡(jiǎn)單和乏味，那也無(wú)可厚非。但是要記住，啟動(dòng)圖片并不是為了藝術(shù)表現(xiàn)。它只是為了強(qiáng)化用戶對(duì)于app啟動(dòng)快速且打開(kāi)即能使用這樣一種認(rèn)知。比如，設(shè)置和天氣應(yīng)用只是將應(yīng)用的背景作為啟動(dòng)圖片。

如果你需要使用靜態(tài)啟動(dòng)圖片，你需要為不同的設(shè)備提供不同尺寸的圖片。靜態(tài)啟動(dòng)圖片需要包含狀態(tài)欄。具體尺寸參見(jiàn)表45-1.

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

iPhone6：

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

iPhone 6 Plus:

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

5.4 模板圖標(biāo)

你為欄或者主屏幕快捷操作自定義的圖標(biāo)，也稱之為模板圖標(biāo)或圖片，因?yàn)楫?dāng)你的app運(yùn)行時(shí)，iOS會(huì)把它當(dāng)作遮罩來(lái)生成你看到的圖標(biāo)。

iOS定義了很多標(biāo)準(zhǔn)的小圖標(biāo)，比如刷新、操作、增加和收藏圖標(biāo)。你應(yīng)該盡量使用這些按鈕或圖標(biāo)來(lái)代表app內(nèi)的常用的標(biāo)準(zhǔn)任務(wù)。（查看 Toolbar and Navigation Bar Buttons 和 Tab Bar Icons，了解更多你可以在欄上使用的標(biāo)準(zhǔn)按鈕和圖標(biāo)。）

如果你的app包含某些任務(wù)或模式?jīng)]有標(biāo)準(zhǔn)圖標(biāo)可以代表，或者標(biāo)準(zhǔn)圖標(biāo)與你的app樣式不匹配，你可以設(shè)計(jì)你自己的小圖標(biāo)。

• 簡(jiǎn)單和線性的。 過(guò)多的細(xì)節(jié)會(huì)使得圖標(biāo)顯得很亂且難以識(shí)別。
• 不容易與系統(tǒng)提供的圖標(biāo)相混淆。 用戶應(yīng)該能一眼就能區(qū)別你自定義的圖標(biāo)和標(biāo)準(zhǔn)圖標(biāo)。
• 易理解且被廣泛接受。 努力創(chuàng)造用戶能夠正確理解的標(biāo)志，這樣才不會(huì)被用戶討厭。

重要
確保不要在你的設(shè)計(jì)中使用Apple產(chǎn)品圖片。這些標(biāo)志受版權(quán)保護(hù)且產(chǎn)品設(shè)計(jì)會(huì)頻繁改變。

不管你只使用自定義圖標(biāo)，還是與標(biāo)準(zhǔn)圖標(biāo)混用，app內(nèi)所有的圖標(biāo)要在視覺(jué)尺寸、細(xì)節(jié)水平和視覺(jué)重量上保持一致。

比如，以下是所有的iOS欄圖標(biāo)，注意它們?nèi)绾瓮ㄟ^(guò)尺寸、細(xì)節(jié)和重量上的一致性傳達(dá)和諧的整體感：

要想設(shè)計(jì)一套條理清楚連貫的圖標(biāo)，關(guān)鍵是一致性：盡可能地使用相同的透視和相同的線條粗細(xì)。為了確保所有圖標(biāo)的視覺(jué)尺寸一致，你可能需要設(shè)計(jì)一系列實(shí)際尺寸不同的圖標(biāo)。比如，以下這組系統(tǒng)圖標(biāo)視覺(jué)上大小是相同的，盡管收藏和語(yǔ)音郵件圖標(biāo)實(shí)際上比其他圖標(biāo)要大一些。

如果你正在設(shè)計(jì)自定義標(biāo)簽欄圖標(biāo)，你需要提供兩個(gè)版本——未選中狀態(tài)和選中狀態(tài)。選中狀態(tài)的圖標(biāo)通常是未選中狀態(tài)圖標(biāo)填充后的樣子，但有些設(shè)計(jì)需要在此基礎(chǔ)上進(jìn)行調(diào)整。

在設(shè)計(jì)帶有內(nèi)部細(xì)節(jié)的選中狀態(tài)下的圖標(biāo)時(shí)（例如收音機(jī)圖標(biāo)），反轉(zhuǎn)細(xì)節(jié)填充的顏色，這樣在選中狀態(tài)下細(xì)節(jié)依舊能夠得到突出。鍵盤圖標(biāo)也有內(nèi)部細(xì)節(jié)，但是如果對(duì)選中狀態(tài)的圖標(biāo)填充背景，圓圈增加白色描邊，那樣會(huì)使得用戶難以理解和識(shí)別。

有些時(shí)候，對(duì)選中狀態(tài)下的圖標(biāo)設(shè)計(jì)進(jìn)行略微調(diào)整會(huì)有更好的效果。比如，計(jì)時(shí)器和博客圖標(biāo)都包含一些開(kāi)放區(qū)域，因此選中狀態(tài)圖標(biāo)對(duì)線條進(jìn)行壓縮然后置于一個(gè)圓形背景下。

如果圖標(biāo)填充后變得不易識(shí)別，那選中狀態(tài)圖標(biāo)就使用較粗的線條來(lái)描繪。比如，語(yǔ)音信箱和閱讀列表的選中圖標(biāo)就是以2個(gè)點(diǎn)粗細(xì)的線條來(lái)繪制的，而未選中狀態(tài)圖標(biāo)使用1點(diǎn)的線條。

有時(shí)，圖標(biāo)包含了不適合進(jìn)行描邊的細(xì)節(jié)。就像音樂(lè)和藝術(shù)家圖標(biāo)，你可以同時(shí)將填充效果用于兩種狀態(tài)的圖標(biāo)。用戶可以很容易地區(qū)分這類圖標(biāo)的選中和未選中狀態(tài)，因?yàn)檫x中狀態(tài)的圖標(biāo)會(huì)加上更加深的顏色。

設(shè)計(jì)自定義小圖標(biāo)時(shí)，遵循以下規(guī)則：

• 使用透明度來(lái)區(qū)分圖標(biāo)的形狀。iOS會(huì)過(guò)濾所有顏色信息，所以沒(méi)有必要使用一種以上的填充色。
• 不要添加陰影效果
• 使用抗鋸齒

如果你想設(shè)計(jì)類似iOS原生圖標(biāo)的小圖標(biāo)，那就使用細(xì)線條來(lái)繪制。具體來(lái)說(shuō)，使用1點(diǎn)粗細(xì)的線條來(lái)繪制圖標(biāo)（@2x分辨率下為2個(gè)像素）。

不管圖標(biāo)的視覺(jué)樣式如何，都要參照表45-1的尺寸來(lái)自定義工具欄、導(dǎo)航欄和標(biāo)簽欄的圖標(biāo)。如果你在為主屏幕快捷操作設(shè)計(jì)自定義的模板圖標(biāo)，查看Home Screen Quick Actions了解更多細(xì)節(jié)。

不要在自定義標(biāo)簽欄圖標(biāo)中加入文字。應(yīng)該使用標(biāo)簽欄API來(lái)為每個(gè)標(biāo)簽設(shè)置標(biāo)題（例如，initWithTitle:image:tag:）。如果你需要調(diào)整標(biāo)題的自動(dòng)布局，可以查看標(biāo)題調(diào)節(jié)API，比如setTitlePositionAdjustment:。

5.5 Web Clip圖標(biāo)

如果你有一個(gè)網(wǎng)頁(yè)app或一個(gè)網(wǎng)站，你可以使用Web Clip功能來(lái)創(chuàng)建一個(gè)自自定義圖標(biāo)用來(lái)顯示在主屏幕上。用戶通過(guò)一次點(diǎn)擊圖標(biāo)就能到達(dá)你的網(wǎng)頁(yè)。你可以設(shè)計(jì)一個(gè)圖標(biāo)來(lái)代表整個(gè)網(wǎng)站，或者只是代表單個(gè)網(wǎng)頁(yè)。

iOS可以在Safari的收藏中顯示W(wǎng)eb Clip圖標(biāo)，當(dāng)用戶在Safari中點(diǎn)擊URL區(qū)域或者打開(kāi)一個(gè)新的標(biāo)簽時(shí)，圖標(biāo)會(huì)以格子的形式顯示。

如果你的網(wǎng)頁(yè)內(nèi)容使用了熟悉的圖像或者易識(shí)別的配色方案，你的圖標(biāo)也應(yīng)該融入這樣的特點(diǎn)。但是，為了確保圖標(biāo)在設(shè)備上的顯示效果，你也應(yīng)該遵循本章的設(shè)計(jì)規(guī)范。（查看Specifying a Webpage Icon for Web Clip，了解如何在你的網(wǎng)站內(nèi)容中加入代碼來(lái)生成自定義圖標(biāo)。）

查看表45-1，了解相應(yīng)的圖標(biāo)尺寸。

注意
圖標(biāo)最好命名為apple-touch-icon-precomposed.png。

5.6 創(chuàng)建可縮放的圖片

你可以創(chuàng)建可縮放的圖片來(lái)定制一些標(biāo)準(zhǔn)UI元素的背景，比如彈出框、按鈕、導(dǎo)航欄、標(biāo)簽欄和工具欄（包括這些欄上的項(xiàng)）。為這些元素提供可縮放的圖片可以提升app的性能。

對(duì)于很多UI元素，你可以在背景基礎(chǔ)上指定端蓋。端蓋定義了一張圖片中不會(huì)被縮放的區(qū)域。比如，你可能會(huì)創(chuàng)建一張包含四個(gè)端蓋的可縮放的圖片，這四個(gè)端蓋定義了按鈕的四個(gè)角。當(dāng)縮放圖片來(lái)填充按鈕的背景區(qū)域時(shí)，端蓋定義的部分不會(huì)發(fā)生變化。

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

通常來(lái)說(shuō)，你應(yīng)該提供能夠達(dá)到想要效果的最小的圖片（除了端蓋）。比如：

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