2022-6-14 博博
在內容為主的用戶界面設計上，圖標起到了降低理解成本、高效傳遞信息等舉足輕重的作用。隨著矢量格式與高分屏的普及，對圖標字體的精細度與視覺匹配度也有了更高的要求，這對設計師來說也是一個不小的考驗。本篇將介紹目前業界優秀的圖標案例，并以日常圖標繪制中遇到的問題，解析背后原理給出對應解法。
注：以下部分示例僅為個人處理方法，僅供參考。
本期提綱：
“SF Symbols” 是蘋果為 San Francisco 系統字體設計的一套內置圖標合集，每個符號圖形都能與所有磅重、大小的文本進行自動對齊，達到與字體無縫結合的效果。目前已更新到 3.0 版本，根據應用界面中各種使用、展示場景，默認提供 3,200 個符號各自擁有 9 種磅重，設計師可根據官方提供的合集庫直接引用到設計稿中，或使用符號模板來添加自定義圖標。
1. 多種磅重
“SF Symbols” 擁有與 “San Francisco” 字體相呼應的 9 種字重，在字母參考線（字母頂線與基線）下支持 Small、Medium 和 Large 3 種顯示比例，總計 27 種樣式，以達到與各個字形最佳的匹配效果。
圖形磅重與比例參考表
圖形比例與字形排列參考
2. 字形參照定位
以字體設計方式處理圖形的垂直定位，在設計圖標時需要將圖形中心部分放置在模板基線以上的位置，系統讀取時將根據圖形基線計算圖形的 baselineOffsetFromBottom（基線與底邊的偏移值）進行垂直定位，使圖形與文本的基線一致，達到圖形和文本水平視覺對齊。
圖形參考線
相同基線下對齊效果，使圖形重心處于小寫字母區域
常用的塊級元素對齊效果，重心稍微偏下
3. 多色應用
通過讀取圖形內的分層信息，可賦予每個分層不同的渲染模式達到更加豐富的表現形式。
不同渲染模式下的多色效果
4. 圖形本地化適配
除磅重與比例以外，當圖形出現需要使用文字表達含義時，針對特定語言與書寫順序 “SF Symbols” 提供了不同的適配圖形，包含拉丁語、阿拉伯語、希伯來語、印地語、泰語、中文、日語和韓語等語言類型與 LTR/RTL（從左到右、從右到左）兩種布局。
隨著像 Retina 這樣的高分屏與 SVG、PDF 等矢量格式在設備上普及，文字和圖標在精細度與匹配度上有了更多的追求，一般應用會根據常用的字體磅重去定義默認圖標的粗細，因此我們會看到一些圖標出現非整數規格的情況，這對新人來說會造成一定的設計門檻。
1. 微信的圖標規格
以微信客戶端為例，需要在 24*24pt 的網格中默認使用 1.2pt 線條進行繪制，同時在圖形自然拐角處需要保持外圓內方的樣式。
2. 為什么會有設計門檻
對新手來說在 Sketch、Figma 或 Photoshop 中使用描邊設計非整數規格圖標可以是噩夢，即便有經驗的設計師在繪制過程中也會因為計算路徑余數而影響設計效率，以 Sketch 為例路徑屬性中雖然支持像素對齊、半像素對齊和不對齊像素三種模式，但如果需要繪制 1.2x 描邊時，我們只能使用不對齊像素的模式再計算路徑落點位置，因此需要不斷計算落點是否處于 0.2、0.8、0.2……
Sketch 的對齊模式
3. 建議方法：倍化繪制
所以在處理非整數圖標時我們不妨把畫板等比放大 5 倍，可以獲得一個 120*120pt 的新畫板同時描邊放大為 6pt，這時候我們只需要使用像素對齊模式直接進行繪制即可，同理其他數值規格我們也可以使用倍化調整，使圖形在畫板內變成整數，最直接方式是小數點后奇偶數進行判斷，奇數放大 10 倍，偶數放大 5 倍。輸出資源時如果使用 svg 這類矢量格式可根據業務需要決定是否縮放輸出，而位圖則根據所需尺寸進行倍數縮放再輸出。
4. 工具使用差異
使用 Sketch 對圖形進行倍化后繪制和調整已經友好很多了，但是其實 Sketch 中還有不少繪制效率工具是沒有放在默認工具欄里的，這里可以根據需要使用自定義工具欄把這些工具外置。
Sketch 中的路徑工具
Figma 相對而言路徑編輯功能比較簡單，但依賴社區豐富的插件也能達到對應的效果，這里推薦一些常用的矢量圖形處理插件。
雖然目前 sketch 的圖形繪制功能已經很完善了，但依然存在一些限制，如路徑斷開后無法直接重新連接，特定角度繪制效率低等問題，從而影響設計的精確度和效率。這時我們可以把目光轉移到一個老牌的矢量工具上“ Adobe Illustrator ”（后面簡稱 AI ），AI 中的隔離模式、方向滑移延伸和自定義網格本身非常適合矢量繪圖，用來繪制圖標也十分便利。
Sketch 與 AI 的對比，雖不公平但也是事實……
使用 AI 的網格系統，我們可以設定符合業務需要的對齊方式、鍵盤增量和網絡間隔，且 AI 生成的路徑是支持在 Sketch 或其他矢量工具中復制粘貼的。
適配自身規格的網格設置
使用 AI 自帶的角度旋轉功能時設置圖形副本數量，保證了每個圖形角度和方向都是準確的。
使用 AI 繪制實例演示
1. 等比分布
當我們需要繪制等比放大或擴散圖形時，會遇到一種情況：等邊圖形或圓形可以直接使用工具進行等比縮放，但長矩形或者不規則圖形等比縮放后會出現部分點、線不等比，這其實是一種理解上的誤區，在把不規則圖形等比放大時，我們需要的是點、線距離圖形中心（非圖層中心，而是幾何中心）做等距偏移的效果，而工具一般會按圖層中心來進行縮放，可能會造成效果上的誤差。
常見圖形在不同處理方式上產生的差異
清楚原因與差異后，只需選擇對應偏移功能即可達到理想效果，等距偏移一般矢量工具都會自帶，只是就使用習慣而言沒有常用等比縮放容易理解與上手。以 AI 與 Sketch 為例，都能在路徑、對象菜單中找到，且 AI 額外支持偏移后拐角屬性設置。
AI 與 Sketch 下通過路徑偏移獲得等距縮放效果
2. 骨架與輸出路徑
日常涉及圖標繪制的需求，建議可以先使用描邊進行繪制，可以理解為把路徑當做圖形的骨架，再利用工具的描邊樣式塑造磅重拐角，這樣我們可以有效的保留圖形最大的可塑性和調整空間。
但同時需要注意，圖標在輸出前需要完全轉化為輪廓以及封閉路徑，以保證系統渲染模式的一致，并且這是所有平臺都要求的。
SF Symbols 對路徑輪廓化的要求
1. 面積配比
對應不同的業務，有時會基于用戶對事物的認知，直接引用該事物作為基礎圖形進行圖標繪制。因此會出現一些穩定性弱、長寬比例相差較大或形體單薄的圖形，而我們會遵循已有的標準圖標柵格進行繪制，這樣會導致部分特征過于明顯的圖形在顯示面積上出現視覺誤差與中心渾濁。情況類似中文字體中出現的中宮、字懷（中宮：漢字重心區域范圍、字懷：筆畫之間的留白范圍）緊湊。
按標準柵格繪制特征明顯的圖形
這時可以適當把圖形延伸部分進行細微的外擴處理，使圖形中心部分視覺上更加舒展。
對圖形延伸部分外擴微調
2. 視覺對齊
通常使用工具的對齊功能實現圖形間的相對關系是合理的，但我們在處理多邊形時就會遇到 “已經用工具居中了，但看起來卻沒居中” 這種問題，這種現象一般是由于不同多邊形的面積與寬高帶來的視覺差造成的。
奇怪的對齊現象
以三角形播放按鈕為例，在背景范圍中繪制三角形時，我們可以先添加周長與三角頂點相接的圓形輔助定位，注意這里需要使用多邊形工具設置的三角形而非默認的菜單中的三角形，因為默認的三角形是等腰三角形，不能用于這種情況。
思路與等距放大類似，先確定幾何中心而非圖層中心
這里推薦使用多邊形工具設置三角形，除了因為是等邊三角形外，在 Sketch、Figma 中這類圖形未擴展的情況下工具是會自動填補圖層范圍，且直接對齊就是居中狀態。
Sketch 多邊形工具創建的三角形
本文所提到的情況與處理方式僅以個人角度切入，在日常設計工作中我們所遇到的情況會更加復雜棘手，但這里也希望通過自己的發現給大家帶來一些啟發與探討。
圖標的繪制并不是也不應該是一個繁重的任務，只要找對方法或了解背后圖形原理，大家都能在方寸之間的設計中找到不一樣的精彩。
作者：We-Design
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
