編輯導語：各大APP的圖标都各有特點，圖标的設計也是一門學問。在這篇文章中，作者全面解析了各類APP圖标設計背後的用意，一起學習一下吧。

如果說一個人的臉面、衣着打扮是給陌生人的第一印象，那麼APP的應用圖标風格與氣質就是留給新用戶的第一印象，關系着用戶是否對這個APP感興趣、是否會打開應用介紹、是否會點擊下載按鈕起着決定性的作用。

一個好的應用圖标有着無限可能，無形中對用戶産生強大的吸引力，并有一種想要了解的沖動，況且圖形本身就能讓人充分發揮想象力，這就是為什麼不管在哪個應用市場第一眼看到的是應用圖标，而非應用名稱。

在一部手機就能解決很多問題的互聯網時代，相信每個人都有下載幾十上百個APP，琳琅滿目的列表，應用圖标是否能在第一時間抓住用戶眼球（目标明确或鐵粉除外）非常重要，一個視覺傳達清晰且有吸引力的圖标能提升用戶點擊率，即便用戶隻使用過一次，相對來說，印象也會更深刻。

本文根據筆者對大量應用圖标的分析、結合設計準則進行總結，希望能幫助大家在設計過程中規避掉一些常見的問題，歡迎一起探讨、取長補短、共同進步。

分享目錄

1. 四大設計原則
2. 色彩的表現形式
3. 主體圖形分類
4. 背景圖案及元素
5. 主體圖形的表現手法
6. 應用圖标設計流程
7. 總結

一、四大設計原則

應用圖标代表産品的外在形象，設計的精美與否決定着用戶的第一印象，是否産生打開的欲望跟當前圖标的視覺所傳達的内涵有最直接的關系。應用圖标雖然不同于設計LOGO，表現方式也千變萬化，但必定有自身的設計準則要去遵守，利用設計的手段将視覺傳播的價值最大化。

1. 可識别性

首先，應用圖标需要盡量簡約。過于複雜的圖标會增加用戶的理解成本、甚至誤導用戶，但如果過于追求簡約，缺乏細節、個性化以及必要的隐喻信息，也會因過于單調，造成表意不明确等問題。

簡約并非簡單，設計師需要通過專業的知識進行合理的簡化，以提升應用圖标的設計品質，方便用戶在不同場景中都能清晰的辨認。其次，需表意明确、易于理解。

應用圖标代表的是産品的行業屬性、功能作用或與衆不同的優勢，要讓用戶第一眼就能識别出所代表的含義，貼近用戶的心理預期。

簡約易識别是應用圖标必備的基礎屬性之一，這也是為什麼大部分産品都将logo作為應用圖标主視覺的原因，因為logo設計考慮到了方方面面以及後續延展的問題，即便有些logo較為複雜，也會通過提取局部元素、吉祥物、主體色等方式來強化應用圖标屬性，給用戶形成獨特的記憶，以提升應用的下載量和使用率。

2. 關聯性

應用圖标應該與産品的屬性、品牌有極強的關聯性，通過品牌延展賦予産品更強的生命力，讓用戶從接觸應用圖标的第一眼開始、再到後面的使用，整個過程始終都能保持清晰且統一的品牌認知，通過和諧統一的視覺效果，帶來更好的用戶體驗。

應用圖标需要與品牌之間必須保持高度的一緻，着重從以下幾點體現：

1）LOGO

毫無疑問，用品牌logo作為主體圖形是最佳選擇，結合品牌色搭配使用，能将産品核心理念、品牌形象的傳播效果達到極緻，在APP應用市場中，大家會發現大多數産品都在使用logo作為應用圖标的主視覺圖形。

2）品牌色

品牌色即主體色，将貫穿APP所有頁面的元素組件。衆所周知，每種顔色都有其特定的含義，能傳遞給用戶不同的心理感受。用主體色作為應用圖标的背景色，可以烘托出産品的情感氛圍，并與進入應用後的主體色遙相呼應，以最小的視覺跳躍性将前後關聯，強化用戶對産品的記憶感知。

3）IP/吉祥物

吉祥物屬于品牌logo延展的一部分， 也是産品的靈魂。當logo較為複雜時，因移動設備應用圖标位置空間有限，logo細節無法在短時間被用戶捕捉，不宜展示時，使用IP/吉祥物或其局部元素代替也是不錯的選擇。

4）産品名稱

如果說logo是産品的臉面，通過暗示和隐喻給用戶無限遐想并讓用戶記住它的樣子，那麼名稱的出現就相當于産品主動進行了自我介紹，并讓用戶知道如何稱呼它。

将産品名稱作為應用圖标需謹慎使用：首先，文字傳達的信息量有限：其次，用戶對于圖形的理解效率要優于文字；再者，應用圖标都會有對應的産品名稱展示（應用市場在右、桌面在下方），多少有些信息重複。

所以大家見到的應用圖标主體是産品名稱的不外乎兩種情況，一種是産品本身将名稱設計成字體logo，例如美團、懶飯；另一種是将産品名稱作為logo的輔助信息提示，例如缤紛生活。

以上是應用圖标與品牌屬性關聯最常見的四種方式，在設計中可靈活搭配，使用兩種及以上的方式組合，能将品牌傳播的途徑發揮到最大值。

3. 差異化

筆者上小學時，曾經在一次彩鉛繪畫作業中得到了老師的真心誇贊，但内心卻備受打擊。老師對着我畫的桃子說“這西紅柿畫的太像了”。

舉這個例子似乎并不恰當，但結果是驚人的相似，筆者想要陳述的一個觀點是，不要讓你辛苦做出的設計成為别人的嫁衣，讓用戶誤以為這是其他企業的“某某某…”産品。

目前，應用市場中的APP數量巨大，且還處于增長的趨勢，同行業的圖标設計同質化相當嚴重。想要讓自身産品應用圖标脫穎而出，就有必要在設計之前做好競品分析，借鑒競品的優點，在突出自身産品核心特征、屬性的基礎上，還要用不同的表現手法突出其差異性，給用戶留下獨特的印象，避免同質化。

4. 可用性

應用圖标在設計完成之後（測試小組）、上線後（用戶反饋）進行可用性測試，主要針對圖标對用戶的吸引力、識别度等問題作進一步優化，以确保圖标在不同場景中都能被用戶清晰識别并提升印象。

雖然可用性測試存在設計之後，但這一環節至關重要，它決定着産品的下載量以及使用率。

二、圖标顔色的表現形式

1. 單色圖标

單色圖标通常以品牌色作為背景色、logo以反白的形式呈現，既能突出品牌色、還能用于烘托主體圖形，不過這種方式僅适合色值單一的logo，多色值可能會與背景色産生融合或色彩反差太大影響視覺傳達效果。另外，如果logo視覺重量較大，也可使用白色背景 原品牌色logo，這樣會更直觀。

單色應用圖标雖然色彩比較單一、表現形式也受到局限，但視覺清晰、簡潔且識别性強，如果能運用其他設計手法豐富圖标細節就再好不過了。

2. 多色圖标

多色圖标使用了兩種及以上的顔色，更多是直接使原多色彩的logo圖形 白色背景，無需任何加工，控制好尺寸規範就行。如果是運營推廣所需，如春節、618、雙11等活動，會對應用圖标加以其他色彩烘托、點綴元素或标簽等，色彩就會更多，但一般都具有時效性，活動過期即圖标複原。

多色圖标的細節、層次更加豐富，設計時确保各色彩搭配協調，一旦因色彩過多造成視覺混亂，就得不償失了。

3. 漸變圖标

無論是單色還是多色，添加漸變會讓應用圖标更加細膩、耐看。漸變的表現手法應用廣泛，簡單的漸變能讓圖标細節豐富，同時也具備空間感和微立體感。

設計漸變色圖标需注意圖形銜接處的對比度，花裡胡哨的漸變色會拉低品質感，要确保色彩的和諧，讓圖标視覺清晰且容易識别。

4. 顔色疊加

單色、多色或是漸變都可通過調整不透明度、圖層疊加的方式來豐富應用圖标細節，相比純粹的漸變，立體感和空間感更強。使用顔色疊加需注意色彩對比及明暗關系，否則會衍生出髒亂的顔色。

5. 色環的運用

環形構圖為主，由多個元素複制并以統一的中心點、旋轉角度，旋轉衍生出一個主體圖形。這種應用圖标的設計構圖飽滿、色彩豐富，能給用戶傳遞出輕松愉快的視覺體驗。

需要注意的是，由于顔色較多，至少在三種顔色及以上，否則無法構成色環類的主體圖形（錯覺）。如果沒有超強的配色功底，最好按照色環的順序依次取色，即便沒有太大的優勢，但至少不會出錯。

三、主體圖形的分類

一個好的應用圖标應該是多元素、多信息結合運用，才能達到更好的效果。雖然大部分主體圖形使用了logo，但并不影響設計師們對其進行拆解，提取局部元素、色彩、名稱等信息進行二次創作，從原則上來說，是一次線上logo的設計。

應用圖标種類繁多，切不可盲目跟風，需經過認真的分析、研究，找到最适合自身産品的才是最重要的，且每種類型并非獨立，在條件允許的情況下還能跨類型靈活搭配、相互組合。

1. 中文字體

1）單中文字體

僅次于圖形logo的表現方式，通常會在産品名稱中提取一個具有代表性的文字對筆畫、結構等進行再設計。基于國人文化的優勢以及對漢字的敏感度，既能降低用戶對應用圖标的認知成本、還能根據産品特性設計出差異化的視覺效果。

不過因為文字筆畫的原因，單個文字提取難度較大，避免信息傳遞有誤或影響識别度，建議選擇筆畫較少且具有特性/代表性的文字，若達不到條件，最好選擇其他表現方式。

2）多中文字體

使用兩個及以上漢字，大多直接将産品名稱用在圖當中，對用戶來說更容易記憶，有利于品牌推廣。相比單字體，設計感會受到一定的局限，不宜做過于誇張的表現方式，因文字較多，設計時一定要注意文字的協調與可讀性。

多文字圖标建議将字數控制在2~6個範圍内，3字以内一行顯示，超過3字即兩行顯示且最多不超過兩行，否則會影響圖标的識别效果。

3）中文、圖形組合

适當添加帶有産品特性的輔助圖形，用引導或指向性的方式對文字進行強調，圖标細節會更豐富，可以突出産品想要傳達的信息、以及不同的氣質，還能增加圖标的形式感和趣味性。注意添加的圖形不要過于複雜，不然會讓信息混亂，适得其反。

4）中文圖形化

根據單個字體筆畫的特點進行巧妙的變形或延展，會讓你的應用圖标更具設計感、品質好。這種方式對設計功底的要求較高，需要确保字體的識别度，切勿霸王硬上弓，如果是為了設計而設計，就違背的信息傳播的初衷。

5）中文、IP形象組合

由産品名稱和IP形象組合而成，這種方式能通過品牌IP不同的視覺形象帶給用戶情感化的體驗，讓産品更具親和力，拉近與用戶之間的關系。例如，IP的喜、怒、哀、樂表情變化分别對應用戶不同的心理感受，以加深用戶對産品的印象及品牌認知。

2. 英文字體

1）單英文字體

單英文字體通常是提取産品名稱拼音首字母或英文首字母進行創意設計，跟中文字體相比，基于字母本身線條的簡潔及流暢性，再結合産品特點，很容易設計出兼具美感、高識别度的應用圖标。

需要明确一點，不管如何創意，也僅局限于在26個英文字母中選擇，如果想設計出差異化的應用圖标，對設計師來說，是一個很大的挑戰。

2）多英文字體

跟多中文不同，中文産品名稱在移動端基本不會超出6個字，而全拼音或英文名則多達十幾位甚至更多，為了用戶能更好容易識别、記憶，依然是提取不同拼音或單詞的首字母（中文全稱）進行設計。

多英文的應用圖标很很容易形成獨有的産品簡稱，更利于用戶記憶，但字母一定不要過多，如果無法删減，那就隻突出特定的2~4個字母。

3）其他類型

字母與圖形、IP形象組合以及字母圖形化，其表現方式、設計原則與中文字體圖标類似，這裡不做過多闡述。

3. 數字符号

1）數字設計

人們對于數字來說是非常敏感的，不存在文化差異或認知誤區，基于數字便于記憶且容易識别的特點，将數字圖形化後應用到圖标當中，會讓産品具有親和力，有利于品牌傳播。單純的數字過于簡單，需增加一些細節，豐富圖标層次，讓其具備獨特的記憶點，不然會顯得單調。

2）符号設計

每個符号都有特定的含義，因此，在選擇符号作為應用圖标之前，首先需要了解清楚該符号是否能體現出産品屬性以及想要表達的意思，例如“¥”适合攢錢、理财相關的應用，而“ -×÷”則适合用于計算器或數學相關的應用；其次，符号跟數字一樣，都比較簡單，需經過二次創作後才會使用。

4. 扁平化圖形

1）線性圖形

線性風格的應用圖标能給人一種簡潔輕快的感覺，設計師通過提取産品的品牌信息、功能服務等進行創意設計，将得到的關鍵詞以一條或多條線段組成高度抽象的圖形來達到信息傳播的目的。

通常以反白的形式出現，背景可以是單色、漸變色或加以輔助圖形點綴。

線性圖形非常适合文藝類簡約風格的應用，通過不同的線條帶給用戶不同的心理感受，例如直線代表大方、專業、正直；斜線代表張力、速度；曲線代表流暢、飄逸及柔軟等。

設計時，切記圖形不能過于複雜，否則會影響其辨識度，增加用戶的認知成本，也不利于品牌推廣。

2）面性圖形

也可稱之為剪影圖形，根據産品屬性，将日常生活中被大衆所熟知的動物、植物、食品、工具、玩具…等事物進行簡化，通過刻畫事物的造型輪廓來形成獨立的剪影圖形。

高識别度的剪影圖形會讓整體看起來非常醒目，提高信息傳播的效率，隻要控制好造型，即便把圖标縮到很小也能清晰辨認。

因現實世界中事務的複雜性，被提煉出的圖形如果細節過多會顯的複雜且不夠幹練、細節過少則難以辨認，所以需要對圖形進行創意加工，最終以确保應用圖标的功能和美感兼具。

3）幾何圖形

幾何圖形在應用圖标中使用的很廣泛，可以是線性或面性，表現形式也非常豐富，利用幾何圖形通過單獨、組合、布爾運算等方式形成簡單且個性化的創意圖形，帶給用戶簡約、現代、空間、熱鬧等不同的心理感受。

幾何圖形構圖簡潔，設計形式豐富多樣，想設計出具備設計感和差異化的應用圖标，很考驗設計師的創意能力。

5. 卡通形象

對純色剪影圖形增加太多細節，無疑是将其“大卸八塊”，變成一堆零件，但通過多色、漸變、圖層樣式等表現手法設計成卡通形象，就完全不一樣了。

卡通形象能體現出産品的生命力、親和力，以及直觀且易于理解和記憶的特質，對品牌形象的塑造、傳播起到了很好作用。

在畫卡通形象時，需要注意産品主用戶群體的年齡段，切勿一開始就把活潑可愛作為卡通形象的代名詞，避免絕對低齡化的表達，同時需要設計師有一定的繪畫功底。

6. 拟人化

利用人體的局部元素，如眼睛、嘴巴、手足、頭部等，再結合常見的表情動作進行圖形化設計，相當于給原本冷冰冰的圖形賦予了生命力，傳達出不一樣的情感，而且用戶原本就對人體元素敏感度更高，更容易打動用戶并形成較強的記憶。

拟人化的應用圖标會顯得親民，便于拉近與用戶之間的關系，适度在抽象的圖形上加入情感化（動作/表情）表達，能生動、形象的體現出産品獨有的特性。

如果想要較強的視覺沖擊力，建議元素不要過多，最好是對某個單一的元素作放大或特寫處理，讓用戶看到更多的細節，也可用誇張、比喻、襯托等表現手法強化特點。

7. 拟物化

拟物化圖标使用的比較少，它更偏向于某種行業類型，例如工具、遊戲類型的應用，通過超接近于現實世界中的物體造型，基本不需要用戶思考，一眼就能理解，但也正因為這種特性，信息量的傳播受到很大局限，僅适合單一且大衆化的信息傳達。

在如今，想同時融入行業、屬性、品牌等多元化内容的信息化時代，顯然不太實用了。

四、背景圖案及元素

1. 圖形背景

應用圖标背景通常以單色、漸變色居多，除此之外，還可以添加與主體圖形相呼應的輔助圖形背景，以豐富圖标的視覺層次。圖形背景一定是為襯托或突出主體圖形的輔助存在，切勿過分表達，以免喧賓奪主。

2. 炫彩背景

當主體圖形的結構、色彩不是很複雜，且産品面對的是年輕化用戶群體時，可通過色彩拼接、晶格化或多種鮮明的色彩漸變等方式設計出炫彩效果，色彩表現豐富的應用圖标，能帶給用戶更強的視覺沖擊力。色彩可多但不可亂，需要把控好色彩之間的對比關系。

3. 運營标簽

常見于在特定的節日中，例如618、雙11、雙12及傳統節日等，産品會存在促銷、打折活動，為了更早的讓用戶知道，會在應用圖标的某個區域以标簽的方式出現，起到引導用戶的作用。

不過這種表現方式具有時效性，活動截止即圖标樣式複原。

4. 節日氛圍

通過配色或節日相關的元素點綴，營造出一種感同身受的節日氛圍。例如：春節期間，部分應用圖标背景會調整為紅色，并使用燈籠、煙花、文案等元素點綴，制造出普天同慶、與用戶同樂的喜慶感，或者在高考期間鼓勵學生，少了套路、多了真誠，給用戶留下較深的印象。

五、主體圖形的表現手法

1. 對比

通過元素的大小、長短、虛實、稀疏、方向以及不同的色彩、明暗關系等方式進行對比，形成強烈的反差效果，同時兼具張力和美感，這也是應用圖标設計中很常見的技法表現之一。

2. 對稱

對稱在自然界中随處可見，在互聯網設計中也是如此，應用圖标中的主體圖形以對稱的方式呈現，能給用戶平衡、和諧的感覺，也讓圖标更具有觀賞性。

3. 分割

将應用圖标中的主體圖形分割，賦予不同的顔色、樣式等，明确層級劃分，可提升圖标的美感。例如：将色塊分割成不同的比例、形狀，就能組合成一個完整的熊貓圖形（百度搜“熊貓剪影”圖片）。

如果适合使用0.168黃金比例分割就再好不過了，這是被公認為最具美感的比例。

4. 重複

将相同或相近的圖形以某種規律連續性的排列，相比單調的圖形，會更加飽滿。重複性的表現手法以大小、色彩、位置、形狀等作為出發點進行有序的排列，最終形成一種規律、整齊的節奏和藝術感。

需要注意的是基礎圖形不能過于複雜，一定是有規律的重複，否則會讓圖形變的混亂，無法形成整體。

5. 重疊

在保證識别度清晰的前提下，将兩個或以上的元素相互重疊、交叉在一起，能形成前後左右的層級關系，制造空間感，同時也能将多個圖形關聯在一起，避免圖标元素零散或單調，讓整體性更強，豐富用戶視覺感知。

6. 正負形

正負形也是常見的表現手法之一，利用正圖為底，通過減去底層挖空的方式突出（錯覺）負形，将産品特征、屬性及服務多途徑的傳達給用戶，可謂是“一石二鳥”。

正負形圖标能将信息傳播最大化，且設計感十足，好的正負形圖标能給用戶形成獨特的記憶點，但設計時需要注意正、負銜接的順暢度，否則無法清晰的傳播信息。

六、應用圖标設計流程

1. 發散思維、尋找隐喻

通過産品屬性、功能或特點進行思維發散，例如：夏天，我們會想到空調、海灘、冰淇淋、比基尼、裙子（女性）、夜空等一系列相關聯的事和物，搜集起來并做好整理歸類，确定大緻的設計方向。

2. 分析競品、避免同質化

确定了大緻的設計方向，就去找同行業、同類型或相似的應用圖标分析其形狀、配色、組合類型等，取長補短，這也是避免同質化非常重要的一個環節，幫助自己在後續設計出具備差異化的應用圖标做鋪墊。

3. 提取關鍵詞

可以從産品名稱或功能屬性方面找出産品最想傳達的核心信息，并提煉出關鍵詞。切記，關鍵詞不可脫離帶水、表意不明确，一定要夠精煉、能表達出核心内容。關鍵詞在精不在多，如果太多，需要通過層層遞進，篩選出“一主三輔”，要知道這關系着後續應用圖标傳達信息的精準度。

4. 圖标繪制

将上一步得到的關鍵詞轉化成抽象圖形，進行視覺化提煉，這時應用圖标的雛形已經形成，再結合前面所提到的圖形分類、表現手法以及注意事項等，進入圖标繪制流程。關于圖标設計規範及原則，在之前的《圖标篇 | 圖标設計必備的基礎知識！》文章中有詳細說明，這裡不做闡述。

5. 細節處理

基本圖形繪制完成後，通過添加點綴、輔助圖形、背景處理等方式豐富圖标細節，進行精細化處理，使其更精緻，具備高識别度及品質感。

6. 适用性測試

分别通過移動端應用商店列表、應用詳情、設置中應用列表、桌面以及WEB商店等，對不同位置的大小、不同的桌面背景進行虛拟測試，以确保在不同場景中都能被用戶高度識别，如果這些問題等着被用戶發現，很可能給産品帶來不利的影響。

7. 輸出切圖

需要對iOS和Android系統各輸出一套圖标，iOS隻需一個1024px的切圖便能适配所有，且無需設定圓角。Android則需要多套切圖規範，如512px、198px、144px、96px、72px、48px，圓角半徑以512px為基準設定為90px（參考值）。

這些固定的尺寸規範并不在技術能力範疇，如果實在不清楚，需要用時就“百度一下”一大把，或直接找開發人員拿尺寸都不是難事。

七、總結

首先，筆者要感謝耐心看到這裡的小夥伴，希望總結的内容能幫到大家，在前期設計中作為資料參考，避免出現常見的問題，防止進入誤區。

其次，要想設計出優秀的應用圖标僅看上述内容是遠遠不夠的，少不了平時的多看、多練、多思考，需日積月累，逐漸提升自己的視覺審美、造型提煉、執行效率等多方面設計能力。

應用圖标的總結分享就到這裡了，對你有幫助的話就給筆者點個贊吧，如果有不同意見，歡迎在評論區交流或指正，以便查漏補缺，共同進步。

#專欄作家#

大漠飛鷹；公衆号：能量眼球，人人都是産品經理專欄作家。緻力于産品需求的驅動、産品體驗的挖掘，利用設計的手段為受衆用戶帶來更好的體驗，即好看、好用。

本文原創發布于人人都是産品經理，未經許可，禁止轉載

題圖來自Unsplash，基于 CC0 協議

,

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

查看全部