在內(nèi)容為主的用戶界面設計上，圖標起到了降低理解成本、高效傳遞信息等舉足輕重的作用。隨著矢量格式與高分屏的普及，對圖標字體的精細度與視覺匹配度也有了更高的要求，這對設計師來說也是一個不小的考驗。本篇將介紹目前業(yè)界優(yōu)秀的圖標案例，并以日常圖標繪制中遇到的問題，解析背后原理給出對應解法。

注：以下部分示例僅為個人處理方法，僅供參考。

本期提綱：

1. 業(yè)界的優(yōu)秀案例
2. 矢量規(guī)格的效率畫法
3. 圖標繪制的注意點
4. 圖標中的平衡

業(yè)界的優(yōu)秀案例

“SF Symbols” 是蘋果為 San Francisco 系統(tǒng)字體設計的一套內(nèi)置圖標合集，每個符號圖形都能與所有磅重、大小的文本進行自動對齊，達到與字體無縫結合的效果。目前已更新到 3.0 版本，根據(jù)應用界面中各種使用、展示場景，默認提供 3,200 個符號各自擁有 9 種磅重，設計師可根據(jù)官方提供的合集庫直接引用到設計稿中，或使用符號模板來添加自定義圖標。

1. 多種磅重

“SF Symbols” 擁有與 “San Francisco” 字體相呼應的 9 種字重，在字母參考線（字母頂線與基線）下支持 Small、Medium 和 Large 3 種顯示比例，總計 27 種樣式，以達到與各個字形最佳的匹配效果。

圖形磅重與比例參考表

圖形比例與字形排列參考

2. 字形參照定位

以字體設計方式處理圖形的垂直定位，在設計圖標時需要將圖形中心部分放置在模板基線以上的位置，系統(tǒng)讀取時將根據(jù)圖形基線計算圖形的 baselineOffsetFromBottom（基線與底邊的偏移值）進行垂直定位，使圖形與文本的基線一致，達到圖形和文本水平視覺對齊。

圖形參考線

相同基線下對齊效果，使圖形重心處于小寫字母區(qū)域

常用的塊級元素對齊效果，重心稍微偏下

3. 多色應用

通過讀取圖形內(nèi)的分層信息，可賦予每個分層不同的渲染模式達到更加豐富的表現(xiàn)形式。

不同渲染模式下的多色效果

4. 圖形本地化適配

除磅重與比例以外，當圖形出現(xiàn)需要使用文字表達含義時，針對特定語言與書寫順序 “SF Symbols” 提供了不同的適配圖形，包含拉丁語、阿拉伯語、希伯來語、印地語、泰語、中文、日語和韓語等語言類型與 LTR/RTL（從左到右、從右到左）兩種布局。

矢量規(guī)格的效率畫法

隨著像 Retina 這樣的高分屏與 SVG、PDF 等矢量格式在設備上普及，文字和圖標在精細度與匹配度上有了更多的追求，一般應用會根據(jù)常用的字體磅重去定義默認圖標的粗細，因此我們會看到一些圖標出現(xiàn)非整數(shù)規(guī)格的情況，這對新人來說會造成一定的設計門檻。

1. 微信的圖標規(guī)格

以微信客戶端為例，需要在 24*24pt 的網(wǎng)格中默認使用 1.2pt 線條進行繪制，同時在圖形自然拐角處需要保持外圓內(nèi)方的樣式。

2. 為什么會有設計門檻

對新手來說在 Sketch、Figma 或 Photoshop 中使用描邊設計非整數(shù)規(guī)格圖標可以是噩夢，即便有經(jīng)驗的設計師在繪制過程中也會因為計算路徑余數(shù)而影響設計效率，以 Sketch 為例路徑屬性中雖然支持像素對齊、半像素對齊和不對齊像素三種模式，但如果需要繪制 1.2x 描邊時，我們只能使用不對齊像素的模式再計算路徑落點位置，因此需要不斷計算落點是否處于 0.2、0.8、0.2……

Sketch 的對齊模式

3. 建議方法：倍化繪制

所以在處理非整數(shù)圖標時我們不妨把畫板等比放大 5 倍，可以獲得一個 120*120pt 的新畫板同時描邊放大為 6pt，這時候我們只需要使用像素對齊模式直接進行繪制即可，同理其他數(shù)值規(guī)格我們也可以使用倍化調整，使圖形在畫板內(nèi)變成整數(shù)，最直接方式是小數(shù)點后奇偶數(shù)進行判斷，奇數(shù)放大 10 倍，偶數(shù)放大 5 倍。輸出資源時如果使用 svg 這類矢量格式可根據(jù)業(yè)務需要決定是否縮放輸出，而位圖則根據(jù)所需尺寸進行倍數(shù)縮放再輸出。

4. 工具使用差異

使用 Sketch 對圖形進行倍化后繪制和調整已經(jīng)友好很多了，但是其實 Sketch 中還有不少繪制效率工具是沒有放在默認工具欄里的，這里可以根據(jù)需要使用自定義工具欄把這些工具外置。

Sketch 中的路徑工具

Figma 相對而言路徑編輯功能比較簡單，但依賴社區(qū)豐富的插件也能達到對應的效果，這里推薦一些常用的矢量圖形處理插件。

雖然目前 sketch 的圖形繪制功能已經(jīng)很完善了，但依然存在一些限制，如路徑斷開后無法直接重新連接，特定角度繪制效率低等問題，從而影響設計的精確度和效率。這時我們可以把目光轉移到一個老牌的矢量工具上“ Adobe Illustrator ”（后面簡稱 AI ），AI 中的隔離模式、方向滑移延伸和自定義網(wǎng)格本身非常適合矢量繪圖，用來繪制圖標也十分便利。

Sketch 與 AI 的對比，雖不公平但也是事實……

使用 AI 的網(wǎng)格系統(tǒng)，我們可以設定符合業(yè)務需要的對齊方式、鍵盤增量和網(wǎng)絡間隔，且 AI 生成的路徑是支持在 Sketch 或其他矢量工具中復制粘貼的。

適配自身規(guī)格的網(wǎng)格設置

使用 AI 自帶的角度旋轉功能時設置圖形副本數(shù)量，保證了每個圖形角度和方向都是準確的。

使用 AI 繪制實例演示

圖標繪制的注意點

1. 等比分布

當我們需要繪制等比放大或擴散圖形時，會遇到一種情況：等邊圖形或圓形可以直接使用工具進行等比縮放，但長矩形或者不規(guī)則圖形等比縮放后會出現(xiàn)部分點、線不等比，這其實是一種理解上的誤區(qū)，在把不規(guī)則圖形等比放大時，我們需要的是點、線距離圖形中心（非圖層中心，而是幾何中心）做等距偏移的效果，而工具一般會按圖層中心來進行縮放，可能會造成效果上的誤差。

常見圖形在不同處理方式上產(chǎn)生的差異

清楚原因與差異后，只需選擇對應偏移功能即可達到理想效果，等距偏移一般矢量工具都會自帶，只是就使用習慣而言沒有常用等比縮放容易理解與上手。以 AI 與 Sketch 為例，都能在路徑、對象菜單中找到，且 AI 額外支持偏移后拐角屬性設置。

AI 與 Sketch 下通過路徑偏移獲得等距縮放效果

2. 骨架與輸出路徑

日常涉及圖標繪制的需求，建議可以先使用描邊進行繪制，可以理解為把路徑當做圖形的骨架，再利用工具的描邊樣式塑造磅重拐角，這樣我們可以有效的保留圖形最大的可塑性和調整空間。

但同時需要注意，圖標在輸出前需要完全轉化為輪廓以及封閉路徑，以保證系統(tǒng)渲染模式的一致，并且這是所有平臺都要求的。

SF Symbols 對路徑輪廓化的要求

圖標中的平衡

1. 面積配比

對應不同的業(yè)務，有時會基于用戶對事物的認知，直接引用該事物作為基礎圖形進行圖標繪制。因此會出現(xiàn)一些穩(wěn)定性弱、長寬比例相差較大或形體單薄的圖形，而我們會遵循已有的標準圖標柵格進行繪制，這樣會導致部分特征過于明顯的圖形在顯示面積上出現(xiàn)視覺誤差與中心渾濁。情況類似中文字體中出現(xiàn)的中宮、字懷（中宮：漢字重心區(qū)域范圍、字懷：筆畫之間的留白范圍）緊湊。

按標準柵格繪制特征明顯的圖形

這時可以適當把圖形延伸部分進行細微的外擴處理，使圖形中心部分視覺上更加舒展。

對圖形延伸部分外擴微調

2. 視覺對齊

通常使用工具的對齊功能實現(xiàn)圖形間的相對關系是合理的，但我們在處理多邊形時就會遇到 “已經(jīng)用工具居中了，但看起來卻沒居中” 這種問題，這種現(xiàn)象一般是由于不同多邊形的面積與寬高帶來的視覺差造成的。

奇怪的對齊現(xiàn)象

以三角形播放按鈕為例，在背景范圍中繪制三角形時，我們可以先添加周長與三角頂點相接的圓形輔助定位，注意這里需要使用多邊形工具設置的三角形而非默認的菜單中的三角形，因為默認的三角形是等腰三角形，不能用于這種情況。

思路與等距放大類似，先確定幾何中心而非圖層中心

這里推薦使用多邊形工具設置三角形，除了因為是等邊三角形外，在 Sketch、Figma 中這類圖形未擴展的情況下工具是會自動填補圖層范圍，且直接對齊就是居中狀態(tài)。

Sketch 多邊形工具創(chuàng)建的三角形

總結

本文所提到的情況與處理方式僅以個人角度切入，在日常設計工作中我們所遇到的情況會更加復雜棘手，但這里也希望通過自己的發(fā)現(xiàn)給大家?guī)硪恍﹩l(fā)與探討。

圖標的繪制并不是也不應該是一個繁重的任務，只要找對方法或了解背后圖形原理，大家都能在方寸之間的設計中找到不一樣的精彩。

作者：We-Design

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

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

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

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

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

更多精彩文章：

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

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

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

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

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

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

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

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

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

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