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