本文轉載自：IDfor_all（公眾號），作者：IDfor

圖標是UI設計中極為重要的一個環節，我們在設計每個界面幾乎都會設計到圖標的表達，出色的圖標設計可以讓界面表達更加經常、精緻、有趣。

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

基於自我學習的目的，平時在瀏覽一些設計網站時也會做相對應的收集。因此本文主要對於圖標設計的 「類型、風格」 進行了整理，以及自己對於每種圖標類型的思考觀點。

圖標的類型劃分

設計網站上的圖標可以說是多種多樣，不同類型的圖標都有著獨特的魅力。例如，線形圖標-簡潔輕量、面形圖標-厚重直接，當然同一種類型的圖標也具有很多不同的表現形式。

因此基於本人對圖標的理解，大致劃分為三類：線性、面形、線面結合。結合三種基礎類型的表達方式可以創造出各式各樣的表現形式。

一、線形圖標

使用輕量的線條勾勒的圖標，整體感受也趨向於精緻、細緻而具有銳度感。不同的線條表現具有不同的視覺感受，細線輕量、直線硬朗、曲線柔美。

線型圖標基礎分析及想法

粗細對比

粗細不同，圖標的力度和重量感就會有差異。粗線的圖標，視覺關注力來說會更加突出，但較於細線的圖標也會卻顯得粗壯、厚重；細線的圖標，精緻、透氣、秀美。

但在設計時需要依據 「整體的UI風格」 來決定線的粗細，而並非單純的考慮圖標的關注度，反而更需要考慮圖標與界面整體的平衡感。

柔度對比

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

繁簡對比

除了輕量化和簡潔之外，圖標的識別性也是極為重要。如下左圖，「過度簡潔」 導致圖標失去該有的識別度而出現歧義，而下右圖的元素疊加使得圖標稍顯複雜。在繁與簡的平衡中，應該保持：在不影響 圖標識別度 的情況下，最大限度的提升圖標的簡潔程度。

特徵的識別度

除了簡潔程度，也需要考慮圖標該有的特徵。例如下圖 「評論」 圖標的案例，當我把圖標中的「三個點」 去掉時，圖標依舊具有 「對話/評論」 的表意，而當我把下面的 「箭頭」 去掉保留 「三個點」 時，則會出現歧義，它可以被表意為 「更多」 的意思，因此在設計圖標時需要對於表意做精準把握，避免歧義出現。

保持圖標的特徵美感

如下面的 「心形」 圖標，下左圖為我們具有普識性的圖標，與圓形組合之後依然保持著原有的形態美感。但我們不時也會看到第三種設計，整體外形雖然保持著愛心，但為了與整體風格「一致」 強行對外輪廓進行切割，與原圖形在美感上則稍微有些出入，這也是我們需要思考的關鍵點。

組合型比例

組合形的比例會影響到圖標的精緻程度，準確的 「比例值」 能讓整體的造型趨向平衡，更具有美感。如下圖案例嘗試了兩組不同比例的效果，這裡以圖標窄邊作為 「基準值」 進行嘗試。當內形為外形的1:2時（下圖2），圖標的整體視覺效果較為平衡，當大於1:2並接近4:3時，圖標內部結構會顯得過於飽滿；而小於1:2並接近4:1時（下圖3）則會產生稀疏不緊湊的效果。（這裡的比例只是案例需要，實際設計以最終的視覺感知為準）

線型類型拓展

基礎的理論，結合延展的應用，可以迸發出更多的創意想法。線形圖標也並非只有一種設計形態。通過以下案例，可以看看線型圖標設計的類型的多樣性。

極簡風格

整體風格極為簡約，沒有多餘的線條交錯，通過線條還原圖形的本質，外形 「簡單」 卻具有很強的識別性，在視覺感知上輕鬆、乾淨。

極簡的風格圖標在於對形的把控，多一筆可能顯得複雜，少一筆可能影響識別程度。以上圖為例，圖標的組合元素保持在2個左右，整體較為乾淨。

實際應用-Instagram、Airbnb、Facebook、Twitter

雙色

相較於 「純色的圖標」 更具表現力，細節上也會更加的豐富，形態感知上多了一層變化。結合顏色的疊加、對比、互補提升了圖標的層次感和豐富度。

（1）同色系：同為冷色系、暖色系或某種顏色系統的表達形式。如下圖案例，以暗色主色-亮色點綴提亮，使得圖標具有一種高光提亮的感覺。

另一組案例是 亮色主色結合暗色，整體圖標效果還算可以，但較亮的顏色沒有應用在圖標的關鍵特徵上，使得圖標第一眼的感知稍有減弱。

（2）對比互補色：顏色跨度更大，層次更加分明。如下圖案例，紅色與藍色的撞色之後相比單色的圖標更加出彩和具有記憶點。

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

透明度變化

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

實際案例-安奇藝9宮格圖標

漸變層次疊加

漸變帶出了圖標的質感，結合「不同深度」或「不同飽和度」的變化，讓圖標更具有細節和層次。

黑白+品牌色

黑白色作為主色調，結合品牌色作為點綴色。與常規的黑白圖標相比，既有產生了變化，同時兼顧了品牌色的透出。

實際案例-大眾點評攻略頁面圖標

線形漸變

結合漸變的顏色，豐富了整個圖標的視覺表達，並提升了圖標的視覺衝擊力和設計感。案例結合黑白背景作為嘗試，白底：粗線比細線的視覺效果相對較好，漸變也能較為清晰的被表達，黑底：細線比粗線的視覺效果顯示得更加精緻和具有銳度感。

實際案例-網易考拉/NAVER

一筆成形

此類圖標在視覺表達上具有較高的線性流暢度和設計感，關注點在於整組的圖標的 「開口起始點」 設定上需保持一致。例如，「從左到右」或「從右到左」形成一體化的連貫線條，開口起始點不一致會影響整組圖標的一致性，應用在頁面時也會顯得雜亂。

斷點圖標

與上一種較為類似，但沒有連貫度的要求。在線形圖標基礎上面，尋找一個缺口來打破 「全包邊圖標」 的沉悶感。使得圖標具有透氣性和線條的變化。缺口的位置盡量保持統一的方向及大小，另外需要控制開口個數避免過多導致圖標外形過於零碎。

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

二、面形圖標

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

面型圖標基礎分析及想法

輪廓對比

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

鏤空對比

適當的鏤空除了補充了圖形的識別度之外，還提升了面形圖標的設計細節。另外需要控制好鏤空部分與整體的外形的比例，過小或過大都可能影響圖標的平衡感。如下圖的中間和右邊，鏤空過小對圖標的辨識度並沒有多大作用，沒有鏤空則少了一些透氣感。

形體對比

形態上的差異也會具有不一樣的視覺感知。以「星」和「心」為案例，單獨形體與組合之後的形體相比視覺感知更直觀些，而組合形的圖標相對會精緻一些，更多了一份層次。在日常設計中的經驗是：越小的圖標形體應該越簡單，因此建議單體出現較好；若圖標的尺寸足夠大時可採用組合形的設計，補充圖標的細節。

繁簡對比

設計面形圖標時，對於多餘細節的管理也很重要。隨著細節的增加，塊面切割過多，會使得整體圖標變得過於零碎（如下右圖）。保持簡約的設計提高圖標的識別度，在關鍵的特徵細節上做補充（如下中間圖的相機閃光燈點）。

面形圖標類型拓展

面形圖標在設計時也可以結合各種不同的表達方式，來提升圖標的質感和創意，而非只是簡單的填充顏色而已。

單色面+點綴色

整體的外形使用統一的顏色，結合圖標的屬性感知使用不同的顏色進行點綴，通過點綴色提亮了圖標的視覺效果，達到既統一又具有差異化。

多彩雙色

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

微質感漸變

微弱的漸變提升了圖標的質感。漸變的方向會影響整體圖標的視覺效果，因此可以根據不同設計的需要進行調整。如下圖案例：

實際案例-全民K歌

透明度/灰度變化

透明度/灰度的變化，讓原來單色的圖標變得更加具有層次感和空間感，設計細節更加豐富，降低了單色面形圖標的厚重感。

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

透明度變化+漸變

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

透明疊加的圖標+漸變的背景 此類圖標常常被應用在UI界面中的列表或者頂部入口的位置

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

顏色疊加穿透

圖標透明疊加之後產生了交錯的負形，疊加出第三個面。雖然整體設計依然保持著扁平化，但卻多了一份層次感，並且增加了圖標的細節。

實際案例-百度網盤

漸變層次疊加

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

實際案例-NAVER / 掌上生活

高斯模糊

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

三、線面結合

結合了線形和面形的優點，既保持了面形的重量感，同時具有線形的精緻、細膩。因此在設計時可以根據圖標具體想要表達的感覺對線面比例進行把控，不同比例可以呈現出不同的視覺感知。

線面結合圖標的基礎分析及想法

線面比例

線面比例的差異，圖形呈現出來的張力也會又不同的感受。基於中間填充的圖標形態嘗試了三種不同的比例，從下圖中可以看出，當填充與外形窄邊比為1:3時（左圖）圖標呈現往內收的感覺，填充與外形窄邊比為1:2時（中間）圖標整體較為平衡，當填充與外形窄邊比為2:3（大於1:2）時（右圖）整體具有外擴趨勢。

組合形式

線面可以通過不同的組合形式進行繪製。基於不同的組合形態可以設計出多種多樣的線面圖標，不同的組合形式會體現出不同的設計風格，因此在設計時盡量多發散思考，尋找出適合你的組合方式。

繁簡對比

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

線面結合圖標類型拓展

線面結合的圖標集合了線型和面形的優點，在設計方式上也繼承了兩者的優點。因此設計方式也是基於以上兩種的結合，因此可以結合出更多設計的可能性。

黑白線+面形品牌色

與「線形+品牌色」的做法較為接近，統一的線形顏色疊加品牌色的透出。

實際案例-好好住/soul

線面雙色

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

線面結合-陰陽

線和面的按50%的比例進行設計，依據上下、左右、居中等基礎方式的結構化設計，整體圖標的視覺效果較為跳躍非常規。

線面雙色+錯位

在雙色圖標的基礎上，線和面按照統一的 「百分比」 進行縮放，並進行透視和位移的設計，整體呈現出來的是一種交錯疊加的視覺效果，相比普通的線面雙色更豐富了層級。

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

線面錯位+漸變

基於上一種風格，對面或者線的顏色進行漸變設計，除了具有豐富圖標的質感和顏色更加細膩。

線面透明度變化

與「線面透明度變化」的設計方式大致一樣。如下圖案例，「弱線強面」的第一識別度較弱，而「弱面強線」 的外形識別度較高，也更符合圖標的表達。

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

基於三種基礎的類型表達，可以拓展出多種多樣的設計形式。除了以上的案例之外，還收集了一些其他的設計，如下：

線面結合—插畫

整體比較偏向插圖的感覺，細節和元素較多，常見與一些APP的空白頁設計。

線面結合—卡通插畫

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

面形—漸變強質感

整體風格的光影質感會比較強烈，常見於一些活動運營或小遊戲的界面出現。

面形-扁平寫實

整體感覺比較扁平，細節的豐富度與現實感知接近。

線面+漸變插畫

整體風格比較偏向絢麗多彩的顏色風格，質感和細節較為豐富。

寫實風格

3D質感圖標

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

等距的線面結合

等距的設計，讓原本線面的圖標更加豐富了層次，並具有立體透視的感覺。

除了以上這些之外，我們在實際場景中也會發現一些較為特別的圖標設計，如下：

Facebook 更多頁面—列表圖標

整體風格偏向插畫風+漸變質感。由於更多的頁面為純列表的設計，因此整個頁面在圖標的設計上做了很大膽的嘗試，與常規的單色圖標相比更具又吸引力。區別與如此業務的業務，系統性質的功能圖標做了色調的區分

APP Store 遊戲和新APP界面下的類別列表圖標

整體為具象化扁平風格的設計表達，圖標的顏色還原最基本的現實感知的識別。

iOS系統—辦公類軟體的起始頁面圖標

整體風格比較偏商務簡約，具象的圖形表達+輕微的漸變質感。

QQ手機版—加號圖標

整體風格偏向輕寫實+微弱漸變。每個圖標都具有豐富的細節表達，色調方面基於業務屬性結合品牌色進行了區分，整體既統一又具有差異化。

大眾點評—頂部入口

整體風格偏向寫實+強漸變+炫光感，每個圖標都具有豐富的細節表達。

旅法師營地

遊戲、二次元類的APP，因此在圖標的設計上也偏向細節較為豐富的插畫風格。

嗶哩嗶哩動漫

圖標風格偏向卡通插畫，選中態與默認態的設計較為巧妙。

總結

本文的重點在於透過這些設計類型或者技法的了解，幫助我們在於日常設計中的提升輸出效率。圖標雖然作為UI設計的基礎，但卻有很深的學問，精緻的圖標更是可以起到點睛的作用，提升界面的質感和氛圍。

圖標的種類肯定遠遠不止本文所提到的這些內容，但是萬變不離其中—— 「線形、面形、線面結合」 再結合 「透明度、漸變、顏色疊加、質感、多維空間」，等等的表達方式 。

我們除了需要掌握了解這些內容之外，還需要提升圖標設計的造型能力，更需要日積月累的練習和思考，從量到質的變化。

謝謝品鑒

本文部分截圖來自http://dribbble.com和APP截圖。

—

拓展閱讀

如何從0到1 ，設計一組UI圖標？

夯實UI設計基本，成為真正適應行業需求的UI設計師！

Eagle軟體是什麼？為什麼用過的設計師都說好？

---

平面設計學習日記，是一個分享高質量設計教程、書籍、經驗的學習平台。匯聚推薦國內優秀設計導師、以及優質「設計、繪畫、修圖」等教程資源，讓自學有路可循，成長更加高效。

訂閱本專欄>

推薦閱讀：