UI設(shè)計師，怎樣才能設(shè)計出有創(chuàng)意的圖標(biāo)？

時間：2023-10-05 10:06:02 | 來源：網(wǎng)站運營

時間：2023-10-05 10:06:02 來源：網(wǎng)站運營

UI設(shè)計師，怎樣才能設(shè)計出有創(chuàng)意的圖標(biāo)？：




無論是軟件標(biāo)識類圖標(biāo)還是功能標(biāo)識類圖標(biāo)，都需要講究“創(chuàng)意”。




當(dāng)設(shè)計師拿到一個圖標(biāo)項目時，可以從卡通形象化、關(guān)鍵詞圖形化和字體直觀化3個方向來思考創(chuàng)意點，但是每個創(chuàng)意方向都應(yīng)該遵循簡潔性和易識別性兩大基本原則。




優(yōu)秀的圖標(biāo)設(shè)計不僅擁有自己的特色，而且能清晰地表現(xiàn)出信息內(nèi)容，以最簡潔的圖形體現(xiàn)最明確的主題。







圖標(biāo)創(chuàng)意







1.卡通形象化

大多數(shù)產(chǎn)品都會為自己打造一個卡通形象，通過角色的表現(xiàn)來讓用戶記住自己的產(chǎn)品。




例如：我們一看到企鵝圖標(biāo)就會想到QQ，看到黑貓與紅背景的組合就會想到天貓，看到黃色的獅子就會想到蘇寧，如圖所示

卡通形象化的圖標(biāo)




2.關(guān)鍵詞圖形化

利用功能關(guān)鍵詞設(shè)計一個能體現(xiàn)產(chǎn)品的圖標(biāo)，是圖標(biāo)設(shè)計中一個非常重要的創(chuàng)意點。




這種類型的圖標(biāo)在設(shè)計時需要注意簡潔性與造型的獨特性，不要過多添加細(xì)節(jié)，因為如果圖形過于復(fù)雜，用在小尺寸的場景中可能會無法看清楚。




我們可以看到微信、QQ音樂和陌陌的圖標(biāo)設(shè)計都是很簡潔的，但每個輪廓、每個弧度和每個轉(zhuǎn)角都進(jìn)行了精細(xì)的打磨，最終才得到了讓大眾認(rèn)可的圖標(biāo)，如圖所示。

關(guān)鍵詞圖形化的圖標(biāo)




3.字體直觀化

專注于產(chǎn)品名稱的打造，利用名稱中的關(guān)鍵字進(jìn)行設(shè)計是圖標(biāo)設(shè)計中的又一大創(chuàng)意點。因為將文字直接設(shè)計成圖標(biāo)是獨一無二的，既直接明了，又令人印象深刻。




有很多產(chǎn)品會用英文首字母或中文名稱中的第一個字來設(shè)計主圖標(biāo)，當(dāng)大家看到這樣的圖標(biāo)時，立刻就能識別出這是哪個APP，如圖所示

字體直觀化的圖標(biāo)







圖標(biāo)類型







從表達(dá)形式上來講，圖標(biāo)分為像素圖標(biāo)、擬物化圖標(biāo)、扁平化圖標(biāo)、線性圖標(biāo)和立體圖標(biāo)。




無論是什么類型的圖標(biāo)，其表現(xiàn)方式一定要遵循統(tǒng)一性和識別性。圖標(biāo)的常規(guī)制作思路是先以功能信息提煉出圖形語言，然后對細(xì)節(jié)進(jìn)行刻畫。




1.像素圖標(biāo)

像素圖標(biāo)是一種以像素為基本單位制作的插圖（屬于位圖），也可以稱為“像素畫”。




在生活中隨處都可以見由點陣式小燈組成的熒光屏，如圖所示。這種熒光屏具有一個明顯的特征，就是輪廓非常清晰，像素圖標(biāo)的原理其實和這個點陣熒光屏是相同的。

熒光屏




以前像素化圖標(biāo)主要運用在網(wǎng)頁設(shè)計中，現(xiàn)在更多地運用在一些智能設(shè)備上，如手表、電子硬件等。




像素圖標(biāo)的設(shè)計比較簡約，易讀性也比較高，所以很多時候會用來代替復(fù)雜的圖形元素或信息，如圖所示。在制作像素圖標(biāo)的時候需要注意的是像素的清晰度

像素圖標(biāo)




2.擬物化圖標(biāo)

擬物化圖標(biāo)在iOS6的時候發(fā)展到了最高峰，材質(zhì)、光影的表現(xiàn)是擬物化圖標(biāo)的核心理念。蘋果iOS6有一個非常優(yōu)秀的設(shè)計細(xì)節(jié)，那就是滑竿上的圓形金屬按鈕，如圖所示。




這個按鈕不僅表現(xiàn)出了金屬的材質(zhì)，而且在傾斜手機的時候還會像真正的金屬一樣改變光澤。這是追求擬物化設(shè)計的最高境界，在最大程度上還原了真實環(huán)境。

擬物化圖標(biāo)




擬物化圖標(biāo)的最大優(yōu)勢就是識別性很強，就算是老年用戶也能一眼看明白其代表的意思，如圖所示。




雖然擬物化圖標(biāo)的識別性很強，但是它有一個致命的缺點，就是這種圖標(biāo)不太適用于界面整體的功能化展示，而且制作成本很高，需要花大量的時間來設(shè)計視覺上的陰影和質(zhì)感。

認(rèn)知性很強的擬物化圖標(biāo)




在擬物化設(shè)計轉(zhuǎn)為扁平化設(shè)計的過程中，為了平衡設(shè)計效率與視覺效果，演變出了一種“微質(zhì)感化”的設(shè)計，也就是用盡可能少的樣式來表現(xiàn)圖標(biāo)的質(zhì)感，如圖所示。

微質(zhì)感化設(shè)計




3.扁平化圖標(biāo)

現(xiàn)在的界面設(shè)計越來越注重簡潔性，扁平化圖標(biāo)也就變成了界面圖標(biāo)的主導(dǎo)形式。扁平化圖標(biāo)看似簡單，但是對于初學(xué)者而言，要把控好形體還是比較困難的。




把控不好形體就會導(dǎo)致設(shè)計出來的圖標(biāo)不夠美觀或是不能直接表達(dá)出圖標(biāo)所蘊含的寓意。另外，扁平化圖標(biāo)還需要將關(guān)鍵形狀刻畫到結(jié)構(gòu)上，這一點也很考驗設(shè)計師的能力，如圖所示。

將復(fù)雜圖標(biāo)簡化為簡潔圖標(biāo)




因為扁平化圖標(biāo)造型簡單，易識別，經(jīng)常應(yīng)用在界面和菜單欄中。在繪制這類圖標(biāo)時一定要注意外觀的統(tǒng)一性和識別性。很多新手設(shè)計師會通過網(wǎng)絡(luò)去下載圖標(biāo)素材，東拼西湊成一套圖標(biāo)，這不僅降低了界面的檔次，而且很難統(tǒng)一圖標(biāo)的整體風(fēng)格。




如圖所示的這些圖標(biāo)從單個來看都沒有問題，但是放在一起后就很凌亂了，風(fēng)格不統(tǒng)一是圖標(biāo)設(shè)計中的一大忌諱。

風(fēng)格不統(tǒng)一的圖標(biāo)




扁平化圖標(biāo)分為面式圖標(biāo)和線式圖標(biāo)兩種類型。面式圖標(biāo)需要注意形狀的圓角和黑白面積，在繪制的時候一定要把握好形狀的輪廓造型，如圖1所示；線式圖標(biāo)需要統(tǒng)一線條的寬度以及線段的連接方式等，如圖2所示。

圖1：面式圖標(biāo)

圖2：線式圖標(biāo)




面式圖標(biāo)由于填充面積比較大，整體會顯得比較飽滿，視覺平衡度也比較高。而線式圖標(biāo)的優(yōu)勢是比較有設(shè)計感，在視覺上顯得更輕盈，同時拓展性也比較好。在我們常見的iOS系統(tǒng)中，經(jīng)常會將正（面式）負(fù)（線式）圖標(biāo)當(dāng)成選中和未選中的狀態(tài)，如圖所示。

正負(fù)圖標(biāo)表示的選擇狀態(tài)




4.線性圖標(biāo)

現(xiàn)在的圖標(biāo)設(shè)計越來越簡潔，因此線性圖標(biāo)就應(yīng)運而生，界面的底部標(biāo)簽欄、導(dǎo)航功能按鈕和分類按鈕經(jīng)常會使用線性風(fēng)格的圖標(biāo)來表現(xiàn)，如圖所示。

線性圖標(biāo)




5.立體圖標(biāo)

很多界面的表現(xiàn)形式需要體現(xiàn)空間感，于是就有了立體圖標(biāo)。立體感的圖標(biāo)更有層次，并且在視覺上更耐看，經(jīng)常出現(xiàn)在網(wǎng)頁界面設(shè)計和專題頁面設(shè)計中，如圖所示。




立體圖標(biāo)并非真實的3D效果，而是通過明暗面的劃分來產(chǎn)生體積感，制作起來很考驗設(shè)計師對圖形透視和結(jié)構(gòu)的把控能力。

立體圖標(biāo)




只要掌握了設(shè)計要點，圖標(biāo)設(shè)計并不算很難，下面以一個立體圖標(biāo)的設(shè)計案例，帶大家熟悉一下設(shè)計流程。







實戰(zhàn)：制作立體圖標(biāo)







制作立體圖標(biāo)是一件精益求精的事情，需要沉下心來繪制，每一個細(xì)節(jié)和每一個透視元素都需要慢慢繪制。




由于立體圖標(biāo)的制作思路與方法基本上都一樣，因此本例只選取MICU圖標(biāo)中的M立體效果來進(jìn)行講解。

1.制作透視網(wǎng)格

首先，制作出下圖所示的透視網(wǎng)格。

制作透視網(wǎng)格




2.制作立體字

01 使用【橫排文字工具】 在畫布中輸入大寫的字母M，將字體設(shè)置為Bitsumishi，如圖所示。

輸入字母M




02 在M圖層的名稱上單擊鼠標(biāo)右鍵，然后在彈出的菜單中選擇【轉(zhuǎn)換為形狀】命令，如圖所示，這樣可以直接將文字轉(zhuǎn)換為形狀。

將文字轉(zhuǎn)為形狀




如果對字形的效果不滿意，可以使用【直接選擇工具】 和【添加錨點工具】 對外形進(jìn)行調(diào)整，如圖所示。

調(diào)整字形




03 按【Ctrl+T】組合鍵進(jìn)入自由變換模式，然后按住【Ctrl】鍵根據(jù)透視網(wǎng)格對字母進(jìn)行斜切操作，如圖所示。




04 繼續(xù)使用自有變換功能將M調(diào)大一些，以利于后面的操作，如圖所示。由于M是形狀，就算對其進(jìn)行放大，也不會損失像素。

調(diào)大字母




05 按【Ctrl+J】組合鍵復(fù)制一個【M拷貝】圖層，將圖層重命名為【背面】，放在【M】圖層的下一層，同時調(diào)整好其位置，然后修改一下填充色，如圖所示。

復(fù)制并調(diào)整形狀顏色




06 使用【鋼筆工具】 根據(jù)透視網(wǎng)格和字母的邊緣繪制出字母的右側(cè)面形狀，然后將填充顏色修改為比背面顏色稍微淺一些的顏色，如圖所示。繪制完成后將形狀圖層重命名為【右側(cè)面】。

繪制右側(cè)面形狀




07 繼續(xù)使用【鋼筆工具】 根據(jù)字母的邊緣繪制出字母的兩個頂面形狀，分別命名為【頂面1】和【頂面2】，然后將填充顏色修改為比右側(cè)面還要淺一些的顏色，如圖1和圖2所示。

圖1：繪制頂面1

圖2:繪制頂面2




08 繼續(xù)使用【鋼筆工具】 根據(jù)字母的邊緣繪制出內(nèi)面，將其命名為【內(nèi)面】，放在【背面】圖層的上一層，同時將填充色修改為與右側(cè)面相同的顏色，如圖 所示。

繪制內(nèi)面




到此，立體字母繪制完成，如果有細(xì)節(jié)問題，可以用【直接選擇工具】 對形狀路徑的錨點進(jìn)行調(diào)整。為了方便后面的操作，可以將制作立體字母的所有形狀圖層變?yōu)橐唤M，并命名為【LOGO】。




3.制作燈泡

01 使用【橢圓工具】 繪制一個圓形形狀，命名為【燈泡】，如圖1所示，然后按【Ctrl+T】組合鍵進(jìn)入自由變換模式，接著按住【Ctrl】鍵根據(jù)透視網(wǎng)格對字母進(jìn)行斜切操作，如圖2所示，最后將形狀的填充色修改為白色，并將其放在字母黑色正面的合適位置，如圖3所示。

圖1：繪制圓形

圖2：斜切圓形

圖3：改填充色




02 執(zhí)行【圖層>圖層樣式>外發(fā)光】菜單命令，為【燈泡】圖層添加一個【外發(fā)光】樣式，首先設(shè)置發(fā)光顏色為黃色，然后設(shè)置【混合模式】為【濾色】、【不透明度】為60%、【大小】為7像素，如圖1所示，效果如圖2所示。

圖1：設(shè)置外發(fā)光樣式

圖2：外發(fā)光效果




03 將燈泡按規(guī)律復(fù)制一些到正面，然后仔細(xì)調(diào)整好這些燈泡的位置，完成后的效果如圖所示。

復(fù)制燈泡




4.制作光暈

01 新建一個【光暈】圖層，用黑色填充該圖層，然后執(zhí)行【濾鏡 > 渲染 > 鏡頭光暈】菜單命令，接著選擇【鏡頭類型】為【電影鏡頭】，最后將光暈調(diào)整到畫面的中心位置，如圖1所示，效果如圖2所示。

圖1：設(shè)置鏡頭光暈

圖2：鏡頭光暈效果




02 將【網(wǎng)格】圖層組隱藏起來，然后用黑色填充【背景】圖層，接著使用黑色【畫筆工具】 涂掉多余的光線，如圖1所示，最后設(shè)置【光暈】圖層的【混合模式】為【變亮】，效果如圖2所示。

圖1：涂掉多余光線

圖2：設(shè)置變亮模式




03 利用自由變換模式調(diào)整好光暈的大小，然后復(fù)制一個光暈，接著調(diào)整好這兩個光暈的位置，最終效果如圖所示。