研究微軟 Fluent 圖標(biāo)規(guī)范后，我總結(jié)了這9個知識點！

最近我在學(xué)習(xí)使用 Figma，會在社區(qū)查找一些大廠的設(shè)計系統(tǒng)文件學(xué)習(xí)，看到一篇微軟 Fluent 系統(tǒng)圖標(biāo)規(guī)范文檔，還挺詳細(xì)的。其中，我發(fā)現(xiàn)有些小點自己平時很少注意到，并且感覺對設(shè)計師定義圖標(biāo)規(guī)范也有一定的幫助，所以結(jié)合個人圖標(biāo)經(jīng)驗挑選部分內(nèi)容來翻譯成一篇文章，便于擴展自己的圖標(biāo)思維。（備注：以下的規(guī)范是針對尺寸 24px、線條粗細(xì) 1.5px 的圖標(biāo)）

概述

在前一個版本，F(xiàn)luent 系統(tǒng)圖標(biāo)采用了 MDL2 和 Monoline 圖標(biāo)集合，比較大的特征是直角、方方正正的形狀。不過隨著 Win 11 系統(tǒng)的發(fā)布，我們可以看到 Fluent 系統(tǒng)圖標(biāo)也進行了比較大版本的優(yōu)化，感知最大的地方就是圖標(biāo)變圓潤了。

設(shè)計理念有三個準(zhǔn)則：熟悉的、友好的、現(xiàn)代的。圖標(biāo)形狀遵循了用戶熟悉的基本原則，示意上識別清晰，盡量遠(yuǎn)離隱喻含義。同時，細(xì)節(jié)處理更友好，采用了圓角和簡潔的形狀，并有兩個主題：線性和填充。

網(wǎng)格和基礎(chǔ)形狀

規(guī)范化的網(wǎng)格，能促進圖標(biāo)的整體性和統(tǒng)一性，設(shè)計師繪制圖形元素時也更有條理性。從 24px 圖標(biāo)尺寸開始，比較建議使用網(wǎng)格系統(tǒng)，內(nèi)容安全區(qū)域是 20px，周圍有 2px 的內(nèi)邊距。（留內(nèi)邊距主要是考慮個別圖標(biāo)居中分布和體量問題，有些圖標(biāo)元素會超出安全區(qū)域，比如修飾符類型圖形）

基礎(chǔ)形狀是網(wǎng)格的基礎(chǔ)，正方形、圓形、縱向矩形、水平矩形采用定義好的模板尺寸，在相關(guān)圖標(biāo)體量上保持一致的視覺比例。

圓形、矩形、正方形圖標(biāo)體量效果如下。（矩形體量看起來有點偏小，這種問題受限于圖標(biāo)尺寸空間小）

線條

圖標(biāo)線條應(yīng)當(dāng)采用一致的粗細(xì)，線條末端采用全圓角。

對齊網(wǎng)格

像素對齊很重要，特別是低分屏設(shè)備，圖標(biāo)可以看起來很清晰。由于線條粗細(xì)是 1.5px，需要保證 1px 是對齊像素的，避免內(nèi)外都出現(xiàn)虛邊。

但在某些特殊場景，為了使圖標(biāo)體量居中分布，就會出現(xiàn)像素不對齊的情況，比如一條豎線。

圓角

Fluent 圖標(biāo)改動點較大的可以說是圓角了，傳遞了更柔和、更友好的體驗感受。因此，我們認(rèn)真打磨圓角的細(xì)節(jié)，定義了三種圓角數(shù)值。大圓角使用在線條直角或鈍角處；當(dāng)使用大圓角感覺形狀太圓難以辨別時，我們可以使用中圓角；小圓角用于很小的細(xì)節(jié)或銳角處。（確實挺細(xì)的，也影響了整體的風(fēng)格。如果追求統(tǒng)一大圓角的話，可能太偏圓潤風(fēng)格，更適合娛樂類產(chǎn)品用戶吧）

斷口

斷口多存在復(fù)合圖標(biāo)上，斷口間距是 1px。當(dāng)圖形角度堆疊時，圓角中心點需要一致，即外層圖形圓角會稍大一點，使線條平滑過渡。（看起來確實挺和諧的）

修飾符

修改符應(yīng)當(dāng)謹(jǐn)慎使用，因為它對于一部分用戶來說很難閱讀。由于尺寸較小，修飾符元素要盡可能地簡潔，常放于圖標(biāo)的右下角。設(shè)計師在繪制過程中，修飾符圖形可以超出安全區(qū)域，使圖標(biāo)視覺感官居中分布。

關(guān)閉狀態(tài)

如果已經(jīng)建立的圖標(biāo)需要關(guān)閉狀態(tài)，應(yīng)當(dāng)遵循模板：斜杠從左上角到右下角 45 度，撐滿圖標(biāo)的安全區(qū)域。

視覺平衡

圖標(biāo)平衡很重要，我們也有測試的兩種方法。第一種方法是畫一個圓圈，幫助我們更好地感知平衡性。第二種方法是視覺重量測試 ，通過模糊來感知圖標(biāo)的區(qū)域面積，從而達(dá)到平衡的目的。

命名

隨著更多圖標(biāo)的創(chuàng)建，我們必須非常有意識地命名，并盡可能地具有前瞻性，后續(xù)才能更好地協(xié)作。我們推薦圖標(biāo)命名使用形狀的明喻，比如盾牌代替安全，星號代表收藏。

總結(jié)

以上就是 Microsoft Fluent 圖標(biāo)規(guī)范的一些小翻譯總結(jié)吧，線條粗細(xì)、圓角、居中、體量、平衡、命名等方面還挺多細(xì)節(jié)可以打磨細(xì)化的，希望各位設(shè)計師能夠結(jié)合業(yè)務(wù)來仔細(xì)琢磨，提煉出屬于自己產(chǎn)品的圖標(biāo)規(guī)范。

歡迎關(guān)注作者微信公眾號：「ALEI的設(shè)計思考」