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

概述

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

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

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

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

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

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

線條

圖標線條應當采用一致的粗細，線條末端采用全圓角。

對齊網(wǎng)格

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

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

圓角

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

斷口

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

修飾符

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

關閉狀態(tài)

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

視覺平衡

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

命名

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

總結(jié)

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

作者：ALEI

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

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

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

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

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

更多精彩文章：

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

圖標定制設計之二：超全總結(jié)！金剛區(qū)圖標設計的 10 大風格

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

圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！

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

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

圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？

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

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

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