首頁(yè) >
熱門(mén)文章 >
UI設(shè)計(jì) > UI設(shè)計(jì)中那些創(chuàng)意的圖標(biāo)怎么做
UI設(shè)計(jì)中那些創(chuàng)意的圖標(biāo)怎么做
時(shí)間：2020-12-11來(lái)源：5wd995.cn點(diǎn)擊量：次作者：Gella
時(shí)間：2020-12-11點(diǎn)擊量：次作者：Gella
無(wú)論是軟件標(biāo)識(shí)類(lèi)圖標(biāo)還是功能標(biāo)識(shí)類(lèi)圖標(biāo)，都需要講究“創(chuàng)意”。
當(dāng)設(shè)計(jì)師拿到一個(gè)圖標(biāo)項(xiàng)目時(shí)，可以從卡通形象化、關(guān)鍵詞圖形化和字體直觀化3個(gè)方向來(lái)思考創(chuàng)意點(diǎn)，但是每個(gè)創(chuàng)意方向都應(yīng)該遵循簡(jiǎn)潔性和易識(shí)別性?xún)纱蠡驹瓌t。
優(yōu)秀的圖標(biāo)設(shè)計(jì)不僅擁有自己的特色，而且能清晰地表現(xiàn)出信息內(nèi)容，以最簡(jiǎn)潔的圖形體現(xiàn)最明確的主題。
圖標(biāo)創(chuàng)意
1.卡通形象化
大多數(shù)產(chǎn)品都會(huì)為自己打造一個(gè)卡通形象，通過(guò)角色的表現(xiàn)來(lái)讓用戶(hù)記住自己的產(chǎn)品。
例如：我們一看到企鵝圖標(biāo)就會(huì)想到QQ，看到黑貓與紅背景的組合就會(huì)想到天貓，看到黃色的獅子就會(huì)想到蘇寧，如圖所
卡通形象化的圖標(biāo)
2.關(guān)鍵詞圖形化
利用功能關(guān)鍵詞設(shè)計(jì)一個(gè)能體現(xiàn)產(chǎn)品的圖標(biāo)，是圖標(biāo)設(shè)計(jì)中一個(gè)非常重要的創(chuàng)意點(diǎn)。
這種類(lèi)型的圖標(biāo)在設(shè)計(jì)時(shí)需要注意簡(jiǎn)潔性與造型的獨(dú)特性，不要過(guò)多添加細(xì)節(jié)，因?yàn)槿绻麍D形過(guò)于復(fù)雜，用在小尺寸的場(chǎng)景中可能會(huì)無(wú)法看清楚。
我們可以看到微信、QQ音樂(lè)和陌陌的圖標(biāo)設(shè)計(jì)都是很簡(jiǎn)潔的，但每個(gè)輪廓、每個(gè)弧度和每個(gè)轉(zhuǎn)角都進(jìn)行了精細(xì)的打磨，最終才得到了讓大眾認(rèn)可的圖標(biāo)，如圖所示。
關(guān)鍵詞圖形化的圖標(biāo)
3.字體直觀化
專(zhuān)注于產(chǎn)品名稱(chēng)的打造，利用名稱(chēng)中的關(guān)鍵字進(jìn)行設(shè)計(jì)是圖標(biāo)設(shè)計(jì)中的又一大創(chuàng)意點(diǎn)。因?yàn)閷⑽淖种苯釉O(shè)計(jì)成圖標(biāo)是獨(dú)一無(wú)二的，既直接明了，又令人印象深刻。
有很多產(chǎn)品會(huì)用英文首字母或中文名稱(chēng)中的第一個(gè)字來(lái)設(shè)計(jì)主圖標(biāo)，當(dāng)大家看到這樣的圖標(biāo)時(shí)，立刻就能識(shí)別出這是哪個(gè)APP，如圖所示。
字體直觀化的圖標(biāo)
圖標(biāo)類(lèi)型
從表達(dá)形式上來(lái)講，圖標(biāo)分為像素圖標(biāo)、擬物化圖標(biāo)、扁平化圖標(biāo)、線性圖標(biāo)和立體圖標(biāo)。
無(wú)論是什么類(lèi)型的圖標(biāo)，其表現(xiàn)方式一定要遵循統(tǒng)一性和識(shí)別性。圖標(biāo)的常規(guī)制作思路是先以功能信息提煉出圖形語(yǔ)言，然后對(duì)細(xì)節(jié)進(jìn)行刻畫(huà)。
1.像素圖標(biāo)
像素圖標(biāo)是一種以像素為基本單位制作的插圖(屬于位圖)，也可以稱(chēng)為“像素畫(huà)”。
在生活中隨處都可以見(jiàn)由點(diǎn)陣式小燈組成的熒光屏，如圖所示。這種熒光屏具有一個(gè)明顯的特征，就是輪廓非常清晰，像素圖標(biāo)的原理其實(shí)和這個(gè)點(diǎn)陣熒光屏是相同的。
熒光屏
以前像素化圖標(biāo)主要運(yùn)用在網(wǎng)頁(yè)設(shè)計(jì)中，現(xiàn)在更多地運(yùn)用在一些智能設(shè)備上，如手表、電子硬件等。
像素圖標(biāo)的設(shè)計(jì)比較簡(jiǎn)約，易讀性也比較高，所以很多時(shí)候會(huì)用來(lái)代替復(fù)雜的圖形元素或信息，如圖所示。在制作像素圖標(biāo)的時(shí)候需要注意的是像素的清晰度。
像素圖標(biāo)
2.擬物化圖標(biāo)
擬物化圖標(biāo)在iOS6的時(shí)候發(fā)展到了最高峰，材質(zhì)、光影的表現(xiàn)是擬物化圖標(biāo)的核心理念。蘋(píng)果iOS6有一個(gè)非常優(yōu)秀的設(shè)計(jì)細(xì)節(jié)，那就是滑竿上的圓形金屬按鈕，如圖所示。
這個(gè)按鈕不僅表現(xiàn)出了金屬的材質(zhì)，而且在傾斜手機(jī)的時(shí)候還會(huì)像真正的金屬一樣改變光澤。這是追求擬物化設(shè)計(jì)的最高境界，在最大程度上還原了真實(shí)環(huán)境。
擬物化圖標(biāo)
擬物化圖標(biāo)的最大優(yōu)勢(shì)就是識(shí)別性很強(qiáng)，就算是老年用戶(hù)也能一眼看明白其代表的意思，如圖所示。
雖然擬物化圖標(biāo)的識(shí)別性很強(qiáng)，但是它有一個(gè)致命的缺點(diǎn)，就是這種圖標(biāo)不太適用于界面整體的功能化展示，而且制作成本很高，需要花大量的時(shí)間來(lái)設(shè)計(jì)視覺(jué)上的陰影和質(zhì)感。
認(rèn)知性很強(qiáng)的擬物化圖標(biāo)
在擬物化設(shè)計(jì)轉(zhuǎn)為扁平化設(shè)計(jì)的過(guò)程中，為了平衡設(shè)計(jì)效率與視覺(jué)效果，演變出了一種“微質(zhì)感化”的設(shè)計(jì)，也就是用盡可能少的樣式來(lái)表現(xiàn)圖標(biāo)的質(zhì)感，如圖所示。
微質(zhì)感化設(shè)計(jì)
3.扁平化圖標(biāo)
現(xiàn)在的界面設(shè)計(jì)越來(lái)越注重簡(jiǎn)潔性，扁平化圖標(biāo)也就變成了界面圖標(biāo)的主導(dǎo)形式。扁平化圖標(biāo)看似簡(jiǎn)單，但是對(duì)于初學(xué)者而言，要把控好形體還是比較困難的。
把控不好形體就會(huì)導(dǎo)致設(shè)計(jì)出來(lái)的圖標(biāo)不夠美觀或是不能直接表達(dá)出圖標(biāo)所蘊(yùn)含的寓意。另外，扁平化圖標(biāo)還需要將關(guān)鍵形狀刻畫(huà)到結(jié)構(gòu)上，這一點(diǎn)也很考驗(yàn)設(shè)計(jì)師的能力，如圖所示。
將復(fù)雜圖標(biāo)簡(jiǎn)化為簡(jiǎn)潔圖標(biāo)
因?yàn)楸馄交瘓D標(biāo)造型簡(jiǎn)單，易識(shí)別，經(jīng)常應(yīng)用在界面和菜單欄中。在繪制這類(lèi)圖標(biāo)時(shí)一定要注意外觀的統(tǒng)一性和識(shí)別性。很多新手設(shè)計(jì)師會(huì)通過(guò)網(wǎng)絡(luò)去下載圖標(biāo)素材，東拼西湊成一套圖標(biāo)，這不僅降低了界面的檔次，而且很難統(tǒng)一圖標(biāo)的整體風(fēng)格。
如圖所示的這些圖標(biāo)從單個(gè)來(lái)看都沒(méi)有問(wèn)題，但是放在一起后就很凌亂了，風(fēng)格不統(tǒng)一是圖標(biāo)設(shè)計(jì)中的一大忌諱。
風(fēng)格不統(tǒng)一的圖標(biāo)
扁平化圖標(biāo)分為面式圖標(biāo)和線式圖標(biāo)兩種類(lèi)型。面式圖標(biāo)需要注意形狀的圓角和黑白面積，在繪制的時(shí)候一定要把握好形狀的輪廓造型，如圖1所示;線式圖標(biāo)需要統(tǒng)一線條的寬度以及線段的連接方式等，如圖2所示。
圖2：線式圖標(biāo)
面式圖標(biāo)由于填充面積比較大，整體會(huì)顯得比較飽滿(mǎn)，視覺(jué)平衡度也比較高。而線式圖標(biāo)的優(yōu)勢(shì)是比較有設(shè)計(jì)感，在視覺(jué)上顯得更輕盈，同時(shí)拓展性也比較好。在我們常見(jiàn)的iOS系統(tǒng)中，經(jīng)常會(huì)將正(面式)負(fù)(線式)圖標(biāo)當(dāng)成選中和未選中的狀態(tài)，如圖所示。
正負(fù)圖標(biāo)表示的選擇狀態(tài)
4.線性圖標(biāo)
現(xiàn)在的圖標(biāo)設(shè)計(jì)越來(lái)越簡(jiǎn)潔，因此線性圖標(biāo)就應(yīng)運(yùn)而生，界面的底部標(biāo)簽欄、導(dǎo)航功能按鈕和分類(lèi)按鈕經(jīng)常會(huì)使用線性風(fēng)格的圖標(biāo)來(lái)表現(xiàn)，如圖所示。
線性圖標(biāo)
5.立體圖標(biāo)
很多界面的表現(xiàn)形式需要體現(xiàn)空間感，于是就有了立體圖標(biāo)。立體感的圖標(biāo)更有層次，并且在視覺(jué)上更耐看，經(jīng)常出現(xiàn)在網(wǎng)頁(yè)界面設(shè)計(jì)和專(zhuān)題頁(yè)面設(shè)計(jì)中，如圖所示。
立體圖標(biāo)并非真實(shí)的3D效果，而是通過(guò)明暗面的劃分來(lái)產(chǎn)生體積感，制作起來(lái)很考驗(yàn)設(shè)計(jì)師對(duì)圖形透視和結(jié)構(gòu)的把控能力。
立體圖標(biāo)
只要掌握了設(shè)計(jì)要點(diǎn)，圖標(biāo)設(shè)計(jì)并不算很難。
熱門(mén)推薦
UI設(shè)計(jì)
產(chǎn)品經(jīng)理
大數(shù)據(jù)分析
原畫(huà)設(shè)計(jì)
平面設(shè)計(jì)
新媒體運(yùn)營(yíng) 
