本文主要對于圖標(biāo)設(shè)計的 “類型、風(fēng)格” 進行了整理，以及自己對于每種圖標(biāo)類型的思考觀點。

圖標(biāo)是UI設(shè)計中極為重要的一個環(huán)節(jié)，我們在設(shè)計每個界面幾乎都會設(shè)計到圖標(biāo)的表達(dá)，出色的圖標(biāo)設(shè)計可以讓界面表達(dá)更加經(jīng)常、精致、有趣。

圖標(biāo)的設(shè)計往往也體現(xiàn)著設(shè)計師的基本功，因此除了日常多畫之外（多畫可以提升對圖標(biāo)造型的把控力），我們也更需要了解和學(xué)習(xí)圖標(biāo)設(shè)計的趨勢類型，從而幫助我們提高在設(shè)計中的效率。

基于自我學(xué)習(xí)的目的，平時在瀏覽一些設(shè)計網(wǎng)站時也會做相對應(yīng)的收集。因此本文主要對于圖標(biāo)設(shè)計的 “類型、風(fēng)格” 進行了整理，以及自己對于每種圖標(biāo)類型的思考觀點。

圖標(biāo)的類型劃分

設(shè)計網(wǎng)站上的圖標(biāo)可以說是多種多樣，不同類型的圖標(biāo)都有著獨特的魅力。例如：線形圖標(biāo)-簡潔輕量、面形圖標(biāo)-厚重直接，當(dāng)然同一種類型的圖標(biāo)也具有很多不同的表現(xiàn)形式。

因此基于本人對圖標(biāo)的理解，大致劃分為三類：線性、面形、線面結(jié)合。結(jié)合三種基礎(chǔ)類型的表達(dá)方式可以創(chuàng)造出各式各樣的表現(xiàn)形式。

一、線形圖標(biāo)

使用輕量的線條勾勒的圖標(biāo)，整體感受也趨向于精致、細(xì)致而具有銳度感。不同的線條表現(xiàn)具有不同的視覺感受，細(xì)線輕量、直線硬朗、曲線柔美。

1. 線型圖標(biāo)基礎(chǔ)分析及想法

（1）粗細(xì)對比

粗細(xì)不同，圖標(biāo)的力度和重量感就會有差異。粗線的圖標(biāo)，視覺關(guān)注力來說會更加突出，但較于細(xì)線的圖標(biāo)也會卻顯得粗壯、厚重；細(xì)線的圖標(biāo)，精致、透氣、秀美。

但在設(shè)計時需要依據(jù) “整體的UI風(fēng)格”來決定線的粗細(xì)，而并非單純的考慮圖標(biāo)的關(guān)注度，反而更需要考慮圖標(biāo)與界面整體的平衡感。

（2）柔度對比

直角與圓角決定了外形的感知和風(fēng)格的走向，如下圖對比中看出，圓角越大圖形越趨向于可愛柔美（如下右圖），圓角越小則越直接、硬朗和陽剛（如左右圖）。因此剛或柔或中間值完全取決于早期對于整體風(fēng)格的定調(diào)。

（3）繁簡對比

除了輕量化和簡潔之外，圖標(biāo)的識別性也是極為重要。如下左圖，“過度簡潔”導(dǎo)致圖標(biāo)失去該有的識別度而出現(xiàn)歧義，而下右圖的元素疊加使得圖標(biāo)稍顯復(fù)雜。在繁與簡的平衡中，應(yīng)該保持：在不影響圖標(biāo)識別度的情況下，最大限度的提升圖標(biāo)的簡潔程度。

（4）特征的識別度

除了簡潔程度，也需要考慮圖標(biāo)該有的特征。例如下圖“評論”圖標(biāo)的案例，當(dāng)我把圖標(biāo)中的“三個點”去掉時，圖標(biāo)依舊具有 “對話/評論”的表意，而當(dāng)我把下面的“箭頭”去掉保留“三個點”時，則會出現(xiàn)歧義。它可以被表意為“更多”的意思，因此在設(shè)計圖標(biāo)時需要對于表意做精準(zhǔn)把握，避免歧義出現(xiàn)。

（5）保持圖標(biāo)的特征美感

如下面的“心形”圖標(biāo)，下左圖為我們具有普識性的圖標(biāo)，與圓形組合之后依然保持著原有的形態(tài)美感。但我們不時也會看到第三種設(shè)計，整體外形雖然保持著愛心，但為了與整體風(fēng)格“一致”強行對外輪廓進行切割，與原圖形在美感上則稍微有些出入，這也是我們需要思考的關(guān)鍵點。

（6）組合型比例

組合形的比例會影響到圖標(biāo)的精致程度，準(zhǔn)確的“比例值”能讓整體的造型趨向平衡，更具有美感。如下圖案例嘗試了兩組不同比例的效果，這里以圖標(biāo)窄邊作為“基準(zhǔn)值”進行嘗試。

當(dāng)內(nèi)形為外形的1:2時（下圖2），圖標(biāo)的整體視覺效果較為平衡；當(dāng)大于1:2并接近4:3時，圖標(biāo)內(nèi)部結(jié)構(gòu)會顯得過于飽滿；而小于1:2并接近4:1時（下圖3）則會產(chǎn)生稀疏不緊湊的效果。（這里的比例只是案例需要，實際設(shè)計以最終的視覺感知為準(zhǔn)）

2. 線型類型拓展

基礎(chǔ)的理論，結(jié)合延展的應(yīng)用，可以迸發(fā)出更多的創(chuàng)意想法。線形圖標(biāo)也并非只有一種設(shè)計形態(tài)。通過以下案例，可以看看線型圖標(biāo)設(shè)計的類型的多樣性。

（1）極簡風(fēng)格

整體風(fēng)格極為簡約，沒有多余的線條交錯，通過線條還原圖形的本質(zhì)，外形“簡單”卻具有很強的識別性，在視覺感知上輕松、干凈。

極簡的風(fēng)格圖標(biāo)在于對形的把控，多一筆可能顯得復(fù)雜，少一筆可能影響識別程度。以上圖為例，圖標(biāo)的組合元素保持在2個左右，整體較為干凈。

實際應(yīng)用-Instagram、Airbnb、Facebook、Twitter

（2）雙色

相較于“純色的圖標(biāo)”更具表現(xiàn)力，細(xì)節(jié)上也會更加的豐富，形態(tài)感知上多了一層變化。結(jié)合顏色的疊加、對比、互補提升了圖標(biāo)的層次感和豐富度。

同色系：同為冷色系、暖色系或某種顏色系統(tǒng)的表達(dá)形式。如下圖案例，以暗色主色-亮色點綴提亮，使得圖標(biāo)具有一種高光提亮的感覺。

另一組案例是 亮色主色結(jié)合暗色，整體圖標(biāo)效果還算可以，但較亮的顏色沒有應(yīng)用在圖標(biāo)的關(guān)鍵特征上，使得圖標(biāo)第一眼的感知稍有減弱。

對比互補色：顏色跨度更大，層次更加分明。如下圖案例，紅色與藍(lán)色的撞色之后相比單色的圖標(biāo)更加出彩和具有記憶點。

實際案例-騰訊動漫我的頁面

（3）透明度變化

本質(zhì)上與上面一種為一個類型的設(shè)計，通過透明度的疊加和變化，提升圖標(biāo)的層次感和空間感，降低圖標(biāo)的壓迫性。

實際案例-愛奇藝9宮格圖標(biāo)

（4）漸變層次疊加

漸變帶出了圖標(biāo)的質(zhì)感，結(jié)合“不同深度”或“不同飽和度”的變化，讓圖標(biāo)更具有細(xì)節(jié)和層次。

（5）黑白+品牌色

黑白色作為主色調(diào)，結(jié)合品牌色作為點綴色。與常規(guī)的黑白圖標(biāo)相比，既有產(chǎn)生了變化，同時兼顧了品牌色的透出。

實際案例-大眾點評攻略頁面圖標(biāo)

（6）線形漸變

結(jié)合漸變的顏色，豐富了整個圖標(biāo)的視覺表達(dá)，并提升了圖標(biāo)的視覺沖擊力和設(shè)計感。案例結(jié)合黑白背景作為嘗試，白底：粗線比細(xì)線的視覺效果相對較好，漸變也能較為清晰的被表達(dá)，黑底：細(xì)線比粗線的視覺效果顯示得更加精致和具有銳度感。

實際案例-網(wǎng)易考拉/NAVER

（7）一筆成形

此類圖標(biāo)在視覺表達(dá)上具有較高的線性流暢度和設(shè)計感，關(guān)注點在于整組的圖標(biāo)的 “開口起始點” 設(shè)定上需保持一致。例如：“從左到右”或“從右到左”形成一體化的連貫線條，開口起始點不一致會影響整組圖標(biāo)的一致性，應(yīng)用在頁面時也會顯得雜亂。

（8）斷點圖標(biāo)

與上一種較為類似，但沒有連貫度的要求。在線形圖標(biāo)基礎(chǔ)上面，尋找一個缺口來打破 “全包邊圖標(biāo)” 的沉悶感。使得圖標(biāo)具有透氣性和線條的變化。缺口的位置盡量保持統(tǒng)一的方向及大小，另外需要控制開口個數(shù)避免過多導(dǎo)致圖標(biāo)外形過于零碎。

實際案例-騰訊體育/京東

二、面形圖標(biāo)

面形圖標(biāo)比線型圖標(biāo)更能表達(dá)出圖標(biāo)的力量感和重量感，比線型圖標(biāo)會更加容易吸引視覺目光。在識別度上，面形圖標(biāo)更加依賴于外輪廓的清晰度，因此在設(shè)計時對于外形的打磨是重中之重，清晰的外輪廓可以幫助提高識別度。

1. 面型圖標(biāo)基礎(chǔ)分析及想法

（1）輪廓對比

輪廓的差異會提體現(xiàn)出不同的氣質(zhì)，如下圖的左邊和右邊的區(qū)別，一個氣質(zhì)較為直接硬朗，另一個則較為柔美可愛。流暢的外形可以讓面形圖標(biāo)的整體更加簡潔、規(guī)整，如下圖中間的圖標(biāo)在輪廓的處理上則顯得比較碎，整體外輪廓造型的連貫度有所欠缺。

（2）鏤空對比

適當(dāng)?shù)溺U空除了補充了圖形的識別度之外，還提升了面形圖標(biāo)的設(shè)計細(xì)節(jié)。另外需要控制好鏤空部分與整體的外形的比例，過小或過大都可能影響圖標(biāo)的平衡感。如下圖的中間和右邊，鏤空過小對圖標(biāo)的辨識度并沒有多大作用，沒有鏤空則少了一些透氣感。

（3）形體對比

形態(tài)上的差異也會具有不一樣的視覺感知。以“星”和“心”為案例，單獨形體與組合之后的形體相比視覺感知更直觀些，而組合形的圖標(biāo)相對會精致一些，更多了一份層次。在日常設(shè)計中的經(jīng)驗是：越小的圖標(biāo)形體應(yīng)該越簡單，因此建議單體出現(xiàn)較好；若圖標(biāo)的尺寸足夠大時可采用組合形的設(shè)計，補充圖標(biāo)的細(xì)節(jié)。

（4）繁簡對比

設(shè)計面形圖標(biāo)時，對于多余細(xì)節(jié)的管理也很重要。隨著細(xì)節(jié)的增加，塊面切割過多，會使得整體圖標(biāo)變得過于零碎（如下右圖）。保持簡約的設(shè)計提高圖標(biāo)的識別度，在關(guān)鍵的特征細(xì)節(jié)上做補充（如下中間圖的相機閃光燈點）。

2. 面形圖標(biāo)類型拓展

面形圖標(biāo)在設(shè)計時也可以結(jié)合各種不同的表達(dá)方式，來提升圖標(biāo)的質(zhì)感和創(chuàng)意，而非只是簡單的填充顏色而已。

（1）單色面+點綴色

整體的外形使用統(tǒng)一的顏色，結(jié)合圖標(biāo)的屬性感知使用不同的顏色進行點綴，通過點綴色提亮了圖標(biāo)的視覺效果，達(dá)到既統(tǒng)一又具有差異化。

（2）多彩雙色

通過對比色、鄰近色的搭配來營造整體的圖標(biāo)氛圍，提升了圖標(biāo)的層次和豐富度，雙色的表達(dá)也增添了圖形的趣味性。在日常APP中極為常見，簡單且容易出效果。

（3）微質(zhì)感漸變

微弱的漸變提升了圖標(biāo)的質(zhì)感。漸變的方向會影響整體圖標(biāo)的視覺效果，因此可以根據(jù)不同設(shè)計的需要進行調(diào)整。如下圖案例：

實際案例-全民K歌

（4）透明度/灰度變化

透明度/灰度的變化，讓原來單色的圖標(biāo)變得更加具有層次感和空間感，設(shè)計細(xì)節(jié)更加豐富，降低了單色面形圖標(biāo)的厚重感。

實際案例-企鵝FM我的頁面

（5）透明度變化+漸變

漸變的設(shè)計提升了面形圖標(biāo)的質(zhì)感，從顏色上具有一定的豐富度。在漸變的基礎(chǔ)上對組合型做透明度差異化，使得圖標(biāo)具有了層次感。

透明疊加的圖標(biāo)+漸變的背景此類圖標(biāo)常常被應(yīng)用在UI界面中的列表或者頂部入口的位置。

實際案例-全民K歌點歌頁面

（6）顏色疊加穿透

圖標(biāo)透明疊加之后產(chǎn)生了交錯的負(fù)形，疊加出第三個面。雖然整體設(shè)計依然保持著扁平化，但卻多了一份層次感，并且增加了圖標(biāo)的細(xì)節(jié)。

實際案例-百度網(wǎng)盤

（7）漸變層次疊加

整體的效果與透明度變化的圖標(biāo)較為接近，通過漸變的深淺變化，使得形狀的銜接處出現(xiàn)了明暗對比，因此圖標(biāo)也具有了厚度感和層次感。

實際案例-NAVER /掌上生活

（8）高斯模糊

此類圖標(biāo)基本沒在在APP中看到，與“透明度變化”或“顏色疊加”相比都更具層次感和空間感，同時圖標(biāo)也具有較強的設(shè)計感。

三、線面結(jié)合

結(jié)合了線形和面形的優(yōu)點，既保持了面形的重量感，同時具有線形的精致、細(xì)膩。因此在設(shè)計時可以根據(jù)圖標(biāo)具體想要表達(dá)的感覺對線面比例進行把控，不同比例可以呈現(xiàn)出不同的視覺感知。

1. 線面結(jié)合圖標(biāo)的基礎(chǔ)分析及想法

（1）線面比例

線面比例的差異，圖形呈現(xiàn)出來的張力也會又不同的感受?；谥虚g填充的圖標(biāo)形態(tài)嘗試了三種不同的比例，從下圖中可以看出，當(dāng)填充與外形窄邊比為1:3時（左圖）圖標(biāo)呈現(xiàn)往內(nèi)收的感覺，填充與外形窄邊比為1:2時（中間）圖標(biāo)整體較為平衡，當(dāng)填充與外形窄邊比為2:3（大于1:2）時（右圖）整體具有外擴趨勢。

（2）組合形式

線面可以通過不同的組合形式進行繪制?；诓煌慕M合形態(tài)可以設(shè)計出多種多樣的線面圖標(biāo)，不同的組合形式會體現(xiàn)出不同的設(shè)計風(fēng)格，因此在設(shè)計時盡量多發(fā)散思考，尋找出適合你的組合方式。

（3）繁簡對比

線面結(jié)合本身就由兩種形式組合，因此在設(shè)計的時候更需要對整體造型進行把控，單體（線和面）造型必須保持較高的簡潔程度，這樣最終組合形成的圖標(biāo)才不會過于復(fù)雜（左圖），若本身形態(tài)過于復(fù)雜，則會降低圖標(biāo)的辨識度和視覺美觀度。

2. 線面結(jié)合圖標(biāo)類型拓展

線面結(jié)合的圖標(biāo)集合了線型和面形的優(yōu)點，在設(shè)計方式上也繼承了兩者的優(yōu)點。因此設(shè)計方式也是基于以上兩種的結(jié)合，因此可以結(jié)合出更多設(shè)計的可能性。

（1）黑白線+面形品牌色

與“線形+品牌色”的做法較為接近，統(tǒng)一的線形顏色疊加品牌色的透出。

實際案例-好好住/soul

（2）線面雙色

基于線面的基礎(chǔ)上，在線和面的顏色上做差異。具體做法與線型或面形的雙色接近。

（3）線面結(jié)合-陰陽

線和面的按50%的比例進行設(shè)計，依據(jù)上下、左右、居中等基礎(chǔ)方式的結(jié)構(gòu)化設(shè)計，整體圖標(biāo)的視覺效果較為跳躍非常規(guī)。

（4）線面雙色+錯位

在雙色圖標(biāo)的基礎(chǔ)上，線和面按照統(tǒng)一的 “百分比” 進行縮放，并進行透視和位移的設(shè)計，整體呈現(xiàn)出來的是一種交錯疊加的視覺效果，相比普通的線面雙色更豐富了層級。

實際案例-閑魚底部tab、臉球底部tab

（5）線面錯位+漸變

基于上一種風(fēng)格，對面或者線的顏色進行漸變設(shè)計，除了具有豐富圖標(biāo)的質(zhì)感和顏色更加細(xì)膩。

（6）線面透明度變化

與“線面透明度變化”的設(shè)計方式大致一樣。如下圖案例，“弱線強面”的第一識別度較弱，而“弱面強線” 的外形識別度較高，也更符合圖標(biāo)的表達(dá)。

實際案例-新浪微博、騰訊新聞

基于三種基礎(chǔ)的類型表達(dá)，可以拓展出多種多樣的設(shè)計形式。除了以上的案例之外，還收集了一些其他的設(shè)計，如下：

（7）線面結(jié)合——插畫

整體比較偏向插圖的感覺，細(xì)節(jié)和元素較多，常見與一些APP的空白頁設(shè)計。

（8）線面結(jié)合——卡通插畫

整體感覺比較可愛、卡通、二次元，常見與一些二次元或漫畫類的APP。

（9）面形—漸變強質(zhì)感

整體風(fēng)格的光影質(zhì)感會比較強烈，常見于一些活動運營或小游戲的界面出現(xiàn)。

（10）面形-扁平寫實

整體感覺比較扁平，細(xì)節(jié)的豐富度與現(xiàn)實感知接近。

（11）線面+漸變插畫

整體風(fēng)格比較偏向絢麗多彩的顏色風(fēng)格，質(zhì)感和細(xì)節(jié)較為豐富。

（12）寫實風(fēng)格

（13）3D質(zhì)感圖標(biāo)

由于C4D的制作成本相對較高，目前較少在常規(guī)的APP中看到。但3D作為一個主流的設(shè)計趨勢，在時間和能力允許但情況下需要多做這方面但嘗試。

（14）等距的線面結(jié)合

等距的設(shè)計，讓原本線面的圖標(biāo)更加豐富了層次，并具有立體透視的感覺。

除了以上這些之外，我們在實際場景中也會發(fā)現(xiàn)一些較為特別的圖標(biāo)設(shè)計，如下：

（15）Facebook更多頁面——列表圖標(biāo)

整體風(fēng)格偏向插畫風(fēng)+漸變質(zhì)感。由于更多的頁面為純列表的設(shè)計，因此整個頁面在圖標(biāo)的設(shè)計上做了很大膽的嘗試，與常規(guī)的單色圖標(biāo)相比更具又吸引力。區(qū)別與如此業(yè)務(wù)的業(yè)務(wù)，系統(tǒng)性質(zhì)的功能圖標(biāo)做了色調(diào)的區(qū)分。

APP Store游戲和新APP界面下的類別列表圖標(biāo)

整體為具象化扁平風(fēng)格的設(shè)計表達(dá)，圖標(biāo)的顏色還原最基本的現(xiàn)實感知的識別。

（16）iOS系統(tǒng)——辦公類軟件的起始頁面圖標(biāo)

整體風(fēng)格比較偏商務(wù)簡約，具象的圖形表達(dá)+輕微的漸變質(zhì)感。

（17）QQ手機版——加號圖標(biāo)

整體風(fēng)格偏向輕寫實+微弱漸變。每個圖標(biāo)都具有豐富的細(xì)節(jié)表達(dá)，色調(diào)方面基于業(yè)務(wù)屬性結(jié)合品牌色進行了區(qū)分，整體既統(tǒng)一又具有差異化。

（18）大眾點評——頂部入口

整體風(fēng)格偏向?qū)憣?強漸變+炫光感，每個圖標(biāo)都具有豐富的細(xì)節(jié)表達(dá)。

（19）旅法師營地

游戲、二次元類的APP，因此在圖標(biāo)的設(shè)計上也偏向細(xì)節(jié)較為豐富的插畫風(fēng)格。

（20）嗶哩嗶哩動漫

圖標(biāo)風(fēng)格偏向卡通插畫，選中態(tài)與默認(rèn)態(tài)的設(shè)計較為巧妙。

總結(jié)

本文的重點在于透過這些設(shè)計類型或者技法的了解，幫助我們在于日常設(shè)計中的提升輸出效率。圖標(biāo)雖然作為UI設(shè)計的基礎(chǔ)，但卻有很深的學(xué)問，精致的圖標(biāo)更是可以起到點睛的作用，提升界面的質(zhì)感和氛圍。

圖標(biāo)的種類肯定遠(yuǎn)遠(yuǎn)不止本文所提到的這些內(nèi)容，但是萬變不離其中——“線形、面形、線面結(jié)合”再結(jié)合“透明度、漸變、顏色疊加、質(zhì)感、多維空間”，等等的表達(dá)方式。

我們除了需要掌握了解這些內(nèi)容之外，還需要提升圖標(biāo)設(shè)計的造型能力，更需要日積月累的練習(xí)和思考，從量到質(zhì)的變化。

作者：IDfor，公眾號：IDfor（ID：IDfor_all）

本文由 @IDfor 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

本文部分截圖來自dribbble.com和APP截圖

題圖來自Unsplash，基于CC0協(xié)議