要想發布一款能夠位于App Store排行榜之首的産品，産品在質量和功能上的高标準表現是必不可少的，而為了達到這種高度，我們應該如何做呢？本文主要講述的是 iOS 12 界面交互設計指南中的圖标圖像部分，一起來看看~

一、圖像大小和分辨率

1. 圖像大小和分辨率

iOS使用坐标系統來将内容放置在屏幕上，這個坐标系統主要基于對點測量，每個點又可以反映為屏幕中的像素。在标準分辨率屏幕上，一個點（1/72英寸）等于一個像素，高分辨率屏幕具有更高的像素密度。因為在相同數量的物理空間中有更多的像素，也就是說每個點有更多的像素，因此，高分辨率顯示器需要更多像素的圖像。

提供你的應用所支持的所有設備的高清晰度圖像：

根據設備的不同，應用可以通過将每個圖像中的像素數乘以特定的比例因子來完成此操作。标準分辨率圖像的比例為1.0，稱為@ 1x圖像。高分辨率圖像的比例為2.0或3.0，稱為@ 2x和@ 3x圖像。假設您有一個标準分辨率@ 1x圖像，例如：100px×100px。此圖像的@ 2x版本為200px×200px，@ 3x版本為300px×300px。

2. 設計高分辨率的作品

（1）使用8px-by-8px網格

網格保持線條清晰，确保内容在所有尺寸下盡可能清晰，需要較少的修飾和銳化。将圖像邊界捕捉到網格，以最小化縮小時可能出現的半像素和模糊細節。

（2）以适當的格式制作藝術作品

通常，對位圖/栅格圖稿使用去隔行PNG文件。PNG支持透明度，因為它是無損的，壓縮工件不會模糊重要細節或改變顔色。對于需要陰影，紋理和高光等效果的複雜藝術品來說，它是一個不錯的選擇。

将JPEG用于照片，它的壓縮算法通常比無損格式産生更小的尺寸，并且在照片中難以識别僞像。但是，照片般逼真的應用程序圖标看起來最适合PNG，将PDF用于需要高分辨率縮放的字形和其他平面矢量圖稿。

（3）将8位調色闆用于不需要完整24位顔色的PNG圖形

使用8位調色闆可減小文件大小而不會降低圖像質量，此調色闆不适用于照片。

（4）優化JPEG文件以在大小和質量之間找到平衡

可以壓縮大多數JPEG文件，而不會導緻生成的圖像明顯降級，即使少量壓縮也可以節省大量磁盤空間。嘗試對每個圖像進行壓縮設置，以找到産生可接受結果的最佳值。

（5）為圖像和圖标提供替代文本标簽

替代文字标簽在屏幕上不可見，但它們讓VoiceOver可聽見地描述屏幕上的内容，使視力障礙人士更容易導航。

二、應用圖标

每個應用都需要一個精美、令人印象深刻的圖标，能在蘋果商店和主屏幕奪人眼球。輕瞥圖标的瞬間，是你的第一個機會來傳達你的應用。你的圖标也會在系統中經常出現，比如在設置裡和在搜索結果裡。

（1）擁抱簡潔

尋找個單一的元素能夠表現你的app的精髓，然後通過一個簡單但是獨特的形狀來表現這個元素，謹慎地添加細節部分。如果一個圖标的内容或是形狀過于複雜，那麼細節就很難辨認了，尤其是在更小的尺寸時。

（2）提供一個單獨的焦點

為圖标設計一個單獨的、集中的點，使它能快速吸引注意力并且明确地代表你的應用。

（3）設計一個易于辨識的圖标

用戶不應通過分析圖标才能弄清楚它代表什麼，比如：郵件應用的圖标使用了一個信封，因為它普遍與郵件聯系在一起。花點時間去設計一個好看迷人且精煉的圖标，藝術性地傳達你的應用的目的。

（4）保持背景簡單并且避免使用透明度

确保你的圖标是不透明的，并且不要讓背景變得雜亂。使用一個簡單的背景，這樣它就不會過度影響周圍的其它圖标，你沒有必要将整個圖标填滿内容。

（5）隻有當logo全部或部分由文字組成時，才在圖标使用文字

在主屏幕時，一個應用的名稱會在圖标之下顯示。不要包含沒有意義的文字重複說明名稱或是告訴用戶該如何使用你的應用，比如：“Watch”或“Play”。如果你的設計包含了一些文字，那麼請強調文字與你的應用提供的實際内容相關。

（6）不要包含照片、屏幕截圖或是界面元素

影像細節在很小的尺寸會難于辨認，屏幕截圖對于一個應用圖标來說太複雜了，也一般不利于傳達應用的目的，在圖标中的界面元素會令人誤解并且困惑。

（7）不要複用Apple硬件産品的圖形

Apple産品受版權保護，不能在你的圖标或是圖片中被二次創作。一般來說，避免複用設備的圖形，因為硬件設計頻繁地更新換代，這會導緻你的圖标看起來易于過時。

（8）不要在界面裡到處放置應用圖标

在應用裡發現一個圖标用于多種目的會讓人困惑，反之，考慮使用圖标的色彩方案。請參閱 Color。

（9）在不同的壁紙下測試你的圖标

你不能預期用戶會為他們的主屏幕選擇什麼樣的壁紙，所以不要隻是在一種深色和一種淺色的背景上測試你的圖标，而是觀察它在不同的照片上如何表現。在有動态背景的真實設備上試用它，因為背景會随着設備移動而改變視角。

（10）保證圖标的四角是方的

系統會自動覆蓋一個遮罩層讓圖标變成圓角。

應用程序圖标屬性

所有應用程序圖标都應符合以下規範。

應用程序圖标大小

每個應用程序必須提供小圖标，以便在安裝應用程序後在主屏幕和整個系統中使用，以及在App Store中顯示的較大圖标。

為不同的設備提供不同大小的圖标，确保您支持的所有設備上的應用圖标都很棒。

使用App Store圖标模仿您的小圖标，雖然App Store圖标的使用方式與小圖标不同，但它仍然是您的應用程序圖标。它通常應該與較小版本的外觀相匹配，雖然它可以巧妙地更加豐富和更加細緻，因為它沒有應用視覺效果。

Spotlight，設置和通知圖标

每個應用程序還應提供一個小圖标，當應用程序名稱與Spotlight搜索中的術語匹配時，iOS可以顯示該圖标。此外，具有設置的應用應提供一個小圖标以顯示在内置的“設置”應用中，支持通知的應用應提供一個小圖标以顯示在通知中。

所有圖标都應清楚地标識您的應用，理想情況下，它們應與您的應用圖标相匹配。如果您不提供這些圖标，iOS可能會縮小您的主應用程序圖标以便在這些位置顯示。

不要在“設置”圖标上添加疊加層或邊框，iOS會自動為所有圖标添加1像素筆劃，以便它們在“設置”的白色背景上看起來很好。

提示如果您的應用程序創建自定義文檔，則無需設計文檔圖标，因為iOS使用您的應用程序圖标自動創建文檔圖标。

用戶可選的應用程序圖标

對于某些應用程序，自定義是一種喚起個人聯系并增強用戶體驗的功能。如果它在您的應用中提供價值，您可以讓人們從應用中嵌入的一組預定義圖标中選擇備用應用圖标。例如：體育應用可能會為不同的團隊提供圖标，或者具有明暗模式的應用可能會提供相應的明暗圖标。請注意，您的應用圖标隻能根據用戶的請求進行更改，系統始終會向用戶提供此類更改的确認。

提供所有必要尺寸的視覺上一緻的備用圖标，與主應用程序圖标一樣，每個備用應用。

三、自定義圖标

如果你的應用含有不能用系統圖标表示的任務或模式，又或是系統圖标與你的應用風格不符，你可以設計你自己的圖标。自定義圖标通常被叫做模闆，它不含有色彩信息并且通過mask來創建你在導航欄、标簽欄、工具欄或是主屏幕快速操作視圖看到的圖标樣式。

（1）創作簡單、辨識度高的設計

太多的細節會讓圖标看起來粗糙且不具可讀性，為一個大多數用戶都能正确理解并且不會反感的設計而努力。

（2）設計圖标作為标志符号

字形，也稱為模闆圖像，是具有透明度，抗鋸齒效果的單色圖像，并且沒有使用蒙版來定義其形狀的陰影。字形根據上下文和用戶交互自動獲得适當的外觀，包括着色，突出顯示和活力，各種标準界面元素支持字形，包括導航欄、标簽欄、工具欄和主屏幕快速操作。

（3）準備比例因子為@ 2x的字形并将其另存為PDF

由于PDF是一種允許高分辨率縮放的矢量格式，因此在應用程序中提供單個@ 2x版本并允許其擴展以用于其他分辨率通常就足夠了。

（4）保持圖标之間一緻連貫

無論你隻使用自定義圖标或是混合使用自定義圖标和系統圖标，在應用中的所有圖标都應該在大小、細節程度、透視和描邊粗細上保持一緻。

（5）确保圖标清晰易讀

通常，實體圖标往往比概述圖标更清晰。如果圖标必須包含線條，請将權重與其他圖标和應用程序的排版進行協調。

（6）使用顔色來傳達選定和取消選擇的狀态

避免在兩種不同的圖标設計之間切換，例如：純色版本和概述版本。

（7）避免在圖标中包含文字

如果您需要文字，請在圖标下方顯示标簽并相應調整其位置。

（8）不要使用Apple硬件産品的副本

Apple産品受版權保護，無法在您的圖标或圖像中複制。通常，避免顯示設備的副本，因為硬件設計往往會經常更改，并且可能使您的圖标看起來過時。

（9）為圖标提供替代文本标簽

自定義圖标大小

最重要的是，您的應用程序的圖标系列在大小上應該在視覺上保持一緻。如果單個圖标設計的重量不同，則某些圖标可能需要略大于其他圖标以實現此效果。

（1）導航欄和工具欄圖标大小

在準備自定義導航欄和工具欄圖标時，請使用以下尺寸作為指導，但根據需要進行調整以創建平衡。

（2）标簽欄圖标大小

在縱向方向上，标簽欄圖标顯示在标簽标題上方。在橫向方向上，圖标和标題并排顯示。根據設備和方向，系統顯示常規或緊湊的标簽欄，您的應用應包含兩種尺寸的自定義标簽欄圖标。

四、啟動頁

啟動頁出現在應用剛開始啟動時候，随後，啟動頁會很快被應用的首屏代替，讓人感覺你的應用是快速響應的。啟動頁不是一個炫技的時機，它隻是為了增強用戶對你的應用能夠快速啟動并且立即被使用的感受。每個應用都應該提供一個啟動頁。

啟動屏幕

第一個屏幕

由于設備屏幕大小不同，啟動頁的大小也有所差異。你可以以Xcode故事闆或是一組靜态（static）圖片的形式，為你的應用所支持的設備提供啟動頁。因為Xcode故事闆靈活性高且易于适配，所以推薦采用該形式，你可以使用一個單獨的故事闆來管理你的所有啟動頁。了解關于可适配界面的開發細節，請參閱 Auto Layout Guide。

（1）設計一個與你的app首屏幾乎相似的啟動頁

如果你的啟動頁包含了與首屏看起來不同的元素，那麼用戶會在啟動頁過渡至應用首屏時經曆一次不愉快的跳轉體驗。

（2）避免在啟動頁包含文本

因為啟動頁是靜态的（static），任何展示的本文都不能被定位。

（3）淡化啟動

用戶通常會在不同的應用之間頻繁切換，所以請設計一個啟動頁，能夠讓應用的啟動體驗不易被人察覺。

（4）不要打廣告

啟動頁不是一個宣傳品牌的時機，不要設計一個類似開屏廣告或是介紹窗口的登入體驗。不要在啟動畫面包涵logo或是其它品牌元素，除非它們是你的應用首屏的靜态（static）元素。

（5）靜态啟動畫面圖片

最好使用Xcode故事闆制作啟動頁，但必要時你也可以提供一組靜态圖片。根據設備創建不同尺寸的靜态圖片，并不要忘記包涵狀态欄區域。

五、系統圖标

iOS提供了大量表示常用的任務和内容類型的小圖标，用來在導航欄、标簽欄、工具欄和主屏幕快速操作中使用。因為用戶對這些圖标很熟悉，所以最好盡可能地使用這些内置的圖标。

盡可能多地使用這些内置圖标是個好主意，因為它們對人們來說很熟悉。

（1）按預期使用系統圖标

每個系統提供的圖像都具有特定的，衆所周知的含義。為避免混淆用戶，必須根據每個圖像的含義和推薦用法使用它們。

（2）為圖标提供替代文本标簽

（3）如果找不到符合您需求的系統提供的圖标，請設計自定義圖标

設計自己的設備比濫用系統提供的圖像更好。見自定義圖标。

導航欄和工具欄圖标：

TIP：你可以在導航欄和工具欄使用文本代替圖标來表示某項，比如：日曆應用在工具欄使用“今天”、“日曆”和“收件箱”三個字符。你還可以使用固定空間（fixed space）元素為導航欄和标簽欄的圖标提供間距。

标簽欄圖标

快速操作圖标

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部