你好，設(shè)計師，歡迎加入翻閱計劃 2025 ，和我們一起提升產(chǎn)品和設(shè)計思維，成為改變世界的新時代設(shè)計師。目標每年至少共讀 100 篇文章，接下來，我們一起 開始今天的閱讀 。

我們都深知，圖形的效果比文字更具說服力（噓…不要告訴我們的文案，小心被打死）。其中，圖標是作為簡潔的圖形表達。設(shè)計得當(dāng)?shù)膱D標庫是具備跨越語言障礙的獨特能力（畢竟，我們的祖先最初是通過圖形來傳遞信息）。

如果你正在閱讀（或收聽）這篇文章，那么，很可能你已經(jīng)使用類似 DeepSeek 的 AI 工具上提問過 “圖標的設(shè)計技巧”、“有沒有更簡單的方法來創(chuàng)建合適的圖標庫” 等等之類的問題。也很可能已經(jīng)看到過大量詳細介紹圖標網(wǎng)格系統(tǒng)的文章。這些文章確實很有幫助，但是，要如何真正實踐應(yīng)用呢？ 如果圖標形狀和比例各不相同，要如何實現(xiàn)視覺平衡呢？安全區(qū)域該怎么用呢？當(dāng) 2 像素的描邊太粗，1 像素的描邊又太細的時候，又該怎么辦呢？

好吧！構(gòu)建一套可靠且一致的圖標庫也是我非常樂意探討的話題之一（其實，還有一些讀者也希望我談一談這個）。確實，與其在一場線上直播的時候，突然被 Q 到這個問題，通過匆匆忙忙的談話方式分享設(shè)計秘訣（怎么可能說的完呢！），不如，我直接在這里告訴你（和那些真正熱愛設(shè)計的未來設(shè)計師們）。直覺告訴我，接下來的一些實踐總結(jié)會很受用。

無論你是接到任務(wù)要創(chuàng)建一整套全新的界面圖標，還是補充部分空缺（總會有些圖標是缺失的，畢竟產(chǎn)品會不斷迭代和增加），在技術(shù)層面上，這些技巧幫我做出很不錯的圖標（）。

首先：確定關(guān)鍵線

開啟圖標設(shè)計流程，先搜索界面圖標，你會發(fā)現(xiàn)圖標關(guān)鍵線系統(tǒng)，它用于保持不同形狀或圖標的視覺重量一致。

圖標關(guān)鍵線系統(tǒng)

注意到網(wǎng)格周圍 “隱形” 的白色區(qū)域了嗎？我們稍后會講到它。

關(guān)鍵線系統(tǒng)規(guī)定了基本形狀（圓形、方形或矩形）的理想尺寸。當(dāng)然，大多數(shù)圖標所用的形狀更為復(fù)雜。這一點沒什么大不了，為了便于理解，我將以 20×20 像素的圖標為例，演示一下我是怎么操作的。

關(guān)鍵線系統(tǒng)中的基本形狀

打造技術(shù)上可靠的圖標庫的 5 個秘訣

秘訣 ：從基本形狀入手

我建議先從基本形狀的圖標（圓形、方形、矩形）開始設(shè)計，即便你的圖標庫中不需要（或著沒打算用到）。通過設(shè)計 3 - 4 個簡單形狀，你就能初步感受到所選關(guān)鍵線系統(tǒng)的視覺重量。

基本形狀的圖標

當(dāng)圖標越來越多，當(dāng)咖啡的勁開始消退，像素看得你眼花繚亂的時候，你可能會開始懷疑（或感覺）某些形狀是否該做大一點或做小一點。這些基礎(chǔ)圖標將成為你的參照。利用視覺重量標準來衡量更復(fù)雜圖標形狀的比例，并評估你的新圖標看起來大小是否合適（你能感覺出來）。

放大鏡圖標看起來比單選按鈕圖標和 “其他資源” 圖標小

所有圖標具有相同的視覺重量

秘訣：合理利用安全區(qū)域

我們先從圖標畫布的構(gòu)成說起。

裁切區(qū)域：此區(qū)域以外的部分都會被裁切。

有效區(qū)域：圖標內(nèi)容應(yīng)保持在有效區(qū)域內(nèi)，在此區(qū)域圖像不太可能被遮擋（例如：滾動時側(cè)邊欄出現(xiàn)的情況）。

安全區(qū)域：可將其視為裁切區(qū)域和有效區(qū)域之間的間距。

大多數(shù)形狀都能很好地置于有效區(qū)域內(nèi)，這會讓人覺得似乎不需要安全區(qū)域。經(jīng)驗不足的設(shè)計師可能會把它完全裁掉。但問題來了：總有一天，你會碰到一個形狀，它在圖標庫中看起來比其他圖標小，可卻沒有空間把它做大。此時，你就只能在兩個不太理想的解決方案中做選擇：1. 要么重做整個圖標庫；2. 要么接受較低的視覺重量平衡。這就是我為什么從不去掉安全區(qū)域的原因。

“云” 圖標放在有效區(qū)域內(nèi)時，看起來偏小

當(dāng)你需要把某個圖標放大時，就利用安全區(qū)域

在對齊方面，我們通常會試著將圖標置于畫布中心，兩邊留出相同的間距。然而，有時候，我們的眼睛會欺騙我們，對吧？網(wǎng)格顯示居中的圖標，然而，看上去可能并沒有居中。

你能看到貫穿圖標和標簽中心高度的灰色虛線了嗎？由于圖標形狀不對稱，并且，突出部分超出了焦點區(qū)域，此時，它看起來有下沉感，而且，偏離中心。我們的解決方法很簡單，就是微調(diào)，只需將圖標 “重心” 上移至網(wǎng)格中心。

與文本相比，垃圾桶圖標看起來位置過低

利用安全區(qū)域來修正垂直或水平對齊問題

如何確定形狀的正確位置

1. 將新圖標放在一個對稱圖標旁邊進行對比。

2. 將新圖標置于一個正圓或正方形內(nèi)。

你馬上就能知道是否需要做出調(diào)整。而且別忘了合理利用安全區(qū)域。

將復(fù)雜形狀圖標與對稱圖標對比，找出位置問題

利用安全區(qū)域來調(diào)整垂直或水平對齊

將復(fù)雜形狀置于正圓或正方形旁，以找出位置問題

利用安全區(qū)域來調(diào)整垂直或水平對齊方式

正如你所看到的，最初的垃圾桶圖標放在正方形里看著還行。但是，當(dāng)把它放在對稱圖標或文本旁邊的時候，你會很明顯的發(fā)現(xiàn)對齊問題。所以，我們?yōu)榇_保萬無一失，這兩種方法都要用，來找出對齊問題。

秘訣：始終遵循像素網(wǎng)格

為確保圖標在所有屏幕，以及在任何格式下都保持高質(zhì)量，我們必須嚴格遵循像素網(wǎng)格。每條垂直線或水平線都要與網(wǎng)格規(guī)則對齊（絕無例外！）。

以下示例：我們展示遵循（或忽略）像素網(wǎng)格的情況下，在圖標光柵化后，對圖表質(zhì)量的影響。即便在矢量編輯器中，圖標近看極其精確，但是，在瀏覽器中光柵化后，質(zhì)量仍然會受到損失（沒錯，即使圖標保持 SVG 格式也是如此）。

描邊未適配像素網(wǎng)格

如果做得不精細，技術(shù)會直接反映質(zhì)量。

最終呈現(xiàn)的質(zhì)量，直接取決于你對像素網(wǎng)格規(guī)則的遵循程度。如果處理圓角，要確保像素網(wǎng)格規(guī)則適用，并且盡量讓圓形與像素網(wǎng)格對齊。

描邊精準適配像素網(wǎng)格

秘訣：1px 和 1.5px 圖標可靈活變通規(guī)則

我們最常見的例子是 2px 描邊圖標，對齊效果也很便捷。如果是 1px 圖標呢？它們會更細、更精致，風(fēng)格獨特，還能承載更多細節(jié)。如果把 1px 線條直接放在畫布中心，我們就必須在對稱和網(wǎng)格對齊之間做取舍，這并不是非常理想的權(quán)衡。

部分 1px 圖標居中時無法適配像素網(wǎng)格

面對這兩個選擇，我總會選網(wǎng)格對齊。建議將圖形向左或向上移動 0.5px，這樣能讓描邊適配像素網(wǎng)格。光柵化后，圖標質(zhì)量會更高，其實，幾乎沒人會注意到這 0.5px 的位置調(diào)整。

你可以稍微移動圖標，使其適配像素網(wǎng)格

無論怎么做，盡量別把這些圖標放在小圓圈或小方塊里，不然不對稱問題會更明顯。

避免將偏移過的圖標放在正圓或正方形上

Figma 使用 1px 描邊圖標，有時，它們會打破像素網(wǎng)格規(guī)則。也許他們假定所有用戶都用視網(wǎng)膜顯示屏！

Figma 網(wǎng)頁界面的圖標

Figma 網(wǎng)頁界面的圖標

等等，還有一種情況，如果 2px 太粗、1px 又太細怎么辦？好在還有 1.5px 的描邊，它們遵循相同的準則。雖然圖標不會像 1px 或 2px 的那么精準，但只要外邊框適配像素網(wǎng)格，圖標就足夠清晰。

專業(yè)提示：對最終圖標質(zhì)量有疑慮？在 Figma 中按 ^p 開啟像素預(yù)覽模式。

當(dāng) 1.5px 圖標的外邊框無法適配像素網(wǎng)格時，圖標看起來會模糊

當(dāng) 1.5px 圖標的外邊框適配像素網(wǎng)格時，圖標看起來就清晰

秘訣 ：給填充圖標來點創(chuàng)意

我個人是比較喜歡填充圖標。這里面有很大的創(chuàng)新空間，而且還有個好處，就是同樣的網(wǎng)格規(guī)則也適用。

填充圖標同樣遵循這些規(guī)則

在 Lightspeed，填充圖標是首選圖標，它完全是另一回事。接下來，我可能會分享一些我們最重要的圖標設(shè)計秘訣：如何為你的系列產(chǎn)品打造一套圖標庫。

最后，來一份打造下一套圖標的簡易指南

收藏，運用這些秘訣，打造更出色的圖標

1. 從基礎(chǔ)形狀入手：以圓形、正方形和矩形為起點，這有助于為你的圖標集設(shè)定標準，并為后續(xù)更復(fù)雜的形狀衡量比例。

2. 巧用安全區(qū)域：利用它來增加視覺重量，或修正垂直 / 水平對齊，千萬不要裁剪掉它，即便你最初的圖標在有效區(qū)域內(nèi)也不行。

3. 始終遵循像素網(wǎng)格：即便你的圖標在矢量編輯器中近距離看很棒，光柵化后質(zhì)量也會受影響。

4. 1px 和 1.5px 圖標靈活變通規(guī)則：將 1px 線條置于畫布中心時，向左或向上移動 0.5px，確保描邊適配像素網(wǎng)格。不要把這類圖標放在小圓圈或小方塊里，否則只會凸顯不對稱。1.5px 圖標遵循同樣準則，只要外邊框適配像素網(wǎng)格，圖標就足夠清晰。

5. 給填充圖標來點創(chuàng)意：它們遵循同樣的網(wǎng)格規(guī)則，但創(chuàng)作起來更有趣。

文章轉(zhuǎn)載：三分設(shè)，版權(quán)歸原作者所有

原文鏈接：https://mp.weixin.qq.com/s/INYMIxat_2Gakvjv77_jcA

版權(quán)聲明：“IXDC”所推送的文章，除非確實無法確認，我們都會注明作者和來源，本公眾號對轉(zhuǎn)載、分享的內(nèi)容、陳述、觀點判斷保持中立，不對所包含內(nèi)容的準確性、可靠性或完善性提供任何明或暗示的保證，僅供讀者參考。部分文章推送時未能與原作者取得聯(lián)系，若涉及內(nèi)容或作品等版權(quán)問題，煩請原作者聯(lián)系我們，給出內(nèi)容所在的網(wǎng)址并提供相關(guān)證明資料，我們會核查后立即更正或者刪除有關(guān)內(nèi)容！本公眾號不承擔(dān)任何責(zé)任，并擁有對此聲明的最終解釋權(quán)。

聯(lián)系微信：18802086168

聯(lián)系電話：18802086168

編排 | 李亦然

終審 | 蘇 菁

點這里，學(xué)習(xí)更多設(shè)計知識！