儘管圖標非常小，但圖標會在App Store和Google Play中顯示，向用戶傳達app的信息，並且安裝後能在主屏幕上找到它，因此圖標非常重要。
當第一次面臨繪製應用程序圖標的挑戰時，我遇到了很多問題。 我在完成幾個項目後之後才找到了一些答案。 我決定寫這篇文章來幫助和我一樣的初學者，但我希望經驗豐富的設計師也會覺得它很有用。 好吧，讓我們開始吧！
為什麼每個app都需要一個圖標？
app的圖標是為每個移動應用程序添加的唯一圖像。 這是新用戶在App Store和Google Play上找到應用時看到的內容。 在此階段，用戶決定是否要查找有關應用程序的更多信息，如果沒有， 他會無視這個應用程序。 一個好的圖標會讓用戶產生興趣，提供信心，向用戶保證應用可能對他有用。 當用戶安裝應用程序時，圖標的目標會發生變化。 此時它有助於讓用戶在主屏幕上的其他圖標中找到自己，但是什麼能使應用程序圖標脫穎而出呢？
關於這個主題有很多文章，其中大部分都與保羅蘭德的設計原則有關。 這並不奇怪！ 應用程序圖標是一個品牌。 但是，它不僅僅只是一個徽標。
徽標和應用程序圖標分別具有不同的目標，使用方式和要求。 這並不意味著徽標不能與圖標重疊。 流行的應用程序通常在圖標中使用徽標：比如Twitter，Medium，Reddit等。 但他們不會無緣無故地這樣做。 它們是我們需要考慮的許多方面。 讓我通過借鑑經驗和使用好看的頭條新聞來告訴你。
1，可擴展性
應用圖標必須很小。這就是重點，用戶無法對其進行拉伸檢查。 因此無論大小如何，圖標都必須保持其易讀性。 比如，設置中的應用程序圖標多小啊！
iOS和Android設置中的應用程序圖標
用戶不需要試圖理解設計師的想法。 設計師確保在多種尺寸的實際設備上試用圖標，並在必要時最終確定。 由於像素數量的減少而導致細節的損失是不可避免的。 這將我們帶到了應用程序圖標的第二個方面。
2，可識別性
如果用戶無法理解你的想法，你就無法留住他，他將轉到下一個應用程序。 設計師建議簡化應用程序圖標以提高可識別性。 理解它是正確的。 簡化並不意味著使原始。 下圖這些圖標不詳細嗎？
Hello Neighbor, Tiny wings, Prune, Pandora Music, Silly Sausage in Meat Land, Old Man’s Journey
簡化意味著專注於一個想法，擺脫不必要的和重複的元素。 一切都應該適用於這個想法，並幫助用戶理解它。 但是，用戶不僅要了解還必須對它感興趣。
3，唯一性
App Store中有近200萬個應用程序，Google Play中有2,100萬個應用程序，每個應用程序都有一個應用程序圖標。 所有這些圖標都在爭奪用戶的注意力。 大品牌使用他們的標識吸引注意力，但是如何做不太知名品牌的應用程序呢？我們需要展示新的和不尋常的東西！
Todoist使用標準為任務管理員勾選一個有趣的組合，在開始繪製之前花一些時間進行研究搜索主要競爭對手以及來自同一類別的應用程序。 想想如何脫穎而出！ 如果大多數圖標都是彩色的，請考慮使用單色調色板。 如果有一個特定項目的圖像很多 – 放棄它並顯示更有特色的東西。 設計師需要一直尋找解決問題的方法！
有一些新的東西很難想出來。 製作情緒板，創建思維導圖，向朋友和同事尋求建議。 你永遠不知道你會在哪裡找到一個好主意。 但重要的是不要在追求原創性時與應用程序失去聯繫。
4，一致性
圖標是應用程序的一部分，它們必須攜手合作。 圖標應描述應用程序並顯示其主要功能。 因為只有一個遊戲機制，所以應用程序在哪裡可以獲得100萬次下載尤為重要。
Slack是一個關於一致性的好例子
如果他得到的申請與預期不同，肯定會不開心。 不要在圖標中包含屏幕截圖和界面元素 – 它可能會誤導用戶。 相反，暗示應用程序的功能，使用相同的樣式和顏色。 對於哪個應用與圖標相關，不應該有任何疑問。 指南可以幫助您實現這一目標！
遵守指南
儘管iOS和Android開始看起來相同，但仍存在很多差異，這使我們無法在兩個操作系統上使用相同的應用程序圖標：比例，視覺技術和特殊功能。 用戶習慣了他們的操作系統。 我們與它的距離越小，對應用程序的信任就越多。
iOS（左側）和Android（右側）相同應用的圖標
這並不意味著您需要繪製不同的應用程序圖標; 相反，巨大的差異會降低應用識別率。 有時它足以調整大小，但在某些情況下，最好進行更多更改。 這是我們在開發應用程序圖標時應該注意的事項。 現在是時候創造了！ 當然，如果你在路上沒有更多的問題……畫布的尺寸應該是多少？ 如何使用網格？ 如何導出圖標？ 是時候深入瞭解技術部分並找到答案。 讓我們從iOS開始吧。
iOS應用程序圖標
iOS人機界面指南中有許多有用的信息，但我們將重點關注Apple圖標部分，其中Apple描述了技術要求並對設計提出了建議。 我們將遵循創建圖標的路徑並深入瞭解這一點。 我使用Sketch，但任何其他圖形編輯器也可以使用。
繪製iOS應用程序圖標
有許多用於創建圖標的模板，但我們暫時不會使用它們。 假設我們已經研究了市場，也許確定了這個想法，甚至手工製作了草圖。 當然，在編輯器中創建了一個新文檔。我們先選擇一個畫布尺寸。 在iOS中，可以找到不同大小的圖標，從40px×40px到1024px×1024px。 因為減小圖像大小總是比較容易，所以我們將創建一個更大的畫布。 在Sketch中工作的設計師可以作弊並創建兩倍較小的畫布（512px×512px）並在以後導出時增加它。下一步是添加網格。 您可以下載它，在模板中查找甚至繪製。 網格有助於保持組合物的統一性和完整性，控制尺寸和間距。 嘗試將主要對象放在一個大圓圈內。 如果一個網格干擾並限制你的創作衝動 – 打破它。 甚至結構也應該受到限制。
最後，我們可以開始畫了！ 我不會對細節感到枯燥，但我的圖標經過了經理審核，並向客戶反饋了幾次。
為了更好呈現圖標，我做了一個簡單的動畫：
這個和我在Dribbble上分享的其他東西圖標都準備好了！ 我們把它導出吧。導出iOS應用程序圖標在導出之前，我們需要刪除圓角和筆劃，因為系統會自動添加它。 別忘了隱藏網格。
圖標應導出為png並設置為沒有透明度。 但各種尺寸呢？ 我們真的需要手動完成嗎？ 我們可以使用Sketch插件AEIconizer來乘以它。 此外，還有很多網站，如MakeAppIcon，App Icon Maker和App Icon Generator，可以做同樣的事情。 當然還有模板！ 例如每個交互模板不僅會導出各種大小的圖標，還會顯示它在主屏幕和App Store中的外觀。它沒有看起來那麼難。 接下來是Android應用程序圖標！
Android應用程序
圖標在材料設計規範中，Google將有關Android應用程序圖標的信息分為兩部分：關於樣式和技術要求。
繪製Android應用程序圖標
在Android中，應用程序圖標也以各種尺寸使用，最大的與iOS相同：1024px×1024px。添加網格，注意安全區域。 根據設備的不同，Android會應用不同形狀的蒙版。 將圖像放在安全區域內，這樣就不會被剪裁。 網格本身顯示系統中使用的所有基本形狀：圓形，方形，垂直和水平矩形。
圖標的最終版本：
在導出Android應用圖標之前，我們還需要刪除圓角，筆劃和網格。
Android Studio可以將所有必需尺寸的圖標相乘，因此我們只需要一個沒有透明度的png圖像。
Android Oreo推出了具有視差和縮放效果的新應用圖標格式。 您可以將前景與背景分開，然後這些圖層將在應用效果的設備上獨立移動。 因此，前景可以包括透明度。在堅固的背景下無法看到視差效果，但如果您的構圖複雜，它可以為您的設計帶來動態效果。 在這種情況下，您需要為兩個圖層提供兩個png圖像。 請準備好並非所有用戶都能看到效果。 在撰寫本文時，只有12％的Android用戶使用Android Oreo。
用戶從圖標開始瞭解一個應用程序，該圖標伴隨著他的旅程一直到最後。 圖標的作用很重要且多方面，這就是設計師應該強調它的原因。 但永遠不要忘記應用程序本身！ 畢竟，只需輕點幾下即可刪除應用。 無論您的圖標有多酷，如果某個應用無效，用戶都會把它刪除。
閱讀更多 UI巴巴 的文章
