很多萌新學(xué)習(xí)UI設(shè)計(jì)，都是從圖標(biāo)開(kāi)始涉獵，把圖標(biāo)設(shè)計(jì)等同于UI設(shè)計(jì)，就認(rèn)為UI設(shè)計(jì)師只需畫(huà)圖標(biāo)即可，作為一個(gè)混跡10年的職場(chǎng)老兵發(fā)自肺腑相告，圖標(biāo)是UI設(shè)計(jì)很重要的模塊，但絕不是全部，筆者作為國(guó)內(nèi)較早一批從事UI設(shè)計(jì)的人，從網(wǎng)頁(yè)設(shè)計(jì)轉(zhuǎn)型過(guò)來(lái)，也是從臨摹圖標(biāo)開(kāi)始，為了撰寫(xiě)這篇圖文，特別在我塞滿(mǎn)了小電影的硬盤(pán)里找出來(lái)不少擬物圖標(biāo)，如下：

搜索枯腸+百度+道聽(tīng)途說(shuō)，我總結(jié)了這種擬物圖標(biāo)的特征：

充分運(yùn)用物體的光影、結(jié)合PS投影、漸變、斜面和浮雕等圖層樣式，結(jié)合實(shí)物諸如木質(zhì)、金屬、塑料等材質(zhì)，將圖標(biāo)寫(xiě)實(shí)化設(shè)計(jì)，將生活中司空見(jiàn)慣的物體搬到界面中，使得認(rèn)知成本非常低，不論腐乳老幼在無(wú)需學(xué)習(xí)的情況下，可以輕松辨識(shí)。

很多萌新繼續(xù)發(fā)問(wèn)，現(xiàn)在學(xué)習(xí)UI設(shè)計(jì)，還需要臨摹寫(xiě)實(shí)圖標(biāo)嗎？

作為成年人的世界，任何事物都不是非黑即白的，凡事都有正方面，我覺(jué)得如果說(shuō)你想畫(huà)擬物圖標(biāo)用在項(xiàng)目中，那肯定是鳳毛麟角的，像一些活動(dòng)專(zhuān)題、游戲、兒童益智等產(chǎn)品，但是為什么要學(xué)呢？

通過(guò)臨摹，達(dá)到動(dòng)手實(shí)操能力，要知道你是否有設(shè)計(jì)天賦，動(dòng)手能力是非常重要的，還能培養(yǎng)觀察能力，提升靈感。

一、圖標(biāo)的定義

圖標(biāo)是具有明確指代含義的計(jì)算機(jī)圖形。其中桌面圖標(biāo)是軟件標(biāo)識(shí)，界面中的圖標(biāo)是功能標(biāo)識(shí)。它源自于生活中的各種圖形標(biāo)識(shí)，是計(jì)算機(jī)應(yīng)用圖形化的重要組成部分。

二、圖標(biāo)的分類(lèi)：功能圖標(biāo)、應(yīng)用圖標(biāo)、裝飾圖標(biāo)

1、功能圖標(biāo)

功能圖標(biāo)具有明確表意功能，是圖形化的符號(hào)，用于替代或者輔助文字傳達(dá)信息，使用戶(hù)形成記憶思維，簡(jiǎn)化用戶(hù)對(duì)復(fù)雜文字的記憶。

功能圖標(biāo)分為：

功能按鈕圖標(biāo)（可點(diǎn)擊）(交互性）

常用于導(dǎo)航、標(biāo)簽、操作

輔助展示圖標(biāo)（不可點(diǎn)擊）

常用于數(shù)據(jù)信息，文字標(biāo)題輔助、警告提示

2、應(yīng)用圖標(biāo)

軟件應(yīng)用的桌面啟動(dòng)圖標(biāo)，代表一個(gè)產(chǎn)品特色，充滿(mǎn)個(gè)性，已引起用戶(hù)注意，常用語(yǔ)電腦、手機(jī)桌面、APP應(yīng)用市場(chǎng)

3、裝飾圖標(biāo)

裝飾性圖標(biāo)用于渲染整個(gè)氣氛，吸引用戶(hù)，提升整個(gè)畫(huà)面，不一定具有特定的功能特性，常用插畫(huà)形式表現(xiàn)，常用于引導(dǎo)頁(yè)、彈窗、活動(dòng)專(zhuān)題。

三、圖標(biāo)的風(fēng)格

面形圖標(biāo)、線(xiàn)性圖標(biāo)、線(xiàn)面圖標(biāo)、扁平圖標(biāo)、擬物圖標(biāo)、微質(zhì)感圖標(biāo)

1、色塊圖標(biāo)/剪影

通過(guò)剪影的形式，概括性的展示圖形外觀

2、線(xiàn)型圖標(biāo)

用線(xiàn)的形式勾勒?qǐng)D形外觀，重量比面形圖標(biāo)更加輕巧，更加靈活。常見(jiàn)的有：

單色線(xiàn)條、彩色線(xiàn)條、斷點(diǎn)線(xiàn)條

3、線(xiàn)面圖標(biāo)

用線(xiàn)與面組合，通常用深色線(xiàn)條配淺色色塊，圖標(biāo)設(shè)計(jì)更加豐富，更具情感，比較常見(jiàn)的有：

單色線(xiàn)面結(jié)合、多色線(xiàn)面結(jié)合、MBE圖標(biāo)

4、扁平圖標(biāo)

5、擬物圖標(biāo)

這部分圖標(biāo)可以回到本文開(kāi)篇，這里就不在贅述了。

6、微質(zhì)感圖標(biāo)

原文來(lái)源：https://www.ui.cn/detail/456354.html