2021-4-25 周周
本文從圖標(biāo)的起源、定義到基礎(chǔ)的設(shè)計(jì)方法總結(jié)無(wú)一不包，還有大量的案例幫你理解布爾運(yùn)算，是新人設(shè)計(jì)師學(xué)習(xí)圖標(biāo)設(shè)計(jì)的必備干貨！
一說(shuō)到圖標(biāo)，我想您一定會(huì)覺(jué)得非常熟悉。圖標(biāo)，也稱為 icon 或 picto，是指有明確含義的圖形視覺(jué)語(yǔ)言。那么當(dāng)我們一提起圖標(biāo)設(shè)計(jì)，您的腦中會(huì)想起哪個(gè)圖標(biāo)來(lái)呢？有可能您想起的是微信APP ，由兩個(gè)白色氣泡組成的啟動(dòng)圖標(biāo)，或者是我們每天使用的 APP 中的那些返回、關(guān)閉等系統(tǒng)圖標(biāo)，也可能是商場(chǎng)導(dǎo)視里的衛(wèi)生間圖標(biāo)等。沒(méi)錯(cuò)，圖標(biāo)的形式有很多種，它可以應(yīng)用在很多場(chǎng)景中，并且表現(xiàn)方式非常豐富：有線的、有面的、也有擬物的等等。圖標(biāo)的歷史可以追溯到象形文字（Pictogram），我們的祖先在發(fā)明文字之前就使用圖標(biāo)記錄一天的生活了。聽(tīng)著是不是不可思議呢？從亙古時(shí)代的象形文字開(kāi)始，我們的祖先就偏愛(ài)使用這種抽象的圖形來(lái)表達(dá)意思了。在平面設(shè)計(jì)領(lǐng)域的商標(biāo)其實(shí)也是一種圖標(biāo)，平面設(shè)計(jì)里的視覺(jué)導(dǎo)視（例如衛(wèi)生間的圖標(biāo)）也有圖標(biāo)的應(yīng)用，所以圖標(biāo)在我們的生活中應(yīng)用非常廣泛。
△ 生活中隨處可見(jiàn)的圖標(biāo)
在計(jì)算機(jī)時(shí)代，從80年代的施樂(lè)公司界面中的單色圖標(biāo)開(kāi)始，圖標(biāo)就開(kāi)始出現(xiàn)在屏幕之中了，圖標(biāo)較編程語(yǔ)言更容易被大眾理解。到了后來(lái)從 iMac 到 iPhone 引領(lǐng)的擬物圖標(biāo)更是開(kāi)啟了一個(gè)絢麗的圖標(biāo)設(shè)計(jì)時(shí)代。擬物時(shí)代盛行也帶來(lái)了一些麻煩：擬物圖標(biāo)的質(zhì)感、光影會(huì)吸引走用戶的注意力，我們稱之為「視覺(jué)噪音」。于是 UI設(shè)計(jì)師開(kāi)始探索更新的表現(xiàn)形式來(lái)設(shè)計(jì)界面中的圖標(biāo)。扁平圖標(biāo)發(fā)展史上有過(guò)很多次嘗試，比如微軟引領(lǐng)的 Metro風(fēng)格中的圖標(biāo)設(shè)計(jì)和 Google 引領(lǐng)的扁平設(shè)計(jì)風(fēng)格中的長(zhǎng)投影風(fēng)格圖標(biāo)，但由于它們表現(xiàn)形式太過(guò)于抽象、缺乏情感的傳遞，并沒(méi)有獲得用戶的垂青。而我們現(xiàn)在界面設(shè)計(jì)中的圖標(biāo)設(shè)計(jì)是一種「輕擬物」或「微扁平」的風(fēng)格：在面積比較小的區(qū)域我們使用扁平圖標(biāo)或線形圖標(biāo)；在面積比較大的區(qū)域我們會(huì)使用加入漸變甚至輕質(zhì)感的圖標(biāo)。（關(guān)于圖標(biāo)風(fēng)格的變化，可以參考這個(gè)網(wǎng)站：https://historyoficons.com）。
△ 不同的圖標(biāo)設(shè)計(jì)風(fēng)格
如今我們界面中的圖標(biāo)可謂非常豐富了，如果根據(jù) Material Design 對(duì)圖標(biāo)的分類，UI設(shè)計(jì)中的圖標(biāo)可以分為帶有品牌屬性和特性的產(chǎn)品圖標(biāo)、有功能指示作用的系統(tǒng)圖標(biāo)兩種圖標(biāo)，下面我們將針對(duì)于這兩種圖標(biāo)進(jìn)行研究。
產(chǎn)品圖標(biāo)是我們?cè)谠O(shè)計(jì)界面的時(shí)候體現(xiàn)品牌調(diào)性和特性的圖標(biāo)。通過(guò)產(chǎn)品圖標(biāo)，用戶就可以大概感知這個(gè)產(chǎn)品主要是做什么的。比如微信的產(chǎn)品圖標(biāo)是兩個(gè)對(duì)話氣泡，暗示了這是一款社交APP；再比如 ofo 的產(chǎn)品圖標(biāo)是字母ofo 的組合，同時(shí)也是一輛自行車，這暗示了這款產(chǎn)品是共享單車的APP；再比如 KEEP 的字母「K」的圖標(biāo)，像極了一個(gè)在抬腿做運(yùn)動(dòng)的人，暗示了這是一個(gè)運(yùn)動(dòng)APP。
同時(shí)有些產(chǎn)品也依靠自身已經(jīng)在用戶心中產(chǎn)生的品牌來(lái)直接設(shè)計(jì)產(chǎn)品圖標(biāo)，比如淘寶APP 的產(chǎn)品圖標(biāo)就是一個(gè)「淘」字；支付寶的產(chǎn)品圖標(biāo)就是一個(gè)「支」字。優(yōu)秀的產(chǎn)品圖標(biāo)都會(huì)在我們心中打上一個(gè)烙印，當(dāng)我們看到這些圖形、配色時(shí)，腦中會(huì)立即想起來(lái)它們的功能和特點(diǎn)。產(chǎn)品圖標(biāo)除了在手機(jī)屏幕中作為啟動(dòng)圖標(biāo)，也會(huì)出現(xiàn)在閃屏、情感化設(shè)計(jì)、「關(guān)于我們」界面等場(chǎng)景中，所以也要有一定的靈活性，在設(shè)計(jì)上要以簡(jiǎn)單、大膽、友好的方式傳達(dá)產(chǎn)品的核心理念和意圖。產(chǎn)品圖標(biāo)很類似在企業(yè)識(shí)別系統(tǒng)（VI）里的 logo，需要讓用戶一眼看到它就能夠與腦中的產(chǎn)品相關(guān)聯(lián)。所以設(shè)計(jì)一個(gè)優(yōu)秀的產(chǎn)品圖標(biāo)對(duì)于任何產(chǎn)品來(lái)說(shuō)都是非常重要的。
產(chǎn)品圖標(biāo)有不同的風(fēng)格，這些風(fēng)格有可能很擬物，也有可能很扁平；有可能很抽象，也可能很具象。通過(guò)不同的設(shè)計(jì)風(fēng)格可以更加標(biāo)新立異，從而被用戶記住。讓用戶記住我們的圖標(biāo)真是一件非常重要的事兒，要知道，每個(gè)手機(jī)都像是一把瑞士軍刀，它有無(wú)數(shù)個(gè)功能，而我們的產(chǎn)品只是萬(wàn)種功能中的一個(gè)。用戶不可能記住手機(jī)里所有的 APP 都是什么，所以能在第一時(shí)間取得好感和記憶非常重要，產(chǎn)品圖標(biāo)設(shè)計(jì)得好看并且容易被人記住就成了非常重要的任務(wù)。產(chǎn)品圖標(biāo)的主要風(fēng)格有以下幾種。
文字風(fēng)格
文字是最直白的信息，而且不容易被曲解。所以很多國(guó)內(nèi)的產(chǎn)品都會(huì)使用文字來(lái)作為自己的產(chǎn)品圖標(biāo)。比如：支付寶、淘寶、今日頭條、OFO、愛(ài)奇藝、知乎、網(wǎng)易新聞、毛豆新車等。這么做也有它的問(wèn)題，比如文字給人美的感受不如圖形，因?yàn)槲淖中枰喿x而不是觀察。并且移動(dòng)端設(shè)備都會(huì)在啟動(dòng)圖標(biāo)之下加上一行輔助文字，如果圖標(biāo)上的文字和下面的輔助文字完全重合，會(huì)顯得像介紹了自己兩遍一樣。如果您決意要使用文字作為產(chǎn)品圖標(biāo)，且是中文的話，那么一定要記得文字最好為1-2個(gè)，并且不應(yīng)該是產(chǎn)品的全稱。如果是英文的話，最好是首字母而不是產(chǎn)品全稱。當(dāng)然不管是中文還是英文都需要選擇合適氣質(zhì)的字體并做一定的變化。
單讀：?jiǎn)巫x是一個(gè)偏文藝的閱讀產(chǎn)品，所以產(chǎn)品圖標(biāo)使用了黑白配色和兩個(gè)非常有文藝氣息的宋體繁體字，這樣的設(shè)計(jì)符合產(chǎn)品調(diào)性，傳遞給用戶一種產(chǎn)品的文藝氣息。
今日頭條：今日頭條是一款優(yōu)秀的新聞APP。它的圖標(biāo)非常直白，一張報(bào)紙上有紅色的頭條標(biāo)題，頭條使用了非常粗的黑體字，非常顯眼。
淘寶：淘寶采用了一個(gè)俏皮的「淘」字作為 icon 的主要元素，并且背景顏色是令人興奮和刺激的橘黃色，凸顯了電商屬性。并且這個(gè)字使用了很久，用戶對(duì)此有一定的品牌認(rèn)知。
愛(ài)奇藝：愛(ài)奇藝的 icon 采用了英文字母iQIYI 和上下邊框相組合的形式。整體看來(lái)像是一個(gè)電視機(jī)，強(qiáng)調(diào)了品牌屬性和功能，并且使用了在視頻領(lǐng)域非常有識(shí)別性的綠色，讓人一看便知這是愛(ài)奇藝了。
△ 單讀、今日頭條、淘寶、愛(ài)奇藝的產(chǎn)品圖標(biāo)
如果您的品牌使用英文作為產(chǎn)品圖標(biāo)，我們?cè)谠O(shè)計(jì)的時(shí)候要格外注意英文字母之間的正負(fù)空間關(guān)系以及不同西文字體的不同氣質(zhì)。
ONE：雖然是中文產(chǎn)品，但是 ONE 的icon 顯得非常的高端和小眾。ONE 三個(gè)字母的正負(fù)空間關(guān)系做了微調(diào)，并且選擇了無(wú)襯線字體來(lái)體現(xiàn)時(shí)尚感。下面的小字是一個(gè) slogan，并且和 ONE 的寬度一致。
Pinterest：Pinterest 的產(chǎn)品圖標(biāo)是一個(gè)手寫(xiě)體的P，并且用紅色圓形作為陪襯。這樣一個(gè)字母作為 ICON 的好處就是方便用戶記憶。
HULU：HULU 是一個(gè)國(guó)外視頻產(chǎn)品，它的產(chǎn)品圖標(biāo)顏色很鮮艷，字母本身有韻律感，所以沒(méi)有做過(guò)多的設(shè)計(jì)。
Facebook：作為一個(gè)社交產(chǎn)品，F(xiàn)acebook 的產(chǎn)品圖標(biāo)同樣采用了一個(gè)字母代表較長(zhǎng)的單詞。
△ ONE、Pinterest、HULU、Facebook的產(chǎn)品圖標(biāo)
正負(fù)形與隱喻風(fēng)格
圖標(biāo)的設(shè)計(jì)可以使用正負(fù)形和隱喻，來(lái)讓圖標(biāo)更加有耐人尋味的看點(diǎn)。
抖音：抖音的產(chǎn)品圖標(biāo)是一個(gè)音符，但是不知道大家是否發(fā)現(xiàn)，下面圓形的負(fù)空間也是一個(gè)音符，所以顯得非常巧妙。為了增加動(dòng)感還加了紅和藍(lán)綠色的類似3D的動(dòng)感效果。
Keep：Keep 產(chǎn)品圖標(biāo)是一個(gè)K，但是同時(shí)也是一個(gè)人抬著腿正在鍛煉。
Skillshare：Skillshare 是一個(gè)技能交換平臺(tái)，第一眼看是兩個(gè)手像太極一樣交換著技能，同時(shí)也是該產(chǎn)品的首字母：S。
△ 抖音、Keep、Skillshare、OFO的產(chǎn)品圖標(biāo)
折紙風(fēng)格
折紙的效果會(huì)讓人感覺(jué)很立體，所以很多產(chǎn)品也選擇了折紙效果（比較扁平的手法）來(lái)設(shè)計(jì)產(chǎn)品圖標(biāo)。
Calendar：這個(gè)產(chǎn)品的產(chǎn)品圖標(biāo)是一個(gè)正在翻頁(yè)的日歷，非常簡(jiǎn)潔明了。
Snapseed：除了扁平的設(shè)計(jì)之外，使用了長(zhǎng)投影的設(shè)計(jì)風(fēng)格。這個(gè)長(zhǎng)投影也是扁平化的設(shè)計(jì)。
Netflix：Netflix 的產(chǎn)品圖標(biāo)是該產(chǎn)品的首字母N，這個(gè) N 用了一些陰影來(lái)表示立體感。
繪聲繪影：同樣是用了長(zhǎng)投影和折紙效果，顯得非常清新。
△ Calendar、Snapseed、Netflix、繪聲繪影的產(chǎn)品圖標(biāo)
填充圖標(biāo)風(fēng)格
產(chǎn)品圖標(biāo)使用填充圖標(biāo)風(fēng)格是非常合適的。填充圖標(biāo)風(fēng)格具有簡(jiǎn)潔和識(shí)別性強(qiáng)的特點(diǎn)。這種 ICON 的可擴(kuò)展性更高，比如在一些特殊節(jié)日時(shí)可以用手繪、拼貼等形式來(lái)做輔助圖形。所以很多公司都鐘愛(ài)填充圖標(biāo)風(fēng)格。
Lucking：這是一個(gè)線上咖啡外賣的產(chǎn)品。它的 APP圖標(biāo)使用了一個(gè)鹿回頭的造型。這個(gè)鹿造型簡(jiǎn)潔，非常有識(shí)別性。
Tinder：這是一個(gè)國(guó)外社交APP，通過(guò)一個(gè)火的填充圖標(biāo)讓人第一時(shí)間記住這個(gè)產(chǎn)品。
youtube：這是國(guó)外著名視頻APP，它的產(chǎn)品圖標(biāo)同樣使用了填充圖標(biāo)風(fēng)格，是一個(gè)有電視機(jī)隱喻的圓角矩形，并且中心是一個(gè)播放鍵，簡(jiǎn)明扼要地說(shuō)明了這個(gè)產(chǎn)品的功能。
Twitter：國(guó)外著名社交APP，它的 icon 同樣使用了填充圖標(biāo)風(fēng)格，非常簡(jiǎn)潔好記。
△ Lucking、Tinder、Youtube、Twitter的產(chǎn)品圖標(biāo)
線性風(fēng)格
由于目前設(shè)計(jì)流行趨勢(shì)，很多產(chǎn)品圖標(biāo)都會(huì)采用扁平的設(shè)計(jì)風(fēng)格。扁平除了填充的圖標(biāo)之外，還有一種非常流行的形式——線性風(fēng)格。線性風(fēng)格一定要注意不要太細(xì)，因?yàn)槭謾C(jī)和電腦設(shè)計(jì)環(huán)境顯示尺寸不同，如果我們做得太細(xì)，那么在手機(jī)上看會(huì)非常尖銳，顯得不太好點(diǎn)擊。
Airbnb：Airbnb 的背景是一個(gè)微漸變，線性風(fēng)格是一個(gè)曲線組成的 A，同時(shí)也是一個(gè)小蜜蜂。
LOFTCam：為了凸顯文藝產(chǎn)品調(diào)性，使用了偏細(xì)的線條，同時(shí)使用了兩種主題色。
NextDay：同樣非常文藝的產(chǎn)品，使用了比較抽象的手法。這個(gè) ICON 是一個(gè)牛奶，突出了這個(gè)產(chǎn)品必須今天看，否則就如牛奶一樣會(huì)過(guò)期。
VUE：這是一個(gè)攝影產(chǎn)品，同樣應(yīng)用了黑色的微漸變，前面是非常前衛(wèi)的45度長(zhǎng)短不同的線。
△ Airbnb、LOFTCam、NextDay、VUE的產(chǎn)品圖標(biāo)
LOWPOLY風(fēng)格
我曾介紹過(guò) LOWPOLY 這種設(shè)計(jì)風(fēng)格，這種風(fēng)格如果應(yīng)用在產(chǎn)品圖標(biāo)上同樣非常搶眼，因?yàn)橛脩舻氖謾C(jī)上可能安裝了很多 APP，那么第一眼掃過(guò)去一定會(huì)注意到最亮眼的圖標(biāo)。而 LOWPOLY 因?yàn)楸旧碓煨偷莫?dú)特性非常吸引眼球。當(dāng)然 LOWPOLY 也有它的問(wèn)題，比如容易讓圖標(biāo)失去細(xì)節(jié)等，所以很多產(chǎn)品圖標(biāo)都是使用 LOWPOLY 作為圖形的背景。
潮自拍：潮自拍使用了暖色鄰近色漸變的 LOWPOLY 作為背景，前景使用了一個(gè)很潮的S。
潘通色：潘通色本身的最大特征就是色卡，所以使用了 LOWPOLY 的形式。
美妝相機(jī)：通常 LOWPOLY 的形式是方塊，而美妝相機(jī)使用了三角作為基礎(chǔ)元素，很特別。
人人：人人的產(chǎn)品圖標(biāo)使用了不同的矩形斜度45°，增加了設(shè)計(jì)的速度感。
△ 潮自拍、潘通色、美妝相機(jī)、人人的產(chǎn)品圖標(biāo)
微漸變風(fēng)格
微漸變也是非常常見(jiàn)的表現(xiàn)手法。在擬物被扁平替代以后，我們會(huì)發(fā)現(xiàn)無(wú)法表達(dá)空間上的 Z軸。所以用輕微的漸變表現(xiàn)圖片的深度非常流行。我認(rèn)為微漸變可能是眾多圖標(biāo)設(shè)計(jì)風(fēng)格中最有競(jìng)爭(zhēng)力的一種。
每日優(yōu)鮮：每日優(yōu)鮮在背景上用了很多炫彩的圓球，由于促銷時(shí)段在原有圖標(biāo)上增加了一個(gè)雙十一的小標(biāo)識(shí)，在手機(jī)中非常搶眼。
陌陌：陌陌圖標(biāo)如果設(shè)計(jì)成扁平你還會(huì)注意到它嗎？使用線性圖標(biāo)會(huì)使得圖標(biāo)厚度感不夠，而微漸變可以非常好地解決這個(gè)問(wèn)題。
全民K歌：使用了紫紅色的漸變來(lái)塑造一只鸚鵡，如果遇到其他使用場(chǎng)景可以使用扁平版本，這樣會(huì)讓產(chǎn)品圖標(biāo)的使用更加靈活。
Mindnode：這款腦圖軟件的產(chǎn)品圖標(biāo)使用了三組鄰近色的漸變，同時(shí)使用了非常微妙的陰影。
△ 每日優(yōu)鮮、陌陌、全民K歌、Mindnode的產(chǎn)品圖標(biāo)
卡通風(fēng)格
卡通風(fēng)格的產(chǎn)品圖標(biāo)會(huì)讓用戶更有好感，所以我們可以為產(chǎn)品設(shè)計(jì)一個(gè)可愛(ài)的卡通角色。好多決策者會(huì)認(rèn)為卡通是一種低齡的審美，其實(shí)是錯(cuò)誤的?？ㄍ梢哉f(shuō)是一種通吃的風(fēng)格，比如騰訊就是以一個(gè)企鵝作為品牌形象開(kāi)始拓展自己的版圖。而卡通本身有不同的風(fēng)格，比如擬物類的卡通、扁平類的卡通等，也會(huì)給人不同的感受。所以如果我們的產(chǎn)品要使用卡通作為產(chǎn)品圖標(biāo)，最好以目標(biāo)用戶群的喜好作為標(biāo)尺。
開(kāi)心消消樂(lè)：開(kāi)心消消樂(lè)是一個(gè)休閑游戲，游戲類APP 的產(chǎn)品圖標(biāo)通常是使用擬物風(fēng)格，這樣可以最大地吸引玩家的注意力和興趣。
映客：映客是直播APP，通常用戶年齡不是很大，所以使用了一個(gè)很可愛(ài)的貓頭鷹作為產(chǎn)品圖標(biāo)。
Waze：Waze 的產(chǎn)品圖標(biāo)不僅可愛(ài)而且突出了 Waze 的地圖查找功能。
BOO!：BOO! 是一個(gè)兒童社交產(chǎn)品，用戶比較低齡，所以更適合使用可愛(ài)的卡通作為圖標(biāo)。
△ 開(kāi)心消消樂(lè)、映客、Waze、BOO!的產(chǎn)品圖標(biāo)
如果我們想設(shè)計(jì)一個(gè)小圖標(biāo)，那么我們可以把畫(huà)布放大到400％來(lái)設(shè)計(jì)。同時(shí)可以使用網(wǎng)格和參考線來(lái)作為我們?cè)O(shè)計(jì)的輔助。網(wǎng)格在很多軟件里都有，比如在 Illustrator 中點(diǎn)擊視圖 > 網(wǎng)格，即可開(kāi)啟網(wǎng)格了。參考線模板則需要下載第三方設(shè)計(jì)的模板，比如 Material Design 的參考線模板就有正方形、圓形、圓形和長(zhǎng)方形結(jié)合等不同形式。如果對(duì)齊模板中的形狀，即可得到面積相等的長(zhǎng)方形、正方形、圓形。這對(duì)我們構(gòu)建視覺(jué)上面積相等的圖標(biāo)很有益處。
△ 網(wǎng)格和參考線
△ 不同形狀的網(wǎng)格布局
△ 在網(wǎng)格的輔助下可以設(shè)計(jì)出大小均衡的圖標(biāo)
蘋(píng)果啟動(dòng)圖標(biāo)尺寸
蘋(píng)果需要很多尺寸的圖標(biāo)用在不同的場(chǎng)景上，比如說(shuō)在網(wǎng)頁(yè)端打開(kāi)iTunes會(huì)使用512px的大圖標(biāo)，而在手機(jī)、iPad桌面上的圖標(biāo)大小也不同。除了尺寸不同，這些圖標(biāo)的圓角也有不同的數(shù)值。為了簡(jiǎn)化這部分的難度，蘋(píng)果為開(kāi)發(fā)者提供了模板，有了模板就不用記那么多東西啦。蘋(píng)果官方HIG 下載的這套資源中，有 Template-AppIcons-iOS 這個(gè)文件，這個(gè)文件提供了 PS、Sketch、XD等不同格式。我比較推薦使用 PS 的格式。
打開(kāi)這個(gè)文件，用我們自己設(shè)計(jì)的啟動(dòng)圖標(biāo)替換掉任意智能對(duì)象里的內(nèi)容。那么打開(kāi)智能對(duì)象就是一個(gè)1024x1024px的矩形畫(huà)布，把我們的產(chǎn)品圖標(biāo)放在這里，保存這個(gè)智能對(duì)象再關(guān)閉它就可以了。這時(shí)，你會(huì)發(fā)現(xiàn)所有尺寸的圖標(biāo)都變成了我們的圖標(biāo)。然后我們把背景隱藏，切出這些圖標(biāo)即可。如果是 AI 完成的產(chǎn)品圖標(biāo)可以直接 Ctrl+C 然后在 PS智能對(duì)象中 Ctrl+V復(fù)制過(guò)來(lái)就行。
△ Template-AppIcons-iOS
安卓啟動(dòng)圖標(biāo)尺寸
安卓啟動(dòng)圖標(biāo)同樣需要很多尺寸，主流是需要：1024x1024px、512x512px、144x144px、96x96px、72x72px、48x48px這六種。我們提供給程序員的是直角的矩形，然后程序員通過(guò)代碼進(jìn)行切割變成圓角圖標(biāo)。在這里我也做了一個(gè)智能對(duì)象的模板送給您，只要替換其中的智能對(duì)象圖像，換成您的1024x1024px圖標(biāo)保存即可。
△ 安卓圖標(biāo)模板
設(shè)計(jì)產(chǎn)品圖標(biāo)前，首先我們需要找一些和產(chǎn)品氣質(zhì)相符的圖片制作情緒板。通過(guò)情緒板我們可以感受到產(chǎn)品的調(diào)性，然后我們從中提取一些形狀和色彩作為我們產(chǎn)品圖標(biāo)的主要造型。這里我舉我的產(chǎn)品每日名畫(huà)的例子，每日名畫(huà)是一個(gè)美術(shù)方面的APP，所以我找了一些和美術(shù)相關(guān)的圖片。
△ 關(guān)于美術(shù)的情緒板
下面我開(kāi)始在 AI 設(shè)計(jì)產(chǎn)品圖標(biāo)了。我建立了一個(gè)1024x1024px的畫(huà)布，然后根據(jù)盧浮宮前的金字塔建筑設(shè)計(jì)了一枚抽象的產(chǎn)品圖標(biāo)，它內(nèi)在的符號(hào)是：帶領(lǐng)大家走進(jìn)藝術(shù)的殿堂。同時(shí)我也增加了一些自己對(duì)美術(shù)的含義，如藝術(shù)來(lái)源于生活高于生活等。這些都寫(xiě)在了設(shè)計(jì)說(shuō)明中。
△ 在Illustrator中設(shè)計(jì)產(chǎn)品圖標(biāo)
然后我給這枚圖標(biāo)加入了蒙德里安的配色，增加產(chǎn)品的藝術(shù)感，并最終完成產(chǎn)品圖標(biāo)的設(shè)計(jì)。這個(gè)圖標(biāo)也可以作為該產(chǎn)品的企業(yè)形象（VIS），將來(lái)產(chǎn)品周邊都可以使用這個(gè)圖形。
△ 最終定稿的圖標(biāo)
由于產(chǎn)品會(huì)首先上線到蘋(píng)果設(shè)備上，所以我下面把 AI 繪制的產(chǎn)品圖標(biāo)全選復(fù)制，然后打開(kāi)圖標(biāo)模板中的智能對(duì)象（雙擊圖標(biāo)模板中智能對(duì)象圖層的縮略圖），粘貼過(guò)來(lái)。粘貼的時(shí)候系統(tǒng)會(huì)提示選擇粘貼過(guò)來(lái)的方式，這里我們選擇：智能對(duì)象。然后保存并關(guān)閉智能對(duì)象，這時(shí)回到模板PSD 中，就看到了這個(gè)效果。
△ 替換了模板中智能對(duì)象的效果
接下來(lái)隱藏背景圖層，然后按下鍵盤(pán)上的 ctrl+Shift+Alt+S，調(diào)出存儲(chǔ)為Web所用模式，選擇保存到桌面上，格式選擇僅圖片。關(guān)閉 PS，打開(kāi)桌面上的文件夾，就看到圖標(biāo)被我們工整地切好了。
△ 產(chǎn)品圖標(biāo)的切圖文件
第二種圖標(biāo)被稱為系統(tǒng)圖標(biāo)。系統(tǒng)圖標(biāo)指的是擔(dān)負(fù)著一定功能和含義的圖形，一般來(lái)說(shuō)需要像文字一般地被人迅速理解，所以表達(dá)方式上不適合特別復(fù)雜。比如微信底部四個(gè)系統(tǒng)圖標(biāo)：「微信」、「通訊錄」、「發(fā)現(xiàn)」、「我」就使用了比較簡(jiǎn)潔的線性風(fēng)格。
當(dāng)然系統(tǒng)圖標(biāo)也不一定要做的非常無(wú)趣，比如我們常用的58同城APP 中就有大量的系統(tǒng)圖標(biāo)，在保證識(shí)別性的前提下使用了多彩的顏色和不同的造型，顯得非常活潑。所以系統(tǒng)圖標(biāo)同樣可以做得有趣和多樣，前提是保證圖標(biāo)的可識(shí)別性。
填充圖標(biāo)（Filled icon）
填充圖標(biāo)是以面為主要表現(xiàn)形式的圖標(biāo)。在微信APP 底部的 tab欄中，未選中的圖標(biāo)是線性圖標(biāo)，而選中態(tài)則是填充圖標(biāo)，并且會(huì)變成較為鮮亮的顏色暗示用戶該功能被選中了。填充態(tài)圖標(biāo)占用的面積要比線性圖標(biāo)多，所以更加顯眼。實(shí)際上，在最新的蘋(píng)果設(shè)計(jì)規(guī)范中，蘋(píng)果也建議開(kāi)發(fā)者在 APP底部 Tab欄中全部使用填充圖標(biāo)，點(diǎn)擊態(tài)通過(guò)改變填充圖標(biāo)的顏色進(jìn)行區(qū)別。這是因?yàn)樘畛鋱D標(biāo)看上去像可點(diǎn)擊的。
△ 圖為填充圖標(biāo)
線性圖標(biāo)（Outlined icon）
線性圖標(biāo)的表現(xiàn)形式是線條，在系統(tǒng)圖標(biāo)里通常是由統(tǒng)一粗細(xì)的線條組成。這里可能很多新朋友不明白為什么要使用統(tǒng)一的粗細(xì)，這是因?yàn)橥ǔＯ到y(tǒng)圖標(biāo)并非單一出現(xiàn)，而是成組使用。比如微信底部的四個(gè) tab圖標(biāo)、網(wǎng)易云音樂(lè)頂部導(dǎo)航欄的圖標(biāo)等。在一個(gè)場(chǎng)景下的幾個(gè)同等重要的圖標(biāo)，如果線條粗細(xì)不一致，很容易造成它們存在權(quán)重上差異的感覺(jué)。所以我們?cè)诶L制線性圖標(biāo)時(shí)，線條通常都會(huì)使用統(tǒng)一的粗細(xì)。
△ 圖為線性圖標(biāo)
圓角圖標(biāo)（Rounded icon）
無(wú)論是線性還是填充的圖標(biāo)，在圖標(biāo)的邊角處使用圓角都是圓角圖標(biāo)風(fēng)格。圓角圖標(biāo)的好處就是讓人覺(jué)得很溫柔，可以非常舒適地點(diǎn)擊它。所以很多產(chǎn)品的圖標(biāo)都會(huì)使用圓角圖標(biāo)。
△ 圖為圓角圖標(biāo)
尖角圖標(biāo)（Sharp icon）
無(wú)論是線性還是填充的圖標(biāo)，在圖標(biāo)的邊角處使用尖角都是尖角圖標(biāo)風(fēng)格。尖角圖標(biāo)的好處是讓人感覺(jué)到有棱角，視覺(jué)上會(huì)多凝視幾秒。并且給人以正式的感覺(jué)，所以像銀行、辦公等APP 中都較多地使用尖角圖標(biāo)風(fēng)格。
△ 圖為尖角圖標(biāo)
斷線圖標(biāo)（Breaking Lines）
如果我們的線性圖標(biāo)顯得太死板，我們可以使用斷線這種方式來(lái)讓它變得俏皮。斷線圖標(biāo)就是線性圖標(biāo)的一種風(fēng)格變化，它的特點(diǎn)就是在線條中出現(xiàn)斷口。但是這個(gè)斷口并不是看起來(lái)那么簡(jiǎn)單，它得遵循幾個(gè)規(guī)則：第一，斷線開(kāi)口只有一個(gè)，否則圖標(biāo)會(huì)無(wú)法識(shí)別；第二，斷線開(kāi)口位置不應(yīng)該在中心線上；第三，斷線開(kāi)口盡量在轉(zhuǎn)折處；第四，斷線不應(yīng)該太過(guò)于瑣碎。
△ 土豆APP的標(biāo)簽欄使用了斷線的風(fēng)格
雙調(diào)圖標(biāo)（Two-Tone icon）
如果我們把圖標(biāo)簡(jiǎn)單地分為線性圖標(biāo)和填充圖標(biāo)，是不是太無(wú)聊了？比如我們要設(shè)計(jì)一個(gè) iOS平臺(tái)的 APP，它的底部Tab欄就一定是未選中態(tài)是線性的，選中就是填充的嗎（或者全部是填充態(tài)，僅僅改變顏色）？這也太無(wú)聊了吧！所以又出現(xiàn)了雙調(diào)圖標(biāo)的設(shè)計(jì)風(fēng)格。即：雙調(diào)圖標(biāo)的外形還是線性圖標(biāo)，但是用透明度很高的同類色填充到線性圖標(biāo)內(nèi)部空間里。這樣的圖標(biāo)顯得俏皮可愛(ài)，并且感覺(jué)非常透氣。
△ 圖為雙調(diào)圖標(biāo)
動(dòng)態(tài)圖標(biāo)（Motion）
動(dòng)態(tài)圖標(biāo)是非常有趣的，如果靜態(tài)圖標(biāo)不足以讓用戶感受到新鮮，那我們不妨給圖標(biāo)增加動(dòng)效。比如 QQ應(yīng)用中底部 Tab欄的圖標(biāo)點(diǎn)擊其中一個(gè)的時(shí)候，其他圖標(biāo)會(huì)「偷看」選中態(tài)圖標(biāo)的方向。除了底部標(biāo)簽欄之外，很多 APP 點(diǎn)擊能觸發(fā)導(dǎo)航的「漢堡包圖標(biāo)」，點(diǎn)擊時(shí)也會(huì)有一個(gè)從導(dǎo)航圖標(biāo)變成返回圖標(biāo)的動(dòng)畫(huà)。這都是非常能夠調(diào)動(dòng)用戶好奇心的。
△ Material Design中的動(dòng)態(tài)圖標(biāo)
我們?cè)谑褂?Photoshop 工具的時(shí)候會(huì)感嘆，畫(huà)筆比鋼筆好用，橡皮比布爾運(yùn)算好用。那么我們?cè)诋?huà)圖標(biāo)的時(shí)候能不能使用畫(huà)筆這樣的工具來(lái)繪制圖標(biāo)呢？在 Photoshop 里使用畫(huà)筆工具和橡皮工具、涂抹工具、選區(qū)工具的填充、油漆桶工具制作的圖形，以及從網(wǎng)絡(luò)上復(fù)制過(guò)來(lái)的jpg圖片文件，這些都是像素圖形。它們是計(jì)算機(jī)記錄每一個(gè)點(diǎn)的顏色來(lái)呈現(xiàn)圖像的。這也是為什么我們把一張照片放得特別大它就虛了的原因。而我們通過(guò) Photoshop 中的鋼筆工具、布爾運(yùn)算、貝塞爾曲線、形狀圖層制作的圖形，以及 Illustrator 復(fù)制過(guò)來(lái)的圖形、Sktech繪制的圖形等，都是矢量圖形。它們是計(jì)算機(jī)記錄一個(gè)錨點(diǎn)到另一個(gè)錨點(diǎn)的方向、位置、色彩來(lái)呈現(xiàn)圖像的。所以像素圖形變化多端、顏色變換豐富、細(xì)節(jié)更多；矢量圖形則文件較小，并且具有隨意放大縮小都不虛的能力。因?yàn)槊總€(gè)錨點(diǎn)之間的方向、位置都是相對(duì)的，放大和縮小不受影響，而像素圖形記錄每個(gè)點(diǎn)的色彩，比如一張2000px x 2000px的圖片，縮小到1000px x 1000px就會(huì)損失一千個(gè)像素信息。我們繪制圖標(biāo)比較適合用矢量圖形來(lái)設(shè)計(jì)，因?yàn)槲覀兛赡苄枰S時(shí)調(diào)整圖標(biāo)的大小，并且在不同分辨率的適配中也更加方便。
布爾運(yùn)算聽(tīng)著很可怕，其實(shí)非常簡(jiǎn)單，布爾運(yùn)算是數(shù)字邏輯推演法，主要有數(shù)字邏輯的聯(lián)合、相交、相減。在我們使用的平面軟件中引用了這種邏輯運(yùn)算方法來(lái)使基本圖形通過(guò)聯(lián)合、相交、相減等數(shù)學(xué)計(jì)算變成新的造型。比如兩個(gè)圓形相減可以得到一個(gè)月亮的造型，這就是布爾運(yùn)算了。那么為什么叫布爾運(yùn)算呢？布爾指的是喬治·布爾（George Boole），一位19世紀(jì)最重要的數(shù)學(xué)家，為了紀(jì)念布爾在符號(hào)邏輯運(yùn)算中的杰出貢獻(xiàn)，所以我們將這種運(yùn)算稱為布爾運(yùn)算。布爾運(yùn)算在 Photoshop、Illustrator、Sketch、Adobe XD、After Effects等我們熟悉的軟件中都有，并且操作基本一致。
布爾運(yùn)算的核心就是兩個(gè)形狀的關(guān)系：即Union（并集）、Intersection（交集）和Subtraction（差集，包括A-B和B-A兩種）。這些關(guān)系有點(diǎn)像我們初中學(xué)過(guò)的數(shù)學(xué)，應(yīng)該比較好理解。但是很多軟件中對(duì)于布爾運(yùn)算的關(guān)系翻譯不同，所以可能大家會(huì)有些不適應(yīng)。比如在 Photoshop 中布爾運(yùn)算被翻譯成：合并形狀、減去頂層形狀、與形狀區(qū)域相交、排除重疊形狀。而在 Adobe XD 中則翻譯成：添加、減去、交叉、排除重疊。雖然名字不同，但是功能是相同的，所以大家在學(xué)習(xí)新的軟件時(shí)不妨先找一下布爾運(yùn)算。
△ 圖為布爾運(yùn)算不同運(yùn)算模式
貝塞爾曲線是用于二維圖形繪制的數(shù)學(xué)曲線。1962年法國(guó)工程師皮埃爾·貝塞爾發(fā)表了貝塞爾曲線，它的誕生主要是為了汽車的主體設(shè)計(jì)繪制圖形的。貝塞爾曲線是繪制矢量圖形時(shí)的重要工具，我們使用鋼筆工具畫(huà)出的所有圖形一般來(lái)說(shuō)都是貝塞爾曲線組成的。貝塞爾曲線由錨點(diǎn)和線段組成，點(diǎn)擊錨點(diǎn)就會(huì)出現(xiàn)兩個(gè)手柄，一邊是控制前面的線條走向，另一邊是控制后端的線條走向。同時(shí)我們也可以通過(guò)增加錨點(diǎn)工具和刪除錨點(diǎn)工具進(jìn)行調(diào)整。要想學(xué)好平面電腦繪圖軟件，貝塞爾曲線是必須修煉的一課（練習(xí)貝塞爾曲線的在線游戲：https://bezier.method.ac/）。一般來(lái)說(shuō)，二維平面軟件都有貝塞爾曲線的痕跡，鋼筆工具、增加錨點(diǎn)、刪除錨點(diǎn)、轉(zhuǎn)換點(diǎn)工具，這些都是平面軟件的標(biāo)配。并且，貝塞爾曲線和布爾運(yùn)算可謂是一對(duì)好朋友，在繪制矢量圖形時(shí)可以使用它們輕松地繪制出準(zhǔn)確的造型。
△ 圖為貝塞爾曲線繪制方法
那么我們使用什么軟件來(lái)繪制圖標(biāo)呢？這里我建議使用 Illustrator。首先，UI設(shè)計(jì)師使用不同的軟件來(lái)設(shè)計(jì)頁(yè)面，目前主流是 Photoshop和 Sketch，也有很多設(shè)計(jì)師選擇 Adobe XD。而這些軟件都是兼容 Illustrator 的，所以使用它來(lái)繪制圖標(biāo)非常有靈活性。可能您對(duì) Illustrator 并不熟悉，不過(guò)沒(méi)關(guān)系，我們?cè)谶@里只需要了解它與圖標(biāo)繪制功能相關(guān)的功能即可，比如鋼筆、布爾運(yùn)算、屬性面板、描邊、填充、混合工具等，并不需要學(xué)習(xí)非常深入。所以大家不必緊張。
笑臉圖標(biāo)
笑臉圖標(biāo)的設(shè)計(jì)步驟：畫(huà)出一個(gè)正圓；接著畫(huà)一個(gè)小圓，然后 ctrl+F復(fù)制平行移動(dòng)到旁邊，然后右鍵編組。接著，同時(shí)選中大圓和編組的小圓進(jìn)行水平居中對(duì)齊。我們繪制一個(gè)圓形，然后通過(guò)布爾運(yùn)算減去一個(gè)矩形得到半圓形組成嘴，完成。
△ 笑臉圖標(biāo)
對(duì)號(hào)圖標(biāo)
對(duì)號(hào)圖標(biāo)的設(shè)計(jì)步驟：使用矩形工具畫(huà)出一個(gè)長(zhǎng)方形，然后復(fù)制，將復(fù)制后的長(zhǎng)方形向右上移動(dòng)相同的距離，使用布爾運(yùn)算剪切，旋轉(zhuǎn)45°后變成一個(gè)對(duì)號(hào)。繪制一個(gè)正方形，使用路徑選擇工具選中，拖動(dòng)圓角的圓點(diǎn)拉出圓角得到圓角矩形。對(duì)號(hào)和圓角矩形進(jìn)行布爾運(yùn)算，完成。
△ 對(duì)號(hào)圖標(biāo)
WIFI圖標(biāo)
WIFI圖標(biāo)的設(shè)計(jì)步驟：繪制多個(gè)圓形并且通過(guò)布爾運(yùn)算相加減得出三個(gè)圓圈嵌套的靶子造型。通過(guò)旋轉(zhuǎn)過(guò)的45°矩形和之前圖形布爾運(yùn)算得到 Wifi圖標(biāo)，完成。
△ WIFI圖標(biāo)
地理位置圖標(biāo)
地理位置圖標(biāo)的設(shè)計(jì)步驟：選擇矩形工具單擊畫(huà)面輸入數(shù)值，建立一個(gè)100px的圓形。然后選擇這個(gè)圓形復(fù)制它，然后等比例縮小它，和之前的大圓進(jìn)行布爾運(yùn)算相減，得到環(huán)形。繪制50px的矩形，用對(duì)齊工具放在環(huán)形的左下方。旋轉(zhuǎn)45°得到地理圖標(biāo)，完成。
△ 地理位置圖標(biāo)
云彩圖標(biāo)
云彩圖標(biāo)的設(shè)計(jì)步驟：繪制兩個(gè)大小不同的圓形，使用對(duì)齊工具進(jìn)行底部對(duì)齊。繪制一個(gè)矩形，同樣底部對(duì)齊。合并形狀，完成。
△ 云彩圖標(biāo)
眼睛圖標(biāo)
眼睛圖標(biāo)的設(shè)計(jì)步驟：繪制出一個(gè)正圓。復(fù)制這個(gè)正圓形，然后按著 Shift+方向鍵下鍵，并通過(guò)布爾運(yùn)算得到眼睛外輪廓。繪制兩個(gè)圓形，通過(guò)對(duì)齊工具和布爾運(yùn)算工具得到最終眼睛造型，完成。
△ 眼睛圖標(biāo)
鈴鐺圖標(biāo)
鈴鐺圖標(biāo)的設(shè)計(jì)步驟：首先用圓形和矩形合并組成主體；使用矩形和圓形進(jìn)行布爾運(yùn)算繪制鈴鐺底部和鈴鐺頂部的零件，然后進(jìn)行合并形狀；鈴鐺底部的半圓使用圓形和矩形布爾運(yùn)算，完成。
△ 鈴鐺圖標(biāo)
簡(jiǎn)易齒輪圖標(biāo)
簡(jiǎn)易齒輪圖標(biāo)的設(shè)計(jì)步驟：通過(guò)兩個(gè)圓形進(jìn)行布爾運(yùn)算得到環(huán)形。繪制一個(gè)矩形，上下復(fù)制在圓形上，然后把它們倆編組和環(huán)形使用對(duì)齊工具進(jìn)行水平垂直對(duì)齊。復(fù)制矩形編組并旋轉(zhuǎn)90°，得到一個(gè)十字形。復(fù)制這個(gè)十字形并最終全部合并形狀，完成。
△ 簡(jiǎn)易圖標(biāo)
齒輪圖標(biāo)
齒輪圖標(biāo)的設(shè)計(jì)步驟：用 AI 的爆炸圖形和圓形進(jìn)行布爾運(yùn)算畫(huà)出齒輪；用兩個(gè)圓形進(jìn)行布爾運(yùn)算做出里面的零件，完成。
△ 齒輪圖標(biāo)
螺絲刀圖標(biāo)
螺絲刀圖標(biāo)的畫(huà)法：用圓形和矩形做出螺絲刀主體；用矩形旋轉(zhuǎn)并復(fù)制再布爾運(yùn)算做出凹槽；使用矩形做出前面的造型，完成。
△ 螺絲刀圖標(biāo)
蘋(píng)果圖標(biāo)
蘋(píng)果圖標(biāo)的畫(huà)法：繪制一個(gè)六邊形。將水平中間兩個(gè)點(diǎn)向上移動(dòng)。在中心線上下建立兩個(gè)錨點(diǎn)，并且向下移動(dòng)。將下面兩個(gè)點(diǎn)向內(nèi)分別移動(dòng)。使用圓角工具將每?jī)蓚€(gè)相同的點(diǎn)一組一組拉成圓角。繪制一個(gè)矩形并且旋轉(zhuǎn)45°，然后將左右兩個(gè)點(diǎn)向內(nèi)拉得到菱形。用圓角工具使菱形變成葉子造型并且旋轉(zhuǎn)45°。使用一個(gè)圓形和蘋(píng)果造型相切，完成。
△ 蘋(píng)果圖標(biāo)設(shè)計(jì)過(guò)程
放大鏡線性圖標(biāo)
放大鏡線性圖標(biāo)的畫(huà)法：繪制正圓。繪制一條直線。用屬性面板里的對(duì)齊工具把它們倆對(duì)齊。用描邊面板里的屬性將描邊改成圓頭，然后旋轉(zhuǎn)45°即可。
△ 放大鏡線性圖標(biāo)
時(shí)鐘線性圖標(biāo)
時(shí)鐘線性圖標(biāo)的畫(huà)法：繪制正圓。繪制一個(gè)矩形，對(duì)齊圓形中心。用增加錨點(diǎn)工具在矩形左和下邊上增加兩個(gè)錨點(diǎn)。用直接選擇工具框選沒(méi)用的線條，刪除即可。
△ 時(shí)鐘線性圖標(biāo)
點(diǎn)贊線性圖標(biāo)
點(diǎn)贊線性圖標(biāo)的畫(huà)法：繪制兩個(gè)矩形，并用直接選擇工具選擇重合的四個(gè)錨點(diǎn)，在屬性面板里使用對(duì)齊工具讓它們完全對(duì)齊。將大的矩形底部錨點(diǎn)向左移動(dòng)。繪制一個(gè)矩形并和大的矩形左對(duì)齊。用直接選擇工具選中直角，拖動(dòng)圓角小圓點(diǎn)讓它們變成圓角，完成。
△ 點(diǎn)贊線性圖標(biāo)
如果您掌握了以上填充態(tài)圖標(biāo)的設(shè)計(jì)方法，相信其他圖標(biāo)的設(shè)計(jì)只要以此及彼的思考，就可以完成。比如線性圖標(biāo)，在繪制線性圖標(biāo)時(shí)，我們首先會(huì)建立一個(gè)半透明的矩形來(lái)固定圖標(biāo)應(yīng)該繪制的范圍，比如「40px」。然后我們把填充關(guān)閉，只使用描邊來(lái)繪制線性圖標(biāo)即可。繪制完以后我們無(wú)需保存文件，僅通過(guò) Ctrl+C的復(fù)制快捷鍵，然后打開(kāi) Sketch 或者 Adobe XD 就可以使用 Ctrl+V 將圖標(biāo)粘貼過(guò)去了。但是，如果您使用 Photoshop 做界面設(shè)計(jì)，可能會(huì)多兩道手續(xù)，首先就是線性圖標(biāo)需要擴(kuò)展才可以復(fù)制到 Photoshop 中。將圖標(biāo)復(fù)制一份（擴(kuò)展之后的圖標(biāo)不方便修改，所以要留著可修改版本），然后點(diǎn)擊對(duì)象菜單 > 擴(kuò)展，點(diǎn)確定，就可以把原本是沒(méi)有閉合的路徑改為完整的形狀。
△ 在Illustrator中的擴(kuò)展
然后復(fù)制，打開(kāi) Photoshop 粘貼會(huì)打開(kāi)提示框，我們可以選擇把圖標(biāo)粘貼成為像素、智能對(duì)象、路徑、形狀。如果粘貼成像素的話，那無(wú)疑對(duì)修改是非常不利的。如果粘貼成智能對(duì)象，雙擊智能對(duì)象會(huì)回到 Illustrator 中修改，但是也有一定缺點(diǎn)，那就是智能對(duì)象不能直接在 Photoshop 中進(jìn)行調(diào)整。如果粘貼成路徑也不是很方便，所以最好是我們將 Illustrator 中繪制的小圖標(biāo)粘貼成形狀。選擇后，圖標(biāo)就粘貼成了形狀圖層，我們可以在 Photoshop 中對(duì)它進(jìn)行布爾運(yùn)算、錨點(diǎn)調(diào)整等操作了。
△ 粘貼到Photoshop中的選項(xiàng)
然而，我們會(huì)發(fā)現(xiàn)圖標(biāo)粘貼到 Photoshop 中，橫豎的路徑會(huì)出現(xiàn)虛邊的情況（圓角和斜線是允許一定的虛邊出現(xiàn)的，但是直線不可以）。這種虛邊有可能會(huì)影響用戶的體驗(yàn)，我們必須把它消滅掉。第一種方法：在 Photoshop 中我們可以用直接選擇工具后界面上方的對(duì)齊路徑功能，給它打鉤來(lái)嘗試修復(fù)這個(gè)問(wèn)題。第二種方法：我們可以使用直接選擇工具選中虛掉的某兩個(gè)錨點(diǎn)，然后按 Ctrl+T（自由變換），再按鍵盤(pán)的上下或左右「搖一搖」，路徑就會(huì)清晰了。第三種方法：也可以使用幾像素的矩形進(jìn)行布爾運(yùn)算強(qiáng)行對(duì)齊。三種方法一定能夠讓圖標(biāo)的橫豎路徑?jīng)]有虛邊，達(dá)到完美的效果。當(dāng)然 Sketch 和 Adobe XD 都是矢量工具所以復(fù)制后沒(méi)有這個(gè)問(wèn)題。
在 Photoshop 中使用「搖一搖」的方法對(duì)齊路徑
在 Adobe XD 中，圖標(biāo)無(wú)需進(jìn)行擴(kuò)展，并可以實(shí)時(shí)調(diào)整描邊粗細(xì)等屬性。
標(biāo)簽欄圖標(biāo)
在蘋(píng)果和安卓APP 的底部，一般都會(huì)有一個(gè)放置重要功能的常駐欄，在 iOS中被稱為標(biāo)簽欄（也叫做Tab欄）。一般，Tab欄的圖標(biāo)是2-5個(gè)。每個(gè)圖標(biāo)的區(qū)域平分整個(gè) Tab欄寬度，底部會(huì)有一個(gè)22px（11pt）的文字注釋。當(dāng)然如果圖標(biāo)釋義較為清晰，也可以為了保持設(shè)計(jì)感去掉文字注釋。如果我們是以 iPhone6/7/8尺寸設(shè)計(jì)界面，那么我們的標(biāo)簽欄圖標(biāo)尺寸應(yīng)該是60px（30pt）左右，可以基于這個(gè)范圍來(lái)設(shè)計(jì)我們的圖標(biāo)。
△ 互聯(lián)網(wǎng)產(chǎn)品中優(yōu)秀的標(biāo)簽欄圖標(biāo)設(shè)計(jì)
每個(gè) Tab欄的圖標(biāo)都應(yīng)該設(shè)計(jì)一個(gè)選中狀態(tài)，可以做樣式的變換也可以做顏色的改變，總之要讓人知道當(dāng)前所在的頁(yè)面是哪個(gè)。如果您的 Tab欄由五個(gè) icon 組成，那么可以在中間放置比較重要的功能，并做出突顯的樣式，比如使用一個(gè)圓球當(dāng)作背景。還要額外注意，圖標(biāo)的選中態(tài)樣式要和中間突出狀態(tài)的圖標(biāo)保持區(qū)別，以免發(fā)生誤會(huì)。
導(dǎo)航欄圖標(biāo)
在蘋(píng)果APP 的頂部區(qū)域，我們稱之為 Navigation Bar，就是導(dǎo)航欄。導(dǎo)航欄左右一般都會(huì)有圖標(biāo)，如果是二級(jí)頁(yè)面，左側(cè)一般是返回圖標(biāo)。安卓也有類似的設(shè)計(jì)。那么我們?cè)谠O(shè)計(jì)這種圖標(biāo)的時(shí)候一定要保證所有導(dǎo)航欄上的圖標(biāo)大小和風(fēng)格都是一致的。如果以 iPhone6/7/8尺寸設(shè)計(jì)界面，那么導(dǎo)航欄圖標(biāo)的尺寸大概是44px（22pt）左右。
△ 互聯(lián)網(wǎng)產(chǎn)品中優(yōu)秀的導(dǎo)航欄圖標(biāo)
金剛區(qū)圖標(biāo)
在我們逛淘寶和美團(tuán)的時(shí)候您會(huì)發(fā)現(xiàn)，在它們頁(yè)面首頁(yè)都會(huì)有一個(gè)區(qū)域放置很多分類，一般是6-8個(gè)大小一樣的圖標(biāo)，有可能是圓形，也可能是不規(guī)則形狀。這個(gè)區(qū)域其實(shí)在蘋(píng)果和安卓規(guī)范里并沒(méi)有，屬于設(shè)計(jì)師自創(chuàng)的規(guī)范。這個(gè)區(qū)域經(jīng)常有八個(gè)圖標(biāo)組成，被稱為「八大金剛圖標(biāo)」，后來(lái)很多產(chǎn)品在這個(gè)區(qū)域并不使用8個(gè)圖標(biāo)，我們就稱它們?yōu)榻饎倕^(qū)了。金剛區(qū)圖標(biāo)的設(shè)計(jì)風(fēng)格應(yīng)該盡量是微扁平、輕擬物的感覺(jué)，這樣會(huì)有更好的點(diǎn)擊感。尺寸方面，金剛區(qū)并沒(méi)有規(guī)范，所以大家可以以設(shè)計(jì)稿最終效果為準(zhǔn)。
△ 互聯(lián)網(wǎng)產(chǎn)品中優(yōu)秀的金剛區(qū)圖標(biāo)設(shè)計(jì)
設(shè)計(jì)方法：《用四個(gè)步驟，幫你學(xué)會(huì)金剛區(qū)圖標(biāo)的設(shè)計(jì)方法》
圖標(biāo)設(shè)計(jì)是 UI設(shè)計(jì)中非常重要的一環(huán)，因?yàn)槌宋淖趾蛨D片的排版之外，在扁平時(shí)代我們能夠傳遞給用戶情緒和設(shè)計(jì)感的通道就是頁(yè)面中的各種圖形和圖標(biāo)了，如果做不好圖標(biāo)，用戶就將在使用界面時(shí)失去樂(lè)趣。所以，我建議每位 UI設(shè)計(jì)師都需要在平時(shí)做大量的圖標(biāo)練習(xí)。在不同的圖標(biāo)風(fēng)格中，學(xué)會(huì)使用各式各樣的武器。
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：郗鑒
藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com