2021-10-14 資深UI設(shè)計者
理解圖標(biāo)，首先關(guān)注的是圖標(biāo)本身的類型，在整個 UI 體系中，圖標(biāo)基本就分成3個大類：
工具圖標(biāo)：包含一定產(chǎn)品功能隱喻的簡化抽象圖形，代替文字節(jié)省界面空間，方便用戶理解
裝飾圖標(biāo)：主要目的是用來裝飾界面的視覺元素，樣式大于功能，常用于節(jié)日活動中
啟動圖標(biāo)：產(chǎn)品的啟動圖標(biāo)，即用來在系統(tǒng)中打開該產(chǎn)品的圖形按鈕，基本以自身 LOGO 為主
在 B 端項目中，應(yīng)用最廣泛的必然是工具圖標(biāo)，而裝飾、啟動圖標(biāo)卻鮮有露面機(jī)會。但出現(xiàn)的少，不代表沒有，解釋工具圖標(biāo)前，我們先優(yōu)先講解下裝飾和啟動圖標(biāo)在什么情況下會出現(xiàn)。
其中，SAAS 類服務(wù)就有很多會重點(diǎn)強(qiáng)調(diào)品牌、情感化設(shè)計的案例，例如大家比較熟悉的阿里云和騰訊云。項目中就大量啟用 3D 化的裝飾圖標(biāo)提升界面的質(zhì)感。
啟動圖標(biāo)則會應(yīng)用在一些比較大型的項目里，當(dāng)項目出現(xiàn)了很多下級功能模塊或類似插件的體系時，就會采取使用應(yīng)用圖標(biāo)的方式作為入口。
比如 Figma 也是一個 B 端工具，它的插件列表中就可以看見不同的啟動圖標(biāo)。還有類似 Slack、Invision、Teambition 等產(chǎn)品，一個龐大的產(chǎn)品生態(tài)就必然會衍生出強(qiáng)化不同子產(chǎn)品身份的需求，就自然而然會用到啟動圖標(biāo)了。
最后，就是我們熟知的工具圖標(biāo)了，前兩種圖標(biāo)，在前期畫不好不要緊，畢竟這類規(guī)格的產(chǎn)品會有經(jīng)驗(yàn)更豐富的設(shè)計或總監(jiān)坐鎮(zhèn)，新手當(dāng)個切圖仔即可……
但是工具圖標(biāo)，重要性就不言而喻了，B 端項目對工具圖標(biāo)的需求非常大，幾乎每個組件中都會包含圖標(biāo)。
雖然今天網(wǎng)上有非常豐富的圖標(biāo)素材庫，但在形式各異的 B 端項目里依舊是供不應(yīng)求的，各種行業(yè)特有的功能、實(shí)物、隱喻，只能設(shè)計師自己完成。
B 端設(shè)計師在圖標(biāo)設(shè)計領(lǐng)域的主要工作，就是確定圖標(biāo)樣式、設(shè)計圖標(biāo)、導(dǎo)出切圖。下面的分享我們也會主要圍繞工具圖標(biāo)展開。
工具圖標(biāo)的應(yīng)用主要包含兩個部分，線性圖標(biāo)和面性圖標(biāo)。
這里再提圖標(biāo)風(fēng)格，不是把以前的知識點(diǎn)重新講一遍，而是要強(qiáng)調(diào) B 端圖標(biāo)的特殊性。和 C 端相比，B 端圖標(biāo)的實(shí)用屬性更高，并不需要過多凸顯本身的視覺風(fēng)格。
所以，工具圖標(biāo)中，使用大量漸變、插畫、投影的類型都要排除掉，它們對 99.9% 的項目都只會造成體驗(yàn)的負(fù)影響，不要被網(wǎng)上的追波風(fēng)飛機(jī)稿給帶偏。
適合 B 端項目的工具圖標(biāo)只要應(yīng)用最基礎(chǔ)的線性和面形風(fēng)格即可，一定要劃分出差異，應(yīng)該只包含圓潤、纖細(xì)、尖銳這幾種。
很多人好奇線性和面形圖標(biāo)在 B 端設(shè)計中有什么使用上的差異呢？答案是沒有差異。
線性和面形的使用，純粹看設(shè)計師在當(dāng)前場景判斷哪個合適用哪個，只要保證對應(yīng)圖標(biāo)風(fēng)格統(tǒng)一即可。
不過如果遇到一些比較特殊的情況，比如要表現(xiàn)各類設(shè)備的復(fù)雜圖標(biāo)，那用線性的做法還是相對合適和簡單一點(diǎn)。
對 B 端設(shè)計來講，獨(dú)立設(shè)計圖標(biāo)的步驟是必不可少的，應(yīng)該掌握的圖標(biāo)規(guī)范還是必須要懂的。
我們雖然沒有 C 端那么多風(fēng)格和技法的拖累，但想畫好 B 端圖標(biāo)卻多出了其它難點(diǎn)，那就是一個頁面中出現(xiàn)的圖標(biāo)實(shí)在是太多了。
這就引發(fā)了我們要講的第一個規(guī)范要點(diǎn) —— “統(tǒng)一性”，所有同規(guī)格類型圖標(biāo)具有一致性的特征，這些特征包含了：
粗細(xì)一致：首先使用統(tǒng)一的描邊、線段粗細(xì)參數(shù)
圓角一致：使用一致的圓角數(shù)值，不要一下尖角一下圓角
透視一致：使用接近的透視角度，不要有的側(cè)視有的正視圖
大小一致：視覺的大小保持一致，有均衡的大小感受
如果不能保證統(tǒng)一性的基本要求，那么整個頁面看起來就會非常的廉價、業(yè)余。很多新手處理 B 端項目就是應(yīng)用了多套素材庫圖標(biāo)，它們的細(xì)節(jié)完全不一樣，統(tǒng)一性當(dāng)然無從談起。
而讓整套圖標(biāo)保持統(tǒng)一性，是相當(dāng)有難度的，其中最難的一點(diǎn)，就是如何讓一套圖標(biāo)的大小均衡。雖然我們要對每套圖標(biāo)確定一個固定的尺寸，但不代表圖標(biāo)實(shí)際圖形的長寬數(shù)值是完全一致的。
幾何圖形對視覺有一定的欺騙性，有不同的大小體驗(yàn)，比如下方案例（魷魚游戲亂入？）：
所以，基于這樣的特性，每個圖標(biāo)本身都包含了兩層屬性，圖標(biāo)的占位尺寸和視覺尺寸。占位尺寸指它在界面中的實(shí)際占地大小，是透明白的，排版的時候以這個尺寸作為實(shí)際的邊緣來測量。
而視覺尺寸，則是在占位尺寸下圖標(biāo)圖形的實(shí)際大小，這個大小是帶給我們實(shí)際視覺感受的部分。一套圖標(biāo)的不同圖形必然視覺尺寸是各不相同的，我們用占位尺寸包裹它們來方便我們進(jìn)行統(tǒng)一的應(yīng)用。
所以，使用成熟的圖標(biāo)素材必然會發(fā)現(xiàn)圖形周邊還會有透明的空白區(qū)域。當(dāng)然，不同的素材，這個留白也是有區(qū)別的，下一個小節(jié)就會解釋。
最后要聲明一點(diǎn)，一套項目中可以包含多個規(guī)格（2-5個）的工具圖標(biāo)，比如導(dǎo)航用的圖標(biāo)比普通工具圖標(biāo)更復(fù)雜一點(diǎn)，設(shè)計師只要保證每種規(guī)格保持的統(tǒng)一性即可。
圖標(biāo)越多，大小的控制越困難，所以專業(yè)的圖標(biāo)庫繪制就必然會應(yīng)用圖標(biāo)的柵格系統(tǒng)進(jìn)行輔助。
在 Ant 的體系中，一個基于柵格的圖標(biāo)實(shí)際包含3層，背景層、格線層、圖形層。
背景層，即圖標(biāo)展位尺寸，需要先確定出這個元素的大小，然后才是里面的繪制區(qū)域。通常，柵格系統(tǒng)會為邊緣預(yù)留 1-4 像素的內(nèi)邊距（出血位），正所謂四周留一線，日后好相見。
格線層，則是使用的柵格線段，也是最重要的部分。格線層通常由 4 個基本圖形構(gòu)成，包含正方形、圓形、水平長方形、垂直長方形。
這四個圖形的長寬大小不一，原因是為了對應(yīng)幾何圖形視覺尺寸不同的特征。把它們并列排列，就可以發(fā)現(xiàn)它們的視覺大小非常接近。
這些格線的作用，就是提前幫我們確定好視覺比例，幫助我們快速繪制相同圖形類型的圖標(biāo)。
但是，不是完美符合這四個圖形要求的圖標(biāo)該怎么辦，總不能格線把所有輪廓都給你實(shí)現(xiàn)出來吧？
格線的另一層作用，也就是最重要的作用，其實(shí)是一個用來做測量的工具，而不是輪廓依據(jù)。在幾何視覺差中，最基礎(chǔ)的大小原理是占用面積越大的圖形，尺寸感受越大。所以，長寬一致的正方形大于圓形，圓大于三角形。
所以當(dāng)我們繪制的非常規(guī)圖形，和類似格線進(jìn)行對比時，長寬缺少的一側(cè)，就要由另一側(cè)增加數(shù)值來填補(bǔ)它的面積。
比如下圖 Ant 官方的電腦圖標(biāo)，它的寬是橫向矩形，但是中間區(qū)域面積較小，所以增加了高度進(jìn)行平衡。
再看一些其它的案例
這一步?jīng)]有固定的參數(shù)使用技巧，設(shè)計師需要將完成的圖標(biāo)置入到其它圖標(biāo)旁邊進(jìn)行調(diào)試，確保尺寸是合適的。
格線只是一個圖標(biāo)大小設(shè)置的參考工具，一切以最終效果為標(biāo)準(zhǔn)。
理解完圖標(biāo)的基本規(guī)范，就到圖標(biāo)的使用邏輯了，解決一些常見的設(shè)置誤區(qū)。
圖標(biāo)該做多大的，這是目前被問到最多的問題。本來應(yīng)該是非常簡單的一件事，但很多工作多年的設(shè)計師也搞不清楚。
仔細(xì)捋了捋，罪魁禍?zhǔn)拙褪?AntDesign 這套規(guī)范中對圖標(biāo)畫布的解釋了。
要重點(diǎn)強(qiáng)調(diào)，Ant 設(shè)計圖標(biāo)的意圖，和一般項目的是完全不同的。Ant 作為一套龐大的開源項目，它的圖標(biāo)核心特征之一就是 —— 適應(yīng)性。
這些圖標(biāo)要被應(yīng)用到各種不同的設(shè)備、顯示器、系統(tǒng)中，圖標(biāo)尺寸會用多大，在幾倍圖環(huán)境顯示全都是不確定的。所以圖標(biāo)一開始按越大的規(guī)格完成，后續(xù)實(shí)際應(yīng)用中的縮放、匹配也就越容易，適應(yīng)性越高。
但是，在我們自己的項目中，這種做法是完全沒有必要的，1024 圖標(biāo)的負(fù)面影響包含：
像素數(shù)過多使得數(shù)值的制定難度大大提升，不管是元素尺寸還是描邊粗細(xì)
矢量圖形源文件進(jìn)行縮放很容易發(fā)生錯位，提前輪廓化會破壞源文件
縮放圖標(biāo)后描邊的數(shù)值往往會出現(xiàn)非整數(shù)和 0.5 的狀態(tài)，虛邊問題嚴(yán)重
在常規(guī)項目里，一套項目是可以包含不同尺寸和規(guī)格的圖標(biāo)的，而不是我們做一套相同風(fēng)格的圖標(biāo)在整個應(yīng)用中無差別使用。
這也意味著，每個圖標(biāo)在產(chǎn)品中的使用場景通常只有一個尺寸，不需要去面臨縮放的情況。即使需要縮放，也只是這套圖標(biāo)中的少數(shù)幾個需要，或者相對特殊的項目。
所以，圖標(biāo)尺寸設(shè)定，就是根據(jù)當(dāng)前位置合適的尺寸來制定?？梢允褂盟夭脑谝呀?jīng)設(shè)計好的布局中嘗試多大的數(shù)值合適，然后創(chuàng)建同樣的數(shù)值即可（盡量以4的倍數(shù)為標(biāo)準(zhǔn)）。
我們知道圖標(biāo)的素材非常豐富，不管是 Iconfont、IconPark 還是 Iconsearch 等網(wǎng)站，都提供了海量的素材。但是只要稍微專業(yè)點(diǎn)的項目，往往素材庫都滿足不了，部分規(guī)格的圖標(biāo)還是需要我們自己重新繪制。
所以說圖標(biāo)素材就完全沒用了嗎？當(dāng)然不是。
圖標(biāo)的正確用法是作為一種快速試錯的參照物，它可以幫助我們實(shí)現(xiàn)：
參考圖標(biāo)的具體尺寸在哪個數(shù)值最合理
參考當(dāng)前場景使用面性還是線性的風(fēng)格更合理
參考圖標(biāo)的設(shè)計風(fēng)格是圓還是尖銳更合理
參考相關(guān)隱喻的圖形樣式哪種更合理
在項目的界面設(shè)計階段，我們一向建議優(yōu)先使用外部的素材，尤其是 IconPark 這種比較統(tǒng)一，還可以快速調(diào)節(jié)圖標(biāo)樣式的工具網(wǎng)站。
這個過程即使素材找不到和寓意一致的也沒關(guān)系，用相近的圖標(biāo)替代就可以。等到頁面布局基本完成以后，最后再集中精力對需要繪制的圖標(biāo)重畫一遍（甚至是在開發(fā)階段繪制）。
通過別人的圖標(biāo)來快速匹配尺寸、風(fēng)格、樣式，會幫助我們節(jié)省非常多的時間，也有助于我們設(shè)計出更專業(yè)、美觀的圖標(biāo)。
另外，就是針對項目一些偏小尺寸的通用圖標(biāo)，就可以比較放心的應(yīng)用素材，例如翻頁的左右、更多、下拉、搜索等等。
圖標(biāo)的尺寸、樣式都確定了，最后就是關(guān)于圖標(biāo)的色彩和不同狀態(tài)的制定了。
前面講過，B 端項目對圖標(biāo)的裝飾屬性沒有那么迫切，所以正常情況下，太花哨的圖標(biāo)是要盡量避免的。彩色、漸變色、投影，都不應(yīng)該在這個情況下胡亂使用。
常規(guī)的圖標(biāo)只要使用中性色即可，而需要特別對待的圖標(biāo)，色彩可以從主色或者輔助色中選取。比如需要高亮顯示的打勾或者打岔。
當(dāng)然，如果項目涉及到一些特殊的工具圖標(biāo)，類似工廠、工業(yè)領(lǐng)域表達(dá)實(shí)體設(shè)備的擬物圖標(biāo)，可以打破這個原則。但是，同樣避免這套擬物圖標(biāo)的每個圖標(biāo)用色不同，盡量只使用 3 種以內(nèi)的顏色完成擬物的填色。
同時色彩的使用還有一個重要的意義就是對圖標(biāo)不同狀態(tài)的呈現(xiàn)，部分圖標(biāo)會承擔(dān)按鈕的功能，包含默認(rèn)、選中兩個基本狀態(tài)。
普通權(quán)重的圖標(biāo)，未選中狀態(tài)可以在默認(rèn)色彩基礎(chǔ)上使用透明度來實(shí)現(xiàn)。
高權(quán)重的圖標(biāo)，則可以在選中的狀態(tài)替換色彩，或者更改圖標(biāo)的類型，將原本的線性更改成面形并填充色彩制造反差。
完成所有圖標(biāo)的設(shè)計以后，最后一步就是切圖和導(dǎo)出了，這決定你的圖標(biāo)能不能被正確運(yùn)用到線上項目中。
在一套專業(yè)的 B 端項目中，已經(jīng)設(shè)計好的圖標(biāo)是設(shè)計規(guī)范的 “資產(chǎn)” 內(nèi)容之一。圖標(biāo)的文件不能散落在項目的各個界面里，而是在規(guī)范頁面中有統(tǒng)一的整理和收納。
這種做法的流程是，先在軟件的規(guī)范庫中創(chuàng)建對應(yīng)的圖標(biāo)組件（ Symbol / Compoent ），然后再在具體頁面中應(yīng)用，方便后續(xù)的統(tǒng)一管理和修改。
而在這個過程中，我們也需要對圖標(biāo)有正確的命名方法，來確保團(tuán)隊調(diào)用、檢索圖標(biāo)的效率。通常，我的圖標(biāo)命名規(guī)范如下：
尺寸 / 類型 / 圖標(biāo)名-狀態(tài)
示例：
48px/導(dǎo)航圖標(biāo)/表盤頁-默認(rèn)
24px/一般圖標(biāo)/搜索-默認(rèn)
“/” 號的引用主要是方便軟件中對組件層級進(jìn)行劃分，而我調(diào)用圖標(biāo)的規(guī)則勢必是先從尺寸開始，再選擇對應(yīng)規(guī)格，最后類型和狀態(tài)。
提前命名也是方便后續(xù)我們切圖和導(dǎo)出，但要提及一點(diǎn)，圖標(biāo)的命名不要追求英文化，因?yàn)槲覀兊脑~匯量不可能實(shí)現(xiàn)正式的英文命名規(guī)則，只會寫一堆大家都看不懂的單詞。
而開發(fā)在使用我們的圖標(biāo)切圖時，也不會用我們之前取的命名，會根據(jù)自己的命名習(xí)慣重新命一遍，寫個讓他能看懂的名字遠(yuǎn)比用亂七八糟的英文強(qiáng)。
接下來，就要解釋切圖的規(guī)則了。很多沒有經(jīng)驗(yàn)的設(shè)計師切圖就只是隨手加個切片，然后上傳藍(lán)湖發(fā)給開發(fā)自生自滅了，這是一個非常不合理的操作。
再或者，強(qiáng)行使用 Fonticon 格式，而不管實(shí)際情況如何，造成最后實(shí)現(xiàn)效果完全不同步或?qū)崿F(xiàn)不了。
切圖是通過前端調(diào)用并在瀏覽器中進(jìn)行顯示的圖形，而要被瀏覽器正常顯示，就有必要了解適合使用的切圖格式。
圖片的格式包含位圖和矢量兩種，位圖是通過記錄像素色值的圖形格式，假設(shè)一張圖是 100*100 像素，那么記錄 1W 個像素點(diǎn)的色彩，所以無法支持無損縮放。而矢量則是通過記錄點(diǎn)線面的坐標(biāo)繪制出顯示圖形的格式，可以支持自由縮放。
理論上，矢量格式是最佳的圖標(biāo)切圖格式，但是它的限制同樣有很多，例如：
無法記錄漸變色
導(dǎo)出輪廓容易有錯誤
無法記錄擬物圖形
無法記錄投影元素
前面說過，普通項目中同一圖標(biāo)是很少出現(xiàn)一會兒大一會兒小的需求，所以矢量最大的特征無損縮放，往往就不需要我們?nèi)タ紤]。矢量格式切圖的主要出發(fā)點(diǎn)是用來應(yīng)對移動端顯示器 1x、2x、3x、4x 等不同倍率縮放的問題，而不是網(wǎng)頁端的基本使用。
當(dāng)一套項目中出現(xiàn)了矢量格式無法覆蓋的圖標(biāo)時，那么即用矢量切圖，又用位圖，就會顯得非常的混亂。只有類似 LOGO 等圖形元素，才需要考慮 SVG 格式，而不是一看到圖標(biāo)就上。
所以，最適合切圖的格式就是位圖的 PNG 格式，一方面它是無損的，另一方面它支持透明背景，在切圖應(yīng)用上可以完美和設(shè)計稿結(jié)合，而這是其它大多數(shù)位圖格式不具備的特征。
當(dāng)每次項目完成以后，并不需要通過藍(lán)湖來實(shí)現(xiàn)切圖的導(dǎo)出，如果切圖文件分散在各個項目頁面里，那么一定會有很多圖標(biāo)被遺漏，尤其是圖標(biāo)的不同狀態(tài)切圖。
所以，最理想的切圖形式，就是將所有圖標(biāo)完成整理和命名以后，一起框選，然后導(dǎo)出成 PNG 格式，再同步給程序員即可。
以上就是關(guān)于 B 端圖標(biāo)應(yīng)用的所有知識點(diǎn)了。后續(xù)會將這些內(nèi)容進(jìn)行分拆，更新到原子核系列課程中去，會有更細(xì)節(jié)的案例說明。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com