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