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