盡管圖標(biāo)非常小，但圖標(biāo)會(huì)在App Store和Google Play中顯示，向用戶傳達(dá)app的信息，并且安裝后能在主屏幕上找到它，因此圖標(biāo)非常重要。

當(dāng)?shù)谝淮蚊媾R繪制應(yīng)用程序圖標(biāo)的挑戰(zhàn)時(shí)，我遇到了很多問題。 我在完成幾個(gè)項(xiàng)目后之后才找到了一些答案。 我決定寫這篇文章來幫助和我一樣的初學(xué)者，但我希望經(jīng)驗(yàn)豐富的設(shè)計(jì)師也會(huì)覺得它很有用。 好吧，讓我們開始吧！

為什么每個(gè)app都需要一個(gè)圖標(biāo)？

app的圖標(biāo)是為每個(gè)移動(dòng)應(yīng)用程序添加的唯一圖像。 這是新用戶在App Store和Google Play上找到應(yīng)用時(shí)看到的內(nèi)容。 在此階段，用戶決定是否要查找有關(guān)應(yīng)用程序的更多信息，如果沒有， 他會(huì)無視這個(gè)應(yīng)用程序。 一個(gè)好的圖標(biāo)會(huì)讓用戶產(chǎn)生興趣，提供信心，向用戶保證應(yīng)用可能對(duì)他有用。 當(dāng)用戶安裝應(yīng)用程序時(shí)，圖標(biāo)的目標(biāo)會(huì)發(fā)生變化。 此時(shí)它有助于讓用戶在主屏幕上的其他圖標(biāo)中找到自己，但是什么能使應(yīng)用程序圖標(biāo)脫穎而出呢？

關(guān)于這個(gè)主題有很多文章，其中大部分都與保羅蘭德的設(shè)計(jì)原則有關(guān)。 這并不奇怪！ 應(yīng)用程序圖標(biāo)是一個(gè)品牌。 但是，它不僅僅只是一個(gè)徽標(biāo)。

徽標(biāo)和應(yīng)用程序圖標(biāo)分別具有不同的目標(biāo)，使用方式和要求。 這并不意味著徽標(biāo)不能與圖標(biāo)重疊。 流行的應(yīng)用程序通常在圖標(biāo)中使用徽標(biāo)：比如Twitter，Medium，Reddit等。 但他們不會(huì)無緣無故地這樣做。 它們是我們需要考慮的許多方面。 讓我通過借鑒經(jīng)驗(yàn)和使用好看的頭條新聞來告訴你。

1，可擴(kuò)展性

應(yīng)用圖標(biāo)必須很小。這就是重點(diǎn)，用戶無法對(duì)其進(jìn)行拉伸檢查。 因此無論大小如何，圖標(biāo)都必須保持其易讀性。 比如，設(shè)置中的應(yīng)用程序圖標(biāo)多小啊！

iOS和Android設(shè)置中的應(yīng)用程序圖標(biāo)

用戶不需要試圖理解設(shè)計(jì)師的想法。 設(shè)計(jì)師確保在多種尺寸的實(shí)際設(shè)備上試用圖標(biāo)，并在必要時(shí)最終確定。 由于像素?cái)?shù)量的減少而導(dǎo)致細(xì)節(jié)的損失是不可避免的。 這將我們帶到了應(yīng)用程序圖標(biāo)的第二個(gè)方面。

2，可識(shí)別性

如果用戶無法理解你的想法，你就無法留住他，他將轉(zhuǎn)到下一個(gè)應(yīng)用程序。 設(shè)計(jì)師建議簡(jiǎn)化應(yīng)用程序圖標(biāo)以提高可識(shí)別性。 理解它是正確的。 簡(jiǎn)化并不意味著使原始。 下圖這些圖標(biāo)不詳細(xì)嗎？

Hello Neighbor, Tiny wings, Prune, Pandora Music, Silly Sausage in Meat Land, Old Man’s?Journey

簡(jiǎn)化意味著專注于一個(gè)想法，擺脫不必要的和重復(fù)的元素。 一切都應(yīng)該適用于這個(gè)想法，并幫助用戶理解它。 但是，用戶不僅要了解還必須對(duì)它感興趣。

3，唯一性

App Store中有近200萬(wàn)個(gè)應(yīng)用程序，Google Play中有2,100萬(wàn)個(gè)應(yīng)用程序，每個(gè)應(yīng)用程序都有一個(gè)應(yīng)用程序圖標(biāo)。 所有這些圖標(biāo)都在爭(zhēng)奪用戶的注意力。 大品牌使用他們的標(biāo)識(shí)吸引注意力，但是如何做不太知名品牌的應(yīng)用程序呢？我們需要展示新的和不尋常的東西！

Todoist使用標(biāo)準(zhǔn)為任務(wù)管理員勾選一個(gè)有趣的組合，在開始繪制之前花一些時(shí)間進(jìn)行研究搜索主要競(jìng)爭(zhēng)對(duì)手以及來自同一類別的應(yīng)用程序。 想想如何脫穎而出！ 如果大多數(shù)圖標(biāo)都是彩色的，請(qǐng)考慮使用單色調(diào)色板。 如果有一個(gè)特定項(xiàng)目的圖像很多 – 放棄它并顯示更有特色的東西。 設(shè)計(jì)師需要一直尋找解決問題的方法！

有一些新的東西很難想出來。 制作情緒板，創(chuàng)建思維導(dǎo)圖，向朋友和同事尋求建議。 你永遠(yuǎn)不知道你會(huì)在哪里找到一個(gè)好主意。 但重要的是不要在追求原創(chuàng)性時(shí)與應(yīng)用程序失去聯(lián)系。

4，一致性

圖標(biāo)是應(yīng)用程序的一部分，它們必須攜手合作。 圖標(biāo)應(yīng)描述應(yīng)用程序并顯示其主要功能。 因?yàn)橹挥幸粋€(gè)游戲機(jī)制，所以應(yīng)用程序在哪里可以獲得100萬(wàn)次下載尤為重要。

Slack是一個(gè)關(guān)于一致性的好例子

如果他得到的申請(qǐng)與預(yù)期不同，肯定會(huì)不開心。 不要在圖標(biāo)中包含屏幕截圖和界面元素 – 它可能會(huì)誤導(dǎo)用戶。 相反，暗示應(yīng)用程序的功能，使用相同的樣式和顏色。 對(duì)于哪個(gè)應(yīng)用與圖標(biāo)相關(guān)，不應(yīng)該有任何疑問。 指南可以幫助您實(shí)現(xiàn)這一目標(biāo)！

遵守指南

盡管iOS和Android開始看起來相同，但仍存在很多差異，這使我們無法在兩個(gè)操作系統(tǒng)上使用相同的應(yīng)用程序圖標(biāo)：比例，視覺技術(shù)和特殊功能。 用戶習(xí)慣了他們的操作系統(tǒng)。 我們與它的距離越小，對(duì)應(yīng)用程序的信任就越多。

iOS（左側(cè)）和Android（右側(cè)）相同應(yīng)用的圖標(biāo)

這并不意味著您需要繪制不同的應(yīng)用程序圖標(biāo); 相反，巨大的差異會(huì)降低應(yīng)用識(shí)別率。 有時(shí)它足以調(diào)整大小，但在某些情況下，最好進(jìn)行更多更改。 這是我們?cè)陂_發(fā)應(yīng)用程序圖標(biāo)時(shí)應(yīng)該注意的事項(xiàng)。 現(xiàn)在是時(shí)候創(chuàng)造了！ 當(dāng)然，如果你在路上沒有更多的問題……畫布的尺寸應(yīng)該是多少？ 如何使用網(wǎng)格？ 如何導(dǎo)出圖標(biāo)？ 是時(shí)候深入了解技術(shù)部分并找到答案。 讓我們從iOS開始吧。

iOS應(yīng)用程序圖標(biāo)

iOS人機(jī)界面指南中有許多有用的信息，但我們將重點(diǎn)關(guān)注Apple圖標(biāo)部分，其中Apple描述了技術(shù)要求并對(duì)設(shè)計(jì)提出了建議。 我們將遵循創(chuàng)建圖標(biāo)的路徑并深入了解這一點(diǎn)。 我使用Sketch，但任何其他圖形編輯器也可以使用。

繪制iOS應(yīng)用程序圖標(biāo)

有許多用于創(chuàng)建圖標(biāo)的模板，但我們暫時(shí)不會(huì)使用它們。 假設(shè)我們已經(jīng)研究了市場(chǎng)，也許確定了這個(gè)想法，甚至手工制作了草圖。 當(dāng)然，在編輯器中創(chuàng)建了一個(gè)新文檔。我們先選擇一個(gè)畫布尺寸。 在iOS中，可以找到不同大小的圖標(biāo)，從40px×40px到1024px×1024px。 因?yàn)闇p小圖像大小總是比較容易，所以我們將創(chuàng)建一個(gè)更大的畫布。 在Sketch中工作的設(shè)計(jì)師可以作弊并創(chuàng)建兩倍較小的畫布（512px×512px）并在以后導(dǎo)出時(shí)增加它。下一步是添加網(wǎng)格。 您可以下載它，在模板中查找甚至繪制。 網(wǎng)格有助于保持組合物的統(tǒng)一性和完整性，控制尺寸和間距。 嘗試將主要對(duì)象放在一個(gè)大圓圈內(nèi)。 如果一個(gè)網(wǎng)格干擾并限制你的創(chuàng)作沖動(dòng) – 打破它。 甚至結(jié)構(gòu)也應(yīng)該受到限制。

最后，我們可以開始畫了！ 我不會(huì)對(duì)細(xì)節(jié)感到枯燥，但我的圖標(biāo)經(jīng)過了經(jīng)理審核，并向客戶反饋了幾次。

為了更好呈現(xiàn)圖標(biāo)，我做了一個(gè)簡(jiǎn)單的動(dòng)畫：

這個(gè)和我在Dribbble上分享的其他東西圖標(biāo)都準(zhǔn)備好了！ 我們把它導(dǎo)出吧。導(dǎo)出iOS應(yīng)用程序圖標(biāo)在導(dǎo)出之前，我們需要?jiǎng)h除圓角和筆劃，因?yàn)橄到y(tǒng)會(huì)自動(dòng)添加它。 別忘了隱藏網(wǎng)格。

圖標(biāo)應(yīng)導(dǎo)出為png并設(shè)置為沒有透明度。 但各種尺寸呢？ 我們真的需要手動(dòng)完成嗎？ 我們可以使用Sketch插件AEIconizer來乘以它。 此外，還有很多網(wǎng)站，如MakeAppIcon，App Icon Maker和App Icon Generator，可以做同樣的事情。 當(dāng)然還有模板！ 例如每個(gè)交互模板不僅會(huì)導(dǎo)出各種大小的圖標(biāo)，還會(huì)顯示它在主屏幕和App Store中的外觀。它沒有看起來那么難。 接下來是Android應(yīng)用程序圖標(biāo)！

Android應(yīng)用程序

圖標(biāo)在材料設(shè)計(jì)規(guī)范中，Google將有關(guān)Android應(yīng)用程序圖標(biāo)的信息分為兩部分：關(guān)于樣式和技術(shù)要求。

繪制Android應(yīng)用程序圖標(biāo)

在Android中，應(yīng)用程序圖標(biāo)也以各種尺寸使用，最大的與iOS相同：1024px×1024px。添加網(wǎng)格，注意安全區(qū)域。 根據(jù)設(shè)備的不同，Android會(huì)應(yīng)用不同形狀的蒙版。 將圖像放在安全區(qū)域內(nèi)，這樣就不會(huì)被剪裁。 網(wǎng)格本身顯示系統(tǒng)中使用的所有基本形狀：圓形，方形，垂直和水平矩形。

圖標(biāo)的最終版本：

在導(dǎo)出Android應(yīng)用圖標(biāo)之前，我們還需要?jiǎng)h除圓角，筆劃和網(wǎng)格。

Android Studio可以將所有必需尺寸的圖標(biāo)相乘，因此我們只需要一個(gè)沒有透明度的png圖像。

Android Oreo推出了具有視差和縮放效果的新應(yīng)用圖標(biāo)格式。 您可以將前景與背景分開，然后這些圖層將在應(yīng)用效果的設(shè)備上獨(dú)立移動(dòng)。 因此，前景可以包括透明度。在堅(jiān)固的背景下無法看到視差效果，但如果您的構(gòu)圖復(fù)雜，它可以為您的設(shè)計(jì)帶來動(dòng)態(tài)效果。 在這種情況下，您需要為兩個(gè)圖層提供兩個(gè)png圖像。 請(qǐng)準(zhǔn)備好并非所有用戶都能看到效果。 在撰寫本文時(shí)，只有12％的Android用戶使用Android Oreo。

用戶從圖標(biāo)開始了解一個(gè)應(yīng)用程序，該圖標(biāo)伴隨著他的旅程一直到最后。 圖標(biāo)的作用很重要且多方面，這就是設(shè)計(jì)師應(yīng)該強(qiáng)調(diào)它的原因。 但永遠(yuǎn)不要忘記應(yīng)用程序本身！ 畢竟，只需輕點(diǎn)幾下即可刪除應(yīng)用。 無論您的圖標(biāo)有多酷，如果某個(gè)應(yīng)用無效，用戶都會(huì)把它刪除。

原文：https://medium.muz.li/the-design-guide-to-ios-and-android-app-icons-c1a73d3f278f