圖標(biāo)（icon）設(shè)計(jì)一直是 UI 設(shè)計(jì)師基本功的重要標(biāo)準(zhǔn)，對(duì)于剛學(xué)習(xí)UI設(shè)計(jì)的新手來(lái)說(shuō)，是最不可或缺的學(xué)習(xí)內(nèi)容。而通常圖標(biāo)是整個(gè)頁(yè)面設(shè)計(jì)的核心所在，不同風(fēng)格、顏色、類型的圖標(biāo)展現(xiàn)出產(chǎn)品的特點(diǎn)和調(diào)性，圖標(biāo)可以說(shuō)是整個(gè)項(xiàng)目的關(guān)鍵核心。

所以這次就跟大家詳細(xì)分享圖標(biāo)的類型和設(shè)計(jì)規(guī)范的內(nèi)容：

?一、圖標(biāo)類型?

圖標(biāo)是一種抽象的、跨語(yǔ)言的符號(hào)，是 UI設(shè)計(jì)中最不可或缺的視覺元素。不同類型的圖標(biāo)都有著獨(dú)特的魅力。例如，線性圖標(biāo)簡(jiǎn)潔輕量、面性圖標(biāo)厚重直接，同一種類型的圖標(biāo)也具有很多不同的表現(xiàn)形式。

UI 設(shè)計(jì)中的圖標(biāo)設(shè)計(jì)大致劃分為三類：線性、面性、線面結(jié)合。結(jié)合三種基礎(chǔ)類型的表達(dá)方式可以創(chuàng)造出各式各樣的表現(xiàn)形式。在此基礎(chǔ)上，又可以通過光源、陰影打造出不同的圖標(biāo)質(zhì)感。

現(xiàn)在的 UI 設(shè)計(jì)主要以扁平化風(fēng)格為主，過于寫實(shí)的風(fēng)格逐漸被摒棄。如圖所示，是現(xiàn)在常見的圖標(biāo)類型示例。

不同的圖標(biāo)類型

1.線性圖標(biāo)?

線性圖標(biāo)簡(jiǎn)單點(diǎn)說(shuō)是以線做延伸繪制的物體輪廓的圖標(biāo)，基于線的粗細(xì)大小、端點(diǎn)類型、圓角、描邊等繪制成型，優(yōu)點(diǎn)簡(jiǎn)潔、整齊。常用于app的標(biāo)簽欄和導(dǎo)航欄，這樣一定程度上減少用戶的視覺干擾，使用戶的視覺中心回歸到產(chǎn)品或者app體驗(yàn)本身。

線性圖標(biāo)（圖源：dribbble?）

線性圖標(biāo)（圖源：dribbble?）?

?2.面性圖標(biāo)?

面性圖標(biāo)常以實(shí)心圖形為表現(xiàn)形式繪制，高度概括其表達(dá)含義。相較于線性圖標(biāo)應(yīng)用場(chǎng)景更加豐富，視覺表現(xiàn)力更強(qiáng)，細(xì)節(jié)豐富。常用于功能圖標(biāo)，并且可以讓用戶迅速定位圖標(biāo)位置，預(yù)知點(diǎn)擊后的狀態(tài)，對(duì)用戶體驗(yàn)更友好。

面性圖標(biāo)（圖源：dribbble?）?

面性圖標(biāo)（圖源：dribbble?）???

?3.線面圖標(biāo)?

線面圖標(biāo)是線和面結(jié)合而成的一種類型圖標(biāo)，相較于線性和面性圖標(biāo)，更難駕馭，實(shí)用場(chǎng)景比較有限。

?線面圖標(biāo)（圖源：dribbble?）?

?線面圖標(biāo)（圖源：dribbble?）?

?二、圖標(biāo)質(zhì)感風(fēng)格?

圖標(biāo)質(zhì)感風(fēng)格表現(xiàn)與整體的 UI 設(shè)計(jì)風(fēng)格相關(guān)，雖然近幾年的 UI 設(shè)計(jì)的圖標(biāo)風(fēng)格趨于扁平化，但是不同風(fēng)格、質(zhì)感的圖標(biāo)從未消失。比如最近一兩年流行的新擬態(tài)風(fēng)格、毛玻璃質(zhì)感圖標(biāo)都很受歡迎。

常見圖標(biāo)質(zhì)感類型如圖所示。

不同的圖標(biāo)質(zhì)感?

?1.毛玻璃風(fēng)格?

毛玻璃效果的圖標(biāo)設(shè)計(jì)，通過元素疊加背景虛化的方式形成的玻璃模糊質(zhì)感，毛玻璃風(fēng)格圖標(biāo)層次豐富，通透感比較強(qiáng)，應(yīng)用場(chǎng)景廣泛，不止應(yīng)用于圖標(biāo)設(shè)計(jì)中。

?毛玻璃風(fēng)格圖標(biāo)（圖源：dribbble?）

毛玻璃風(fēng)格圖標(biāo)（圖源：dribbble?）?

?2.新擬態(tài)風(fēng)格?

新擬態(tài)風(fēng)格是近幾年非常流行的設(shè)計(jì)風(fēng)格，主要利用光影原理融合背景形成的一種立體感的效果，但應(yīng)用場(chǎng)景比較受限制，對(duì)背景顏色依賴性比較強(qiáng)。

新擬態(tài)風(fēng)格圖標(biāo)（圖源：dribbble?）??

新擬態(tài)風(fēng)格圖標(biāo)（圖源：figma社區(qū)）

3.Big Sur icon?

Big Sur icon是2020年蘋果發(fā)布macOS 將與 iOS 統(tǒng)一步調(diào)，從X86 平臺(tái)遷移至ARM 平臺(tái)，并從macOS 10迭代為macOS 11，這 一版本更新被稱為Big Sur。

Big Sur icon也是由" 新擬物 "風(fēng)格?設(shè)計(jì)衍生的。

Big Sur 風(fēng)格圖標(biāo)（圖源：dribbble?）

?4.扁平風(fēng)格?

扁平分格圖標(biāo)應(yīng)用場(chǎng)景更加廣泛，常用的手機(jī)app大多是扁平風(fēng)格的圖標(biāo)設(shè)計(jì)，這種類型設(shè)計(jì)組成元素簡(jiǎn)單干凈，外形突出，信息傳達(dá)更直觀。

扁平風(fēng)格圖標(biāo)（圖源：figma社區(qū)）?

扁平風(fēng)格圖標(biāo)（圖源：dribbble?）?

?5.MBE風(fēng)格?

MBE風(fēng)格圖標(biāo)設(shè)計(jì)是從線框圖Q版卡通畫演變出來(lái)的，這種風(fēng)格設(shè)計(jì)多采用更大更粗的描邊和圍繞圖標(biāo)的點(diǎn)，相較于沒有描邊的扁平風(fēng)格圖標(biāo)，去掉了多余的色塊區(qū)分，顏色更加統(tǒng)一系統(tǒng)。

MBE風(fēng)格圖標(biāo)（圖源：dribbble?）??

MBE風(fēng)格圖標(biāo)（圖源：dribbble?）??

?6.卡通風(fēng)格?

卡通風(fēng)格圖標(biāo)常用于簡(jiǎn)筆畫風(fēng)格的app和網(wǎng)站設(shè)計(jì)中，主要是使用插畫的設(shè)計(jì)手法，更加有可愛、溫暖、活潑有趣的設(shè)計(jì)產(chǎn)品中。

卡通風(fēng)格圖標(biāo)（圖源：dribbble?）??

卡通風(fēng)格圖標(biāo)（圖源：dribbble?）

?7.輕擬物風(fēng)格?

輕擬物風(fēng)格介于簡(jiǎn)潔和寫實(shí)之間，主要以平面表現(xiàn)風(fēng)格為主，增加細(xì)節(jié)表現(xiàn)，辨識(shí)度相對(duì)更高，貼近真實(shí)生活，非常注重細(xì)節(jié)。

輕擬物風(fēng)格圖標(biāo)（圖源：figma社區(qū)?）

?8.立體風(fēng)格?

立體風(fēng)格可以分為2.5D和3D兩種風(fēng)格，這類風(fēng)格圖標(biāo)也是介于簡(jiǎn)潔和寫實(shí)之間，以立體表現(xiàn)為主，不同于輕擬物風(fēng)格，更加有視覺沖擊力和表現(xiàn)力。

2.5D風(fēng)格圖標(biāo)（圖源：dribbble?）

3D風(fēng)格圖標(biāo)（圖源：dribbble?）?

?9.超寫實(shí)風(fēng)格?

超寫實(shí)風(fēng)格目前應(yīng)用不多，非常貼近實(shí)物的設(shè)計(jì)，也更加注重細(xì)節(jié)，設(shè)計(jì)時(shí)要注意光影和陰影的效果，也更加展現(xiàn)設(shè)計(jì)功底。?

?超寫實(shí)風(fēng)格圖標(biāo)（圖源：dribbble?）

?超寫實(shí)風(fēng)格圖標(biāo)（圖源：dribbble?）

?超寫實(shí)風(fēng)格圖標(biāo)（圖源：dribbble?）

三、圖標(biāo)網(wǎng)格

圖標(biāo)網(wǎng)格被用來(lái)促進(jìn)圖標(biāo)的一致性，以及為圖形元素的定位建立一組清晰的規(guī)范。這種標(biāo)準(zhǔn)化的規(guī)范造就了一個(gè)靈活但有條理的系統(tǒng)。下圖以 Android 和 iOS 系統(tǒng)為例，展示了兩種常見的圖標(biāo)網(wǎng)格，這些網(wǎng)格都有共同的特征：留有邊距、為典型的幾種圖標(biāo)外形提供了輔助圖形參考。

圖標(biāo)表格

圖標(biāo)網(wǎng)格通常包含三部分內(nèi)容：活動(dòng)區(qū)域，修飾區(qū)域，關(guān)鍵線形狀。

（1）活動(dòng)區(qū)域：是指圖標(biāo)主要內(nèi)容的繪制區(qū)域，通常而言圖標(biāo)圖形的主要內(nèi)容都在該區(qū)域內(nèi)。

（2）修飾區(qū)域：是指用于承載部分圖標(biāo)的一些出格圖形，某些視覺占比較小的圖形可以延伸到修飾區(qū)域，但不能超出網(wǎng)格范圍。

（3）關(guān)鍵線形狀：關(guān)鍵線形狀是網(wǎng)格的基礎(chǔ)。使用這些核心形狀作為準(zhǔn)則，你可以在產(chǎn)品圖標(biāo)的設(shè)計(jì)中保持一致的視覺比例。

?四、圖標(biāo)的設(shè)計(jì)規(guī)范?

?圖標(biāo)設(shè)計(jì)尺寸

為保證一個(gè)系統(tǒng)內(nèi)的圖標(biāo)的大小統(tǒng)一或遵循統(tǒng)一的規(guī)則變化，常見的平臺(tái)設(shè)計(jì)規(guī)范都對(duì)其大小有相應(yīng)的規(guī)范，這里主要介紹 Android 系統(tǒng)和 iOS 系統(tǒng)的圖標(biāo)設(shè)計(jì)尺寸規(guī)范和換算標(biāo)準(zhǔn)。

?1. Android app 圖標(biāo)設(shè)計(jì)?

Google Play 應(yīng)用圖標(biāo)設(shè)計(jì)尺寸可以用最大尺寸 512 × 512 px 來(lái)設(shè)計(jì)。

• L DPI（ Low Density Screen，120 DPI ），其圖標(biāo)大小為 36*36 px

• M DPI（ Medium Density Screen, 160 DPI ），其圖標(biāo)大小為 48*48 px

• H DPI（ High Density Screen, 240 DPI ），其圖標(biāo)大小為 72*72 px

• XH DPI（ Extra-high density screen, 320 DPI ），其圖標(biāo)大小為 96*96 px

• XXH DPI（ xx-high density screen, 480 DPI ），其圖標(biāo)大小為 144*144 px

• XXXH DPI（ xxx-high density screen, 640 DPI ），其圖標(biāo)大小為 192*192 px

Material app 圖標(biāo)設(shè)計(jì)尺寸

?2. iOS 圖標(biāo)設(shè)計(jì)?

設(shè)計(jì)師設(shè)計(jì)時(shí)，通常只用設(shè)計(jì)一個(gè) app Store 的圖標(biāo)（1024×1024 px ），這是最佳設(shè)計(jì)尺寸。其他尺寸可用 iOS 圖標(biāo)生成器自動(dòng)輸出一套，小尺寸圖標(biāo)單獨(dú)微調(diào)下細(xì)節(jié)即可。

iOS 系統(tǒng)會(huì)自動(dòng)切割圓角，所以在設(shè)計(jì)圖標(biāo)時(shí)，我們只需根據(jù) app 圖標(biāo)的尺寸輸出直角的圖片即可。

iOS app 圖標(biāo)設(shè)計(jì)尺寸?

?圖標(biāo)元素大小與間距規(guī)范?

?1.圖標(biāo)最小尺寸?

由于我們的拇指有一定的大小，所以圖標(biāo)的大小必須要讓拇指有效點(diǎn)擊，最小尺寸不能小于：48dp*48dp（Android規(guī)范推薦）。實(shí)際上，44dp-48pd 之間的點(diǎn)擊大小都是可以接受的。?

?2.圖標(biāo)和旁邊元素最小間距?

為了不誤觸圖標(biāo)旁邊的元素，圖標(biāo)與周圍應(yīng)保持一定的距離，間距為：8dp。

在一些極端情況，允許可點(diǎn)擊范圍小于 48*48dp，例如：?文章中的鏈接、日期選擇器。

一套界面中，任何“可點(diǎn)擊的元素”尺寸不能小于 44*44dp；一套界面中，任何可點(diǎn)擊的圖標(biāo)與周圍的距離不能小于 8dp。

?圖標(biāo)最小尺寸與圖標(biāo)和旁邊元素最小間距

?五、圖標(biāo)設(shè)計(jì)的注意事項(xiàng)?

1.線性圖標(biāo)保持粗細(xì)一致

2.保持圓角風(fēng)格一致

3.保持大小均衡

4.圖標(biāo)視覺重量均衡

六、圖標(biāo)網(wǎng)站?

• confont

阿?巴巴旗下?量圖標(biāo)、插畫資源?站

?

• iconhub

這是?套素質(zhì)極??且完全免費(fèi)的圖標(biāo)素材！你可以使?內(nèi)置的功能直接對(duì)圖標(biāo)進(jìn)??定義。

• Discipline

包含 100 多個(gè)?素質(zhì)圖標(biāo)的 Big?Sur 圖標(biāo)包，每個(gè) app 圖標(biāo)均使? apple的官?模板精?制作

• Ikonate

擁有300多個(gè)基于平?設(shè)計(jì)的?級(jí)圖標(biāo)，是根據(jù)?常寬松的MIT許可證慷慨授權(quán)的

?

• IconDuck

「Iconduck」是一個(gè)收錄 146 個(gè)免費(fèi)圖標(biāo)集（還在持續(xù)增加中）、超過 11 萬(wàn)個(gè)免費(fèi)圖案的網(wǎng)站，主要以開放原始碼圖標(biāo)和向量圖標(biāo)為主，可以通過搜索或直接預(yù)覽圖標(biāo)圖案，網(wǎng)站會(huì)提供原始頁(yè)面來(lái)源，大多數(shù)圖標(biāo)集都可被用于個(gè)人或商業(yè)用途（取決于圖標(biāo)本身使用的授權(quán)方式，有些會(huì)要求需要標(biāo)注來(lái)源） 。

?

• IconPark

字節(jié)跳動(dòng)（ByteDance）字節(jié)CUX設(shè)計(jì)團(tuán)隊(duì)出品的開源圖標(biāo)庫(kù)

?

?總結(jié)?

到這里是圖標(biāo)分享的全部?jī)?nèi)容，相信你也應(yīng)該掌握了不少圖標(biāo)設(shè)計(jì)的知識(shí)。最關(guān)鍵的是在日常設(shè)計(jì)時(shí)，學(xué)會(huì)運(yùn)用和思考。

轉(zhuǎn)發(fā)自 @知群 僅供個(gè)人學(xué)習(xí)使用