Ant Design React 圖標(biāo)

圖標(biāo)是 UI 設(shè)計(jì)中必不可少的組成。通常我們理解圖標(biāo)設(shè)計(jì)的含義，是將某個(gè)概念轉(zhuǎn)換成清晰易讀的圖形，從而降低用戶的理解成本，提升界面的美觀度。在我們的企業(yè)級(jí)應(yīng)用設(shè)計(jì)范圍中，圖標(biāo)在界面設(shè)計(jì)的諸多元素中往往只占了很小的比重，在調(diào)用時(shí)也會(huì)被縮到比設(shè)計(jì)稿小很多倍的尺寸，加上在圖形素材極度豐富并且便于獲取的今天，在產(chǎn)品設(shè)計(jì)體系中實(shí)現(xiàn)一套美觀、一致、易用、便于延展的圖標(biāo)體系往往會(huì)被不小心忽略掉。Ant Design 相信一整套優(yōu)質(zhì)的圖標(biāo)對(duì)于設(shè)計(jì)質(zhì)量的影響是非常巨大的，這考驗(yàn)著設(shè)計(jì)師的協(xié)作能力，以及對(duì)圖形塑造的系統(tǒng)性思維，同時(shí)也能反映一個(gè)團(tuán)隊(duì)對(duì)于細(xì)節(jié)的追求。

Ant Design 在"確定"和"自然"的設(shè)計(jì)價(jià)值觀影響之下，對(duì)全套的基礎(chǔ)系統(tǒng)圖標(biāo)進(jìn)行了改造，現(xiàn)在大家可以在我們網(wǎng)站上直接查看并使用新版的圖標(biāo)，同時(shí)在這里將我們的系統(tǒng)性思路分享給大家，拋磚引玉，期待有更多的設(shè)計(jì)師參與到這個(gè)寂寞的微觀世界中來(lái)，一起把圖形設(shè)計(jì)這件事做好。

設(shè)計(jì)師專屬

安裝 Kitchen Sketch 插件 ??，可以一鍵拖拽使用 Ant Design 和 Iconfont 的海量圖標(biāo)，還可以關(guān)聯(lián)自有項(xiàng)目。

設(shè)計(jì)原則

Ant Design 的圖標(biāo)設(shè)計(jì)原則源自"確定"和"自然"，落實(shí)到圖標(biāo)設(shè)計(jì)領(lǐng)域，一共有四個(gè)，他們分別為：

• 準(zhǔn)確： 設(shè)計(jì)造型準(zhǔn)確的圖標(biāo)（保持偶數(shù)原則，去小數(shù)點(diǎn)）；選擇表意準(zhǔn)確的圖標(biāo)，不對(duì)用戶的認(rèn)知造成困擾。
• 簡(jiǎn)單： 在表意清晰準(zhǔn)確的基礎(chǔ)上，盡量保持圖形的簡(jiǎn)潔，不做多余的修飾。
• 節(jié)奏： 挖掘構(gòu)圖中的秩序之美。
• 愉悅： 賦予適度的情感。

設(shè)計(jì)規(guī)格

• Artboard： Ant Design 的系統(tǒng)圖標(biāo)都是按照 1024 x 1024 的畫(huà)板進(jìn)行制作的：

• 出血位： 在圖標(biāo)的設(shè)計(jì)過(guò)程中預(yù)留出血位的做法，可以預(yù)防某些造型的圖標(biāo)在具體應(yīng)用時(shí)出現(xiàn)邊緣被切掉的風(fēng)險(xiǎn)；同時(shí)在設(shè)計(jì)過(guò)程中，也為設(shè)計(jì)師把握?qǐng)D標(biāo)間平衡留下了進(jìn)退的余地。新版的設(shè)計(jì)規(guī)格在圖形的外圍預(yù)留了 64px 的出血位，多數(shù)的圖標(biāo)在設(shè)計(jì)中我們都不建議超過(guò)這個(gè)區(qū)域。

分層

Ant Design 的圖標(biāo)設(shè)計(jì)對(duì)于設(shè)計(jì)稿的分層也有一定的要求，其目的除了讓設(shè)計(jì)師實(shí)現(xiàn)有序的文檔管理之外，更多的是便于團(tuán)隊(duì)間文檔的傳遞，統(tǒng)一的設(shè)計(jì)框架像是無(wú)形的共識(shí)，可以讓彼此間的理解得到進(jìn)一步的提升。

輪廓線與模版

我們對(duì)設(shè)計(jì)模版進(jìn)行了優(yōu)化，根據(jù)出血位的尺寸，調(diào)整輪廓線的寬高，同時(shí)增加兩個(gè)等邊三角形和一個(gè)圓，這些都是圖標(biāo)設(shè)計(jì)中最常用的基本形式，設(shè)計(jì)師可以快速的調(diào)用并在此基礎(chǔ)上做變形。

圖標(biāo)設(shè)計(jì)指引

根據(jù)"確定性"和"自然"的價(jià)值觀，當(dāng)構(gòu)圖含義明確之后，圖標(biāo)設(shè)計(jì)所追求的便是秩序之美。Ant Design 的圖標(biāo)主要通過(guò)四方面去實(shí)現(xiàn)"秩序美"，分別是：形式、韻律、平衡以及辨識(shí)。

1、形式

形式，是構(gòu)成一個(gè)圖形最初始的結(jié)構(gòu)。Ant Design 整套基礎(chǔ)圖標(biāo)基本上都是由圓、方、三角這樣的圖形演變而成的。追求圖形初始結(jié)構(gòu)的理性，而非直覺(jué)式的設(shè)計(jì)，是秩序之美的第一步。

2、韻律

Ant Design 圖標(biāo)的韻律感通過(guò)兩個(gè)方面來(lái)體現(xiàn)：元素的韻律和構(gòu)圖的韻律。系統(tǒng)圖標(biāo)中最常見(jiàn)的元素基本上可以歸納稱為：點(diǎn)、線、圓角、三角。

2-1. 元素的韻律

• 點(diǎn)： 點(diǎn)是很多圖形中都會(huì)出現(xiàn)的元素。Ant Design 會(huì)在一套圖標(biāo)中挖掘同一元素的規(guī)律，同時(shí)對(duì)其進(jìn)行克制的運(yùn)用。我們對(duì)于點(diǎn)的尺寸選擇上會(huì)保持 16 的倍數(shù)這一原則。比如，在點(diǎn)的選擇中，新版的圖標(biāo)最常用的是四種尺寸的點(diǎn)，分別為 80、96、112、128。當(dāng)出現(xiàn)特殊尺寸的需求時(shí)，會(huì)按照 16 的倍數(shù)進(jìn)行延展。

• 線： 線條也是非常通用的元素之一。新版圖標(biāo)在線條之間的關(guān)系采用 8 倍數(shù)原則，從小到大以 8 的規(guī)律遞增。常用的規(guī)格也是 4 種，分別為 56、64、72、80。

• 圓角： 圓角的規(guī)格采取的也是 8 倍數(shù)原則，最常用的是 3 種，分別是 8，16、32，它們之間是兩倍數(shù)的關(guān)系。而圖標(biāo)內(nèi)部空間的圓角則保持直角的處理方式。

• 三角： 新版圖標(biāo)的角度受到美式戰(zhàn)斗機(jī) F-14 tomcat 的啟發(fā)，將常用的角度定在約 76 度。在日常設(shè)計(jì)中，多數(shù)系統(tǒng)圖標(biāo)的角度都可以從 76 度這個(gè)數(shù)值出發(fā)，根據(jù)實(shí)際情況進(jìn)行靈活的應(yīng)用。

除了定義角度，我們對(duì)新圖標(biāo)中實(shí)心箭頭的規(guī)格也做了收斂，在頂角大約保持 76 度的基礎(chǔ)上，最常用的為 4 種，他們的寬度保持 8 倍數(shù)的原則，間隔為 24 ：

基本元素在使用上的規(guī)格可以用下面的表格來(lái)總結(jié)，建議設(shè)計(jì)師在一套圖標(biāo)的設(shè)計(jì)中盡量保持克制的態(tài)度。

2-2、構(gòu)圖的韻律

在圖標(biāo)體系中，除了對(duì)重復(fù)出現(xiàn)的元素進(jìn)行管理之外，我們還建議通盤(pán)的去考慮設(shè)計(jì)構(gòu)圖上的節(jié)奏感。

• 保持類似圖標(biāo)在構(gòu)造上的一致性也是建立圖標(biāo)體系節(jié)奏感的一種方法。

• 此外，在單個(gè)圖標(biāo)的設(shè)計(jì)過(guò)程中，也建議適當(dāng)理性的看待各元素間的比例關(guān)系，而非直覺(jué)式的開(kāi)展繪制。

3、平衡

要保持整套圖標(biāo)在視覺(jué)重量上的平衡，是一件不太容易的事并且是一件需要大量實(shí)踐的工作。圖標(biāo)的造型、線條擺放的角度甚至是留白空間等，都是會(huì)影響視覺(jué)平衡的因素，因此需要設(shè)計(jì)師適時(shí)的通過(guò)對(duì)基本元素規(guī)格上的微調(diào)來(lái)達(dá)到圖標(biāo)的平衡感。

• 彎曲的線條會(huì)比豎直的線條看起來(lái)細(xì)。 因此在圓形的外邊框上我們會(huì)適當(dāng)?shù)膶?duì) 72px 的規(guī)格進(jìn)行 4 px 的微調(diào)。
• 傾斜的線條也會(huì)比豎直的線條看起來(lái)細(xì)。 因此傾斜的線條也會(huì)進(jìn)行 4 px 的微調(diào)。
• 圖形的留白空間也是值得推敲的課題。 當(dāng)某些圖形的留白不足時(shí)，可以通過(guò)調(diào)節(jié)線條的粗細(xì)來(lái)達(dá)到視覺(jué)重量上的平衡。

4、辨識(shí)

辨識(shí)度是一套圖標(biāo)具備的可被感知的特色，通常和系統(tǒng)本身的品牌基因相關(guān)。Ant Design 的系統(tǒng)圖標(biāo)在這一次除了遵循"確定"和"自然"這兩塊價(jià)值觀，在辨識(shí)度這一塊也做了兩處小嘗試。

• 讓科技有溫度： 通過(guò)對(duì)于圖形圓角的定義，將過(guò)于圓潤(rùn)的圓角（72）調(diào)整至（32），在視覺(jué)效果上令圖標(biāo)看起來(lái)更為堅(jiān)硬和理性（對(duì)應(yīng)科技感），但又不至于太過(guò)尖銳（有溫度）。

• 讓圖形有生命： 在部分圖標(biāo)設(shè)計(jì)中，會(huì)適度的注入擬人化的元素，令圖標(biāo)具備生命力。

給設(shè)計(jì)師的一些建議

在完成圖標(biāo)設(shè)計(jì)后，保持圖形的整潔，圖層結(jié)構(gòu)的清晰，也是構(gòu)筑圖標(biāo)體系必不可少的部分，Ant Design 對(duì)設(shè)計(jì)師有幾點(diǎn)建議如下：

• 干掉多余的節(jié)點(diǎn)，保持圖形的整潔。

• 合并圖形，便于輸出。

• 對(duì)小數(shù)點(diǎn)以及奇數(shù)進(jìn)行最后一遍的走查與修正。

• 整潔的圖層管理。

寫(xiě)在最后

圖標(biāo)的設(shè)計(jì)是 UI 設(shè)計(jì)中非常容易被忽略的環(huán)節(jié)，建立優(yōu)秀的圖形體系也不是一、二個(gè)設(shè)計(jì)人員的事，需要整個(gè)團(tuán)隊(duì)在設(shè)計(jì)前、設(shè)計(jì)中以及設(shè)計(jì)后都能夠達(dá)成共識(shí)并且通力合作去完成共建。本次圖標(biāo)的升級(jí)，僅僅是一個(gè)開(kāi)始。我們會(huì)建議在調(diào)用圖標(biāo)時(shí)，考慮具體業(yè)務(wù)對(duì)于圖形化寄予的期望，以及用戶操作時(shí)的心智模型等因素，結(jié)合實(shí)際情況做調(diào)用和適當(dāng)?shù)亩卧O(shè)計(jì)。