一濒生、圖標(biāo)的定義
一說到圖標(biāo)埋泵，我想您一定會(huì)覺得非常熟悉。圖標(biāo)罪治，也稱為 icon 或 picto丽声，是指有明確含義的圖形視覺語言。那么當(dāng)我們一提起圖標(biāo)設(shè)計(jì)觉义，您的腦中會(huì)想起哪個(gè)圖標(biāo)來呢雁社？有可能您想起的是微信APP ，由兩個(gè)白色氣泡組成的啟動(dòng)圖標(biāo)晒骇，或者是我們每天使用的 APP 中的那些返回霉撵、關(guān)閉等系統(tǒng)圖標(biāo)，也可能是商場(chǎng)導(dǎo)視里的衛(wèi)生間圖標(biāo)等洪囤。沒錯(cuò)徒坡，圖標(biāo)的形式有很多種，它可以應(yīng)用在很多場(chǎng)景中瘤缩，并且表現(xiàn)方式非常豐富：有線的喇完、有面的、也有擬物的等等款咖。圖標(biāo)的歷史可以追溯到象形文字（Pictogram）何暮，我們的祖先在發(fā)明文字之前就使用圖標(biāo)記錄一天的生活了奄喂。聽著是不是不可思議呢铐殃？從亙古時(shí)代的象形文字開始，我們的祖先就偏愛使用這種抽象的圖形來表達(dá)意思了跨新。在平面設(shè)計(jì)領(lǐng)域的商標(biāo)其實(shí)也是一種圖標(biāo)富腊，平面設(shè)計(jì)里的視覺導(dǎo)視（例如衛(wèi)生間的圖標(biāo)）也有圖標(biāo)的應(yīng)用，所以圖標(biāo)在我們的生活中應(yīng)用非常廣泛域帐。
在計(jì)算機(jī)時(shí)代赘被，從80年代的施樂公司界面中的單色圖標(biāo)開始，圖標(biāo)就開始出現(xiàn)在屏幕之中了肖揣，圖標(biāo)較編程語言更容易被大眾理解民假。到了后來從 iMac 到 iPhone 引領(lǐng)的擬物圖標(biāo)更是開啟了一個(gè)絢麗的圖標(biāo)設(shè)計(jì)時(shí)代。擬物時(shí)代盛行也帶來了一些麻煩：擬物圖標(biāo)的質(zhì)感龙优、光影會(huì)吸引走用戶的注意力羊异，我們稱之為「視覺噪音」。于是 UI設(shè)計(jì)師開始探索更新的表現(xiàn)形式來設(shè)計(jì)界面中的圖標(biāo)。扁平圖標(biāo)發(fā)展史上有過很多次嘗試野舶，比如微軟引領(lǐng)的 Metro風(fēng)格中的圖標(biāo)設(shè)計(jì)和 Google 引領(lǐng)的扁平設(shè)計(jì)風(fēng)格中的長投影風(fēng)格圖標(biāo)易迹，但由于它們表現(xiàn)形式太過于抽象、缺乏情感的傳遞平道，并沒有獲得用戶的垂青睹欲。而我們現(xiàn)在界面設(shè)計(jì)中的圖標(biāo)設(shè)計(jì)是一種「輕擬物」或「微扁平」的風(fēng)格：在面積比較小的區(qū)域我們使用扁平圖標(biāo)或線形圖標(biāo)；在面積比較大的區(qū)域我們會(huì)使用加入漸變甚至輕質(zhì)感的圖標(biāo)一屋。
如今我們界面中的圖標(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)
產(chǎn)品圖標(biāo)是我們?cè)谠O(shè)計(jì)界面的時(shí)候體現(xiàn)品牌調(diào)性和特性的圖標(biāo)楚堤。通過產(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)生的品牌來直接設(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ì)立即想起來它們的功能和特點(diǎn)浩螺。產(chǎn)品圖標(biāo)除了在手機(jī)屏幕中作為啟動(dòng)圖標(biāo)靴患，也會(huì)出現(xiàn)在閃屏、情感化設(shè)計(jì)要出、「關(guān)于我們」界面等場(chǎng)景中鸳君，所以也要有一定的靈活性，在設(shè)計(jì)上要以簡單患蹂、大膽或颊、友好的方式傳達(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)品來說都是非常重要的批糟。
1. 風(fēng)格
產(chǎn)品圖標(biāo)有不同的風(fēng)格，這些風(fēng)格有可能很擬物看铆，也有可能很扁平徽鼎；有可能很抽象，也可能很具象弹惦。通過不同的設(shè)計(jì)風(fēng)格可以更加標(biāo)新立異否淤，從而被用戶記住。讓用戶記住我們的圖標(biāo)真是一件非常重要的事兒棠隐，要知道石抡，每個(gè)手機(jī)都像是一把瑞士軍刀，它有無數(shù)個(gè)功能助泽，而我們的產(chǎn)品只是萬種功能中的一個(gè)啰扛。用戶不可能記住手機(jī)里所有的 APP 都是什么，所以能在第一時(shí)間取得好感和記憶非常重要嗡贺，產(chǎn)品圖標(biāo)設(shè)計(jì)得好看并且容易被人記住就成了非常重要的任務(wù)隐解。產(chǎn)品圖標(biāo)的主要風(fēng)格有以下幾種。
文字風(fēng)格
文字是最直白的信息诫睬，而且不容易被曲解煞茫。所以很多國內(nèi)的產(chǎn)品都會(huì)使用文字來作為自己的產(chǎn)品圖標(biāo)。比如：支付寶摄凡、淘寶续徽、今日頭條、OFO亲澡、愛奇藝钦扭、知乎、網(wǎng)易新聞谷扣、毛豆新車等土全。這么做也有它的問題捎琐，比如文字給人美的感受不如圖形会涎，因?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ì)的字體并做一定的變化。
單讀：單讀是一個(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)知寻拂。
愛奇藝：愛奇藝的 icon 采用了英文字母iQIYI 和上下邊框相組合的形式。整體看來像是一個(gè)電視機(jī)丈牢，強(qiáng)調(diào)了品牌屬性和功能祭钉，并且使用了在視頻領(lǐng)域非常有識(shí)別性的綠色，讓人一看便知這是愛奇藝了己沛。
折紙風(fēng)格
折紙的效果會(huì)讓人感覺很立體垮卓，所以很多產(chǎn)品也選擇了折紙效果（比較扁平的手法）來設(shè)計(jì)產(chǎn)品圖標(biāo)。
Calendar：這個(gè)產(chǎn)品的產(chǎn)品圖標(biāo)是一個(gè)正在翻頁的日歷师幕，非常簡潔明了粟按。
Snapseed：除了扁平的設(shè)計(jì)之外，使用了長投影的設(shè)計(jì)風(fēng)格霹粥。這個(gè)長投影也是扁平化的設(shè)計(jì)灭将。
Netflix：Netflix 的產(chǎn)品圖標(biāo)是該產(chǎn)品的首字母N，這個(gè) N 用了一些陰影來表示立體感后控。
繪聲繪影：同樣是用了長投影和折紙效果庙曙，顯得非常清新。
填充圖標(biāo)風(fēng)格
產(chǎn)品圖標(biāo)使用填充圖標(biāo)風(fēng)格是非常合適的。填充圖標(biāo)風(fēng)格具有簡潔和識(shí)別性強(qiáng)的特點(diǎn)砂蔽。這種 ICON 的可擴(kuò)展性更高洼怔，比如在一些特殊節(jié)日時(shí)可以用手繪、拼貼等形式來做輔助圖形左驾。所以很多公司都鐘愛填充圖標(biāo)風(fēng)格茴厉。
Lucking：這是一個(gè)線上咖啡外賣的產(chǎn)品。它的 APP圖標(biāo)使用了一個(gè)鹿回頭的造型什荣。這個(gè)鹿造型簡潔矾缓，非常有識(shí)別性。
Tinder：這是一個(gè)國外社交APP稻爬，通過一個(gè)火的填充圖標(biāo)讓人第一時(shí)間記住這個(gè)產(chǎn)品嗜闻。
youtube：這是國外著名視頻APP，它的產(chǎn)品圖標(biāo)同樣使用了填充圖標(biāo)風(fēng)格桅锄，是一個(gè)有電視機(jī)隱喻的圓角矩形琉雳，并且中心是一個(gè)播放鍵，簡明扼要地說明了這個(gè)產(chǎn)品的功能友瘤。
Twitter：國外著名社交APP翠肘，它的 icon 同樣使用了填充圖標(biāo)風(fēng)格，非常簡潔好記辫秧。
線性風(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ì)過期。
VUE：這是一個(gè)攝影產(chǎn)品完沪，同樣應(yīng)用了黑色的微漸變域庇，前面是非常前衛(wèi)的45度長短不同的線。
LOWPOLY風(fēng)格
我曾介紹過 LOWPOLY 這種設(shè)計(jì)風(fēng)格宽档，這種風(fēng)格如果應(yīng)用在產(chǎn)品圖標(biāo)上同樣非常搶眼尉姨，因?yàn)橛脩舻氖謾C(jī)上可能安裝了很多 APP，那么第一眼掃過去一定會(huì)注意到最亮眼的圖標(biāo)吗冤。而 LOWPOLY 因?yàn)楸旧碓煨偷莫?dú)特性非常吸引眼球又厉。當(dāng)然 LOWPOLY 也有它的問題，比如容易讓圖標(biāo)失去細(xì)節(jié)等椎瘟，所以很多產(chǎn)品圖標(biāo)都是使用 LOWPOLY 作為圖形的背景覆致。
潮自拍：潮自拍使用了暖色鄰近色漸變的 LOWPOLY 作為背景，前景使用了一個(gè)很潮的S肺蔚。
潘通色：潘通色本身的最大特征就是色卡煌妈，所以使用了 LOWPOLY 的形式。
美妝相機(jī)：通常 LOWPOLY 的形式是方塊宣羊，而美妝相機(jī)使用了三角作為基礎(chǔ)元素声旺，很特別。
人人：人人的產(chǎn)品圖標(biāo)使用了不同的矩形斜度45°段只，增加了設(shè)計(jì)的速度感腮猖。
微漸變風(fēng)格
微漸變也是非常常見的表現(xiàn)手法。在擬物被扁平替代以后炕婶，我們會(huì)發(fā)現(xiàn)無法表達(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è)問題。
全民K歌：使用了紫紅色的漸變來塑造一只鸚鵡州疾，如果遇到其他使用場(chǎng)景可以使用扁平版本辜限，這樣會(huì)讓產(chǎn)品圖標(biāo)的使用更加靈活。
Mindnode：這款腦圖軟件的產(chǎn)品圖標(biāo)使用了三組鄰近色的漸變严蓖，同時(shí)使用了非常微妙的陰影薄嫡。
卡通風(fēng)格
卡通風(fēng)格的產(chǎn)品圖標(biāo)會(huì)讓用戶更有好感，所以我們可以為產(chǎn)品設(shè)計(jì)一個(gè)可愛的卡通角色毒姨。好多決策者會(huì)認(rèn)為卡通是一種低齡的審美哑蔫，其實(shí)是錯(cuò)誤的∈炙兀卡通可以說是一種通吃的風(fēng)格鸳址，比如騰訊就是以一個(gè)企鵝作為品牌形象開始拓展自己的版圖。而卡通本身有不同的風(fēng)格泉懦，比如擬物類的卡通稿黍、扁平類的卡通等，也會(huì)給人不同的感受崩哩。所以如果我們的產(chǎn)品要使用卡通作為產(chǎn)品圖標(biāo)巡球，最好以目標(biāo)用戶群的喜好作為標(biāo)尺。
開心消消樂：開心消消樂是一個(gè)休閑游戲邓嘹，游戲類APP 的產(chǎn)品圖標(biāo)通常是使用擬物風(fēng)格酣栈，這樣可以最大地吸引玩家的注意力和興趣。
映客：映客是直播APP汹押，通常用戶年齡不是很大矿筝，所以使用了一個(gè)很可愛的貓頭鷹作為產(chǎn)品圖標(biāo)。
Waze：Waze 的產(chǎn)品圖標(biāo)不僅可愛而且突出了 Waze 的地圖查找功能棚贾。
BOO!：BOO! 是一個(gè)兒童社交產(chǎn)品窖维，用戶比較低齡，所以更適合使用可愛的卡通作為圖標(biāo)妙痹。
2. 圖標(biāo)的網(wǎng)格和參考線
如果我們想設(shè)計(jì)一個(gè)小圖標(biāo)，那么我們可以把畫布放大到400％來設(shè)計(jì)。同時(shí)可以使用網(wǎng)格和參考線來作為我們?cè)O(shè)計(jì)的輔助崭篡。網(wǎng)格在很多軟件里都有挪哄，比如在 Illustrator 中點(diǎn)擊視圖 > 網(wǎng)格，即可開啟網(wǎng)格了媚送。參考線模板則需要下載第三方設(shè)計(jì)的模板中燥，比如 Material Design 的參考線模板就有正方形寇甸、圓形塘偎、圓形和長方形結(jié)合等不同形式。如果對(duì)齊模板中的形狀拿霉，即可得到面積相等的長方形吟秩、正方形、圓形绽淘。這對(duì)我們構(gòu)建視覺上面積相等的圖標(biāo)很有益處涵防。
蘋果啟動(dòng)圖標(biāo)尺寸
蘋果需要很多尺寸的圖標(biāo)用在不同的場(chǎng)景上，比如說在網(wǎng)頁端打開iTunes會(huì)使用512px的大圖標(biāo)沪铭，而在手機(jī)壮池、iPad桌面上的圖標(biāo)大小也不同。除了尺寸不同杀怠，這些圖標(biāo)的圓角也有不同的數(shù)值椰憋。為了簡化這部分的難度，蘋果為開發(fā)者提供了模板赔退，有了模板就不用記那么多東西啦橙依。蘋果官方HIG 下載的這套資源中，有 Template-AppIcons-iOS 這個(gè)文件硕旗，這個(gè)文件提供了 PS窗骑、Sketch、XD等不同格式漆枚。我比較推薦使用 PS 的格式创译。
打開這個(gè)文件，用我們自己設(shè)計(jì)的啟動(dòng)圖標(biāo)替換掉任意智能對(duì)象里的內(nèi)容墙基。那么打開智能對(duì)象就是一個(gè)1024x1024px的矩形畫布软族，把我們的產(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ù)制過來就行。
安卓啟動(dòng)圖標(biāo)尺寸
安卓啟動(dòng)圖標(biāo)同樣需要很多尺寸，主流是需要：1024x1024px吐葵、512x512px规揪、144x144px、96x96px温峭、72x72px猛铅、48x48px這六種。我們提供給程序員的是直角的矩形凤藏，然后程序員通過代碼進(jìn)行切割變成圓角圖標(biāo)奸忽。在這里我也做了一個(gè)智能對(duì)象的模板送給您，只要替換其中的智能對(duì)象圖像揖庄，換成您的1024x1024px圖標(biāo)保存即可
4. 設(shè)計(jì)流程
設(shè)計(jì)產(chǎn)品圖標(biāo)前栗菜，首先我們需要找一些和產(chǎn)品氣質(zhì)相符的圖片制作情緒板。通過情緒板我們可以感受到產(chǎn)品的調(diào)性蹄梢，然后我們從中提取一些形狀和色彩作為我們產(chǎn)品圖標(biāo)的主要造型疙筹。這里我舉我的產(chǎn)品每日名畫的例子，每日名畫是一個(gè)美術(shù)方面的APP禁炒，所以我找了一些和美術(shù)相關(guān)的圖片而咆。
下面我開始在 AI 設(shè)計(jì)產(chǎn)品圖標(biāo)了。我建立了一個(gè)1024x1024px的畫布幕袱，然后根據(jù)盧浮宮前的金字塔建筑設(shè)計(jì)了一枚抽象的產(chǎn)品圖標(biāo)暴备，它內(nèi)在的符號(hào)是：帶領(lǐng)大家走進(jìn)藝術(shù)的殿堂。同時(shí)我也增加了一些自己對(duì)美術(shù)的含義凹蜂，如藝術(shù)來源于生活高于生活等馍驯。這些都寫在了設(shè)計(jì)說明中。
然后我給這枚圖標(biāo)加入了蒙德里安的配色玛痊，增加產(chǎn)品的藝術(shù)感汰瘫，并最終完成產(chǎn)品圖標(biāo)的設(shè)計(jì)。這個(gè)圖標(biāo)也可以作為該產(chǎn)品的企業(yè)形象（VIS）擂煞，將來產(chǎn)品周邊都可以使用這個(gè)圖形混弥。
由于產(chǎn)品會(huì)首先上線到蘋果設(shè)備上，所以我下面把 AI 繪制的產(chǎn)品圖標(biāo)全選復(fù)制对省，然后打開圖標(biāo)模板中的智能對(duì)象（雙擊圖標(biāo)模板中智能對(duì)象圖層的縮略圖）蝗拿，粘貼過來。粘貼的時(shí)候系統(tǒng)會(huì)提示選擇粘貼過來的方式蒿涎，這里我們選擇：智能對(duì)象哀托。然后保存并關(guān)閉智能對(duì)象，這時(shí)回到模板PSD 中劳秋，就看到了這個(gè)效果仓手。
接下來隱藏背景圖層胖齐，然后按下鍵盤上的 ctrl+Shift+Alt+S，調(diào)出存儲(chǔ)為Web所用模式，選擇保存到桌面上，格式選擇僅圖片寇壳。關(guān)閉 PS，打開桌面上的文件夾剿另，就看到圖標(biāo)被我們工整地切好了。
第二種圖標(biāo)被稱為系統(tǒng)圖標(biāo)贬蛙。系統(tǒng)圖標(biāo)指的是擔(dān)負(fù)著一定功能和含義的圖形雨女，一般來說需要像文字一般地被人迅速理解，所以表達(dá)方式上不適合特別復(fù)雜速客。比如微信底部四個(gè)系統(tǒng)圖標(biāo)：「微信」戚篙、「通訊錄」五鲫、「發(fā)現(xiàn)」溺职、「我」就使用了比較簡潔的線性風(fēng)格。
當(dāng)然系統(tǒng)圖標(biāo)也不一定要做的非常無趣位喂，比如我們常用的58同城APP 中就有大量的系統(tǒng)圖標(biāo)浪耘，在保證識(shí)別性的前提下使用了多彩的顏色和不同的造型，顯得非乘苎拢活潑七冲。所以系統(tǒng)圖標(biāo)同樣可以做得有趣和多樣，前提是保證圖標(biāo)的可識(shí)別性规婆。
1. 風(fēng)格
填充圖標(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í)際上，在最新的蘋果設(shè)計(jì)規(guī)范中饿这，蘋果也建議開發(fā)者在 APP底部 Tab欄中全部使用填充圖標(biāo)浊伙，點(diǎn)擊態(tài)通過改變填充圖標(biāo)的顏色進(jìn)行區(qū)別。這是因?yàn)樘畛鋱D標(biāo)看上去像可點(diǎn)擊的长捧。
線性圖標(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)易云音樂頂部導(dǎo)航欄的圖標(biāo)等赵抢。在一個(gè)場(chǎng)景下的幾個(gè)同等重要的圖標(biāo)剧蹂，如果線條粗細(xì)不一致，很容易造成它們存在權(quán)重上差異的感覺烦却。所以我們?cè)诶L制線性圖標(biāo)時(shí)宠叼，線條通常都會(huì)使用統(tǒng)一的粗細(xì)。
圓角圖標(biāo)（Rounded icon）
無論是線性還是填充的圖標(biāo)其爵，在圖標(biāo)的邊角處使用圓角都是圓角圖標(biāo)風(fēng)格冒冬。圓角圖標(biāo)的好處就是讓人覺得很溫柔，可以非常舒適地點(diǎn)擊它摩渺。所以很多產(chǎn)品的圖標(biāo)都會(huì)使用圓角圖標(biāo)简烤。
尖角圖標(biāo)（Sharp icon）
無論是線性還是填充的圖標(biāo)，在圖標(biāo)的邊角處使用尖角都是尖角圖標(biāo)風(fēng)格摇幻。尖角圖標(biāo)的好處是讓人感覺到有棱角横侦，視覺上會(huì)多凝視幾秒。并且給人以正式的感覺绰姻，所以像銀行枉侧、辦公等APP 中都較多地使用尖角圖標(biāo)風(fēng)格。
斷線圖標(biāo)（Breaking Lines）
如果我們的線性圖標(biāo)顯得太死板狂芋，我們可以使用斷線這種方式來讓它變得生動(dòng)榨馁。斷線圖標(biāo)就是線性圖標(biāo)的一種風(fēng)格變化，它的特點(diǎn)就是在線條中出現(xiàn)斷口帜矾。但是這個(gè)斷口并不是看起來那么簡單翼虫，它得遵循幾個(gè)規(guī)則：第一，斷線開口只有一個(gè)屡萤，否則圖標(biāo)會(huì)無法識(shí)別珍剑；第二，斷線開口位置不應(yīng)該在中心線上灭衷；第三次慢，斷線開口盡量在轉(zhuǎn)折處；第四翔曲，斷線不應(yīng)該太過于瑣碎迫像。
雙色圖標(biāo)（Two-Tone icon）
如果我們把圖標(biāo)簡單地分為線性圖標(biāo)和填充圖標(biāo)，是不是太無聊了瞳遍？比如我們要設(shè)計(jì)一個(gè) iOS平臺(tái)的 APP闻妓，它的底部Tab欄就一定是未選中態(tài)是線性的，選中就是填充的嗎（或者全部是填充態(tài)掠械，僅僅改變顏色）由缆？這也太無聊了吧注祖！所以又出現(xiàn)了雙色圖標(biāo)的設(shè)計(jì)風(fēng)格。即：雙色圖標(biāo)的外形還是線性圖標(biāo)均唉，但是用透明度很高的同類色填充到線性圖標(biāo)內(nèi)部空間里是晨。這樣的圖標(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)畫。這都是非常能夠調(diào)動(dòng)用戶好奇心的戳表。
四桶至、圖標(biāo)的設(shè)計(jì)方法
1. 矢量圖形（Vetctor）
我們?cè)谑褂?Photoshop 工具的時(shí)候會(huì)感嘆，畫筆比鋼筆好用扒袖，橡皮比布爾運(yùn)算好用塞茅。那么我們?cè)诋媹D標(biāo)的時(shí)候能不能使用畫筆這樣的工具來繪制圖標(biāo)呢？在 Photoshop 里使用畫筆工具和橡皮工具季率、涂抹工具、選區(qū)工具的填充描沟、油漆桶工具制作的圖形飒泻，以及從網(wǎng)絡(luò)上復(fù)制過來的jpg圖片文件，這些都是像素圖形吏廉。它們是計(jì)算機(jī)記錄每一個(gè)點(diǎn)的顏色來呈現(xiàn)圖像的泞遗。這也是為什么我們把一張照片放得特別大它就虛了的原因。而我們通過 Photoshop 中的鋼筆工具席覆、布爾運(yùn)算史辙、貝塞爾曲線、形狀圖層制作的圖形佩伤，以及 Illustrator 復(fù)制過來的圖形聊倔、Sktech繪制的圖形等，都是矢量圖形生巡。它們是計(jì)算機(jī)記錄一個(gè)錨點(diǎn)到另一個(gè)錨點(diǎn)的方向耙蔑、位置、色彩來呈現(xiàn)圖像的孤荣。所以像素圖形變化多端甸陌、顏色變換豐富须揣、細(xì)節(jié)更多；矢量圖形則文件較小钱豁，并且具有隨意放大縮小都不虛的能力耻卡。因?yàn)槊總€(gè)錨點(diǎn)之間的方向、位置都是相對(duì)的牲尺，放大和縮小不受影響劲赠，而像素圖形記錄每個(gè)點(diǎn)的色彩，比如一張2000px x 2000px的圖片秸谢，縮小到1000px x 1000px就會(huì)損失一千個(gè)像素信息凛澎。我們繪制圖標(biāo)比較適合用矢量圖形來設(shè)計(jì)，因?yàn)槲覀兛赡苄枰S時(shí)調(diào)整圖標(biāo)的大小估蹄，并且在不同分辨率的適配中也更加方便塑煎。
2. 布爾運(yùn)算（Boolean）
布爾運(yùn)算聽著很可怕，其實(shí)非常簡單臭蚁，布爾運(yùn)算是數(shù)字邏輯推演法最铁，主要有數(shù)字邏輯的聯(lián)合、相交垮兑、相減冷尉。在我們使用的平面軟件中引用了這種邏輯運(yùn)算方法來使基本圖形通過聯(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é)過的數(shù)學(xué)倍谜，應(yīng)該比較好理解迈螟。但是很多軟件中對(duì)于布爾運(yùn)算的關(guān)系翻譯不同叉抡，所以可能大家會(huì)有些不適應(yīng)。比如在 Photoshop 中布爾運(yùn)算被翻譯成：合并形狀答毫、減去頂層形狀褥民、與形狀區(qū)域相交、排除重疊形狀洗搂。而在 Adobe XD 中則翻譯成：添加消返、減去、交叉耘拇、排除重疊撵颊。雖然名字不同，但是功能是相同的惫叛，所以大家在學(xué)習(xí)新的軟件時(shí)不妨先找一下布爾運(yùn)算倡勇。
3. 貝塞爾曲線（Bézier curve）
貝塞爾曲線是用于二維圖形繪制的數(shù)學(xué)曲線。1962年法國工程師皮埃爾·貝塞爾發(fā)表了貝塞爾曲線嘉涌，它的誕生主要是為了汽車的主體設(shè)計(jì)繪制圖形的妻熊。貝塞爾曲線是繪制矢量圖形時(shí)的重要工具，我們使用鋼筆工具畫出的所有圖形一般來說都是貝塞爾曲線組成的仑最。貝塞爾曲線由錨點(diǎn)和線段組成扔役，點(diǎn)擊錨點(diǎn)就會(huì)出現(xiàn)兩個(gè)手柄，一邊是控制前面的線條走向警医，另一邊是控制后端的線條走向亿胸。同時(shí)我們也可以通過增加錨點(diǎn)工具和刪除錨點(diǎn)工具進(jìn)行調(diào)整。要想學(xué)好平面電腦繪圖軟件法严，貝塞爾曲線是必須修煉的一課损敷。一般來說，二維平面軟件都有貝塞爾曲線的痕跡深啤，鋼筆工具、增加錨點(diǎn)路星、刪除錨點(diǎn)溯街、轉(zhuǎn)換點(diǎn)工具，這些都是平面軟件的標(biāo)配洋丐。并且呈昔，貝塞爾曲線和布爾運(yùn)算可謂是一對(duì)好朋友，在繪制矢量圖形時(shí)可以使用它們輕松地繪制出準(zhǔn)確的造型友绝。
那么我們使用什么軟件來繪制圖標(biāo)呢堤尾？這里我建議使用Illustrator。首先迁客，UI設(shè)計(jì)師使用不同的軟件來設(shè)計(jì)頁面郭宝，目前主流是Photoshop和Sketch辞槐，也有很多設(shè)計(jì)師選擇Adobe XD。而這些軟件都是兼容Illustrator的粘室，所以使用它來繪制圖標(biāo)非常有靈活性榄檬。可能您對(duì)Illustrator并不熟悉衔统，不過沒關(guān)系鹿榜，我們?cè)谶@里只需要了解它與圖標(biāo)繪制功能相關(guān)的功能即可，比如鋼筆锦爵，布爾運(yùn)算舱殿，屬性面板，描邊险掀，填充沪袭，混合工具等，并不需要學(xué)習(xí)非常深入迷郑。所以大家不必緊張枝恋。
笑臉圖標(biāo)
笑臉圖標(biāo)的設(shè)計(jì)步驟：畫出一個(gè)正圓;接著畫一個(gè)小圓，然后ctrl + F復(fù)制平行移動(dòng)到旁邊嗡害，然后右鍵編組焚碌。接著，同時(shí)選中大圓和編組的小圓進(jìn)行水平居中對(duì)齊霸妹。我們繪制一個(gè)圓形十电，然后通過布爾運(yùn)算減去一個(gè)矩形得到半圓形組成嘴，完成叹螟。
對(duì)號(hào)圖標(biāo)
對(duì)號(hào)圖標(biāo)的設(shè)計(jì)步驟：使用矩形工具畫出一個(gè)長方形鹃骂，然后復(fù)制，將復(fù)制后的長方形向右上移動(dòng)相同的距離罢绽，使用布爾運(yùn)算剪切畏线，旋轉(zhuǎn)45°后變成一個(gè)對(duì)號(hào)繪制一個(gè)正方形，使用路徑選擇工具選中良价，拖動(dòng)圓角的圓點(diǎn)拉出圓角得到圓角矩形寝殴。對(duì)號(hào)和圓角矩形進(jìn)行布爾運(yùn)算，完成明垢。
WIFI圖標(biāo)
WIFI圖標(biāo)的設(shè)計(jì)步驟：繪制多個(gè)圓形并且通過布爾運(yùn)算相加減得出三個(gè)圓圈嵌套的靶子造型蚣常。通過旋轉(zhuǎn)過的45°矩形和之前圖形布爾運(yùn)算得到Wifi圖標(biāo)，完成痊银。
位置圖標(biāo)
位置圖標(biāo)的設(shè)計(jì)步驟：抵蚊。選擇矩形工具單擊畫面輸入數(shù)值，建立一個(gè)100像素的圓形然后選擇這個(gè)圓形復(fù)制它，然后等比例縮小它贞绳，和之前的大圓進(jìn)行布爾運(yùn)算相減谷醉，得到環(huán)形繪制50像素的矩形，用對(duì)齊工具放在環(huán)形的左下方熔酷。旋轉(zhuǎn)45°得到位置圖標(biāo)孤紧，完成。
云圖標(biāo)
云圖標(biāo)的設(shè)計(jì)步驟：繪制兩個(gè)大小不同的圓形拒秘，使用對(duì)齊工具進(jìn)行底部對(duì)齊繪制一個(gè)矩形号显，同樣底部對(duì)齊合并形狀，完成躺酒。
眼睛圖標(biāo)
眼睛圖標(biāo)的設(shè)計(jì)步驟：繪制出一個(gè)正圓押蚤。復(fù)制這個(gè)正圓形，然后按著Shift +方向鍵下鍵羹应，并通過布爾運(yùn)算得到眼睛外輪廓揽碘。繪制兩個(gè)圓形，通過對(duì)齊工具和布爾運(yùn)算工具得到最終眼睛造型园匹，完成雳刺。
鈴鐺圖標(biāo)
鈴鐺圖標(biāo)的設(shè)計(jì)步驟：首先用圓形和矩形合并組成主體;使用矩形和圓形進(jìn)行布爾運(yùn)算繪制鈴鐺底部和鈴鐺頂部的零件，然后進(jìn)行合并形狀;鈴鐺底部的半圓使用圓形和矩形布爾運(yùn)算裸违，完成掖桦。
簡易齒輪圖標(biāo)
簡易齒輪圖標(biāo)的設(shè)計(jì)步驟：。通過兩個(gè)圓形進(jìn)行布爾運(yùn)算得到環(huán)形繪制一個(gè)矩形供汛，上下復(fù)制在圓形上枪汪，然后把它們倆編組和環(huán)形使用對(duì)齊工具進(jìn)行水平垂直對(duì)齊復(fù)制矩形編組并旋轉(zhuǎn)90度，得到一個(gè)十字形怔昨。復(fù)制這個(gè)十字形并最終全部合并形狀雀久，完成。
?齒輪圖標(biāo)
齒輪圖標(biāo)的設(shè)計(jì)步驟：用AI的爆炸圖形和圓形進(jìn)行布爾運(yùn)算畫出齒輪;用兩個(gè)圓形進(jìn)行布爾運(yùn)算做出里面的零件趁舀，完成赖捌。
螺絲刀圖標(biāo)
螺絲刀圖標(biāo)的畫法：用圓形和矩形做出螺絲刀主體;用矩形旋轉(zhuǎn)并復(fù)制再布爾運(yùn)算做出凹槽;使用矩形做出前面的造型，完成矮烹。
蘋果圖標(biāo)
蘋果圖標(biāo)的畫法：巡蘸。。擂送。。繪制一個(gè)六邊形將水平中間兩個(gè)點(diǎn)向上移動(dòng)在中心線上下建立兩個(gè)錨點(diǎn)唯欣，并且向下移動(dòng)將下面兩個(gè)點(diǎn)向內(nèi)分別移動(dòng)使用圓角工具將每兩個(gè)相同的點(diǎn)一組一組拉成圓角嘹吨。繪制一個(gè)矩形并且旋轉(zhuǎn)45°，然后將左右兩個(gè)點(diǎn)向內(nèi)拉得到菱形境氢。用圓角工具使菱形變成葉子造型并且旋轉(zhuǎn)45° 蟀拷。使用一個(gè)圓形和蘋果造型相切碰纬，完成。
?放大鏡線性圖標(biāo)
放大鏡線性圖標(biāo)的畫法：问芬。繪制正圓繪制一條直線用屬性面板里的對(duì)齊工具把它們倆對(duì)齊用描邊面板里的屬性將描邊改成圓頭悦析，然后旋轉(zhuǎn)45°即可。
時(shí)鐘線性圖標(biāo)
時(shí)鐘線性圖標(biāo)的畫法：此衅。繪制正圓繪制一個(gè)矩形强戴，對(duì)齊圓形中心用增加錨點(diǎn)工具在矩形左和下邊上增加兩個(gè)錨點(diǎn)用直接選擇工具框選沒用的線條，刪除即可挡鞍。
線性點(diǎn)贊圖標(biāo)
線性點(diǎn)贊圖標(biāo)的畫法：骑歹。繪制兩個(gè)矩形，并用直接選擇工具選擇重合的四個(gè)錨點(diǎn)墨微，在屬性面板里使用對(duì)齊工具讓它們完全對(duì)齊將大的矩形底部錨點(diǎn)向左移動(dòng)繪制一個(gè)矩形并和大的矩形左對(duì)齊道媚。用直接選擇工具選中直角，拖動(dòng)圓角小圓點(diǎn)讓它們變成圓角翘县，完成最域。
4.線性圖標(biāo)的處理
如果您掌握了以上填充態(tài)圖標(biāo)的設(shè)計(jì)方法，相信其他圖標(biāo)的設(shè)計(jì)只要以此及彼的思考锈麸，就可以完成镀脂。比如線性圖標(biāo)，在繪制線性圖標(biāo)時(shí)掐隐，我們首先會(huì)建立一個(gè)半透明的矩形來固定圖標(biāo)應(yīng)該繪制的范圍狗热，比如“40px”。然后我們把填充關(guān)閉虑省，只使用描邊來繪制線性圖標(biāo)即可匿刮。繪制完以后我們無需保存文件，僅通過Ctrl + C的復(fù)制快捷鍵探颈，然后打開Sketch或者Adobe XD就可以使用Ctrl + V將圖標(biāo)粘貼過去了熟丸。但是，如果您使用Photoshop做界面設(shè)計(jì)伪节，可能會(huì)多兩道手續(xù)光羞，首先就是線性圖標(biāo)需要擴(kuò)展才可以復(fù)制到Photoshop中。將圖標(biāo)復(fù)制一份（擴(kuò)展之后的圖標(biāo)不方便修改怀大，所以要留著可修改版本纱兑，然后點(diǎn)擊對(duì)象菜單>擴(kuò)展，點(diǎn)確定化借，就可以把原本是沒有閉合的路徑改為完整的形狀潜慎。
然后復(fù)制，打開Photoshop粘貼會(huì)打開提示框，我們可以選擇把圖標(biāo)粘貼成為像素铐炫，智能對(duì)象垒手，路徑，形狀倒信。如果粘貼成像素的話科贬，那無疑對(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)整等操作了看政。
我們會(huì)發(fā)現(xiàn)圖標(biāo)粘貼到Photoshop中朴恳，橫豎的路徑會(huì)出現(xiàn)虛邊的情況（圓角和斜線是允許一定的虛邊出現(xiàn)的，但是直線不可以）允蚣。這種虛邊有可能會(huì)影響用戶的體驗(yàn)于颖，我們必須把它消滅掉。第一種方法：在Photoshop中我們可以用直接選擇工具后界面上方的對(duì)齊路徑功能嚷兔，給它打鉤來嘗嘗修復(fù)這個(gè)問題森渐。第二種方法：我們可以使用直接選擇工具選中虛掉的某兩個(gè)錨點(diǎn)，然后按Ctrl + T（自由變換）冒晰，再按鍵盤的上下或左右“去抖”同衣，路徑就會(huì)清晰了。第三種方法：也可以使用幾像素的矩形進(jìn)行布爾運(yùn)算強(qiáng)行對(duì)齊壶运。三種方法一定能夠讓圖標(biāo)的橫豎路徑?jīng)]有虛邊耐齐，達(dá)到完美的效果。當(dāng)然Sketch和Adobe XD都是矢量工具所以復(fù)制后沒有這個(gè)問題蒋情。?
5.應(yīng)用
標(biāo)簽欄圖標(biāo)
在蘋果和安卓APP的底部棵癣，一般都會(huì)有一個(gè)放置重要功能的常居欄辕翰，在iOS中被稱為標(biāo)簽欄（也叫做Tab欄）。一般狈谊，Tab欄的圖標(biāo)是2-5個(gè)金蜀。每個(gè)圖標(biāo)的欄目寬度刷后，底部會(huì)有一個(gè)22px（11pt）的文字注釋。當(dāng)然如果圖標(biāo)釋義較為清晰渊抄，也可以為了保持設(shè)計(jì)感去掉文字注釋。如果我們是以iPhone6 / 7/8尺寸設(shè)計(jì)界面丧裁，那么我們的標(biāo)簽欄圖標(biāo)尺寸應(yīng)該是60像素（30pt）左右护桦，可以基于這個(gè)范圍來設(shè)計(jì)我們的圖標(biāo)。
每個(gè)標(biāo)簽欄的圖標(biāo)都應(yīng)該設(shè)計(jì)一個(gè)選中狀態(tài)煎娇，可以做樣式的變換也可以做顏色的改變二庵，總之要讓人知道當(dāng)前所在的頁面是哪個(gè)。如果您的標(biāo)簽欄由五個(gè)圖標(biāo)組成缓呛，那么可以在中間放置比較重要的功能催享，并做出突顯的樣式，比如使用一個(gè)圓球當(dāng)作背景哟绊。還要額外注意因妙，圖標(biāo)的選中態(tài)樣式要和中間突出狀態(tài)的圖標(biāo)保持區(qū)別，以免發(fā)生誤會(huì)票髓。?
導(dǎo)航欄圖標(biāo)
在蘋果APP的頂部區(qū)域攀涵，我們稱之為導(dǎo)航欄，就是導(dǎo)航欄洽沟。導(dǎo)航欄左右一般都會(huì)有圖標(biāo)以故，如果是二級(jí)頁面，左側(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）左右昆烁。
金剛區(qū)圖標(biāo)
在我們逛淘寶和美團(tuán)的時(shí)候您會(huì)發(fā)現(xiàn)，在它們頁面首頁都會(huì)有一個(gè)區(qū)域放置很多分類朽缴，一般是6-8個(gè)大小一樣的圖標(biāo)善玫，有可能是圓形，也可能是不規(guī)則形狀密强。這個(gè)區(qū)域其實(shí)在蘋果和安卓規(guī)范里并沒有茅郎，屬于設(shè)計(jì)師自創(chuàng)的規(guī)范。這個(gè)區(qū)域經(jīng)常有八個(gè)圖標(biāo)組成或渤，被稱為「八大金剛圖標(biāo)」系冗，后來很多產(chǎn)品在這個(gè)區(qū)域并不使用8個(gè)圖標(biāo)，我們就稱它們?yōu)榻饎倕^(qū)了薪鹦。金剛區(qū)圖標(biāo)的設(shè)計(jì)風(fēng)格應(yīng)該盡量是微扁平掌敬，輕擬物的感覺惯豆，這樣會(huì)有更好的點(diǎn)擊感。尺寸方面奔害，金剛區(qū)并沒有規(guī)范楷兽，所以大家可以以設(shè)計(jì)稿最終效果為準(zhǔn)。
總結(jié)
圖標(biāo)設(shè)計(jì)是UI設(shè)計(jì)中非常重要的一環(huán)华临，因?yàn)槌宋淖趾蛨D片的排版之外芯杀，在扁平時(shí)代我們能夠傳遞給用戶情緒和設(shè)計(jì)感的通道就是頁面中的各種圖形和圖標(biāo)了，如果做不好圖標(biāo)雅潭，用戶就將在使用界面時(shí)失去樂趣揭厚。所以，建議每位UI設(shè)計(jì)師都需要在平時(shí)做大量的圖標(biāo)練習(xí)扶供。
