Ant Design React 圖標

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

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

設計師專屬

安裝 Kitchen Sketch 插件 ??，可以一鍵拖拽使用 Ant Design 和 Iconfont 的海量圖標，還可以關聯自有項目。

設計原則

Ant Design 的圖標設計原則源自"確定"和"自然"，落實到圖標設計領域，一共有四個，他們分別為：

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

設計規(guī)格

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

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

分層

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

輪廓線與模版

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

圖標設計指引

根據"確定性"和"自然"的價值觀，當構圖含義明確之后，圖標設計所追求的便是秩序之美。Ant Design 的圖標主要通過四方面去實現"秩序美"，分別是：形式、韻律、平衡以及辨識。

1、形式

形式，是構成一個圖形最初始的結構。Ant Design 整套基礎圖標基本上都是由圓、方、三角這樣的圖形演變而成的。追求圖形初始結構的理性，而非直覺式的設計，是秩序之美的第一步。

2、韻律

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

2-1. 元素的韻律

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

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

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

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

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

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

2-2、構圖的韻律

在圖標體系中，除了對重復出現的元素進行管理之外，我們還建議通盤的去考慮設計構圖上的節(jié)奏感。

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

• 此外，在單個圖標的設計過程中，也建議適當理性的看待各元素間的比例關系，而非直覺式的開展繪制。

3、平衡

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

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

4、辨識

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

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

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

給設計師的一些建議

在完成圖標設計后，保持圖形的整潔，圖層結構的清晰，也是構筑圖標體系必不可少的部分，Ant Design 對設計師有幾點建議如下：

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

• 合并圖形，便于輸出。

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

• 整潔的圖層管理。

寫在最后

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