Ant Design React 圖標(biāo)

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

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

設(shè)計師專屬

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

設(shè)計原則

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

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

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

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

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

分層

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

輪廓線與模版

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

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

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

1、形式

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

2、韻律

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

2-1. 元素的韻律

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

• 線： 線條也是非常通用的元素之一。新版圖標(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)斗機 F-14 tomcat 的啟發(fā)，將常用的角度定在約 76 度。在日常設(shè)計中，多數(shù)系統(tǒng)圖標(biāo)的角度都可以從 76 度這個數(shù)值出發(fā)，根據(jù)實際情況進行靈活的應(yīng)用。

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

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

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

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

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

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

3、平衡

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

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

4、辨識

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

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

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

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

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

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

• 合并圖形，便于輸出。

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

• 整潔的圖層管理。

寫在最后

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