提升你的設(shè)計(jì)感①—icon在設(shè)計(jì)中的重要性
以下文章來(lái)源于設(shè)計(jì)有術(shù)，作者：Ai永恒
??? 在日常的UI設(shè)計(jì)中，一款好的APP設(shè)計(jì)師通過(guò)好多模塊組合而成，而icon圖標(biāo)對(duì)于整個(gè)界面有著至關(guān)重要的作用，可以說(shuō)占在C位也不為過(guò)；我們可以看下我們?nèi)粘Ｖ谐Ｓ玫腶pp，以下是支付寶、美團(tuán)及淘寶的首頁(yè)：
通過(guò)以上界面會(huì)發(fā)現(xiàn)icon都在首頁(yè)，并且是在黃金位置，所以icon對(duì)app起著至關(guān)重要的作用。其實(shí)icon不光在app設(shè)計(jì)中有著至關(guān)重要的作用，在日常生活中icon的應(yīng)用可以說(shuō)非常廣泛，我們隨時(shí)可以看到icon的存在，例如我們熟知的界面設(shè)計(jì)、日常生活中的指示牌等等，可以把它按使用場(chǎng)景歸為三大類：圖像界面、產(chǎn)品表面、日常交通等等。在這就不細(xì)說(shuō)了，大家可以在日常生活中多多觀察。
通過(guò)上面的對(duì)比圖片我們可以發(fā)現(xiàn)，沒(méi)加圖標(biāo)的界面識(shí)別性及美感程度對(duì)比加圖標(biāo)界面差很多，有的小伙伴會(huì)問(wèn)為什么呢？這是因?yàn)閕con是有明確含義的圖形視覺(jué)語(yǔ)言，它的首要目標(biāo)就是代替文字，通過(guò)圖形的形式來(lái)傳達(dá)信息，所以設(shè)計(jì)icon的前提條件就是icon圖標(biāo)的可識(shí)別性，這很重要！
?
那么我們?cè)赼pp設(shè)計(jì)中如何才能設(shè)計(jì)出為整個(gè)界面加分的icon呢？其實(shí)icon在設(shè)計(jì)中主要遵循以下幾個(gè)方面著手：icon圖標(biāo)的可識(shí)別性、品牌形象與圖標(biāo)的結(jié)合、圖標(biāo)的風(fēng)格、icon圖標(biāo)的一致性。
icon圖標(biāo)的可識(shí)別
icon圖標(biāo)起到提高識(shí)別性的作用，所以圖標(biāo)所表達(dá)的含義要與文字相契合，即圖要達(dá)義
品牌形象與圖標(biāo)的結(jié)合
圖標(biāo)與品牌相結(jié)合可以從以下幾個(gè)點(diǎn)著手：直接運(yùn)用、提取品牌圖形、運(yùn)用品牌色等；
直接運(yùn)用為首頁(yè)圖標(biāo)按鈕
提取品牌圖形
運(yùn)用品牌色
圖標(biāo)的風(fēng)格
圖標(biāo)的風(fēng)格一般分：線性圖標(biāo)、面性圖標(biāo)、線面結(jié)合、擬物化圖標(biāo)等；
線性圖標(biāo)
面性圖標(biāo)
線面結(jié)合圖標(biāo)
擬物圖標(biāo)
icon圖標(biāo)的一致性
圖標(biāo)的一致性主要為以下幾個(gè)方面：
圖標(biāo)類型及風(fēng)格的統(tǒng)一、透視的統(tǒng)一、粗細(xì)的統(tǒng)一、圓角的統(tǒng)一、視覺(jué)大小的統(tǒng)一等
在同一套圖標(biāo)中，要保證圖標(biāo)的類型及風(fēng)格的統(tǒng)一，比如同一套圖標(biāo)都是線性或者同一套圖標(biāo)都是面性，風(fēng)格偏圓潤(rùn)還是硬朗等，盡量不要混搭。
一般在項(xiàng)目中使用帶有立體感的圖標(biāo)要特別注意透視關(guān)系，確定好一個(gè)透視角度之后所有圖標(biāo)都要統(tǒng)一，像下面這個(gè)圖標(biāo)，則是統(tǒng)一透視的圖標(biāo)，看起來(lái)就會(huì)很整體，沒(méi)有違反透視原則。
在同一套圖標(biāo)中，我們要保證圖標(biāo)的描邊粗細(xì)一致，像這套圖標(biāo)，都是很細(xì)的描邊，就會(huì)給人一種是同樣系列的視覺(jué)感受。
我們需要把同一套項(xiàng)目里的圓角進(jìn)行統(tǒng)一，就像下面這套圖標(biāo)整體都帶有一定的圓角，看起來(lái)很圓潤(rùn)，也很整體。
我們都知道，同一個(gè)模塊或者層級(jí)的圖標(biāo)要做到大小一致，但是很多時(shí)候長(zhǎng)寬相等的圖標(biāo)看起來(lái)依舊不是同樣大小的。這里就涉及到一個(gè)知識(shí)點(diǎn)-幾何圖形的視覺(jué)差對(duì)比。
比如下面這個(gè)圖，這是三個(gè)登高等寬的形狀，在我們?nèi)搜鄣挠^察中會(huì)發(fā)現(xiàn)正方形的最大，圓、三角形和菱形比較小。這是因?yàn)檎叫握紦?jù)的面積更大，所以比重也更大。
所以我們?cè)谠O(shè)計(jì)圖標(biāo)的時(shí)候不能單純的看長(zhǎng)寬，還要看一下整體視覺(jué)是否統(tǒng)一。
好啦，今天的分享就到這里，可以加我微信，大家一起交流哦~~
——THE END——
??????關(guān)注“設(shè)計(jì)有術(shù)”，讓你設(shè)計(jì)不迷路??????
??點(diǎn)個(gè)“三連”獲取更多設(shè)計(jì)干貨分享!
??關(guān)注回復(fù)“大廠規(guī)范”領(lǐng)取大廠規(guī)范、大廠組件及常用規(guī)范合集；
??關(guān)注回復(fù)“用戶體驗(yàn)”領(lǐng)取用戶體驗(yàn)電子書；