iOS 9 人機界面指南(五)：圖標與圖形設計（附指南全文pdf下載）

【騰訊ISUX】版權全部，IXDC獲受權發佈

譯者注：本章是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元素背景區域大小相等的靜態圖像。

出處：騰訊ISUX (https://isux.tencent.com/ios9-guideline-ch5.html)

本章英文原文訪問地址：iOS Human Interface Guidelines

全文中文翻譯PDF下載