來人人都是産品經理【起點學院】，BAT實戰派産品總監手把手系統帶你學産品、學運營。
文章索引
譯者注：本章是iOS Human Interface Guideline的最後一章，文末附上全文PDF下載地址。譯文如有任何疏漏之處，或任何意見或建議，請不吝指出，翻譯組感謝大家長久以來的關注和支持！
每個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位。
每一個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中的辨識度。
如果你的iOS app會創建自定義類型的文件，而你希望用戶一眼就能看出這些文件是由你的app生成的。你不需要為這些文檔重新設計圖标，因為iOS會自動把你的app icon來作為這些文檔的圖标。
每個app都應該提供一個小尺寸的圖标，用于在spotlight搜索結果中展示。同樣地，每個app都應該提供一個小尺寸的圖标，用于在系統内置的設置頁面中展示。
這些icon應該易于辨識，方便用戶在搜索結果列表或者設置頁的app列表中一眼就可以看出來。舉個例子，在下圖設置界面中，這些icon雖然很小，但每一個都清晰可辨：
和app icons一樣，你可以任意命名這些小icon，因為iOS在使用的時候通常會照慣例自動選擇合适尺寸的icon。
對于所有的設備，請分别為Spotlight搜索結果和設置界面單獨提供icon。如果你沒有提供這些icon，在這些位置iOS可能會縮小你的應用icon。表格45-1顯示了不同尺寸的詳細信息。
注意：
如果你的icon底色是白色的，不需要增加灰色遮罩來增強app在設置界面的可見度。iOS會自動為icon增加1像素的描邊，來保證在白色背景的設置界面中所有icon都能達到良好的顯示效果。
啟動畫面是在你的應用啟動時展示的簡單占位圖。由于啟動畫面會在用戶啟動你的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首屏一樣的啟動畫面。除非：
如果你認為遵循這些規範，往往隻會設計出平凡而乏味的啟動圖片，倒也沒說錯。請記住，啟動圖片不意味着需要你在裡面炫技，它的目标隻是增強用戶對應用可以被快速啟動并開始使用的感受。例如系統設置和天氣應用都僅僅提供了一個相當于背景的啟動圖片。
系統設置的啟動圖片
天氣應用的啟動圖片
如果你需要使用靜态啟動圖片，你需要準備尺寸不同的啟動畫面以适應不同的設備，且所有設備上的靜态啟動圖片都必須包含狀态欄的區域。具體尺寸請查閱表格 45-1。
雖然最好在 iPhone 6 和 iPhone 6 Plus 上使用啟動文件，但需要的話，你也可以替換為靜态啟動圖片。如果你需要為 iPhone 6 和 iPhone 6 Plus 創建靜态啟動圖片，請使用以下尺寸：
For iPhone 6:
For iPhone 6 Plus:
你為工具欄或主屏幕快速操作創建的自定義圖标，也就是模闆圖标或圖片，因為當你的 app 運行時，iOS 将它作為一個 mask(iOS的一個開發相關名詞)來介紹你所看到的圖标。
iOS 定義了很多标準的小圖标，例如刷新、操作、增加及收藏等。如果可能的話，你應當使用這些按鈕和圖标來表示 app 裡的常規任務。(了解更多可以使用的标準按鈕及圖标，可參見4.1.4 工具欄與導航标準按鈕和4.1.6 标簽欄标準圖标章節。)
如果你的app中包含标準按鈕圖标不能代表的任務或者模式——又或者标準按鈕與你的app風格相差太遠——你可以設計自己的欄按鈕圖标。以更高的要求來看，你應該以下列幾點為目标來設計icon：
重要：
确保你的設計中沒有複用蘋果官方産品的圖形。這些标志受版權保護，而且相關産品的設計會頻繁變化。
無論你是隻使用自己設計的圖标，或者是與系統标準圖标混用，所有你的app中出現的圖标都應該看起來屬于同一種風格：它們看起來擁有同樣的尺寸、細節精度以及視覺權重。
舉個例子，下圖中的iOS欄标準圖标，你會注意到他們之間在尺寸、細節和重量上都擁有很高的相似性，從而形成了一個協調的聯合體：
想要設計一套風格協調連貫的圖标，一緻性是關鍵：盡量讓每個圖标都使用相同的透視和粗細相同的線條。為了保證所有的icon尺寸視覺上統一，你可能需要設計一些實際上尺寸并不相同的icon。舉個例子，下面這組系統标準圖标看起來大小一緻，但實際上收藏夾和語音郵箱的icon比其它三個略大一些。
如果你在設計用于标簽欄的圖标，你應該提供圖标的兩種狀态——未選中态和選中态。通常選中态是非選中态填充了顔色的樣子，但有些設計需要在此方法的前提下進行一些變化：
創建有内部細節的圖标的選中态版本時(例如收音機圖标)，将内部細節反過來填充，以确保這些細節在選中态依然突出。鍵區圖标雖然也擁有一些内部細節，但如果對選中态的背景進行填充，并在圓圈上增加白色邊線，就會令用戶感到混淆。
有時候給予選中态一些細微的變化令其有更好的顯示效果。例如計時器和播客的圖标都包含一些開放的區域，所以選中态将其描邊略微縮小并放在了一個圓圈内。
如果圖标在填充後會讓人難以辨認，好的替代方案就是使用更重的描邊來表示選中态。例如語音郵箱和閱讀列表的圖标的選中态就是使用了 2 點的描邊，而未選中态是用 1 點來描邊的。
有些圖标由于形狀細節的關系，增加描邊後看起來并不好。例如這幾個案例——音樂和藝術家的圖标——兩種狀态都使用填充效果。用戶很簡單就能分辨出選中态和未選中态，因為選中态有顔色，視覺表現更重一些。
設計模闆圖标時，需要遵循以下規則：
如果你要設計一個看起來足夠有 iOS 原生感的圖标，你可以使用細描邊來繪制它。具體來說，使用 1-point 描邊(也就是在 @2x 分辨率下是 2 像素描邊)
不管圖标的是怎樣的視覺風格，都需要按照尺寸表表格 45-1來創建自定義工具欄、導航欄以及标簽欄的圖标。如果你設計的是主屏幕快速操作的模闆圖标，詳情參見3.1.2 主屏幕快捷操作。
不要在自定義标簽欄圖标中包含文本，而是使用标簽欄的 API 來為每一個标簽設置标題(例如initWithTitle:image:tag:)。如果你需要調整标題的自動布局，你可以使用标題 API 例如setTitlePositionAdjustment:)。
對于網頁應用或網站，你可以提供一個定制圖标，讓你的用戶通過網頁剪輯(Web clip)将你的app展現在主屏幕上。用戶隻需要點擊這個icon便可直接獲取你的網頁内容。你可以創建一個可以代表你的整個網站或某個單獨網頁的圖标。
iOS也會在Safari的收藏夾中展示網頁圖标，當用戶點擊Safari的URL欄或者打開一個新的網頁标簽時，這些網頁圖标就會以矩陣的形式出現。
如果你的網頁内容使用了常用的圖像或容易辨認的配色方案，你的icon也應該融入這些特征。然而，為了确保圖标在設備中更加漂亮，你應該同時遵循以下這些指南：(想要了解如何在你的網頁内容中增加代碼來提供自定義圖标，請參考Specifying a Webpage Icon for Web Clip)。
對于的尺寸的圖标，請參考表格 45-1。
注意：
盡量避免把你的icon命名為apple-touch-icon-precomposed.png.
你可以通過制作可縮放圖片來定制一些标準UI元素的背景，如彈窗，按鈕，導航欄，标簽欄等，還包括這些欄上的項。提供這些元素的可縮放圖片會優化app的整體性能。
對于許多界面元素，你可以使用端蓋來替代背景。端蓋可定義圖像内的一個不被放大或縮小的區域。例如，你可以創建一個包含 4 個端蓋的可拉伸圖片，将其作為一個按鈕的 4 個角。當圖片被縮放來适應按鈕大小時，被端蓋指定的四個角則不會發生變化。
據你所提供的可縮放圖片，iOS會進行拉伸或者平鋪，直到圖片可以正确填充當前UI元素的背景區域。拉伸指的是在不考慮圖片原始比例的情況下放大圖片。拉伸圖片的性能較高，但對于多像素圖片來說，會出現失真現象。平鋪指的是按照圖片的原始尺寸多次複制圖片，直到填充目标區域。平鋪的性能較低，但它是能夠準确實現紋理和圖案的唯一方法。
一般來說，提供一張不包含端蓋的最小尺寸可縮放圖像即可達到想要的效果，比如：
本章英文原文訪問地址：iOS Human Interface Guidelines
中文翻譯PDF下載：
密碼：eo5v
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
