前言

編者按：圖標(biāo)類型千變?nèi)f化，實(shí)際上萬變不離「線性尿招、面性矾柜、線面結(jié)合」3個(gè)方面， 再結(jié)合 「透明度就谜、漸變怪蔑、顏色疊加、質(zhì)感吁伺、多維空間」等表達(dá)方式設(shè)計(jì)而成饮睬。本文將近 6000 字，一篇就可以了解全部設(shè)計(jì)風(fēng)格篮奄！

圖標(biāo)是 UI 設(shè)計(jì)中極為重要的一個(gè)環(huán)節(jié)捆愁，我們?cè)谧雒總€(gè)界面的設(shè)計(jì)幾乎都會(huì)涉及到圖標(biāo)的表達(dá)，出色的圖標(biāo)設(shè)計(jì)可以讓界面表達(dá)更加精致窟却、有趣昼丑。

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

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

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

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

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

線性圖標(biāo)

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

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

粗細(xì)對(duì)比

粗細(xì)不同惊搏，圖標(biāo)的力度和重量感就會(huì)有差異。粗線的圖標(biāo)忧换，視覺關(guān)注力來說會(huì)更加突出恬惯，但較于細(xì)線的圖標(biāo)也會(huì)顯得粗壯、厚重亚茬。細(xì)線的圖標(biāo)酪耳，精致、透氣刹缝、秀美碗暗。

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

柔度對(duì)比

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

繁簡對(duì)比

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

特征的識(shí)別度

除了簡潔程度，也需要考慮圖標(biāo)該有的特征蝠猬。例如下圖 「評(píng)論」 圖標(biāo)的案例切蟋，當(dāng)我把圖標(biāo)中的「三個(gè)點(diǎn)」 去掉時(shí)，圖標(biāo)依舊具有 「對(duì)話/評(píng)論」 的表意榆芦，而當(dāng)我把下面的 「箭頭」 去掉保留 「三個(gè)點(diǎn)」 時(shí)柄粹，則會(huì)出現(xiàn)歧義喘鸟，它可以被表意為 「更多」 的意思，因此在設(shè)計(jì)圖標(biāo)時(shí)需要對(duì)于表意做精準(zhǔn)把握驻右，避免歧義出現(xiàn)什黑。

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

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

組合型比例

組合型的比例會(huì)影響到圖標(biāo)的精致程度橘蜜，準(zhǔn)確的 「比例值」 能讓整體的造型趨向平衡，更具有美感付呕。如下圖案例嘗試了兩組不同比例的效果计福，這里以圖標(biāo)窄邊作為 「基準(zhǔn)值」 進(jìn)行嘗試。當(dāng)內(nèi)形為外形的 1 : 2 時(shí)（下圖2）凡涩，圖標(biāo)的整體視覺效果較為平衡棒搜；當(dāng)大于 1 : 2 并接近 4 : 3 時(shí)，圖標(biāo)內(nèi)部結(jié)構(gòu)會(huì)顯得過于飽滿活箕。而小于 1 : 2 并接近 4 : 1 時(shí)（下圖3）則會(huì)產(chǎn)生稀疏不緊湊的效果力麸。（這里的比例只是案例需要，實(shí)際設(shè)計(jì)以最終的視覺感知為準(zhǔn)）

2. 線性類型拓展

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

極簡風(fēng)格

整體風(fēng)格極為簡約悉罕，沒有多余的線條赤屋，通過線條還原圖形的本質(zhì)，外形 「簡單」 卻具有很強(qiáng)的識(shí)別性壁袄，在視覺感知上輕松类早、干凈。

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

實(shí)際應(yīng)用：Instagram、Airbnb室抽、Facebook搪哪、Twitter

雙色

相較于 「純色的圖標(biāo)」 更具表現(xiàn)力，細(xì)節(jié)上也會(huì)更加豐富狠半，形態(tài)感知上多了一層變化噩死。結(jié)合顏色的疊加、對(duì)比神年、互補(bǔ)提升了圖標(biāo)的層次感和豐富度已维。

同色系：同為冷色系、暖色系或同一色系的表達(dá)形式已日。如下圖案例垛耳，以暗色為主色，亮色點(diǎn)綴提亮飘千，使得圖標(biāo)具有一種高光提亮的感覺堂鲜。

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

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

實(shí)際案例：騰訊動(dòng)漫我的頁面

透明度變化

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

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

漸變層次疊加

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

黑白+品牌色

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

實(shí)際案例：大眾點(diǎn)評(píng)攻略頁面圖標(biāo)

線性漸變

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

實(shí)際案例：網(wǎng)易考拉、NAVER

一筆成形

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

斷點(diǎn)圖標(biāo)

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

實(shí)際案例：騰訊體育拾氓、京東

面性圖標(biāo)

面性圖標(biāo)比線性圖標(biāo)更能表達(dá)出圖標(biāo)的力量感和重量感，比線性圖標(biāo)會(huì)更加容易吸引用戶目光底哥。在識(shí)別度上咙鞍，面性圖標(biāo)更加依賴于外輪廓的清晰度，因此在設(shè)計(jì)時(shí)對(duì)于外形的打磨是重中之重叠艳，清晰的外輪廓可以幫助提高識(shí)別度奶陈。

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

輪廓對(duì)比

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

鏤空對(duì)比

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

形體對(duì)比

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

繁簡對(duì)比

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

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

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

單色面+點(diǎn)綴色

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

多彩雙色

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

微質(zhì)感漸變

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

實(shí)際案例：全民K歌

透明度/灰度變化

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

實(shí)際案例：企鵝FM我的頁面

透明度變化+漸變

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

透明疊加的圖標(biāo)+漸變的背景

此類圖標(biāo)常常被應(yīng)用在 UI 界面中的列表或者頂部入口的位置第岖。

實(shí)際案例：全民K歌點(diǎn)歌頁面

顏色疊加穿透

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

實(shí)際案例：百度網(wǎng)盤

漸變層次疊加

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

實(shí)際案例：NAVER褐健、掌上生活

高斯模糊

此類圖標(biāo)基本沒有在 APP 中看到付鹿，與「透明度變化」或「顏色疊加」相比都更具層次感和空間感，同時(shí)圖標(biāo)也具有較強(qiáng)的設(shè)計(jì)感蚜迅。

線面結(jié)合

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

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

線面比例

線面比例的差異吵血，圖形呈現(xiàn)出來的張力也會(huì)有不同的感受⊥的纾基于中間填充的圖標(biāo)形態(tài)嘗試了三種不同的比例蹋辅，從下圖中可以看出，當(dāng)填充與外形窄邊比為 1 : 3 時(shí)（左圖）圖標(biāo)呈現(xiàn)往內(nèi)收的感覺挫掏；填充與外形窄邊比為 1 : 2 時(shí)（中間）圖標(biāo)整體較為平衡侦另；當(dāng)填充與外形窄邊比為 2 : 3（大于1:2）時(shí)（右圖）整體具有外擴(kuò)趨勢(shì)。

組合形式

線面可以通過不同的組合形式進(jìn)行繪制砍濒×苌觯基于不同的組合形態(tài)可以設(shè)計(jì)出多種多樣的線面圖標(biāo)，不同的組合形式會(huì)體現(xiàn)出不同的設(shè)計(jì)風(fēng)格爸邢，因此在設(shè)計(jì)時(shí)盡量多發(fā)散思考樊卓，尋找出適合你的組合方式。

繁簡對(duì)比

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

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

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

黑白線+面性品牌色

與「線性+品牌色」的做法較為接近募书，統(tǒng)一的線性顏色疊加品牌色的透出绪囱。

實(shí)際案例：好好住、soul

線面雙色

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

線面結(jié)合-陰陽

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

線面雙色+錯(cuò)位

在雙色圖標(biāo)的基礎(chǔ)上寥茫，線和面按照統(tǒng)一的 「百分比」 進(jìn)行縮放涩澡，并進(jìn)行透視和位移的設(shè)計(jì)，整體呈現(xiàn)出來的是一種交錯(cuò)疊加的視覺效果坠敷，相比普通的線面雙色更加豐富妙同。

實(shí)際案例：閑魚底部tab、臉球底部tab

線面錯(cuò)位+漸變

基于上一種風(fēng)格膝迎，對(duì)面或者線的顏色進(jìn)行漸變?cè)O(shè)計(jì)粥帚，豐富了圖標(biāo)的質(zhì)感和顏色更加細(xì)膩。

線面透明度變化

與「線面透明度變化」的設(shè)計(jì)方式大致一樣限次。如下圖案例芒涡，「弱線強(qiáng)面」的第一識(shí)別度較弱，而「弱面強(qiáng)線」 的外形識(shí)別度較高卖漫，也更符合圖標(biāo)的表達(dá)费尽。

實(shí)際案例：新浪微博、騰訊新聞

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

線面結(jié)合 – 插畫

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

線面結(jié)合?– 卡通插畫

整體感覺比較可愛缘缚、卡通勾笆、二次元，常見于一些二次元或漫畫類的 APP桥滨。

面性?– 漸變強(qiáng)質(zhì)感

整體風(fēng)格的光影質(zhì)感會(huì)比較強(qiáng)烈窝爪，常在一些活動(dòng)運(yùn)營或小游戲的界面出現(xiàn)。

面性 – 扁平寫實(shí)

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

線面+漸變插畫

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

寫實(shí)風(fēng)格

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

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

等距的線面結(jié)合

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

除了以上這些之外浩姥，我們?cè)趯?shí)際場(chǎng)景中也會(huì)發(fā)現(xiàn)一些較為特別的圖標(biāo)設(shè)計(jì)挑随。

Facebook 更多頁面的列表圖標(biāo)

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

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

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

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

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

QQ手機(jī)版中延展的功能圖標(biāo)

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

大眾點(diǎn)評(píng)頂部入口的圖標(biāo)

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

旅法師營地

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

嗶哩嗶哩動(dòng)漫

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

總結(jié)

本文的重點(diǎn)在于透過這些設(shè)計(jì)類型或者技法的了解狈茉，幫助我們?cè)谌粘ＴO(shè)計(jì)中提升輸出效率。圖標(biāo)雖然作為 UI 設(shè)計(jì)的基礎(chǔ)掸掸，卻有很深的學(xué)問氯庆，精致的圖標(biāo)更是可以起到點(diǎn)睛的作用，提升界面的質(zhì)感和氛圍扰付。

圖標(biāo)的種類遠(yuǎn)遠(yuǎn)不止本文所提到的這些內(nèi)容堤撵，但是萬變不離其宗，都是「線性羽莺、面性实昨、線面結(jié)合」 再結(jié)合 「透明度、漸變盐固、顏色疊加荒给、質(zhì)感、多維空間」等等的表達(dá)方式而設(shè)計(jì)出來的刁卜。

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

原文地址

（原作者：?IDfor）圖標(biāo)太多分不清楚？可能是最全面的圖標(biāo)設(shè)計(jì)類型和風(fēng)格總結(jié)孝情！ - 優(yōu)設(shè)網(wǎng) - UISDC