作者：_Janice
鏈接：http://www.reibang.com/p/611b40b550fe
Jancie: 大家好宫峦，我又來(lái)了，很高興又來(lái)圍觀我們的節(jié)目玫鸟，說(shuō)到icon导绷，這個(gè)說(shuō)大不大說(shuō)小也不小的小東西，對(duì)他是又愛(ài)又恨屎飘，雖然小家伙面積不大妥曲，卻承載了App大部分的引導(dǎo)入口，是相當(dāng)重要的一環(huán)枚碗，APP或桌面上的icon都是有一種象征意義或隱喻逾一，并在日常生活中經(jīng)常遇到。從更深次的解釋就是icon代表了一些行動(dòng)肮雨、事遵堵、人、真實(shí)的怨规、虛擬的視覺(jué)符號(hào)陌宿。
icon不僅是圖標(biāo)這么簡(jiǎn)單，它承載了文字的含義波丰，將文字圖形化壳坪，而讓人使用最少的時(shí)間來(lái)理解圖標(biāo)代表文字的含義，最后icon是作為產(chǎn)品在視覺(jué)表現(xiàn)上集審美與功能完美融合的元素掰烟。
接下來(lái)我從原則爽蝴、規(guī)則、分類(lèi)纫骑、技巧蝎亚、深層探索逐一介紹：
一、原則
· 意義明確
這個(gè)很容易理解先馆，當(dāng)你要做一套icon发框，它首先是有自己明確的含義的，這個(gè)放哪煤墙，干什么梅惯，想要傳達(dá)什么含義，并且要讓用戶一眼能看出來(lái)你想表達(dá)的含義仿野。
· 簡(jiǎn)潔
含義表達(dá)清楚了铣减，接下來(lái)就是icon的表達(dá)形式，因?yàn)槊娣e小设预，所以過(guò)于復(fù)雜會(huì)帶有一些不必要的麻煩徙歼，比如看不清內(nèi)容，含義模糊，這就要求設(shè)計(jì)師在去除冗余的細(xì)節(jié)的同時(shí)魄梯，保證icon目的和功能性桨螺，又可以設(shè)計(jì)新的形象，并且整體風(fēng)格要和整體的視覺(jué)協(xié)調(diào)統(tǒng)一酿秸，一起完美表現(xiàn)灭翔。
· 可用性
可以通過(guò)可查找性測(cè)試，在測(cè)試中被訪者需要按任務(wù)點(diǎn)擊圖標(biāo)辣苏，計(jì)算被訪者成功找到圖標(biāo)的操作時(shí)間肝箱，首次點(diǎn)擊的正確率，不要伴隨文文本標(biāo)簽稀蟋；
可識(shí)性測(cè)試來(lái)讓用戶猜出看到的圖標(biāo)代表什么煌张，有什么作用；
預(yù)測(cè)性測(cè)試退客，不僅猜出圖標(biāo)的意義骏融，還需要測(cè)出用戶推斷這個(gè)圖標(biāo)所代表的功能，在脫離測(cè)試環(huán)境后詢問(wèn)點(diǎn)擊后會(huì)發(fā)生什么萌狂；
· 一致性
當(dāng)滿足以上幾條原則后档玻，最后需要注意的就是所有的icon一致性，不僅是顏色茫藏，線條粗細(xì)误趴，感情特征，開(kāi)口务傲，等等...只有保持最終的一致性凉当，你的設(shè)計(jì)才是完整的，如何保持一致性以及一些圖標(biāo)設(shè)計(jì)的規(guī)則售葡，我們后面會(huì)詳細(xì)的展開(kāi)來(lái)說(shuō)纤怒。
二、規(guī)則
· 基本型
畫(huà)icon和插畫(huà)一樣都是由最基本的形狀慢慢組裝來(lái)的天通，界面上所有的icon都可以近似成一個(gè)基本形狀，比如各個(gè)方向的長(zhǎng)方形熄驼、圓像寒、三角形、正方形瓜贾。畫(huà)好你想要的icon诺祸，然后用一些基本的圖形來(lái)組合起來(lái)進(jìn)行布爾運(yùn)算，就會(huì)得到絕大部分你想要的祭芦，把繪制好的圖標(biāo)模糊后都是黑黑的一團(tuán)筷笨，也就是說(shuō)視覺(jué)重量是一致的。
· 圖標(biāo)的大小
圖標(biāo)的大小不只是物理上的大小統(tǒng)一，眼睛很多情況是騙了你的胃夏，也就是說(shuō)轴或，眼見(jiàn)未必為實(shí)。
比如兩個(gè)大小相同的形狀仰禀，一個(gè)圓和一個(gè)正方形照雁。正方形總是看起來(lái)會(huì)大一些，因?yàn)樘钛a(bǔ)了更多的空間答恶，
所以我們需要把正方形縮小一點(diǎn)才會(huì)讓視覺(jué)看起來(lái)相同大小饺蚊。
· 柵格
一般繪制會(huì)調(diào)出網(wǎng)格系統(tǒng)，我們?yōu)榱吮３謭D標(biāo)的一致性悬嗓，需要設(shè)定一些輔助的尺寸來(lái)保證視覺(jué)大小統(tǒng)一性
· 角度
大多數(shù)情況下污呼，是使用45度角，或者他的倍數(shù)包竹。先上圖：
鋸齒走向大家可以很明顯的看出來(lái)區(qū)別吧燕酷，如果是45度角，鋸齒的走勢(shì)是可以接受的映企，而別的角度鋸齒就沒(méi)有那么整齊了悟狱，會(huì)有邊緣的透明度。
· 線的粗細(xì)
一般來(lái)說(shuō)用2px或者2的倍數(shù)堰氓，必要的情況下可以用3px挤渐，為了視覺(jué)曾記得多樣性，但是不要介入過(guò)多的粗細(xì)双絮，因?yàn)闀?huì)破壞一套圖標(biāo)的統(tǒng)一性和凝聚力浴麻，并且注意不要用太細(xì)的線條，除非你刻意做線性風(fēng)格圖標(biāo)囤攀，比如airbnb的風(fēng)格软免。
· 尺寸
8pix 柵格和12列柵格是目前最靈活的設(shè)計(jì)尺寸系統(tǒng)。12可以被2焚挠、3膏萧、4、6整除蝌衔，所以24*24pix 和48*48pix 是目前的標(biāo)準(zhǔn) icon 尺寸榛泛。如果需要更大尺寸的 icon 可以直接放大使用。
· 輸出
工具方面推薦使用ai繪制噩斟，因?yàn)樵趫A角和形狀切割方面有著較大的優(yōu)勢(shì)曹锨，sketch的簡(jiǎn)潔方便也是個(gè)不錯(cuò)的選擇，但是在轉(zhuǎn)為svg格式的時(shí)候會(huì)產(chǎn)生許多不必要的東西剃允，多余的圖層沛简、純顏色層齐鲤、蒙版等等。
三椒楣、分類(lèi)
在APP中给郊，功能圖標(biāo)大致可分為兩種：
1.可點(diǎn)擊的按鈕圖標(biāo)
2.不可點(diǎn)擊的展示圖標(biāo)
【按鈕圖標(biāo)】常用于navgation bar、tab bar撒顿、tool bar
【展示圖標(biāo)】不可點(diǎn)擊，常用語(yǔ)meta信息位置凤壁，如：
四、技巧
曾看過(guò)@菜心設(shè)計(jì)鋪分享的關(guān)于圖標(biāo)斷線的方法拧抖，覺(jué)得很不錯(cuò)煤搜，分享給大家
1.拼接處斷線
2.復(fù)雜處平衡
比較后還是覺(jué)的方案一舒服多了吧～
3.避免中心斷線
4.一筆畫(huà)完
當(dāng)然如果實(shí)在不能一筆也別勉強(qiáng)。
設(shè)計(jì)圖標(biāo)的時(shí)候需要考慮到使用場(chǎng)景及規(guī)則
所有的視覺(jué)風(fēng)格應(yīng)該有香關(guān)聯(lián)的點(diǎn)唧席，比如線條的粗細(xì)擦盾，圓角的統(tǒng)一，斷點(diǎn)的統(tǒng)一等
五淌哟、深層探索
表面的介紹差不多迹卢，那么我們來(lái)聊下，為什么做icon徒仓，icon所傳遞的已經(jīng)不是表面的美觀和表達(dá)腐碱，更是深層次是產(chǎn)品的發(fā)展戰(zhàn)略，品牌探索切入點(diǎn)掉弛，品牌的探索症见，有些人可能會(huì)疑惑，到底品牌探索是做什么把甓觥谋作？其實(shí)就是看看企業(yè)的歷史、理念乎芳、產(chǎn)品遵蚜、官網(wǎng)、最近的動(dòng)態(tài)，icon跟隨企業(yè)的調(diào)性和方向來(lái)做改版伴逸。
最后我想啰嗦一句，功能圖標(biāo)和應(yīng)用圖標(biāo)不是一回事，比如應(yīng)用圖標(biāo)非常需要設(shè)計(jì)師打造一枚個(gè)性十足的icon箕昭，引起用戶的注意，
而頁(yè)面的重的icon往往是相對(duì)安靜的存在克胳，哪怕沒(méi)有了也是沒(méi)關(guān)系类缤，比如抖音的底部工具欄是用文字來(lái)代替圖標(biāo)的
市面上關(guān)于icon的文章很多不撑，但側(cè)重點(diǎn)卻不同，我想的是盡我的力量把所有的要點(diǎn)融合起來(lái)（當(dāng)然除了自己的設(shè)計(jì)經(jīng)驗(yàn)還借鑒了很多大神的文章晤斩，感謝??）焕檬，有疏漏的地方咱們互相討論，一起完善澳泵。
圖片部分來(lái)源于網(wǎng)絡(luò)实愚，侵刪 ：）
