金剛區(qū)作為產(chǎn)品功能架構(gòu)重要的組成部分，是設(shè)計(jì)師重點(diǎn)發(fā)揮的區(qū)域，也是風(fēng)格切換最為活躍的。而金剛區(qū)圖標(biāo)是最重要的表現(xiàn)對(duì)象，設(shè)計(jì)師在圖標(biāo)設(shè)計(jì)上面耗費(fèi)心力，出現(xiàn)了豐富多樣的視覺(jué)表現(xiàn)風(fēng)格。

體驗(yàn)了眾多產(chǎn)品之后，黑馬哥為大家精選了金剛區(qū)圖標(biāo)設(shè)計(jì)最突出的 10 個(gè)風(fēng)格，通過(guò)這些案例帶給大家感官體驗(yàn)層面的更多靈感啟發(fā)。

晶白風(fēng)格的扁平突破

晶白風(fēng)格是通過(guò)白色質(zhì)感來(lái)實(shí)現(xiàn)的，通過(guò)對(duì)圖標(biāo)元素進(jìn)行透明度變化、投影、內(nèi)陰影、外發(fā)光等進(jìn)行設(shè)計(jì)，使得更有層次感。

相較于扁平化的圖標(biāo)設(shè)計(jì)來(lái)說(shuō)，晶白風(fēng)格更有層次感和質(zhì)感，作為金剛區(qū)圖標(biāo)設(shè)計(jì)運(yùn)用非常普遍。除了通過(guò)白色不透明度漸變來(lái)實(shí)現(xiàn)以外，也會(huì)隨著背景或者環(huán)境色的變化融入色彩渲染，呈現(xiàn)出更豐富的設(shè)計(jì)細(xì)節(jié)。

晶白風(fēng)格圖標(biāo)就是通過(guò)兩端白色漸變，配合兩端顏色不透明度來(lái)進(jìn)行深淺控制，也可以通過(guò)內(nèi)陰影和外發(fā)光等來(lái)增強(qiáng)質(zhì)感。眾多設(shè)計(jì)軟件都可以實(shí)現(xiàn)，靈活性非常高。

磨砂玻璃質(zhì)感的運(yùn)用

磨砂玻璃質(zhì)感的設(shè)計(jì)表現(xiàn)是近些年較為流行的設(shè)計(jì)趨勢(shì)，被廣泛運(yùn)用到視覺(jué)設(shè)計(jì)的眾多領(lǐng)域。在 UI 場(chǎng)景中作為視覺(jué)感強(qiáng)化被普遍應(yīng)用，其中在圖標(biāo)設(shè)計(jì)上的表現(xiàn)尤為突出，呈現(xiàn)出了眾多的優(yōu)秀案例。

金剛區(qū)作為產(chǎn)品架構(gòu)中的重要組成部分，也是更新較為活躍的部分，對(duì)于視覺(jué)感的要求非常重要。磨砂玻璃質(zhì)感的圖標(biāo)很多產(chǎn)品都會(huì)階段性使用，也是因?yàn)檫@一類(lèi)風(fēng)格具有典型的特點(diǎn)和視覺(jué)張力，能夠形成比較大的視覺(jué)差異，帶給用戶不錯(cuò)的感官體驗(yàn)。

磨砂玻璃質(zhì)感圖標(biāo)可以通過(guò) Sketch、Figma 等軟件的背景模糊功能實(shí)現(xiàn)；如果是 PS 和 AI 等沒(méi)有背景模糊功能的軟件，則可以通過(guò)模糊度結(jié)合剪切蒙版來(lái)實(shí)現(xiàn)。實(shí)現(xiàn)的方法很多，大家可以多多嘗試，這是一類(lèi)比較容易掌握的圖標(biāo)風(fēng)格。

強(qiáng)化圖標(biāo)微質(zhì)感的深入

圖標(biāo)設(shè)計(jì)從寫(xiě)實(shí)到扁平，再到微質(zhì)感，都在不同的時(shí)期進(jìn)行改變，通過(guò)風(fēng)格的優(yōu)化避免用戶的視覺(jué)疲勞。寫(xiě)實(shí)類(lèi)圖標(biāo)視覺(jué)疲勞度較大，在年輕化的趨勢(shì)中顯得過(guò)于繁瑣，而介于寫(xiě)實(shí)和扁平之間的微質(zhì)感被深入探索。

微質(zhì)感的深入可以使得圖標(biāo)風(fēng)格突出，質(zhì)感和層次感強(qiáng)化了圖標(biāo)的立體空間感，在整個(gè)界面中可以形成視覺(jué)差異?？梢泽w現(xiàn)出模塊的重要性，也是圖標(biāo)設(shè)計(jì)感體現(xiàn)的一種方向。

通過(guò)漸變色、不透明度漸變、投影、內(nèi)陰影等形成層次變化和光影效果，多圖層刻畫(huà)來(lái)強(qiáng)化圖標(biāo)質(zhì)感和層次感。

2.5D 風(fēng)格的巧妙結(jié)合

2.5D 也稱(chēng)之為偽三維，在前兩年非常流行，作為插畫(huà)風(fēng)格延伸出來(lái)的，當(dāng)時(shí) 2.5D 插畫(huà)被普遍運(yùn)用到眾多領(lǐng)域。把一個(gè)獨(dú)立元素作為原子，通過(guò)原子的數(shù)量分布形成 2.5D 場(chǎng)景。

將 2.5D 風(fēng)格結(jié)合到圖標(biāo)設(shè)計(jì)中，可以使得圖標(biāo)更容易形成立體感，設(shè)計(jì)師不會(huì)受制于透視基礎(chǔ)的薄弱。無(wú)論是 C 端還是 B 端場(chǎng)景中的金剛區(qū)圖標(biāo)都比較適合，很容易基于簡(jiǎn)單的立體造型上設(shè)計(jì)出豐富的變化。比如結(jié)合玻璃質(zhì)感、微動(dòng)效或者其他設(shè)計(jì)趨勢(shì)均可，設(shè)計(jì)的駕馭度很高。

2.5D 風(fēng)格的圖標(biāo)很容易掌握，只要繪制好基礎(chǔ)原子部分，就可以演變形成各式各樣的 2.5D 造型?？梢酝ㄟ^(guò) AI 軟件的 3D 功能輕松繪制，大部分場(chǎng)景都是基于立方體、圓柱體等基礎(chǔ)造型進(jìn)行變形。

三維的立體感強(qiáng)化

三維類(lèi)的圖標(biāo)設(shè)計(jì)相較于 2.5D 風(fēng)格來(lái)說(shuō)，空間感和透視角度更加深入，光影的變化更加豐富。圖標(biāo)設(shè)計(jì)中的三維立體感強(qiáng)化，對(duì)于設(shè)計(jì)師的要求更高，掌握一個(gè)三維軟件需要一定的學(xué)習(xí)成本。

隨著 C4D 等三維軟件的走熱，掀起了一股學(xué)習(xí)熱潮，被運(yùn)用到金剛區(qū)圖標(biāo)設(shè)計(jì)中，帶來(lái)的視覺(jué)效果也是非常不錯(cuò)的。較強(qiáng)的空間立體感和光影效果，在界面中的視覺(jué)呈現(xiàn)尤為突出，也能帶給用戶更好的感官體驗(yàn)。

插畫(huà)風(fēng)格的簡(jiǎn)化融入

隨著用戶對(duì)于感官體驗(yàn)的升級(jí)，風(fēng)格特征的差異化體驗(yàn)至關(guān)重要，而插畫(huà)風(fēng)格的融入可以提升圖標(biāo)設(shè)計(jì)的特征感。

插畫(huà)風(fēng)格運(yùn)用到圖標(biāo)設(shè)計(jì)中，需要做簡(jiǎn)化處理，可以是插畫(huà)的局部元素或者簡(jiǎn)化后的小場(chǎng)景插畫(huà)。風(fēng)格多樣的插畫(huà)風(fēng)格也會(huì)延續(xù)到圖標(biāo)中，不僅可以使得圖標(biāo)具備差異化的視覺(jué)效果，也能烘托出整體設(shè)計(jì)的質(zhì)量。

通常矢量風(fēng)格的插畫(huà)類(lèi)圖標(biāo)比較常用，由于圖標(biāo)占比限制，不合適表現(xiàn)特別繁瑣的插畫(huà)風(fēng)格?？梢允俏?chǎng)景的插畫(huà)表現(xiàn)，或者是局部元素的插畫(huà)表達(dá)，這一類(lèi)圖標(biāo)風(fēng)格將會(huì)在未來(lái)被廣泛運(yùn)用，以此來(lái)提高圖標(biāo)設(shè)計(jì)的視覺(jué)差異化表達(dá)。

立足于品牌的圖標(biāo)設(shè)計(jì)

立足于品牌做設(shè)計(jì)，這是設(shè)計(jì)師需要深入探索的方向，而金剛區(qū)圖標(biāo)設(shè)計(jì)亦是如此。品牌基因融入到圖標(biāo)設(shè)計(jì)中，可以輔助突出產(chǎn)品的品牌感，也能形成設(shè)計(jì)表達(dá)的差異化。

品牌基因化的圖標(biāo)設(shè)計(jì)具備一定的特征性，也是視覺(jué)差異化的一種形式。通常的做法有將品牌色全部融入圖標(biāo)中，或者品牌色作為圖標(biāo)配色點(diǎn)綴；也可以提取品牌 LOGO 輔助圖形形成基因圖形，融入到圖標(biāo)造型設(shè)計(jì)中；也有結(jié)合吉祥物來(lái)突出品牌感的，融入吉祥物造型、局部圖形、輪廓圖形等；如果圖形角度無(wú)法提煉，也有提取品牌文化、服務(wù)特征、用戶群體特征、行業(yè)特征等，從中提煉關(guān)聯(lián)性的圖形融入圖標(biāo)設(shè)計(jì)中，以此來(lái)強(qiáng)化品牌感。

品牌作為設(shè)計(jì)的思考起點(diǎn)，不僅可以輸出差異化的設(shè)計(jì)作品，也能串聯(lián)起整個(gè)項(xiàng)目設(shè)計(jì)的規(guī)范。

造型疊加豐富色彩搭配

如果覺(jué)得質(zhì)感一類(lèi)圖標(biāo)表現(xiàn)力比較繁瑣，但是又不想只是簡(jiǎn)單的線性或者面性圖標(biāo)，造型疊加和配色疊加形成的圖標(biāo)風(fēng)格算是介于兩者之間的存在。

通過(guò)圖形之間疊加豐富圖標(biāo)造型，疊加部分配色的調(diào)節(jié)豐富圖標(biāo)色彩搭配，形成的圖標(biāo)風(fēng)格比較年輕化。視覺(jué)效果也是深受年輕用戶的喜歡，帶來(lái)不錯(cuò)的感官體驗(yàn)。

這一類(lèi)風(fēng)格的圖標(biāo)可以通過(guò)布爾運(yùn)算設(shè)計(jì)圖形部分，顏色的疊加效果可以通過(guò)圖層樣式實(shí)現(xiàn)，也有一些是圖形分割之后進(jìn)行分別著色的。通常疊加部分的顏色會(huì)往更深的方向延伸，大家可以嘗試不同的形式去進(jìn)行配色，選擇符合主題的圖標(biāo)配色效果。

動(dòng)效圖標(biāo)強(qiáng)化局部差異

微動(dòng)效運(yùn)用到圖標(biāo)設(shè)計(jì)中尤為普及，特別是在金剛區(qū)模塊，可以作為突出功能的強(qiáng)化。動(dòng)效圖標(biāo)已經(jīng)成為一種獨(dú)特的表現(xiàn)力，相較于靜態(tài)來(lái)說(shuō)更有吸引力，也能帶給用戶更加趣味性的感官體驗(yàn)。

在金剛區(qū)模塊中，動(dòng)效圖標(biāo)通常是用于區(qū)別特殊功能，或者需要重點(diǎn)突出的服務(wù)或者主題活動(dòng)等。不改變整體圖標(biāo)的風(fēng)格，只是動(dòng)態(tài)和靜態(tài)的區(qū)分，需要個(gè)別做動(dòng)效，形成表現(xiàn)力的差異才能達(dá)到重點(diǎn)突出的目的。

作為設(shè)計(jì)師來(lái)說(shuō)，動(dòng)效也是需要掌握的基礎(chǔ)技能，可以提高我們的設(shè)計(jì)表現(xiàn)力，也能將交互動(dòng)作表達(dá)得更清楚。

作者：黑馬青年

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

更多精彩文章：

圖標(biāo)定制設(shè)計(jì)之一：6大章節(jié)！圖標(biāo)設(shè)計(jì)基礎(chǔ)知識(shí)全方位入門(mén)指南

圖標(biāo)定制設(shè)計(jì)之二：超全總結(jié)！金剛區(qū)圖標(biāo)設(shè)計(jì)的 10 大風(fēng)格

圖標(biāo)定制設(shè)計(jì)之三：想讓圖標(biāo)更精致？先掌握這11個(gè)容易忽略的設(shè)計(jì)細(xì)節(jié)！

圖標(biāo)定制設(shè)計(jì)之四：學(xué)會(huì)SVG圖標(biāo)的高級(jí)用法，界面適配效率翻一倍！

圖標(biāo)定制設(shè)計(jì)之五：研究微軟 Fluent 圖標(biāo)規(guī)范后，我總結(jié)了這9個(gè)知識(shí)點(diǎn)！

圖標(biāo)定制設(shè)計(jì)之六：為什么別人的圖標(biāo)設(shè)計(jì)又快又好？來(lái)看騰訊高手總結(jié)的知識(shí)點(diǎn)！

圖標(biāo)定制設(shè)計(jì)之七：客戶說(shuō)B端圖標(biāo)太普通沒(méi)新意，該怎么解決？

圖標(biāo)定制設(shè)計(jì)之八：從6個(gè)方面幫你快速掌握?qǐng)D標(biāo)設(shè)計(jì)規(guī)范

圖標(biāo)定制設(shè)計(jì)之九：不止畫(huà)圖標(biāo)！5 個(gè)金剛區(qū)的交互設(shè)計(jì)思考

圖標(biāo)定制設(shè)計(jì)之十：這6種類(lèi)型的菜單圖標(biāo)和用法，這篇全總結(jié)了！