網(wǎng)絡(luò)上有很多關(guān)于Icon設(shè)計(jì)的文章银还，一些文章從部分維度切入講述Icon的設(shè)計(jì)理念，但大部分缺乏整體性惫搏。

所以我嘗試把自己的思考方式結(jié)合其他人的設(shè)計(jì)理念整理了一個(gè)完整的Icon設(shè)計(jì)法則剥哑，通過簡單易懂的描述語言，并且結(jié)合設(shè)計(jì)案例呈現(xiàn)出來冒掌，希望能夠?qū)Υ蠹矣兴鶐椭箍瘛Ｎ恼率褂玫陌咐淮韨€(gè)人觀點(diǎn)，并不代表相關(guān)產(chǎn)品宋渔。

本文重點(diǎn)講述icon設(shè)計(jì)思維州疾，關(guān)于icon的具體定義以及具體的制作過程就不再贅述，網(wǎng)絡(luò)上有很多文章都有講述皇拣。

從不同維度對icon設(shè)計(jì)進(jìn)行解析严蓖，整理一整套icon的設(shè)計(jì)法則。每一個(gè)產(chǎn)品中都有不同類型的Icon氧急，產(chǎn)品通過Icon可以快速的向用戶傳遞語意颗胡，通過獨(dú)特的設(shè)計(jì)語言讓用戶形成對于產(chǎn)品的認(rèn)知心智。Icon的重要性就不言而喻了吩坝。

ICON的設(shè)計(jì)法則-我取名為菱形法則毒姨，更容易讓設(shè)計(jì)師記住，主要包括語意钉寝、層級弧呐、設(shè)計(jì)形式、風(fēng)格嵌纲、一致性俘枫、范圍。而其他的設(shè)計(jì)思考也是這個(gè)設(shè)計(jì)法則的變體逮走，中心思想沒有發(fā)生變化鸠蚪。通過對以上設(shè)計(jì)思考點(diǎn)的聚合，來設(shè)計(jì)能夠傳遞icon語意师溅，并且能夠清晰展現(xiàn)產(chǎn)品結(jié)構(gòu)和信息層級的Icon系統(tǒng)茅信，通過不同的設(shè)計(jì)形式展現(xiàn)產(chǎn)品設(shè)計(jì)的獨(dú)特風(fēng)格，讓具有一致性的設(shè)計(jì)語言傳遞信息墓臭，和用戶形成共鳴蘸鲸。

-

層級

第一層級Icon

第二級別Icon

第三層級Icon

第一層級的Icon一般指首頁的井字入口Icon，讓用戶快速獲取入口信息起便，完成對產(chǎn)品流量的分流棚贾，讓用戶快速完成自己的任務(wù)窖维。這種類型的Icon是級別最高的，無論是面積妙痹、形式感铸史、視覺沖擊力都應(yīng)該是最突出的，這種高層級的Icon可以簡單通過一下三種方法表現(xiàn)怯伊，1琳轿、擬物化的設(shè)計(jì)方式增加視覺重心和吸引力。2耿芹、通過細(xì)節(jié)的增加呈現(xiàn)Icon設(shè)計(jì)的復(fù)雜形式感崭篡。3、采用沖擊力強(qiáng)的色彩對比吧秕，抓住用戶的關(guān)注點(diǎn)琉闪。除此之外具體的思考過程，后文也會詳細(xì)講述砸彬。

下圖分別是“自如” “每日優(yōu)鮮” “大眾點(diǎn)評”的首頁入口Icon

第二級Icon歸納為導(dǎo)航類型的Icon颠毙，引導(dǎo)用戶操作產(chǎn)品，完成用戶的任務(wù)砂碉，同時(shí)傳遞品牌特色蛀蜜。這種Icon類似真實(shí)街道中的指向標(biāo)逸雹。第二層級的Icon不需要做的視覺重點(diǎn)非常重脏毯，能夠讓用戶認(rèn)知到，并且了解Icon傳遞的信息站宗，在操作行為上產(chǎn)生預(yù)期就可以滋迈。通常的設(shè)計(jì)樣式是線型Icon或者是面型Icon霎奢。

下圖分別是“自如” “每日優(yōu)鮮” “大眾點(diǎn)評”的二級Icon系統(tǒng)

第三類Icon是語意型Icon，主要是向用戶傳遞信息杀怠，烘托信息氛圍椰憋，并且引導(dǎo)用戶瀏覽信息的順序。這種類型的Icon視覺相對較輕赔退，且不可點(diǎn)擊，具體的設(shè)計(jì)思考在后續(xù)的內(nèi)容展開证舟。

下圖分別是“自如” “每日優(yōu)鮮” “大眾點(diǎn)評”的三級Icon系統(tǒng)

以上三類的劃分并不是說Icon只有這幾種類型硕旗，這樣劃分是從功能和視覺上進(jìn)行區(qū)分便于設(shè)計(jì)同學(xué)理解，當(dāng)然在具體的設(shè)計(jì)過程中也可以對Icon進(jìn)行更細(xì)化的區(qū)分女责，最主要根據(jù)具體的需求去定義Icon的層級漆枚，然后再采用對應(yīng)層級的設(shè)計(jì)語言。

語意? ??

1抵知、Icon背后的語意(Icon的特性歸納）

2墙基、Icon的可識別性(Icon的特點(diǎn)表現(xiàn))

Icon的重要意義是抓住用戶能夠通過圖像式的語言快速獲取產(chǎn)品信息软族。所以在Icon的設(shè)計(jì)之前，需要思考Icon背后傳遞的文字語意残制，理解語意立砸，構(gòu)建對于語意的多維拆解（比如沙發(fā)是由靠背、兩個(gè)扶手初茶、四條腿構(gòu)成颗祝，重心要穩(wěn)，和床有哪些區(qū)別等等）恼布。同時(shí)還需要思考Icon圖形化之后的可識別性螺戳，基于對于用戶認(rèn)知的了解，歸納Icon設(shè)計(jì)中需要具體表達(dá)的幾個(gè)關(guān)鍵特點(diǎn)折汞，迎合用戶的認(rèn)知心里倔幼。幫助用戶快速的獲取Icon想要傳遞的信息，如果不能快速的獲取爽待，反而增加了用戶獲取信息的成本凤藏，那就本末倒置，削弱了用戶的使用體驗(yàn)堕伪。

例如下圖中“大眾點(diǎn)評”二級Icon的語意設(shè)計(jì)表達(dá)

設(shè)計(jì)形式

1揖庄、外形

2、表達(dá)方式

3欠雌、色彩組合

4蹄梢、Icon特色

外形是Icon 的基本形態(tài)，不同的形態(tài)傳遞不同的視覺感受富俄，構(gòu)建不同的心智禁炒。同時(shí)Icon的外形決定了內(nèi)部元素的設(shè)計(jì)。

Icon的表達(dá)方式主要兩種霍比，分別是線型Icon幕袱，面型Icon。線型Icon形式抽象悠瞬、簡潔们豌，便于用戶識別，用戶認(rèn)知成本較低浅妆，缺點(diǎn)是Icon容易極簡望迎，造成了似是而非，可識別性降低凌外。面型Icon相對線型Icon視覺重心更突出辩尊，便于用戶聚焦，設(shè)計(jì)表現(xiàn)形式會更豐富康辑。缺點(diǎn)是可能會過于復(fù)雜摄欲，造成信息層級混亂轿亮，增加了用戶的認(rèn)知成本。

色彩組合胸墙，就是Icon中的色彩語言我注，在設(shè)計(jì)Icon的過程中通常包括單色系的Icon，和色彩組合系列的Icon劳秋，通過不同顏色的組合傳遞產(chǎn)品的品牌形象和產(chǎn)品特質(zhì)仓手，在設(shè)計(jì)Icon的過程中，尤其是導(dǎo)航Icon的過程中不建議使用超過兩種顏色的Icon玻淑，這樣容易使用戶視覺疲勞嗽冒。

Icon特色是Icon在設(shè)計(jì)過程中的細(xì)節(jié)，這些細(xì)節(jié)是體現(xiàn)Icon自身精致的部分补履，同時(shí)也會增加用戶對于產(chǎn)品和品牌的認(rèn)知聯(lián)系添坊。增加產(chǎn)品的感性認(rèn)知，觸達(dá)用戶內(nèi)心箫锤。

下圖以“大眾點(diǎn)評”中的“拍視頻”icon做舉例說明

風(fēng)格

1贬蛙、品牌理念

2、產(chǎn)品特色

3谚攒、視覺特色

品牌理念是是指產(chǎn)品背后的定義和想要傳遞的價(jià)值阳准。通過簡介的符號、文字傳遞給用戶的認(rèn)知馏臭、理解野蝇、印象、感受括儒。品牌理念的塑造绕沈，和用戶在感性層面形成共鳴。融入品牌基因的Icon系統(tǒng)具有更好的辨識性和認(rèn)同感帮寻。這需要設(shè)計(jì)師和業(yè)務(wù)團(tuán)隊(duì)一起溝通產(chǎn)品乍狐，深入理解業(yè)務(wù)，總結(jié)出關(guān)鍵詞語表達(dá)品牌固逗，最終和業(yè)務(wù)團(tuán)隊(duì)的達(dá)成統(tǒng)一共識

產(chǎn)品特色指產(chǎn)品在同行業(yè)中的定位差異浅蚪，核型競爭力。通過簡潔的視覺語言進(jìn)行表現(xiàn)抒蚜，通常的產(chǎn)品特色體現(xiàn)在業(yè)務(wù)范圍掘鄙、用戶群體，使用場景嗡髓，產(chǎn)品功能等。在這四個(gè)個(gè)維度中中總結(jié)歸納成可落地的具體的表達(dá)關(guān)鍵詞收津，進(jìn)一步具象化饿这。

視覺特色指在競品分析中浊伙，總結(jié)得到在視覺層面其他產(chǎn)品中可以借鑒的感性共性和自己產(chǎn)品定位差異性的結(jié)合。通過可借鑒的共性傳遞行業(yè)的特點(diǎn)长捧，而差異化的視覺表現(xiàn)是突出自己產(chǎn)品特色和競爭力嚣鄙。

繼續(xù)以“拍視頻”Icon為例子進(jìn)一步解釋說明

一致性

一致性的綜合表現(xiàn)在圓角、透明度串结、線條粗細(xì) 哑子、間距、顏色肌割、層級卧蜓、漸變、特色細(xì)節(jié)

Icon的一致性有利于降低用戶的認(rèn)知成本和品牌的傳遞把敞，而Icon的非一致性會增加用戶的跳出感弥奸，降低用戶對于產(chǎn)品專業(yè)度的認(rèn)可。通常情況下可以通過以上8個(gè)維度進(jìn)行分析和提煉奋早。前五個(gè)維度大家比較好理解盛霎。重點(diǎn)解釋一下第六個(gè)維度特色細(xì)節(jié)，特色細(xì)節(jié)是設(shè)計(jì)師通過對于產(chǎn)品和業(yè)務(wù)的理解主觀加入的一些關(guān)鍵性視覺表現(xiàn)的點(diǎn)耽装，增加產(chǎn)品一致性的基因愤炸。

下圖通過對“大眾點(diǎn)評”Icon做拆解進(jìn)一步說明Icon系統(tǒng)的一致性

范圍

視覺范圍和熱區(qū)范圍

隨著Sketch的普及，更多的設(shè)計(jì)師開始采用一倍的設(shè)計(jì)畫布輸出設(shè)計(jì)方案掉奄，但在設(shè)計(jì)的過程中需要注意視覺面積和物理面積规个，兩個(gè)Icon的物理尺寸大小是一樣的，視覺感性的面積偶爾會變化挥萌。所以需要在設(shè)計(jì)完Icon之后绰姻，對Icon進(jìn)行排列，進(jìn)行視覺對比引瀑，發(fā)現(xiàn)視覺的不一致性狂芋。

熱區(qū)范圍是代碼定義的用戶可操作的交互面積，視覺是感知不到的憨栽。熱區(qū)范圍的確定有利于開發(fā)工程師和設(shè)計(jì)師達(dá)成視覺方案的一致帜矾。避免后期由于大家對于方案設(shè)計(jì)、開發(fā)理解的不同屑柔，增加后續(xù)溝通的成本屡萤。通常情況下會出現(xiàn)的問題就是1、界面開發(fā)的還原度低 2掸宛、熱區(qū)范圍過小死陆，用戶無法點(diǎn)擊 3、Icon的熱區(qū)范圍不一致。

總結(jié)

在設(shè)計(jì)的過程中措译，Icon的樣式可以借鑒别凤，但要根據(jù)自己的產(chǎn)品做形式上的調(diào)整，具體可以通過上述談到的幾個(gè)作為切入點(diǎn)調(diào)整Icon领虹。在設(shè)計(jì)的過程中避免無窮的細(xì)化规哪，因?yàn)橛行┘?xì)節(jié)用戶不會觀察到，這樣做只能是設(shè)計(jì)師的自嗨塌衰。設(shè)計(jì)師容易漏掉的是熱區(qū)范圍的確定诉稍，盡管Ios平臺和Android平臺都有對于Icon范圍的定義，但針對產(chǎn)品的調(diào)整還是要有設(shè)計(jì)師自己的想法最疆。這樣才能增加Icon設(shè)計(jì)的思考價(jià)值杯巨，也更加符合產(chǎn)品自身的特色。