2019-2-19 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
從不同維度對Icon設(shè)計進(jìn)行解析，整理一整套Icon設(shè)計的法則網(wǎng)絡(luò)上有很多關(guān)于Icon設(shè)計的文章，一些文章從部分維度切入講述Icon的設(shè)計理念，但大部分缺乏整體性。
所以我嘗試把自己的思考方式結(jié)合其他人的設(shè)計理念整理了一個完整的Icon設(shè)計法則，通過簡單易懂的描述語言，并且結(jié)合設(shè)計案例呈現(xiàn)出來，希望能夠?qū)Υ蠹矣兴鶐椭?。文章使用的案例只代表個人觀點，并不代表相關(guān)產(chǎn)品。
本文重點講述Icon設(shè)計思維，關(guān)于Icon的具體定義以及具體的制作過程就不再贅述，網(wǎng)絡(luò)上有很多相關(guān)文章都有講述。
從不同維度對Icon設(shè)計進(jìn)行解析，整理一整套Icon的設(shè)計法則。每一個產(chǎn)品中都有不同類型的Icon，產(chǎn)品通過Icon可以快速的向用戶傳遞語意，通過獨特的設(shè)計語言讓用戶形成對于產(chǎn)品的認(rèn)知心智。Icon的重要性就不言而喻了。
ICON的設(shè)計法則-菱形設(shè)計法則，主要包括語意、層級、設(shè)計形式、風(fēng)格、一致性、范圍。而其他的設(shè)計思考也是這個設(shè)計法則的變體，中心思想沒有發(fā)生變化。通過對以上設(shè)計思考點的聚合，來設(shè)計能夠傳遞Icon語意，并且能夠清晰展現(xiàn)產(chǎn)品結(jié)構(gòu)和信息層級的Icon系統(tǒng)，通過差異化的設(shè)計形式展現(xiàn)產(chǎn)品設(shè)計的獨特風(fēng)格，讓具有一致性的設(shè)計語言傳遞信息，和用戶形成共鳴。
層級
第一層級Icon
第二級別Icon
第三層級Icon
第一層級的Icon一般指首頁的井字入口Icon，讓用戶快速獲取入口信息，完成對產(chǎn)品流量的分流，讓用戶快速完成自己的任務(wù)。這種類型的Icon是級別最高的，無論是面積、形式感、視覺沖擊力都應(yīng)該是最突出的，這種高層級的Icon可以簡單通過一下三種方法表現(xiàn)，1、擬物化的設(shè)計方式增加視覺重心和吸引力。2、通過細(xì)節(jié)的增加呈現(xiàn)Icon設(shè)計的復(fù)雜形式感。3、采用沖擊力強(qiáng)的色彩對比，抓住用戶的關(guān)注點。除此之外具體的思考過程，后文也會詳細(xì)講述。
下圖分別是“自如” “每日優(yōu)鮮” “大眾點評”的首頁入口Icon，分別采用了擬物化設(shè)計，細(xì)節(jié)添加，色彩對比的設(shè)計方法。
第二級Icon歸納為導(dǎo)航類型的Icon，引導(dǎo)用戶操作產(chǎn)品，完成用戶的任務(wù)，同時傳遞品牌特色。這種Icon類似真實街道中的指向標(biāo)。第二層級的Icon不需要做的視覺重點非常重，能夠讓用戶認(rèn)知到，并且了解Icon傳遞的信息，在操作行為上產(chǎn)生預(yù)期就可以。通常的設(shè)計樣式是線型Icon或者是面型Icon。
下圖分別是“自如” “每日優(yōu)鮮” “大眾點評”的二級Icon系統(tǒng)
第三類Icon是語意型Icon，主要是向用戶傳遞信息，烘托信息氛圍，并且引導(dǎo)用戶瀏覽信息。這種類型的Icon視覺相對較輕，且不可點擊，具體的設(shè)計思考在后續(xù)的內(nèi)容展開。
下圖分別是“自如” “每日優(yōu)鮮” “大眾點評”的三級Icon系統(tǒng)
以上三級的劃分并不是說Icon只有這幾種類型，這樣劃分是從功能和視覺上進(jìn)行區(qū)分便于設(shè)計同學(xué)理解，當(dāng)然在具體的設(shè)計過程中也可以對Icon進(jìn)行更細(xì)化的區(qū)分，最主要根據(jù)具體的需求去定義Icon的層級，然后再采用對應(yīng)層級的設(shè)計語言。
語意
1）、Icon背后的語意(Icon的特性歸納）
2）、Icon的可識別性(Icon的特點表現(xiàn))
Icon的重要意義是抓住用戶能夠通過圖像式的語言快速獲取產(chǎn)品信息。所以在Icon的設(shè)計之前，需要思考Icon背后傳遞的文字語意，理解語意，構(gòu)建對于語意的多維拆解（比如沙發(fā)是由靠背、兩個扶手、四條腿構(gòu)成，重心要穩(wěn)，和床有哪些區(qū)別等等）。同時還需要思考Icon圖形化之后的可識別性，基于對用戶認(rèn)知的了解，歸納Icon設(shè)計中需要具體表達(dá)的幾個關(guān)鍵特點，迎合用戶的認(rèn)知心里。幫助用戶快速的獲取Icon想要傳遞的信息，如果不能快速的獲取，反而增加了用戶獲取信息的成本，那就本末倒置，削弱了用戶的使用體驗。
例：下圖是“大眾點評”二級Icon設(shè)計的語意表現(xiàn)思考方法
設(shè)計形式
1）、外形
2）、表達(dá)方式
3）、色彩組合
4）、Icon特色
外形是Icon 的基本形態(tài)，不同的形態(tài)傳遞不同的視覺感受，構(gòu)建不同的心智。同時Icon的外形決定了內(nèi)部元素的設(shè)計。
Icon的表達(dá)方式主要兩種，分別是線型Icon，面型Icon。線型Icon形式抽象、簡潔，便于用戶識別，用戶認(rèn)知成本較低，缺點是Icon容易極簡，造成了似是而非，可識別性降低。面性Icon相對線型Icon視覺重心更突出，便于用戶聚焦，設(shè)計表現(xiàn)形式會更豐富，缺點是可能會過于復(fù)雜，造成信息層級混亂，增加了用戶的認(rèn)知成本。
色彩組合，就是Icon中的色彩語言，在設(shè)計Icon的過程中通常包括單色系的Icon和色彩組合系列的Icon。通過不同顏色的組合傳遞產(chǎn)品的品牌形象和產(chǎn)品特質(zhì)，在設(shè)計Icon的過程中，尤其是導(dǎo)航Icon的過程中不建議使用超過兩種顏色的Icon，這樣容易使用戶視覺疲勞。
Icon特色是Icon在設(shè)計過程中的細(xì)節(jié)，這些細(xì)節(jié)是體現(xiàn)Icon自身精致的部分，同時也會影響用戶對于產(chǎn)品和品牌的認(rèn)知聯(lián)系。影響產(chǎn)品的感性認(rèn)知觸達(dá)用戶內(nèi)心。
例：下圖以“大眾點評”中的“拍視頻”icon做舉例說明
風(fēng)格
1）、品牌理念
2）、產(chǎn)品特色
3）、視覺特色
品牌理念是是指產(chǎn)品背后的定義和想要傳遞的價值。通過簡介的符號、文字傳遞給用戶的認(rèn)知、理解、印象、感受。通過塑造品牌理念的塑造，和用戶在感性層面形成共鳴。融入品牌基因的Icon系統(tǒng)具有更好的辨識性和認(rèn)同感。這需要設(shè)計師和業(yè)務(wù)團(tuán)隊一起溝通產(chǎn)品，深入理解業(yè)務(wù)，總結(jié)出關(guān)鍵詞語表達(dá)品牌，最終和業(yè)務(wù)團(tuán)隊達(dá)成統(tǒng)一共識。
產(chǎn)品特色指產(chǎn)品在同行業(yè)中的定位差異，核型競爭力。通過簡潔的視覺語言進(jìn)行表現(xiàn)。通常的產(chǎn)品特色體現(xiàn)在業(yè)務(wù)范圍、用戶群體，使用場景，產(chǎn)品功能等。在這四個維度中總結(jié)歸納成可落地的具體的表達(dá)關(guān)鍵詞，進(jìn)一步具象化。
視覺特色指在競品分析中，總結(jié)得到在視覺層面其他產(chǎn)品中可以借鑒的感性共性和自己產(chǎn)品定位差異性的結(jié)合。通過可借鑒的共性傳遞行業(yè)的特點，而差異化的視覺表現(xiàn)可突出自己產(chǎn)品的特色和競爭力。
例：繼續(xù)以“拍視頻”Icon為例子進(jìn)一步解釋說明
一致性
一致性的綜合表現(xiàn)在圓角、透明度、線條粗細(xì) 、間距、顏色、層級、漸變、特色細(xì)節(jié)。
Icon的一致性有利于降低用戶的認(rèn)知成本，便于品牌傳遞，而Icon的非一致性會增加用戶的跳出感，降低用戶對于產(chǎn)品專業(yè)度的認(rèn)可。通常情況下可以通過以上8個維度進(jìn)行分析和提煉。前七個維度大家比較好理解。重點解釋一下第八個維度“特色細(xì)節(jié)”，特色細(xì)節(jié)是設(shè)計師通過對于產(chǎn)品和業(yè)務(wù)的理解主觀加入的一些關(guān)鍵性視覺表現(xiàn)的點，增加產(chǎn)品一致性的基因，可能是斷線，尖角，原點等等標(biāo)志性元素。
例：下圖通過對“大眾點評”Icon做拆解進(jìn)一步從六個維度說明Icon系統(tǒng)的一致性（并不是說每一個icon的設(shè)計必須包含八個維度）
范圍
視覺范圍和熱區(qū)范圍
隨著Sketch的普及，更多的設(shè)計師開始采用一倍的設(shè)計畫布輸出設(shè)計方案，但在設(shè)計的過程中需要注意視覺面積和物理面積，兩個Icon的物理尺寸大小是一樣的，視覺感性的面積偶爾會變化。所以需要在設(shè)計完Icon之后，對Icon進(jìn)行排列，進(jìn)行視覺對比，發(fā)現(xiàn)視覺的不一致性。
熱區(qū)范圍是代碼定義的用戶可操作的交互面積，視覺是感知不到的。熱區(qū)范圍的確定有利于開發(fā)工程師和設(shè)計師達(dá)成視覺方案的一致。避免后期由于大家對于方案設(shè)計、開發(fā)理解的不同，增加后續(xù)溝通的成本。通常情況下會出現(xiàn)的問題就是
1、界面開發(fā)的還原度低
2、熱區(qū)范圍過小，用戶無法點擊
3、Icon的熱區(qū)范圍不一致。
總結(jié)
在設(shè)計的過程中，Icon的樣式可以借鑒，但要根據(jù)自己的產(chǎn)品做形式上的調(diào)整，具體可以通過上述談到的幾個維度作為切入點調(diào)整Icon。同時在設(shè)計的過程中避免無窮的細(xì)化，因為有些細(xì)節(jié)用戶根本不會觀察到，這樣做只能是設(shè)計師的自嗨。設(shè)計師容易漏掉的是熱區(qū)范圍的確定，盡管Ios平臺和Android平臺都有對于Icon范圍的定義，但針對產(chǎn)品的icon熱區(qū)范圍調(diào)整還是要有設(shè)計師自己的想法。這樣才能增加Icon設(shè)計的思考價值，也更符合產(chǎn)品自身的特色。
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com
