圖標(biāo)的定義

一說到圖標(biāo)，我想您一定會覺得非常熟悉。圖標(biāo)，也稱為icon或picto，是指有明確含義的圖形視覺語言。那么當(dāng)我們一提起圖標(biāo)設(shè)計，您的腦中會想起哪個圖標(biāo)來呢？有可能您想起的是微信APP由兩個白色氣泡組成的啟動圖標(biāo)；或者是我們每天使用的APP中的那些返回、關(guān)閉等系統(tǒng)圖標(biāo)；也可能是商場導(dǎo)視里的衛(wèi)生間圖標(biāo)等。沒錯，圖標(biāo)的形式有很多種，它可以應(yīng)用在很多場景中，并且表現(xiàn)方式非常豐富：有線的、有面的、也有擬物的等等。圖標(biāo)的歷史可以追溯到象形文字（Pictogram），我們的祖先在發(fā)明文字之前就使用圖標(biāo)記錄一天的生活了。聽著是不是不可思議呢？從亙古時代的象形文字開始，我們的祖先就偏愛使用這種抽象的圖形來表達意思了。在平面設(shè)計領(lǐng)域的商標(biāo)其實也是一種圖標(biāo)；平面設(shè)計里的視覺導(dǎo)視（例如衛(wèi)生間的圖標(biāo)）也有圖標(biāo)的應(yīng)用，所以圖標(biāo)在我們的生活中應(yīng)用非常廣泛。

在計算機時代，從80年代的施樂公司界面中的單色圖標(biāo)開始，圖標(biāo)就開始出現(xiàn)在屏幕之中了，圖標(biāo)較編程語言更容易被大眾理解。到了后來從iMac到iPhone引領(lǐng)的擬物圖標(biāo)更是開啟了一個絢麗的圖標(biāo)設(shè)計時代。擬物時代盛行也帶來了一些麻煩：擬物圖標(biāo)的質(zhì)感、光影會吸引走用戶的注意力，我們稱之為“視覺噪音”。于是UI設(shè)計師開始探索更新的表現(xiàn)形式來設(shè)計界面中的圖標(biāo)。扁平圖標(biāo)發(fā)展史上有過很多次嘗試，比如微軟引領(lǐng)的Metro風(fēng)格中的圖標(biāo)設(shè)計和Google引領(lǐng)的扁平設(shè)計風(fēng)格中的長投影風(fēng)格圖標(biāo)，但由于它們表現(xiàn)形式太過于抽象、缺乏情感的傳遞，并沒有獲得用戶的垂青。而我們現(xiàn)在界面設(shè)計中的圖標(biāo)設(shè)計是一種“輕擬物”或“微扁平”的風(fēng)格：在面積比較小的區(qū)域我們使用扁平圖標(biāo)或線形圖標(biāo)；在面積比較大的區(qū)域我們會使用加入漸變甚至輕質(zhì)感的圖標(biāo)。

如今我們界面中的圖標(biāo)可謂非常豐富了，如果根據(jù)Material Design對圖標(biāo)的分類，UI設(shè)計中的圖標(biāo)可以分為帶有品牌屬性和特性的產(chǎn)品圖標(biāo)、有功能指示作用的系統(tǒng)圖標(biāo)兩種圖標(biāo)，下面我們將針對于這兩種圖標(biāo)進行研究。 

產(chǎn)品圖標(biāo)

產(chǎn)品圖標(biāo)是我們在設(shè)計界面的時候體現(xiàn)品牌調(diào)性和特性的圖標(biāo)。通過產(chǎn)品圖標(biāo)，用戶就可以大概感知這個產(chǎn)品主要是做什么的。比如微信的產(chǎn)品圖標(biāo)是兩個對話氣泡，暗示了這是一款社交APP；再比如ofo的產(chǎn)品圖標(biāo)是字母ofo的組合，同時也是一輛自行車，這暗示了這款產(chǎn)品是共享單車的APP；再比如KEEP的字母“K”的圖標(biāo)，像極了一個在抬腿做運動的人，暗示了這是一個運動APP。

同時有些產(chǎn)品也依靠自身已經(jīng)在用戶心中產(chǎn)生的品牌來直接設(shè)計產(chǎn)品圖標(biāo)，比如淘寶APP的產(chǎn)品圖標(biāo)就是一個“淘”字；支付寶的產(chǎn)品圖標(biāo)就是一個“支”字。優(yōu)秀的產(chǎn)品圖標(biāo)都會在我們心中打上一個烙印，當(dāng)我們看到這些圖形、配色時，腦中會立即想起來它們的功能和特點。產(chǎn)品圖標(biāo)除了在手機屏幕中作為啟動圖標(biāo)，也會出現(xiàn)在閃屏、情感化設(shè)計、“關(guān)于我們”界面等場景中，所以也要有一定的靈活性，在設(shè)計上要以簡單、大膽、友好的方式傳達產(chǎn)品的核心理念和意圖。產(chǎn)品圖標(biāo)很類似在企業(yè)識別系統(tǒng)（VI）里的logo，需要讓用戶一眼看到它就能夠與腦中的產(chǎn)品相關(guān)聯(lián)。所以設(shè)計一個優(yōu)秀的產(chǎn)品圖標(biāo)對于任何產(chǎn)品來說都是非常重要的。

風(fēng)格

產(chǎn)品圖標(biāo)有不同的風(fēng)格，這些風(fēng)格有可能很擬物，也有可能很扁平；有可能很抽象，也可能很具象。通過不同的設(shè)計風(fēng)格可以更加標(biāo)新立異，從而被用戶記住。讓用戶記住我們的圖標(biāo)真是一件非常重要的事兒，要知道，每個手機都像是一把瑞士軍刀，它有無數(shù)個功能，而我們的產(chǎn)品只是萬種功能中的一個。用戶不可能記住手機里所有的APP都是什么，所以能在第一時間取得好感和記憶非常重要，產(chǎn)品圖標(biāo)設(shè)計得好看并且容易被人記住就成了非常重要的任務(wù)。產(chǎn)品圖標(biāo)的主要風(fēng)格有以下幾種：

文字風(fēng)格

文字是最直白的信息，而且不容易被曲解。所以很多國內(nèi)的產(chǎn)品都會使用文字來作為自己的產(chǎn)品圖標(biāo)。比如：支付寶、淘寶、今日頭條、OFO、愛奇藝、知乎、網(wǎng)易新聞、毛豆新車等。這么做也有它的問題，比如文字給人美的感受不如圖形，因為文字需要閱讀而不是觀察。并且移動端設(shè)備都會在啟動圖標(biāo)之下加上一行輔助文字，如果圖標(biāo)上的文字和下面的輔助文字完全重合，會顯得像介紹了兩遍自己一樣。如果您決意要使用文字作為產(chǎn)品圖標(biāo)，且是中文的話，那么一定要記得文字最好為1-2個，并且不應(yīng)該是產(chǎn)品的全稱。如果是英文的話，最好是首字母而不是產(chǎn)品全稱。當(dāng)然不管是中文還是英文都需要選擇合適氣質(zhì)的字體和并做一定的變化。

單讀：單讀是一個偏文藝的閱讀產(chǎn)品，所以產(chǎn)品圖標(biāo)使用了黑白配色和兩個非常有文藝氣息的宋體繁體字，這樣的設(shè)計符合產(chǎn)品調(diào)性，傳遞給用戶一種產(chǎn)品的文藝氣息。

今日頭條：今日頭條是一款優(yōu)秀的新聞APP。它的圖標(biāo)非常直白：一張報紙上有紅色的頭條標(biāo)題，頭條使用了非常粗的黑體字，非常顯眼。

淘寶：淘寶采用了一個俏皮的“淘”字作為icon的主要元素，并且背景顏色是令人興奮和刺激的橘黃色，凸顯了電商屬性。并且這個字使用了很久，用戶對此有一定的品牌認(rèn)知。

愛奇藝：愛奇藝的icon采用了英文字母iQIYI和上下邊框相組合的形式。整體看來像是一個電視機，強調(diào)了品牌屬性和功能，并且使用了在視頻領(lǐng)域非常有識別性的綠色，讓人一看便知這是愛奇藝了。 

如果您的品牌使用英文作為產(chǎn)品圖標(biāo)，我們在設(shè)計的時候要格外注意英文字母之間的正負空間關(guān)系以及不同西文字體的不同氣質(zhì)。

ONE：雖然是中文產(chǎn)品，但是ONE的icon顯得非常的高端和小眾。ONE三個字母的正負空間關(guān)系做了微調(diào)，并且選擇了無襯線字體來體現(xiàn)時尚感。下面的小字是一個slogan，并且和ONE的寬度一致。

Pinterest：Pinterest的產(chǎn)品圖標(biāo)是一個手寫體的P，并且用紅色圓形作為陪襯。這樣一個字母作為ICON的好處就是方便用戶記憶。

HULU：HULU是一個國外視頻產(chǎn)品，它的產(chǎn)品圖標(biāo)顏色很鮮艷，字母本身有韻律感，所以沒有做過多的設(shè)計。

Facebook：作為一個社交產(chǎn)品，F(xiàn)acebook的產(chǎn)品圖標(biāo)同樣采用了一個字母代表較長的單詞。

正負形與隱喻風(fēng)格

圖標(biāo)的設(shè)計可以使用正負形和隱喻，來讓圖標(biāo)更加有耐人尋味的看點。

抖音：抖音的產(chǎn)品圖標(biāo)是一個音符，但是不知道大家是否發(fā)現(xiàn)，下面圓形的負空間也是一個音符，所以顯得非常巧妙。為了增加動感還加了紅和藍綠色的類似3D的動感效果。

Keep：Keep產(chǎn)品圖標(biāo)是一個K，但是同時也是一個人抬著腿正在鍛煉。

Skillshare：Skillshare是一個技能交換平臺，第一眼看是兩個手像太極一樣交換著技能，同時也是該產(chǎn)品的首字母：S。

折紙風(fēng)格

折紙的效果會讓人感覺很立體，所以很多產(chǎn)品也選擇了折紙效果（比較扁平的手法）來設(shè)計產(chǎn)品圖標(biāo)。

Calendar：這個產(chǎn)品的產(chǎn)品圖標(biāo)是一個正在翻頁的日歷，非常簡潔明了。

Snapseed：除了扁平的設(shè)計之外，使用了長投影的設(shè)計風(fēng)格。這個長投影也是扁平化的設(shè)計。

Netflix：Netflix的產(chǎn)品圖標(biāo)是該產(chǎn)品的首字母N，這個N用了一些陰影來表示立體感。

繪聲繪影：同樣是用了長投影和折紙效果，顯得非常清新。 

填充圖標(biāo)風(fēng)格

產(chǎn)品圖標(biāo)使用填充圖標(biāo)風(fēng)格是非常合適的。填充圖標(biāo)風(fēng)格具有簡潔和識別性強的特點。這種ICON的可擴展性更高，比如在一些特殊節(jié)日時可以用手繪、拼貼等形式來做輔助圖形。所以很多公司都鐘愛填充圖標(biāo)風(fēng)格。

Lucking：這是一個線上咖啡外賣的產(chǎn)品。它的APP圖標(biāo)使用了一個鹿回頭的造型。這個鹿造型簡潔，非常有識別性。

Tinder：這是一個國外社交APP，通過一個火的填充圖標(biāo)讓人第一時間記住這個產(chǎn)品。

youtube：這是國外著名視頻APP，它的產(chǎn)品圖標(biāo)同樣使用了填充圖標(biāo)風(fēng)格，是一個有電視機隱喻的圓角矩形，并且中心是一個播放鍵，簡明扼要地說明了這個產(chǎn)品的功能。

Twitter：國外著名社交APP，它的icon同樣使用了填充圖標(biāo)風(fēng)格，非常簡潔好記。

線性風(fēng)格

由于目前設(shè)計流行趨勢，很多產(chǎn)品圖標(biāo)都會采用扁平的設(shè)計風(fēng)格。扁平除了填充的圖標(biāo)之外，還有一種非常流行的形式——線性風(fēng)格。線性風(fēng)格一定要注意不要太細，因為手機和電腦設(shè)計環(huán)境顯示尺寸不同，如果我們做得太細，那么在手機上看會非常尖銳，顯得不太好點擊。

Airbnb：Airbnb的背景是一個微漸變，線性風(fēng)格是一個曲線組成的A，同時也是一個小蜜蜂。

LOFTCam：為了凸顯文藝產(chǎn)品調(diào)性，使用了偏細的線條，同時使用了兩種主題色。

NextDay：同樣非常文藝的產(chǎn)品，使用了比較抽象的手法。這個ICON是一個牛奶，突出了這個產(chǎn)品必須今天看，否則就如牛奶一樣會過期。

VUE：這是一個攝影產(chǎn)品，同樣應(yīng)用了黑色的微漸變，前面是非常前衛(wèi)的45度長短不同的線。

LOWPOLY風(fēng)格

我曾介紹過LOWPOLY這種設(shè)計風(fēng)格，這種風(fēng)格如果應(yīng)用在產(chǎn)品圖標(biāo)上同樣非常搶眼，因為用戶的手機上可能安裝了很多APP，那么第一眼掃過去一定會注意到最亮眼的圖標(biāo)。而LOWPOLY因為本身造型的獨特性非常吸引眼球。當(dāng)然LOWPOLY也有它的問題，比如容易讓圖標(biāo)失去細節(jié)等，所以很多產(chǎn)品圖標(biāo)都是使用LOWPOLY作為圖形的背景。

潮自拍：潮自拍使用了暖色鄰近色漸變的LOWPOLY作為背景，前景使用了一個很潮的S。

潘通色：潘通色本身的最大特征就是色卡，所以使用了LOWPOLY的形式。

美妝相機：通常LOWPOLY的形式是方塊，而美妝相機使用了三角作為基礎(chǔ)元素，很特別。

人人：人人的產(chǎn)品圖標(biāo)使用了不同的矩形斜度45°，增加了設(shè)計的速度感。

微漸變風(fēng)格

微漸變也是非常常見的表現(xiàn)手法。在擬物被扁平替代以后，我們會發(fā)現(xiàn)無法表達空間上的Z軸。所以用輕微的漸變表現(xiàn)圖片的深度非常流行。我認(rèn)為微漸變可能是眾多圖標(biāo)設(shè)計風(fēng)格中最有競爭力的一種。

每日優(yōu)鮮：每日優(yōu)鮮在背景上用了很多炫彩的圓球，由于促銷時段在原有圖標(biāo)上增加了一個雙十一的小標(biāo)識，在手機中非常搶眼。

陌陌：陌陌圖標(biāo)如果設(shè)計成扁平你還會注意到它嗎？使用線性圖標(biāo)會使得圖標(biāo)厚度感不夠，而微漸變可以非常好地解決這個問題。

全民K歌：使用了紫紅色的漸變來塑造一只鸚鵡，如果遇到其他使用場景可以使用扁平版本，這樣會讓產(chǎn)品圖標(biāo)的使用更加靈活。

Mindnode：這款腦圖軟件的產(chǎn)品圖標(biāo)使用了三組鄰近色的漸變，同時使用了非常微妙的陰影。

卡通風(fēng)格

卡通風(fēng)格的產(chǎn)品圖標(biāo)會讓用戶更有好感，所以我們可以為產(chǎn)品設(shè)計一個可愛的卡通角色。好多決策者會認(rèn)為卡通是一種低齡的審美，其實是錯誤的?？ㄍ梢哉f是一種通吃的風(fēng)格，比如騰訊就是以一個企鵝作為品牌形象開始拓展自己的版圖。而卡通本身有不同的風(fēng)格，比如擬物類的卡通、扁平類的卡通等，也會給人不同的感受。所以如果我們的產(chǎn)品要使用卡通作為產(chǎn)品圖標(biāo)，最好以目標(biāo)用戶群的喜好作為標(biāo)尺。

開心消消樂：開心消消樂是一個休閑游戲，游戲類APP的產(chǎn)品圖標(biāo)通常是使用擬物風(fēng)格，這樣可以最大地吸引玩家的注意力和興趣。

映客：映客是直播APP，通常用戶年齡不是很大，所以使用了一個很可愛的貓頭鷹作為產(chǎn)品圖標(biāo)。

Waze：Waze的產(chǎn)品圖標(biāo)不僅可愛而且突出了Waze的地圖查找功能。

BOO!：BOO!是一個兒童社交產(chǎn)品，用戶比較低齡，所以更適合使用可愛的卡通作為圖標(biāo)。

圖標(biāo)的網(wǎng)格和參考線

如果我們想設(shè)計一個小圖標(biāo)，那么我們可以把畫布放大到400％來設(shè)計。同時可以使用網(wǎng)格和參考線來作為我們設(shè)計的輔助。網(wǎng)格在很多軟件里都有，比如在Illustrator中點擊視圖 > 網(wǎng)格 即可開啟網(wǎng)格了。參考線模板則需要下載第三方設(shè)計的模板，比如Material Design的參考線模板就有正方形、圓形、圓形和長方形結(jié)合等不同形式。如果對齊模板中的形狀，即可得到面積相等的長方形、正方形、圓形。這對我們構(gòu)建視覺上面積相等的圖標(biāo)很有益處。

尺寸

蘋果啟動圖標(biāo)尺寸

蘋果需要很多尺寸的圖標(biāo)用在不同的場景上，比如說在網(wǎng)頁端打開iTunes會使用512px的大圖標(biāo)，而在手機、iPad桌面上的圖標(biāo)大小也不同。除了尺寸不同，這些圖標(biāo)的圓角也有不同的數(shù)值。為了簡化這部分的難度，蘋果為開發(fā)者提供了模板，有了模板就不用記那么多東西啦。蘋果官方HIG下載的這套資源中，有Template-AppIcons-iOS這個文件，這個文件提供了PS、Sketch、XD等不同格式。我比較推薦使用PS的格式。打開這個文件，用我們自己設(shè)計的啟動圖標(biāo)替換掉任意智能對象里的內(nèi)容（智能對象都是一個變出來的）。那么打開智能對象就是一個1024x1024px的矩形畫布，把我們的產(chǎn)品圖標(biāo)放在這里，保存這個智能對象再關(guān)閉它就可以了。這時，你會發(fā)現(xiàn)所有尺寸的圖標(biāo)都變成了我們的圖標(biāo)。然后我們把背景隱藏，切出這些圖標(biāo)即可。如果是AI完成的產(chǎn)品圖標(biāo)可以直接Ctrl+C然后在PS智能對象中Ctrl+V復(fù)制過來就行。

安卓啟動圖標(biāo)尺寸

安卓啟動圖標(biāo)同樣需要很多尺寸，主流是需要：1024x1024px、512x512px、144x144px、96x96px、72x72px、48x48px這六種。我們提供給程序員的是直角的矩形，然后程序員通過代碼進行切割變成圓角圖標(biāo)。在這里我也做了一個智能對象的模板送給您，只要替換其中的智能對象圖像，換成您的1024x1024px圖標(biāo)保存即可。

設(shè)計流程

設(shè)計產(chǎn)品圖標(biāo)前，首先我們需要找一些和產(chǎn)品氣質(zhì)相符的圖片制作情緒板。通過情緒板我們可以感受到產(chǎn)品的調(diào)性，然后我們從中提取一些形狀和色彩作為我們產(chǎn)品圖標(biāo)的主要造型。

系統(tǒng)圖標(biāo)

第二種圖標(biāo)被稱為系統(tǒng)圖標(biāo)。系統(tǒng)圖標(biāo)指的是擔(dān)負著一定功能和含義的圖形，一般來說需要像文字一般地被人迅速理解，所以表達方式上不適合特別復(fù)雜。比如微信底部四個系統(tǒng)圖標(biāo)：“微信”、“通訊錄”、“發(fā)現(xiàn)”、“我”就使用了比較簡潔的線性風(fēng)格。

當(dāng)然系統(tǒng)圖標(biāo)也不一定要做的非常無趣，比如我們常用的58同城APP中就有大量的系統(tǒng)圖標(biāo)，在保證識別性的前提下使用了多彩的顏色和不同的造型，顯得非?；顫姟Ｋ韵到y(tǒng)圖標(biāo)同樣可以做得有趣和多樣，前提是保證圖標(biāo)的可識別性。 

風(fēng)格

填充圖標(biāo)（Filled icon）

填充圖標(biāo)是以面為主要表現(xiàn)形式的圖標(biāo)。在微信APP底部的tab欄中，未選中的圖標(biāo)是線性圖標(biāo)，而選中態(tài)則是填充圖標(biāo)，并且會變成較為鮮亮的顏色暗示用戶該功能被選中了。填充態(tài)圖標(biāo)占用的面積要比線性圖標(biāo)多，所以更加顯眼。實際上，在最新的蘋果設(shè)計規(guī)范中，蘋果也建議開發(fā)者在APP底部Tab欄中全部使用填充圖標(biāo)，點擊態(tài)通過改變填充圖標(biāo)的顏色進行區(qū)別。這是因為因為填充圖標(biāo)看上去像可點擊的。

線性圖標(biāo)（Outlined icon）

線性圖標(biāo)的表現(xiàn)形式是線條，在系統(tǒng)圖標(biāo)里通常是由統(tǒng)一粗細的線條組成。這里可能很多新朋友不明白為什么要使用統(tǒng)一的粗細，這是因為通常系統(tǒng)圖標(biāo)并非單一出現(xiàn)，而是成組使用。比如微信底部的四個tab圖標(biāo)、網(wǎng)易云音樂頂部導(dǎo)航欄的圖標(biāo)等。在一個場景下的幾個同等重要的圖標(biāo)，如果線條粗細不一致，很容易造成它們存在權(quán)重上差異的感覺。所以我們在繪制線性圖標(biāo)時，線條通常都會使用統(tǒng)一的粗細。

圓角圖標(biāo)（Rounded icon）

無論是線性還是填充的圖標(biāo)，在圖標(biāo)的邊角處使用圓角都是圓角圖標(biāo)風(fēng)格。圓角圖標(biāo)的好處就是讓人覺得狠溫柔，可以非常舒適地點擊它。所以很多產(chǎn)品的圖標(biāo)都會使用圓角圖標(biāo)。

尖角圖標(biāo)（Sharp icon）

無論是線性還是填充的圖標(biāo)，在圖標(biāo)的邊角處使用尖角都是尖角圖標(biāo)風(fēng)格。尖角圖標(biāo)的好處是讓人感覺到有棱角，視覺上會多凝視幾秒。并且給人以正式的感覺，所以像銀行、辦公等APP中都較多地使用尖角圖標(biāo)風(fēng)格。