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

2022-6-13    博博

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

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


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


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

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

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

超全總結(jié)!金剛區(qū)圖標(biāo)設(shè)計的 10 大風(fēng)格


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


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

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

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

超全總結(jié)!金剛區(qū)圖標(biāo)設(shè)計的 10 大風(fēng)格


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


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

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

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

超全總結(jié)!金剛區(qū)圖標(biāo)設(shè)計的 10 大風(fēng)格


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


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

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

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

超全總結(jié)!金剛區(qū)圖標(biāo)設(shè)計的 10 大風(fēng)格


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


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

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

超全總結(jié)!金剛區(qū)圖標(biāo)設(shè)計的 10 大風(fēng)格


插畫風(fēng)格的簡化融入


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

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

通常矢量風(fēng)格的插畫類圖標(biāo)比較常用,由于圖標(biāo)占比限制,不合適表現(xiàn)特別繁瑣的插畫風(fēng)格。可以是微場景的插畫表現(xiàn),或者是局部元素的插畫表達(dá),這一類圖標(biāo)風(fēng)格將會在未來被廣泛運用,以此來提高圖標(biāo)設(shè)計的視覺差異化表達(dá)。

超全總結(jié)!金剛區(qū)圖標(biāo)設(shè)計的 10 大風(fēng)格


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


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

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

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

超全總結(jié)!金剛區(qū)圖標(biāo)設(shè)計的 10 大風(fēng)格


造型疊加豐富色彩搭配


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

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

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

超全總結(jié)!金剛區(qū)圖標(biāo)設(shè)計的 10 大風(fēng)格


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


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

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

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

作者:黑馬青年

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

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

魏華的微信.png

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

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

藍(lán)藍(lán)設(shè)計m.820esy.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



更多精彩文章:

圖標(biāo)定制設(shè)計之一:6大章節(jié)!圖標(biāo)設(shè)計基礎(chǔ)知識全方位入門指南

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

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

圖標(biāo)定制設(shè)計之四:學(xué)會SVG圖標(biāo)的高級用法,界面適配效率翻一倍!

圖標(biāo)定制設(shè)計之五:研究微軟 Fluent 圖標(biāo)規(guī)范后,我總結(jié)了這9個知識點!

圖標(biāo)定制設(shè)計之六:為什么別人的圖標(biāo)設(shè)計又快又好?來看騰訊高手總結(jié)的知識點!

圖標(biāo)定制設(shè)計之七:客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

圖標(biāo)定制設(shè)計之八:從6個方面幫你快速掌握圖標(biāo)設(shè)計規(guī)范

圖標(biāo)定制設(shè)計之九:不止畫圖標(biāo)!5 個金剛區(qū)的交互設(shè)計思考





分享本文至:

日歷

鏈接

個人資料

存檔