圖標是界面中重要組成部分横侦，除了部分插畫之外是設計師真的需要花時間為產品設計的一套視覺符號渊鞋。圖標設計也是體現(xiàn)專業(yè)水平的重要方面荒澡，提高這方面的能力除了大量的思考和練習之外橡淆，還要從他人的思路和作品中總結出一套規(guī)律形成自己的知識結果和體系。大量關于圖標設計的文章都提到了一些要點父虑，但都不夠全面该酗。所以看過這些文章，學習之后把這些已經獲得的知識點匯總起來，作為學習的總結也希望能給他人提供參考呜魄。

一悔叽、圖標在界面中的作用

1、傳達品牌

圖標是產品和服務的視覺表現(xiàn)的一部分爵嗅，是視覺標志的重要延伸娇澎；一套能體現(xiàn)產品特點的圖標能在用戶使用過程中傳達出更多的情感內涵。

eg：淘寶把啟動圖標作為底部標簽圖標的一種形態(tài)睹晒，突出品牌的傳達趟庄。

?????????????????????

eg：天貓標簽欄圖標更是“貓形”的延續(xù)。

?????????????????????

2伪很、易于辨識記憶

對比文字岔激，圖標具有更好的辨識度，堪稱信息時代的象形文字是掰，具象而清晰。用戶可以通過界面的圖標快速理解界面?zhèn)鬟_出的信息辱匿，從而進行操作完成任務键痛。

eg:下面4各圖標即使沒有文字注釋，多數(shù)移動互聯(lián)網(wǎng)用戶也能夠理解它們的含義（不識字的小朋友也不例外）匾七。

?????????????????????

3絮短、豐富頁面，易于排版布局

圖標結合配色昨忆，圖形化的呈現(xiàn)使界面更加豐富而不顯枯燥丁频。圖標可大可小，可簡單可復雜邑贴。與文字結合起來席里，可以形成各種排版，使界面均衡而有節(jié)奏拢驾。

eg:沒有圖標的發(fā)現(xiàn)頁就比較單調無趣了奖磁。

?????????????????????

4、跨越語言的符號系統(tǒng)繁疤，能在不同文化間形成共識

在全球化的時代咖为，不同國家不同年齡的用戶可以對圖標形成一致的認知。在產品全球化時稠腊，往往只要對文字進行翻譯而無需更換一套圖標躁染。

二、圖標的分類

1架忌、按作用分：

按圖標的作用可分為導航操作吞彤、裝飾示意、顯示狀態(tài)叹放。導航操作的圖標备畦，點擊后可跳轉到另一個頁面低飒，或者發(fā)起某個動作；裝飾示意的圖標懂盐，不具備特定的功能褥赊，只是為了配合文字傳達出信息的含義，同時豐富頁面莉恼；顯示狀態(tài)的圖標拌喉，可以操作從而切換狀態(tài)。

eg: “心形”為裝飾示意俐银，“好看”為顯示狀態(tài)尿背，“評論”為導航操作。

?????????????????????

2捶惜、按位置分：

按照圖標在界面中出現(xiàn)的位置可分為：底部導航圖標田藐、標題欄操作圖標、金剛區(qū)入口圖標吱七、列表流示意圖標汽久、頁面輔助裝飾圖標、頁面信息流功能圖標踊餐、分類頁入口圖標景醇、產品啟動圖標；這些圖標的作用和大小可能都不同吝岭，但可以在風格的某種維度上保持統(tǒng)一性三痰，組合起來更加協(xié)調。

3窜管、按風格分：

按照圖標的視覺風格可分為：線性圖標散劫、面性圖標、線面結合圖標幕帆、扁平圖標舷丹、寫實圖標、插畫圖標蜓肆、2.5D圖標颜凯。圖標的風格可能會根據(jù)流行風格而變化，比如曾經流行的寫實風格仗扬，隨后流行的扁平風格症概，再到現(xiàn)在流行的半扁平風格。也可能和產品本身的屬性有關早芭，比如生鮮或外賣平臺使用插畫寫實風格的圖標喚醒用戶的食欲彼城，兒童教育類的產品圖標使用卡通的插畫風格而符合兒童的審美。在具體的運用中根據(jù)圖標在界面中的權重和層級，產品視覺風格而設定其大小募壕、抽象程度和風格调炬。

三、圖標的尺寸體系和設計規(guī)范

1舱馅、尺寸體系：

根據(jù)位置不同缰泡，圖標大小和描邊寬度和圓角大小也不同。產品啟動圖標是最大尺寸的代嗤，但不需要設計師自己確定而于發(fā)布的平臺有關棘钞。平臺會給出一套尺寸規(guī)范，設計師在規(guī)范的大小里調節(jié)就可以了干毅。

從最小的裝飾示意型的小圖標宜猜，到金剛區(qū)入口的大圖標。建立以4px為單位的尺寸階梯：24硝逢、28姨拥、32、36渠鸽、40叫乌、48、56拱绑、64、72;根據(jù)大小選擇不同的描邊粗細丽蝎，如72大小的粗細為 4 猎拨，大小為48的圖標描邊粗細為3，大小為24的描邊粗細為2.對應的是圖形圓角的大小3（24）屠阻、6（48）红省、9（72）。

2国觉、設計規(guī)范：

斷點處理

定義圖標描邊斷點的處理方式吧恃，比如支付寶視覺規(guī)范建議斷點需要和圖形平行，也可以定義斷點產生的尖角是否需要做微小的圓角處理麻诀。

傾斜角度

定義線條和圖形的傾斜角度痕寓。比如AntDesign建議的角度與76度有關，而一般的傾斜角度為15的倍數(shù)蝇闭，可以是45度或60度呻率。

組合方式

如查找文件等需要文件圖標和搜索圖標結合起來表示。組合的方式也可以定義起來呻引，一般把圖標放在主圖標的右下角位置礼仗。

復數(shù)表示

比如群聊（微信）需要用多個圖形疊加在一起表示多個對象的含義。對這種疊加的方式也可以定義起來，左右疊加還是上下疊加或者是前后疊加元践。

否定表示

表示打開或關閉某項功能韭脊，比如散光燈和音樂。需要表示否定的含義单旁，是有對叉還是斜杠沪羔，斜杠是向左傾斜還是向右傾斜。這些都是可以定義規(guī)范起來的慎恒。

圓角處理

圖形轉角是否是需要圓角處理任内。外圓角和內圓角的關系如何，一般是內圓角加線寬等于外圓角融柬。也可以像支付寶一樣定義“外圓內方”的視覺特征死嗦，只定義外圓角而保持內直角從而呼應“安全可靠”的品牌價值。

描邊粗細

一般在尺寸相同的圖標中粒氧，保持描邊的粗細一致越除。但在圖標內部結構比較復雜，簡化會喪失本身的識別性時外盯，可以考慮使用較細的描邊表現(xiàn)復雜結構摘盆。

細節(jié)程度

定義不同大小的圖標，細節(jié)豐富到何種程度饱苟。以達到樣式表意的一致性孩擂。

四、圖標設計原則和繪制方法

1箱熬、設計原則：

辨識度

用戶通過圖標能夠理解所表達的意思类垦，就是辨識度。在表意比較特殊的時候也可以結合文字城须，更加精準傳達出含義蚤认。辨識度的關鍵是形象直接，為了保證所設計的圖標辨識度可以先大量參考觀察他人所用的圖形糕伐。比如到iconfont上參考相同表意的圖標作為參考砰琢，找到最恰當?shù)膱D形。

凸顯性

產品啟動圖標能夠在屏幕眾多圖標中吸引用戶注意力良瞧。產品首頁中的金剛區(qū)入口圖標能夠在視覺層級上突出陪汽，成為視覺的焦點，很好的分發(fā)流量褥蚯。

統(tǒng)一性

產品圖標風格上具有一致性掩缓，搭配起來協(xié)調能融為一體。

最簡形態(tài)

使用基礎的圖形組合出來遵岩，具有幾何的美感你辣。能夠表現(xiàn)出結構的理性和秩序之美巡通。多一筆則顯得復雜，少一筆則不能辨識舍哄，在復雜和簡單之間找到最佳的平衡點宴凉，設計出簡潔優(yōu)美的圖標。

2表悬、繪制方法：

圖標盒子

為了保證圖標在大小和形態(tài)上的一致性弥锄，利用圖標盒子作為參考是很好的方法。圖標盒子是有橫豎兩個長方形蟆沫、正方形和圓形組成的籽暇。可以通過各平臺的官網(wǎng)下載饭庞，最好是能夠自行繪制戒悠。繪制的方法并不復雜，目的是讓各種形狀的圖標在視覺上大小是一致的舟山。

布爾運算

利用基礎圖形的合并绸狐，交集、相減得到圖標的外形累盗。

輪廓化描邊

把圖形的描邊轉化為形狀寒矿，也是常用的繪制方法。

圖形的視覺差

相同寬高不同形狀的圖形若债，在視覺上的大小并不一樣符相。比如矩形會比圓形顯得大，圓形會比三角形顯得大蠢琳，需要再根據(jù)實際情況進行微調啊终，讓不同的圖標看起來大小一致。

傾斜的線條比水平的線條在寬度相等時看起來更細挪凑，曲線比直線在寬度相等時看起來更細孕索，這些因素也需要手動調節(jié)來消除感官差異逛艰。

圖標的結構形態(tài)各異躏碳，需要在圖標盒子中調整位置，以獲得最佳的視覺的中心和平衡感散怖。

貼合像素

圖標尺寸很小時菇绵，半個像素會看起來很模糊。所以在繪制圖標時镇眷，盡量保持邊界和單個像素是貼合在一起的咬最，避免半個像素產生的鋸齒。這樣繪制出的圖標才會更加的清晰欠动。

微投影和漸變

繪制金剛區(qū)的面性圖標時永乌，利用微投影和微漸變可以增加圖標的質感和細節(jié)惑申。使圖標看起來更加美觀精細。

3翅雏、基于基本性的風格拓展

基于一個辨識圖很好的線性圖標圈驼，可以根據(jù)一定的思路演變?yōu)槊嫘詧D標或者線面結合圖標。再添加一些細節(jié)或光影望几、材質和點綴绩脆，可以演變?yōu)楦鼮閺碗s的圖標樣式。