超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

從不同維度對(duì)Icon設(shè)計(jì)進(jìn)行解析，整理一整套Icon設(shè)計(jì)的法則

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

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

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

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

ICON的設(shè)計(jì)法則-菱形設(shè)計(jì)法則，主要包括語(yǔ)意、層級(jí)、設(shè)計(jì)形式、風(fēng)格、一致性、范圍。而其他的設(shè)計(jì)思考也是這個(gè)設(shè)計(jì)法則的變體，中心思想沒(méi)有發(fā)生變化。通過(guò)對(duì)以上設(shè)計(jì)思考點(diǎn)的聚合，來(lái)設(shè)計(jì)能夠傳遞Icon語(yǔ)意，并且能夠清晰展現(xiàn)產(chǎn)品結(jié)構(gòu)和信息層級(jí)的Icon系統(tǒng)，通過(guò)差異化的設(shè)計(jì)形式展現(xiàn)產(chǎn)品設(shè)計(jì)的獨(dú)特風(fēng)格，讓具有一致性的設(shè)計(jì)語(yǔ)言傳遞信息，和用戶形成共鳴。

層級(jí)

第一層級(jí)Icon

第二級(jí)別Icon

第三層級(jí)Icon

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

下圖分別是“自如” “每日優(yōu)鮮” “大眾點(diǎn)評(píng)”的首頁(yè)入口Icon，分別采用了擬物化設(shè)計(jì)，細(xì)節(jié)添加，色彩對(duì)比的設(shè)計(jì)方法。

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

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

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

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

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

語(yǔ)意    

1）、Icon背后的語(yǔ)意(Icon的特性歸納）

2）、Icon的可識(shí)別性(Icon的特點(diǎn)表現(xiàn))

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

例：下圖是“大眾點(diǎn)評(píng)”二級(jí)Icon設(shè)計(jì)的語(yǔ)意表現(xiàn)思考方法

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

1）、外形

2）、表達(dá)方式

3）、色彩組合

4）、Icon特色

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

Icon的表達(dá)方式主要兩種，分別是線型Icon，面型Icon。線型Icon形式抽象、簡(jiǎn)潔，便于用戶識(shí)別，用戶認(rèn)知成本較低，缺點(diǎn)是Icon容易極簡(jiǎn)，造成了似是而非，可識(shí)別性降低。面性Icon相對(duì)線型Icon視覺(jué)重心更突出，便于用戶聚焦，設(shè)計(jì)表現(xiàn)形式會(huì)更豐富，缺點(diǎn)是可能會(huì)過(guò)于復(fù)雜，造成信息層級(jí)混亂，增加了用戶的認(rèn)知成本。

色彩組合，就是Icon中的色彩語(yǔ)言，在設(shè)計(jì)Icon的過(guò)程中通常包括單色系的Icon和色彩組合系列的Icon。通過(guò)不同顏色的組合傳遞產(chǎn)品的品牌形象和產(chǎn)品特質(zhì)，在設(shè)計(jì)Icon的過(guò)程中，尤其是導(dǎo)航Icon的過(guò)程中不建議使用超過(guò)兩種顏色的Icon，這樣容易使用戶視覺(jué)疲勞。

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

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

風(fēng)格

1）、品牌理念

2）、產(chǎn)品特色

3）、視覺(jué)特色

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

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

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

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

一致性

一致性的綜合表現(xiàn)在圓角、透明度、線條粗細(xì) 、間距、顏色、層級(jí)、漸變、特色細(xì)節(jié)。

Icon的一致性有利于降低用戶的認(rèn)知成本，便于品牌傳遞，而Icon的非一致性會(huì)增加用戶的跳出感，降低用戶對(duì)于產(chǎn)品專業(yè)度的認(rèn)可。通常情況下可以通過(guò)以上8個(gè)維度進(jìn)行分析和提煉。前七個(gè)維度大家比較好理解。重點(diǎn)解釋一下第八個(gè)維度“特色細(xì)節(jié)”，特色細(xì)節(jié)是設(shè)計(jì)師通過(guò)對(duì)于產(chǎn)品和業(yè)務(wù)的理解主觀加入的一些關(guān)鍵性視覺(jué)表現(xiàn)的點(diǎn)，增加產(chǎn)品一致性的基因，可能是斷線，尖角，原點(diǎn)等等標(biāo)志性元素。

例：下圖通過(guò)對(duì)“大眾點(diǎn)評(píng)”Icon做拆解進(jìn)一步從六個(gè)維度說(shuō)明Icon系統(tǒng)的一致性（并不是說(shuō)每一個(gè)icon的設(shè)計(jì)必須包含八個(gè)維度）

范圍

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

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

熱區(qū)范圍是代碼定義的用戶可操作的交互面積，視覺(jué)是感知不到的。熱區(qū)范圍的確定有利于開(kāi)發(fā)工程師和設(shè)計(jì)師達(dá)成視覺(jué)方案的一致。避免后期由于大家對(duì)于方案設(shè)計(jì)、開(kāi)發(fā)理解的不同，增加后續(xù)溝通的成本。通常情況下會(huì)出現(xiàn)的問(wèn)題就是

1、界面開(kāi)發(fā)的還原度低

2、熱區(qū)范圍過(guò)小，用戶無(wú)法點(diǎn)擊

3、Icon的熱區(qū)范圍不一致。

總結(jié)

在設(shè)計(jì)的過(guò)程中，Icon的樣式可以借鑒，但要根據(jù)自己的產(chǎn)品做形式上的調(diào)整，具體可以通過(guò)上述談到的幾個(gè)維度作為切入點(diǎn)調(diào)整Icon。同時(shí)在設(shè)計(jì)的過(guò)程中避免無(wú)窮的細(xì)化，因?yàn)橛行┘?xì)節(jié)用戶根本不會(huì)觀察到，這樣做只能是設(shè)計(jì)師的自嗨。設(shè)計(jì)師容易漏掉的是熱區(qū)范圍的確定，盡管Ios平臺(tái)和Android平臺(tái)都有對(duì)于Icon范圍的定義，但針對(duì)產(chǎn)品的icon熱區(qū)范圍調(diào)整還是要有設(shè)計(jì)師自己的想法。這樣才能增加Icon設(shè)計(jì)的思考價(jià)值，也更符合產(chǎn)品自身的特色。

藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。