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