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