騰訊力作系列：
譯者注：本章是iOS Human Interface Guideline的最後一章，文末附上全文PDF下載地址。譯文如有任何疏漏之處，或任何意見或建議，請不吝指出，感謝大家長久以來的關注和支援！
5.1 圖示與影像尺寸(Icon and Image Sizes)
每個app都需要icon，以及啟動畫面，此外一些app需要一些自定義圖示用於導航欄、工具欄和標籤欄中，來代表app特有的內容、功能或模式。表格45-1所羅列出來的尺寸可以為自定義圖示和圖片做參考。
表格45-1 ：自定義圖示和影像的尺寸(畫素)
注意：
如果你需要在主螢幕快捷操作上建立自定義icon，請參考主螢幕快捷操作 。
除了AppStore的icon，你必須把命名為iTunesArtwork之外，你可以任意命名你的icon。在xcode工程中可以使用圖片資源目錄來組織你的圖片icon檔案。如果要新增icon，在工程圖片資源目錄下新增對應的圖片檔案。在編譯時，xcode新增合適的金鑰到你的應用Info.plist檔案中並且把圖片打包進應用中。iOS會根據裝置尺寸選擇一個合適的icon。關於asset catalogs想要知道更多，可以查閱Asset Catlog Help。
所有的圖片和icon建議使用png格式，避免使用交錯的png。icon和影像的標準位深(bit depth)是24位。
5.2 應用圖示(App Icon)
每一個app都需要一個精美、辨識度高的icon來讓自己在App Store和使用者桌面中脫穎而出。在iOS中，各個不同尺寸的icon將被用於Game Center，搜尋結果，設定之中，還會用於代表由這個app建立的文件。
為了讓icon達到最好的效果，你可以求助於專業設計師。一個有經驗的設計師可以為你的app建立統一的視覺風格，同時把這種風格延續和濃縮到icon的設計中。
使用通用的易於辨識的圖形。一般來說，避免使用意義不明的視覺元素，或者使用元素的次要含義。舉個例子，郵件App會使用信封作為icon元素，而不會用郵箱、郵遞員的郵包、或者郵局的標誌。
追求簡約。尤其是避免把一大堆不同的圖形都塞到你的icon中去。找到一個簡單的、可以代表你的app精髓的元素，然後把它設計成一個簡單而獨特的圖形。新增細節時請慎重，如果一個icon的樣式或形狀過於複雜，它的細節可能會讓使用者迷惑，在小尺寸的icon中更可能會顯示模糊。
注意：
想要測試你的圖示在小尺寸下的顯示效果，可以把它移動到主屏的資料夾下。最好是再往資料夾中多放幾個不同的icon，然後看看你的app icon好看是否好看和突出。
在icon中為你的app設計一個抽象釋義。在icon設計中照片或者截圖效果通常都會很糟糕，那是因為這些相片級的細節在小尺寸中非常難以辨識。因此，我們最好以藝術的方式來詮釋現實，因為這樣能夠讓使用者很容易領悟到你想他們注意到的方面。
如果你堅持完全擬物化，請務必做到十分精確。代表真實物品的icon或者影像應該精確地描摹出實物的特徵，如織物、玻璃、紙張、金屬等等，還要能表達實物的重量和質感。
保證你的icon在不同的背景圖中都是好看的。不要只是單一在淺色或者深色背景中測試你的icon效果，因為你無法預料你的使用者會使用什麼樣的牆紙。
避免使用透明度。App icon必須是不透明的。如果icon的邊界小於推薦尺寸，又或者你建立了透明區域，那麼你的icon下面就會出現黑色背景，你的icon將會浮於黑背景之上，這在使用者所用的漂亮桌布上看起來不美觀。
不要在圖示中使用iOS的介面元素。你一定不希望使用者會把你的app icon或圖形與iOS的系統UI搞混。
不要在icon中使用蘋果的硬體產品標誌。代表蘋果產品的各個標誌都是受版權保護的，不允許複用到你的icon或者圖形中。一般來說，要避免在你的icon中複用任何特定裝置標誌，因為這些標誌的設計常常變化，而基於這些設計的icon和圖形很容易就會過時。
不要在你的介面中複用iOS自帶的app icon。同樣的icon含義卻有輕微不同，還同時出現在整個系統的不同位置之中，這會讓使用者非常困惑。
為不同裝置準備不同大小的icon。你需要確保你的應用icon支援所有的裝置。對於不同裝置應該選用的icon尺寸，可以參考表格45-1。
當icon出現在iOS桌面上的時候，它會自動疊加圓角。請保證你的icon四個角都是90°，這樣它們在圓角處理後仍然很好看。舉個例子：
建立一個大尺寸的app icon，用於顯示在App Store上。雖然讓你的使用者能輕易認出你的icon這點很重要，但相比之前這些尺寸，這個尺寸的icon允許你新增更多精巧的細節。這個尺寸的app icon顯示在App Store上時將不再額外新增任何視覺效果。
如同表格45-1所示，更大尺寸1024×1024畫素的icon應該被命名為iTunesArtWork@2x(如果需要支援@1x的裝置，建立一個大小為512×512畫素的icon，並且命名為iTunesArtWork)
注意：
iOS可能會把大尺寸icon用於其它用途。比如在iPad app中，iOS會用大尺寸icon來生成大的文件圖示。
如果你正在開發一個臨時釋出的App(也就是說，它只是內部發布沒有放在Appstor上)，你必須提供一個大尺寸的App icon,這個icon將會提高它在iTunes中的辨識度。
5.2.1 文件圖示(Document Icons)
如果你的iOS app會建立自定義型別的檔案，而你希望使用者一眼就能看出這些檔案是由你的app生成的。你不需要為這些文件重新設計圖示，因為iOS會自動把你的app icon來作為這些文件的圖示。
5.2.2 用於Spotlight和設定的圖示(Spotlight and Settings Icons)
每個app都應該提供一個小尺寸的圖示，用於在spotlight搜尋結果中展示。同樣地，每個app都應該提供一個小尺寸的圖示，用於在系統內建的設定頁面中展示。
這些icon應該易於辨識，方便使用者在搜尋結果列表或者設定頁的app列表中一眼就可以看出來。舉個例子，在下圖設定介面中，這些icon雖然很小，但每一個都清晰可辨：
和app icons一樣，你可以任意命名這些小icon，因為iOS在使用的時候通常會照慣例自動選擇合適尺寸的icon。
對於所有的裝置，請分別為Spotlight搜尋結果和設定介面單獨提供icon。如果你沒有提供這些icon，在這些位置iOS可能會縮小你的應用icon。表格45-1顯示了不同尺寸的詳細資訊。
注意：
如果你的icon底色是白色的，不需要增加灰色遮罩來增強app在設定介面的可見度。iOS會自動為icon增加1畫素的描邊，來保證在白色背景的設定介面中所有icon都能達到良好的顯示效果。
5.3 啟動畫面(Launch Files)
啟動畫面是在你的應用啟動時展示的簡單佔點陣圖。由於啟動畫面會在使用者啟動你的app時立刻出現，並且很快地被app的首屏取代，它會讓使用者認為你的app執行和響應的速度都非常快。每一個應用都要提供一個啟動檔案或至少一張靜態圖片。
在 iOS8 以後，你可以使用一個 XIB 或故事板檔案來替代靜態的啟動圖片。在 Interface Builder 中建立啟動檔案後，使用尺寸歸類來為不同的介面環境定義不同的層，你還可以使用自動佈局來進行細節調整。利用尺寸歸類和自動佈局，你可以只建立一個啟動檔案，就可以在所有裝置裡都有不錯的呈現。(如果要了解呈現環境和尺寸歸類的概覽， 參見1.3.1 為自適應而開發；瞭解如何在 Interface Builder 中使用尺寸歸類，可參見Size Classes Design Help 。)
如果你需要支援早期的 iOS 版本，除啟動檔案外可以繼續使用靜態啟動圖片。
重要：
使用 XIB 或故事板的檔案，表示你的應用程式在iPhone 6 Plus 或 iPhone 6上執行。
以下的設計規範，適用於啟動檔案及靜態圖片：
簡單的啟動圖片可以提升使用者體驗。通常情況下，啟動圖片不需要提供如下內容：
- “進入應用的過程”，例如載入程式圖。
- 帶有“關於資訊”的視窗。
- 品牌元素，除非它們是 app 第一屏的靜態內容。
由於使用者會在 app 之間頻繁地切換，所以你應該儘可能地縮短載入時間，通過設計降低使用者對啟動過程的感知，而不是加重使用者對啟動的印象。
我們也可以設計一個與APP首屏一樣的啟動畫面。除非：
- 文字。啟動圖片是靜態的，所以啟動圖片中的任何文字都不會有侷限。
- 可能會變化的 UI 元素。如果 app 啟動完成後有元素髮生可見的變化，使用者可能會對啟動畫面和第一屏之間的變化感到不適應。
如果你認為遵循這些規範，往往只會設計出平凡而乏味的啟動圖片，倒也沒說錯。請記住，啟動圖片不意味著需要你在裡面炫技，它的目標只是增強使用者對應用可以被快速啟動並開始使用的感受。例如系統設定和天氣應用都僅僅提供了一個相當於背景的啟動圖片。
系統設定的啟動圖片
天氣應用的啟動圖片
如果你需要使用靜態啟動圖片，你需要準備尺寸不同的啟動畫面以適應不同的裝置，且所有裝置上的靜態啟動圖片都必須包含狀態列的區域。具體尺寸請查閱表格45-1 。
雖然最好在 iPhone 6 和 iPhone 6 Plus 上使用啟動檔案，但需要的話，你也可以替換為靜態啟動圖片。如果你需要為 iPhone 6 和 iPhone 6 Plus 建立靜態啟動圖片，請使用以下尺寸：
For iPhone 6:
- 縱向： 750 x 1334 畫素(@2x)
- 橫向： 1334 x 750 畫素(@2x)
For iPhone 6 Plus:
- 縱向： 1242 x 2208 畫素 (@ 3X)
- 橫向： 2208 x 1242 畫素 (@ 3X)
5.4 模板圖示(Template Icons)
你為工具欄或主螢幕快速操作建立的自定義圖示，也就是模板圖示或圖片，因為當你的 app 執行時，iOS 將它作為一個 mask(iOS的一個開發相關名詞)來介紹你所看到的圖示。
iOS 定義了很多標準的小圖示，例如重新整理、操作、增加及收藏等。如果可能的話，你應當使用這些按鈕和圖示來表示 app 裡的常規任務。(瞭解更多可以使用的標準按鈕及圖示，可參見4.1.4 工具欄與導航標準按鈕和4.1.6 標籤欄標準圖示章節。)
如果你的app中包含標準按鈕圖示不能代表的任務或者模式——又或者標準按鈕與你的app風格相差太遠——你可以設計自己的欄按鈕圖示。以更高的要求來看，你應該以下列幾點為目標來設計icon：
- 簡單明瞭。太多的細節會令圖示看起來過於草率且識別度低。
- 不容易與系統圖示混淆。使用者應該一眼就在你的圖示和系統圖示中區分出來 。
- 易於理解並被廣泛接受。嘗試創造多數使用者都能正確理解的標誌，並不讓它們感到攻擊性。
重要：
確保你的設計中沒有複用蘋果官方產品的圖形。這些標誌受版權保護，而且相關產品的設計會頻繁變化。
無論你是隻使用自己設計的圖示，或者是與系統標準圖示混用，所有你的app中出現的圖示都應該看起來屬於同一種風格：它們看起來擁有同樣的尺寸、細節精度以及視覺權重。
舉個例子，下圖中的iOS欄標準圖示，你會注意到他們之間在尺寸、細節和重量上都擁有很高的相似性，從而形成了一個協調的聯合體：
想要設計一套風格協調連貫的圖示，一致性是關鍵：儘量讓每個圖示都使用相同的透視和粗細相同的線條。為了保證所有的icon尺寸視覺上統一，你可能需要設計一些實際上尺寸並不相同的icon。舉個例子，下面這組系統標準圖示看起來大小一致，但實際上收藏夾和語音郵箱的icon比其它三個略大一些。
如果你在設計用於標籤欄的圖示，你應該提供圖示的兩種狀態——未選中態和選中態。通常選中態是非選中態填充了顏色的樣子，但有些設計需要在此方法的前提下進行一些變化：
建立有內部細節的圖示的選中態版本時(例如收音機圖示)，將內部細節反過來填充，以確保這些細節在選中態依然突出。鍵區圖示雖然也擁有一些內部細節，但如果對選中態的背景進行填充，並在圓圈上增加白色邊線，就會令使用者感到混淆。
有時候給予選中態一些細微的變化令其有更好的顯示效果。例如計時器和播客的圖示都包含一些開放的區域，所以選中態將其描邊略微縮小並放在了一個圓圈內。
如果圖示在填充後會讓人難以辨認，好的替代方案就是使用更重的描邊來表示選中態。例如語音郵箱和閱讀列表的圖示的選中態就是使用了 2 點的描邊，而未選中態是用 1 點來描邊的。
有些圖示由於形狀細節的關係，增加描邊後看起來並不好。例如這幾個案例——音樂和藝術家的圖示——兩種狀態都使用填充效果。使用者很簡單就能分辨出選中態和未選中態，因為選中態有顏色，視覺表現更重一些。
設計模板圖示時，需要遵循以下規則：
- 使用帶的透明度的純色來繪製圖示。iOS會去除所有的顏色資訊，所以不需要使用超過 1 種填充色。
- 不要使用陰影。
- 圖形需要平滑無鋸齒。
如果你要設計一個看起來足夠有 iOS 原生感的圖示，你可以使用細描邊來繪製它。具體來說，使用 1-point 描邊(也就是在 @2x 解析度下是 2 畫素描邊)
不管圖示的是怎樣的視覺風格，都需要按照尺寸表表格 45-1來建立自定義工具欄、導航欄以及標籤欄的圖示。如果你設計的是主螢幕快速操作的模板圖示，詳情參見3.1.2 主螢幕快捷操作 。
不要在自定義標籤欄圖示中包含文字，而是使用標籤欄的 API 來為每一個標籤設定標題(例如initWithTitle:image:tag: )。如果你需要調整標題的自動佈局，你可以使用標題 API 例如setTitlePositionAdjustment: )。
5.5 網頁圖示(Web Clip Icons)
對於網頁應用或網站，你可以提供一個定製圖示，讓你的使用者通過網頁剪輯(Web clip)將你的app展現在主螢幕上。使用者只需要點選這個icon便可直接獲取你的網頁內容。你可以建立一個可以代表你的整個網站或某個單獨網頁的圖示。
iOS也會在Safari的收藏夾中展示網頁圖示，當使用者點選Safari的URL欄或者開啟一個新的網頁標籤時，這些網頁圖示就會以矩陣的形式出現。
如果你的網頁內容使用了常用的影像或容易辨認的配色方案，你的icon也應該融入這些特徵。然而，為了確保圖示在裝置中更加漂亮，你應該同時遵循以下這些指南：(想要了解如何在你的網頁內容中增加程式碼來提供自定義圖示，請參考Specifying a Webpage Icon for Web Clip)。
對於的尺寸的圖示，請參考表格45-1。
注意：
儘量避免把你的icon命名為apple-touch-icon-precomposed.png.
5.6 建立可縮放圖片(Creating Resizable Images)
你可以通過製作可縮放圖片來定製一些標準UI元素的背景，如彈窗，按鈕，導航欄，標籤欄等，還包括這些欄上的項。提供這些元素的可縮放圖片會優化app的整體效能。
對於許多介面元素，你可以使用端蓋來替代背景。端蓋可定義影像內的一個不被放大或縮小的區域。例如，你可以建立一個包含 4 個端蓋的可拉伸圖片，將其作為一個按鈕的 4 個角。當圖片被縮放來適應按鈕大小時，被端蓋指定的四個角則不會發生變化。
據你所提供的可縮放圖片，iOS會進行拉伸或者平鋪，直到圖片可以正確填充當前UI元素的背景區域。拉伸指的是在不考慮圖片原始比例的情況下放大圖片。拉伸圖片的效能較高，但對於多畫素圖片來說，會出現失真現象。平鋪指的是按照圖片的原始尺寸多次複製圖片，直到填充目標區域。平鋪的效能較低，但它是能夠準確實現紋理和圖案的唯一方法。
一般來說，提供一張不包含端蓋的最小尺寸可縮放影像即可達到想要的效果，比如：
- 如果你需要不包含漸變的實色圖，製作1×1畫素的圖片。
- 如果你需要垂直簡便的效果，製作一個寬度為1畫素，高度與UI元素背景區域高度相等的影像。
- 如果你需要重複的紋理效果，你需要製作一個尺寸與紋理最小重複部分尺寸相等的影像。
- 如果你需要不重複的紋理效果，你需要製作一個與你的UI元素背景區域大小相等的靜態影像。
本章英文原文訪問地址：iOS Human Interface Guidelines
全文中文翻譯PDF下載：點此下載