最近我在學(xué)習(xí)使用 Figma，會在社區(qū)查找一些大廠的設(shè)計系統(tǒng)文件學(xué)習(xí)，看到一篇微軟 Fluent 系統(tǒng)圖標(biāo)規(guī)范文檔，還挺詳細的。其中，我發(fā)現(xiàn)有些小點自己平時很少注意到，并且感覺對設(shè)計師定義圖標(biāo)規(guī)范也有一定的幫助，所以結(jié)合個人圖標(biāo)經(jīng)驗挑選部分內(nèi)容來翻譯成一篇文章，便于擴展自己的圖標(biāo)思維。（備注：以下的規(guī)范是針對尺寸 24px、線條粗細 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)形狀遵循了用戶熟悉的基本原則，示意上識別清晰，盡量遠離隱喻含義。同時，細節(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)采用一致的粗細，線條末端采用全圓角。

對齊網(wǎng)格

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

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

圓角

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

斷口

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

修飾符

修改符應(yīng)當(dāng)謹慎使用，因為它對于一部分用戶來說很難閱讀。由于尺寸較小，修飾符元素要盡可能地簡潔，常放于圖標(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ū)域面積，從而達到平衡的目的。

命名

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

總結(jié)

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

作者：ALEI

轉(zhuǎn)載請注明：優(yōu)設(shè)網(wǎng)

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

更多精彩文章：

圖標(biāo)定制設(shè)計之一：6大章節(jié)！圖標(biāo)設(shè)計基礎(chǔ)知識全方位入門指南

圖標(biāo)定制設(shè)計之二：超全總結(jié)！金剛區(qū)圖標(biāo)設(shè)計的 10 大風(fēng)格

圖標(biāo)定制設(shè)計之三：想讓圖標(biāo)更精致？先掌握這11個容易忽略的設(shè)計細節(jié)！

圖標(biāo)定制設(shè)計之四：學(xué)會SVG圖標(biāo)的高級用法，界面適配效率翻一倍！

圖標(biāo)定制設(shè)計之五：研究微軟 Fluent 圖標(biāo)規(guī)范后，我總結(jié)了這9個知識點！

圖標(biāo)定制設(shè)計之六：為什么別人的圖標(biāo)設(shè)計又快又好？來看騰訊高手總結(jié)的知識點！

圖標(biāo)定制設(shè)計之七：客戶說B端圖標(biāo)太普通沒新意，該怎么解決？

圖標(biāo)定制設(shè)計之八：從6個方面幫你快速掌握圖標(biāo)設(shè)計規(guī)范

圖標(biāo)定制設(shè)計之九：不止畫圖標(biāo)！5 個金剛區(qū)的交互設(shè)計思考

圖標(biāo)定制設(shè)計之十：這6種類型的菜單圖標(biāo)和用法，這篇全總結(jié)了！