圖标是UI設計(jì)中非常重要的(de)一部分。每個(gè)界面的(de)設計(jì)幾乎總是與圖标的(de)表達有(yǒu)關。優秀的(de)圖标設計(jì)可以使界面更加精緻。 有(yǒu)趣。

圖标的(de)設計(jì)通(tōng)常反映了設計(jì)師(shī)的(de)基本技(jì)能。因此，除了圖标樣式的(de)日(rì)常控制外(wài)，我們還(hái)需要了解和(hé)學習(xí)圖标設計(jì)的(de)趨勢類型，這(zhè)有(yǒu)助于我們提高(gāo)設計(jì)效率。

基于自(zì)學習(xí)的(de)目的(de)，我們通(tōng)常在浏覽一些設計(jì)網站時(shí)進行相(xiàng)應的(de)收集。所以這(zhè)篇文(wén)章(zhāng)主要是關于“ 型”的(de)圖标設計(jì)，以及他(tā)們自(zì)己對(duì)每種圖标類型的(de)思考。

圖标類型劃分

設計(jì)網站上(shàng)的(de)圖标可以說(shuō)是多種多樣的(de)，不同類型的(de)圖标具有(yǒu)獨特的(de)魅力。例如，線性圖标簡單輕巧。 臉部圖标沉重且簡單明(míng)了。當然，相(xiàng)同類型的(de)圖标也有(yǒu)許多不同的(de)表達方式。

因此，根據我對(duì)圖标的(de)理(lǐ)解，它大緻分為(wèi)三類：線性 小(xiǎo)平面 線表面組合。結合三種基本類型的(de)表達式可以創建各種表達式。

線性圖标
使用輕量的(de)線條勾勒的(de)圖标，整體(tǐ)感受也趨向于精緻、細緻而具有(yǒu)銳度感。不同的(de)線條表現(xiàn)具有(yǒu)不同的(de)視(shì)覺感受，細線輕量、直線硬朗、曲線柔美(měi)。

1. 線型圖标基礎分析及想法
粗細對(duì)比

粗細不同，圖标的(de)力度和(hé)重量感就會有(yǒu)差異。粗線的(de)圖标，視(shì)覺關注力來(lái)說(shuō)會更加突出，但(dàn)較于細線的(de)圖标也會顯得粗壯、厚重。細線的(de)圖标，精緻、透氣、秀美(měi)。

但(dàn)在設計(jì)時(shí)需要依據 「整體(tǐ)的(de) UI 風(fēng)格」 來(lái)決定線的(de)粗細，而并非單純的(de)考慮圖标的(de)關注度，反而更需要考慮圖标與界面整體(tǐ)的(de)平衡感。

柔度對(duì)比

直角與圓角決定了外(wài)形的(de)感知和(hé)風(fēng)格的(de)走向，如下(xià)圖對(duì)比中看(kàn)出，圓角越大圖形越趨向于可愛柔美(měi)（如下(xià)右圖），圓角越小(xiǎo)則越直接、硬朗和(hé)陽剛。因此剛或柔或中間(jiān)值完全取決于早期對(duì)于整體(tǐ)風(fēng)格的(de)定調。

繁簡對(duì)比

除了輕量化(huà)和(hé)簡潔之外(wài)，圖标的(de)識别性也是極為(wèi)重要。如下(xià)左圖，「過度簡潔」 導緻圖标失去(qù)該有(yǒu)的(de)識别度而出現(xiàn)歧義，而下(xià)右圖的(de)元素疊加使得圖标稍顯複雜(zá)。在繁與簡的(de)平衡中，應該保持在不影響圖标識别度的(de)情況下(xià)，最大限度的(de)提升圖标的(de)簡潔程度。

特征的(de)識别度

除了簡潔程度，也需要考慮圖标該有(yǒu)的(de)特征。例如下(xià)圖 「評論」 圖标的(de)案例，當我把圖标中的(de)「三個(gè)點」 去(qù)掉時(shí)，圖标依舊(jiù)具有(yǒu) 「對(duì)話(huà)/評論」 的(de)表意，而當我把下(xià)面的(de) 「箭頭」 去(qù)掉保留 「三個(gè)點」 時(shí)，則會出現(xiàn)歧義，它可以被表意為(wèi) 「更多」 的(de)意思，因此在設計(jì)圖标時(shí)需要對(duì)于表意做精準把握，避免歧義出現(xiàn)。

保持圖标的(de)特征美(měi)感

我們具有(yǒu)普識性的(de)圖标，與圓形組合之後依然保持着原有(yǒu)的(de)形态美(měi)感。但(dàn)我們不時(shí)也會看(kàn)到第三種設計(jì)，整體(tǐ)外(wài)形雖然保持着愛心，但(dàn)為(wèi)了與整體(tǐ)風(fēng)格「一緻」 強行對(duì)外(wài)輪廓進行切割，與原圖形在美(měi)感上(shàng)則稍微(wēi)有(yǒu)些出入，這(zhè)也是我們需要思考的(de)關鍵點。

組合型比例

組合型的(de)比例會影響到圖标的(de)精緻程度，準确的(de) 「比例值」 能讓整體(tǐ)的(de)造型趨向平衡，更具有(yǒu)美(měi)感。如下(xià)圖案例嘗試了兩組不同比例的(de)效果，這(zhè)裏以圖标窄邊作(zuò)為(wèi) 「基準值」 進行嘗試。當內(nèi)形為(wèi)外(wài)形的(de) 1 : 2 時(shí)，圖标的(de)整體(tǐ)視(shì)覺效果較為(wèi)平衡；當大于 1 : 2 并接近(jìn) 4 : 3 時(shí)，圖标內(nèi)部結構會顯得過于飽滿。而小(xiǎo)于 1 : 2 并接近(jìn) 4 : 1 時(shí)則會産生(shēng)稀疏不緊湊的(de)效果。

2. 線性類型拓展
基礎的(de)理(lǐ)論，結合延展的(de)應用，可以迸發出更多的(de)創意想法。線形圖标也并非隻有(yǒu)一種設計(jì)形态。通(tōng)過以下(xià)案例，可以看(kàn)看(kàn)線型圖标設計(jì)類型的(de)多樣性。

極簡風(fēng)格

整體(tǐ)風(fēng)格極為(wèi)簡約，沒有(yǒu)多餘的(de)線條，通(tōng)過線條還(hái)原圖形的(de)本質，外(wài)形 「簡單」 卻具有(yǒu)很(hěn)強的(de)識别性，在視(shì)覺感知上(shàng)輕松、幹淨。

極簡的(de)風(fēng)格圖标在于對(duì)圖形的(de)把控，多一筆(bǐ)可能顯得複雜(zá)，少一筆(bǐ)可能影響識别程度。以上(shàng)圖為(wèi)例，圖标的(de)組合元素保持在 2 個(gè)左右，整體(tǐ)較為(wèi)幹淨。

雙色

相(xiàng)較于 「純色的(de)圖标」 更具表現(xiàn)力，細節上(shàng)也會更加豐富，形态感知上(shàng)多了一層變化(huà)。結合顔色的(de)疊加、對(duì)比、互補提升了圖标的(de)層次感和(hé)豐富度。

同色系：同為(wèi)冷(lěng)色系、暖色系或同一色系的(de)表達形式。以暗(àn)色為(wèi)主色，亮(liàng)色點綴提亮(liàng)，使得圖标具有(yǒu)一種高(gāo)光(guāng)提亮(liàng)的(de)感覺。

另一組案例是亮(liàng)色主色結合暗(àn)色，整體(tǐ)圖标效果還(hái)算(suàn)可以，但(dàn)較亮(liàng)的(de)顔色沒有(yǒu)應用在圖标的(de)關鍵特征上(shàng)，使得圖标第一眼的(de)感知稍有(yǒu)減弱。

對(duì)比互補色：顔色跨度更大，層次更加分明(míng)。如下(xià)圖案例，紅色與藍(lán)色的(de)撞色之後相(xiàng)比單色的(de)圖标更加出彩和(hé)具有(yǒu)記憶點。

透明(míng)度變化(huà)

本質上(shàng)與上(shàng)面一種為(wèi)一個(gè)類型的(de)設計(jì)，通(tōng)過透明(míng)度的(de)疊加和(hé)變化(huà)，提升圖标的(de)層次感和(hé)空間(jiān)感，降低(dī)圖标的(de)壓迫性。

漸變層次疊加

漸變帶出了圖标的(de)質感，結合「不同深度」或「不同飽和(hé)度」的(de)變化(huà)，讓圖标更具有(yǒu)細節和(hé)層次。

黑(hēi)白+品牌色

黑(hēi)白色作(zuò)為(wèi)主色調，結合品牌色作(zuò)為(wèi)點綴色。與常規的(de)黑(hēi)白圖标相(xiàng)比，既産生(shēng)了變化(huà)，同時(shí)兼顧了品牌色的(de)透出。

線性漸變

結合漸變的(de)顔色，豐富了整個(gè)圖标的(de)視(shì)覺表達，并提升了圖标的(de)視(shì)覺沖擊力和(hé)設計(jì)感。案例結合黑(hēi)白背景作(zuò)為(wèi)嘗試，白底：粗線比細線的(de)視(shì)覺效果相(xiàng)對(duì)較好(hǎo)，漸變也能較為(wèi)清晰地(dì)被表達；黑(hēi)底：細線比粗線的(de)視(shì)覺效果顯示得更加精緻和(hé)具有(yǒu)銳度感。

一筆(bǐ)成形

此類圖标在視(shì)覺表達上(shàng)具有(yǒu)較高(gāo)的(de)線性流暢度和(hé)設計(jì)感，關注點在于整組圖标的(de) 「開(kāi)口起始點」 設定上(shàng)需保持一緻。例如，「從(cóng)左到右」或「從(cóng)右到左」形成一體(tǐ)化(huà)的(de)連貫線條，開(kāi)口起始點不一緻會影響整組圖标的(de)一緻性，應用在頁面時(shí)也會顯得雜(zá)亂。

斷點圖标

與上(shàng)一種較為(wèi)類似，但(dàn)沒有(yǒu)連貫度的(de)要求。在線形圖标基礎上(shàng)面，尋找一個(gè)缺口來(lái)打破 「全包邊圖标」 的(de)沉悶感，使得圖标具有(yǒu)透氣性和(hé)線條的(de)變化(huà)。缺口的(de)位置盡量保持統一的(de)方向及大小(xiǎo)，另外(wài)需要控制開(kāi)口個(gè)數避免過多導緻圖标外(wài)形過于零碎。

面性圖标
面性圖标比線性圖标更能表達出圖标的(de)力量感和(hé)重量感，比線性圖标會更加容易吸引用戶目光(guāng)。在識别度上(shàng)，面性圖标更加依賴于外(wài)輪廓的(de)清晰度，因此在設計(jì)時(shí)對(duì)于外(wài)形的(de)打磨是重中之重，清晰的(de)外(wài)輪廓可以幫助提高(gāo)識别度。

1. 面型圖标基礎分析及想法
輪廓對(duì)比

輪廓的(de)差異會體(tǐ)現(xiàn)出不同的(de)氣質，如下(xià)圖的(de)左邊和(hé)右邊的(de)區(qū)别，一個(gè)氣質較為(wèi)直接硬朗，另一個(gè)則較為(wèi)柔美(měi)可愛。流暢的(de)外(wài)形可以讓面形圖标的(de)整體(tǐ)更加簡潔、規整，中間(jiān)的(de)圖标在輪廓的(de)處理(lǐ)上(shàng)則顯得比較碎，整體(tǐ)外(wài)輪廓造型的(de)連貫度有(yǒu)所欠缺。

镂空對(duì)比

适當的(de)镂空除了補充了圖形的(de)識别度之外(wài)，還(hái)提升了面性圖标的(de)設計(jì)細節。另外(wài)需要控制好(hǎo)镂空部分與整體(tǐ)的(de)外(wài)形比例，過小(xiǎo)或過大都(dōu)可能影響圖标的(de)平衡感。中間(jiān)和(hé)右邊，镂空過小(xiǎo)對(duì)圖标的(de)辨識度并沒有(yǒu)多大作(zuò)用，沒有(yǒu)镂空則少了一些透氣感。

形體(tǐ)對(duì)比

形态上(shàng)的(de)差異也會具有(yǒu)不一樣的(de)視(shì)覺感知。以「星」和(hé)「心」為(wèi)案例，單獨形體(tǐ)與組合之後的(de)形體(tǐ)相(xiàng)比視(shì)覺感知更直觀些，而組合形的(de)圖标相(xiàng)對(duì)會精緻一些，多了一些層次。在日(rì)常設計(jì)中的(de)經驗是：越小(xiǎo)的(de)圖标形體(tǐ)應該越簡單，因此建議(yì)單體(tǐ)出現(xiàn)較好(hǎo)；若圖标的(de)尺寸足夠大時(shí)可采用組合型的(de)設計(jì)，補充圖标的(de)細節。

繁簡對(duì)比

設計(jì)面性圖标時(shí)，對(duì)于多餘細節的(de)管理(lǐ)也很(hěn)重要。随着細節的(de)增加，塊面切割過多，會使得整體(tǐ)圖标變得過于零碎。保持簡約的(de)設計(jì)提高(gāo)圖标的(de)識别度，在關鍵的(de)特征細節上(shàng)做補充（如下(xià)中間(jiān)圖的(de)相(xiàng)機(jī)閃光(guāng)燈）。

2. 面性圖标類型拓展
面性圖标在設計(jì)時(shí)也可以結合各種不同的(de)表達方式，來(lái)提升圖标的(de)質感和(hé)創意，而非隻是簡單的(de)填充顔色。

單色面+點綴色

整體(tǐ)的(de)外(wài)形使用統一的(de)顔色，結合圖标的(de)屬性感知使用不同的(de)顔色進行點綴，通(tōng)過點綴色提亮(liàng)了圖标的(de)視(shì)覺效果，達到既統一又(yòu)具有(yǒu)差異化(huà)。

多彩雙色

通(tōng)過對(duì)比色、鄰近(jìn)色的(de)搭配來(lái)營造整體(tǐ)的(de)圖标氛圍，提升了圖标的(de)層次和(hé)豐富度，雙色的(de)表達也增添了圖形的(de)趣味性。在日(rì)常使用的(de) APP 中極為(wèi)常見，簡單且容易出效果。

微(wēi)質感漸變

微(wēi)弱的(de)漸變提升了圖标的(de)質感。漸變的(de)方向會影響整體(tǐ)圖标的(de)視(shì)覺效果，因此可以根據不同設計(jì)的(de)需要進行調整。

透明(míng)度/灰度變化(huà)

透明(míng)度/灰度的(de)變化(huà)，讓原來(lái)單色的(de)圖标變得更加具有(yǒu)層次感和(hé)空間(jiān)感，設計(jì)細節更加豐富，降低(dī)了單色面性圖标的(de)厚重感。

透明(míng)度變化(huà)+漸變

漸變的(de)設計(jì)提升了面性圖标的(de)質感，從(cóng)顔色上(shàng)具有(yǒu)一定的(de)豐富度。在漸變的(de)基礎上(shàng)對(duì)組合型做透明(míng)度差異化(huà)，使得圖标具有(yǒu)了層次感。

透明(míng)疊加的(de)圖标+漸變的(de)背景

此類圖标常常被應用在 UI 界面中的(de)列表或者頂部入口的(de)位置。

顔色疊加穿透

圖标透明(míng)疊加之後産生(shēng)了交錯(cuò)的(de)負形，疊加出第三個(gè)面。雖然整體(tǐ)設計(jì)依然保持着扁平化(huà)，但(dàn)卻多了一份層次感，并且增加了圖标的(de)細節。

漸變層次疊加

整體(tǐ)的(de)效果與透明(míng)度變化(huà)的(de)圖标較為(wèi)接近(jìn)，通(tōng)過漸變的(de)深淺變化(huà)，使得形狀的(de)銜接處出現(xiàn)了明(míng)暗(àn)對(duì)比，因此圖标也具有(yǒu)了厚度感和(hé)層次感。

高(gāo)斯模糊

此類圖标基本沒有(yǒu)在 APP 中看(kàn)到，與「透明(míng)度變化(huà)」或「顔色疊加」相(xiàng)比都(dōu)更具層次感和(hé)空間(jiān)感，同時(shí)圖标也具有(yǒu)較強的(de)設計(jì)感。

線面結合
結合了線性和(hé)面性的(de)優點，既保持了面性的(de)重量感，同時(shí)具有(yǒu)線性的(de)精緻、細膩。因此在設計(jì)時(shí)可以根據圖标具體(tǐ)想要表達的(de)感覺對(duì)線面比例進行把控，不同比例可以呈現(xiàn)出不同的(de)視(shì)覺感知。

1. 線面結合圖标的(de)基礎分析及想法
線面比例

線面比例的(de)差異，圖形呈現(xiàn)出來(lái)的(de)張力也會有(yǒu)不同的(de)感受。基于中間(jiān)填充的(de)圖标形态嘗試了三種不同的(de)比例，從(cóng)下(xià)圖中可以看(kàn)出，當填充與外(wài)形窄邊比為(wèi) 1 : 3 時(shí)圖标呈現(xiàn)往內(nèi)收的(de)感覺；填充與外(wài)形窄邊比為(wèi) 1 : 2 時(shí)圖标整體(tǐ)較為(wèi)平衡；當填充與外(wài)形窄邊比為(wèi) 2 : 3（大于1:2）時(shí)整體(tǐ)具有(yǒu)外(wài)擴趨勢。

組合形式

線面可以通(tōng)過不同的(de)組合形式進行繪制。基于不同的(de)組合形态可以設計(jì)出多種多樣的(de)線面圖标，不同的(de)組合形式會體(tǐ)現(xiàn)出不同的(de)設計(jì)風(fēng)格，因此在設計(jì)時(shí)盡量多發散思考，尋找出适合你(nǐ)的(de)組合方式。

繁簡對(duì)比

線面結合本身(shēn)就由兩種形式組合，因此在設計(jì)的(de)時(shí)候更需要對(duì)整體(tǐ)造型進行把控，單體(tǐ)（線和(hé)面）造型必須保持較高(gāo)的(de)簡潔程度，這(zhè)樣最終組合形成的(de)圖标才不會過于複雜(zá)，若本身(shēn)形态過于複雜(zá)，則會降低(dī)圖标的(de)辨識度和(hé)視(shì)覺美(měi)觀度。

2. 線面結合圖标類型拓展
線面結合的(de)圖标集合了線性和(hé)面性的(de)優點，在設計(jì)方式上(shàng)也繼承了兩者的(de)優點。設計(jì)方式也是基于以上(shàng)兩種的(de)結合，因此可以結合出更多設計(jì)的(de)可能性。

黑(hēi)白線+面性品牌色

與「線性+品牌色」的(de)做法較為(wèi)接近(jìn)，統一的(de)線性顔色疊加品牌色的(de)透出。

線面雙色

基于線面的(de)基礎上(shàng)，在線和(hé)面的(de)顔色上(shàng)做差異。具體(tǐ)做法與線性或面性的(de)雙色接近(jìn)。

線面結合-陰陽

線和(hé)面的(de)結合按 50% 的(de)比例進行設計(jì)，依據上(shàng)下(xià)、左右、居中等基礎方式的(de)結構化(huà)設計(jì)，整體(tǐ)圖标的(de)視(shì)覺效果較為(wèi)跳(tiào)躍，非常規。

線面雙色+錯(cuò)位

在雙色圖标的(de)基礎上(shàng)，線和(hé)面按照(zhào)統一的(de) 「百分比」 進行縮放(fàng)，并進行透視(shì)和(hé)位移的(de)設計(jì)，整體(tǐ)呈現(xiàn)出來(lái)的(de)是一種交錯(cuò)疊加的(de)視(shì)覺效果，相(xiàng)比普通(tōng)的(de)線面雙色更加豐富。

線面錯(cuò)位+漸變

基于上(shàng)一種風(fēng)格，對(duì)面或者線的(de)顔色進行漸變設計(jì)，豐富了圖标的(de)質感和(hé)顔色更加細膩。

線面透明(míng)度變化(huà)

與「線面透明(míng)度變化(huà)」的(de)設計(jì)方式大緻一樣。如下(xià)圖案例，「弱線強面」的(de)第一識别度較弱，而「弱面強線」 的(de)外(wài)形識别度較高(gāo)，也更符合圖标的(de)表達。

基于三種基礎的(de)類型表達，可以拓展出多種多樣的(de)設計(jì)形式。除了以上(shàng)的(de)案例之外(wài)，還(hái)收集了一些其他(tā)的(de)設計(jì)。

線面結合 – 插畫(huà)

整體(tǐ)比較偏向插圖的(de)感覺，細節和(hé)元素較多，常見于一些 APP 的(de)空白頁設計(jì)。

線面結合 – 卡通(tōng)插畫(huà)

整體(tǐ)感覺比較可愛、卡通(tōng)、二次元，常見于一些二次元或漫畫(huà)類的(de) APP。

面性 – 漸變強質感

整體(tǐ)風(fēng)格的(de)光(guāng)影質感會比較強烈，常在一些活動運營或小(xiǎo)遊戲的(de)界面出現(xiàn)。

面性 – 扁平寫實

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

線面+漸變插畫(huà)

整體(tǐ)風(fēng)格比較偏向絢麗(lì)多彩的(de)顔色風(fēng)格，質感和(hé)細節較為(wèi)豐富。

3D質感圖标

由于 C4D 的(de)制作(zuò)成本相(xiàng)對(duì)較高(gāo)，目前較少在常規的(de) APP 中看(kàn)到。但(dàn) 3D 作(zuò)為(wèi)一個(gè)主流的(de)設計(jì)趨勢，在時(shí)間(jiān)和(hé)能力允許的(de)情況下(xià)需要多做這(zhè)方面的(de)嘗試。

等距的(de)線面結合

等距的(de)設計(jì)，讓原本線面的(de)圖标豐富了層次，并具有(yǒu)立體(tǐ)透視(shì)的(de)感覺。

除了以上(shàng)這(zhè)些之外(wài)，我們在實際場(chǎng)景中也會發現(xiàn)一些較為(wèi)特别的(de)圖标設計(jì)。

本文(wén)的(de)重點是通(tōng)過了解這(zhè)些設計(jì)類型或技(jì)術，幫助我們提高(gāo)日(rì)常設計(jì)的(de)輸出效率。雖然圖标是UI設計(jì)的(de)基礎，但(dàn)它具有(yǒu)深厚的(de)知識，精緻的(de)圖标可以在畫(huà)龍點睛中起作(zuò)用，改善界面的(de)質感和(hé)氛圍。圖标的(de)類型遠(yuǎn)遠(yuǎn)超過本文(wén)中提到的(de)那(nà)些，但(dàn)它們都(dōu)是“線性  facet 線表面組合”結合“透明(míng)度 漸變 顔色疊加 紋理(lǐ) 多維空間(jiān)”等等設計(jì)方式表達。

除了掌握這(zhè)些內(nèi)容外(wài)，我們還(hái)需要提高(gāo)圖标設計(jì)的(de)造型能力，更需要從(cóng)數量到質量的(de)實踐和(hé)思考。