2022-6-14 博博
今年年初，我到客戶現場進行需求溝通，在溝通結束后，客戶問了我一個問題，我竟然不知如何回答，只在當時說了：“好的好的，我們會進行優化的?！?
當時客戶是這么說的：“為什么界面的圖標這么普通，毫無新意，能不能設計的好看點。雖然我們是 B 端產品，但這樣子的圖標真的不好看?！?
雖然我心里知道 B 端產品首先是以可用、易用為主的，那么圖標也不例外，在評價圖標設計的時候，我們首先看圖標是否體現了可用與易用，是否讓用戶通過看圖標就可以聯想到這個功能是什么（合理、無歧義表達）；同時圖標是否符合設計規則，讓界面看起來統一與專業。若圖標符合以上要素，就可以再來看圖標好不好看的問題了。
不過這并不是一位客戶的問題，后面我們還遇到了很多客戶有類似的問題，一上來就想要視覺層面好看的圖標、有創意的圖標、顏色豐富的圖標。
那 B 端圖標設計真的只需要考慮好不好看嗎？作為設計者的我們，還能做什么呢？其實，B 端圖標設計是帶著腳鐐在跳舞，小小的圖標藏著大大的智慧，下面我們一起來看看吧~
圖標也叫 icon，它是對現實世界的概括、抽象、隱喻，在產品軟件中，它會向我們傳達功能與操作。
有些圖標已經成為人人熟悉并一致認同的傳播語言，例如刪除、設置、男士、女士、刷新、電話、郵件，看到這些圖標，人們的反應基本是一致的，無需再多說什么。
圖標在 B 端界面的用途我們就不展開長篇大論說了，簡單來說圖標除了做點綴，還可以直接表達功能與用途。因此，我們可以將 B 端圖標分為兩大類：示意類圖標和半裝飾類圖標。
1. 示意類圖標
示意類圖標（也有稱之為功能類圖標）是指可以向用戶示意功能用途的抽象化圖形，可以和文字配合使用，也可以單獨使用。
該類圖標在中后臺系統的界面中會比較常用，例如基礎組件、導航菜單、狀態、功能性模塊。示意類圖標不僅以可用的方式豐富了界面效果，在一定程度上也緩解了用戶的視覺疲勞（試想，全是文字的界面會怎么樣）。
2. 半裝飾類圖標
為什么我們要取名「半裝飾類圖標」呢？原因在于，在 B 端界面上，不會無緣無故出現純裝飾、毫無寓意的圖標，任何圖標的出現即便原本是為了裝飾，設計者在設計時也需要思考其含義屬性。
該類圖標會在中后臺導航、中后臺工作臺、Dashboard、B 端網站等地方出現，它們可以讓 B 端界面活躍起來。
我們可以發現，某些場景下使用示意類圖標會更好（比如基礎組件），某些場景下使用半裝飾類圖標會更好（比如 B 端網站），某些場景下使用任意一類圖標都可以（比如中后臺導航菜單）。
回到一開始客戶的問題：把圖標設計的好看點，他說了好幾個地方，記得好像有樹控件 、導航菜單、按鈕等。設計者們需看看目前客戶講的場景是哪個，有些場景不適合亮麗的圖標，這會喧賓奪主，例如基礎組件中。
我們深刻了解 B 端圖標類型的使用場景，在設計決策時會更加得心應手。
雖然示意類圖標和半裝飾類圖標視覺形式不同，但在繪制上的規則是互通的。我們團隊輸出了一套企業級 B 端圖標設計規范，不僅可以幫助新人設計師快速上手，并且可以使團隊內設計師高效協作，保證設計結果的一致性。接下來和大家分享下思路，這是一套可復用的方法。
1. 約定圖標繪制區域
我們需要給一整套圖標約定合適的繪制區域，保證不論哪位設計師輸出的圖標，均符合設計標準。并且原始圖標大小一致，可以保證前端使用也非常友好。
假如都是 48px*48px 區域繪制的圖標，它們均縮放到 16px*16px 即可；如果一個是在 48px*48px 畫板上繪制的，一個是在 88px*88px 畫板上繪制的，它們都縮小到 16px*16px，會導致圖標看起來視覺不一致。若期望它們看起來一致，就需要專門為不同畫板的圖標設計繪制規則。
這里在和大家分享一個小心得：我們團隊在約定圖標繪制區域時，發現了一個問題。Antd 的圖標是繪制在 1024px*1024px 畫板上的，但又有一些團隊是繪制在 16px*16px，到底應該選取哪種畫板呢？經過實際操作后我們發現，畫板越大，設計細節可以越豐富。但縮小到小尺寸時，會有小數點的虛邊（不過不妨礙前端應用，用戶也看不到虛邊）。而小尺寸畫板繪制圖標，畫板全在視線范圍內，設計師繪制圖標時更有安全感。所以，不論用什么尺寸的畫板，只要團隊成員一致認同即可，不用過于糾結。
2. 設置出血位
除了要讓圖標繪制到統一的畫板中，我們還約定了出血位，要求所有圖標均保留出血位（出血位默認使用固定值），出血位起到的作用是：防止設計師圖標繪制不小心貼邊后，圖標在實際應用場景中會出現缺失現象。當然，出血位的默認數值并不是一成不變的，允許設計師在繪制一些特殊形狀的圖標時，有調整空間，保證視覺平衡。
3. 約定元素調整規則
針對示意類圖標：
線條：我們會要求設計師在繪制圖標的線條/圓點時默認使用某個數值，然后設定線條粗細/圓點大小的遞增或遞減規律，例如以 2 的倍數為主基調繪制，默認為 6px 粗細/6px 大小。但允許設計師在繪制圖標時，不合適用默認數值的，就按照增減規律去指導設計，如下所示。
圓角：圖標采用何種內外圓角設計會影響圖標給人的感覺，數值大的圓角會讓用戶感覺親切；數值小的圓角會讓用戶感覺硬朗、專業。采用哪種圓角方式，設計師可以參考產品調性去規定。
針對半裝飾類圖標：
半裝飾類圖標在設計上也不是隨意為之，除了要可以表達文案內涵外，假如是一整套的圖標系列也需要約定元素調整的規則。
例如約定在「幾何圖形+業務圖形」的設計基礎上進行發揮，保證圖標放到一起具有很強的一致性。并且半裝飾類圖標還要設定色彩范圍（主色、輔色），如此可以讓界面色彩不雜亂，嚴謹有序。可以看到騰訊云官網的圖標采用了類似的設計方法。
4. 分層打造秩序
對于圖標畫板來說，它不是一個平面，它就像樓房一樣，是分層的。從底層到最上層的內容依次為：主畫板區域、核心內容繪制區域、基礎圖形參考區域、實際圖標。
5. 從基礎型拓展
我們在設計圖標時，都應該先從基礎型開始思考——圓形、矩形、三角形、正方形等，保證設計構圖上的節奏感和規整性。當基礎型無法滿足需要的時，以它們為準向外散發，在遵循設計規范的基礎上，做視覺上的平衡和微調。
如果是落到實際軟件中應用的，建議所有圖標最后都要合并路徑，保證圖形規整和干凈，同時便于正確輸出和使用。
在「2.1、約定圖標繪制區域」中，我們說到了要為一套圖標約定統一的畫板區域，但這個事情給設計師造成了困擾，還不止一位設計師問我：“那是不是我不能再用其他尺寸的畫板來設計圖標了。”答案當然是否定的。約定畫板尺寸不是約束，恰恰是在規則中給予了設計師有序拓展的能力。
假如不約定畫板尺寸，那么設計師直接放飛，每個圖標都有自己的尺寸，并且有些還會出現長方形的形態。畢竟每個人的工作習慣不同、面對的產品不同，直接打開軟件畫圖標是最快的方式。
而首先約定畫板尺寸，設計師就會有條理地進行繪制，在遇到特殊情況時進行有序拓展，我們可以稱之為場景拓展法。例如設計師可以為 B 端基礎組件、工作臺常用導航模塊、結果頁的圖標各自設計一套繪制尺寸。
那設計師要怎么判斷什么時候采用場景拓展法去設計呢？我們可以優先使用默認畫板尺寸設計圖標，在遇到特殊場景不允許情況下，采用場景拓展法去執行，針對界面風格有場景區別的，可以規定幾類畫板尺寸，為不同場景使用。
線型圖標與面型圖標也是設計師經常在討論的話題，他們常常討論「什么情況下使用線型圖標，什么情況下使用面型圖標」。做過比較多 B 端產品的小伙伴可以發現，沒有說哪種場景必須使用線型圖標，哪種場景必須使用面型圖標，主要還是看當前產品調性合適哪種，并且使用某類型圖標后，對界面產生的效果是什么。
例如當界面圖標較多時，采用面型圖標，會顯得頁面很重，會把用戶視覺引導到圖標而不是重點數據上。
線型圖標與面型圖標在界面中使用，是一項系統工程，是由多方因素決定的。但我們設計師需要保證 B 端界面圖標使用的統一性，即便按照場景區分，也需要認真思考，是不是有必要。就如界面字號使用定律一樣，建議不要超過 3 種，多了會讓界面雜亂，降低界面設計品質。圖標也是如此，不論面型還是線型，要站在產品角度去整體把握，而非線型和面型的簡單選擇。很多 B 端產品是兩種類型混用的，但它們很好的劃分了使用場景。
這里我總結了一些線型圖標與面型圖標常用的場景（以 B 端中后臺為例，但這并不是唯一選擇）：
1. 在導航上（菜單極其多），常見默認用線型，選中用面型。
2. 在導航上（菜單很少，單層），粗一些的線型圖標或者面型圖標都會用，且會比較個性化，以提升產品整體調性。
3. 在基礎組件中，通常使用線型圖標，且顏色淺，用戶可以把注意力聚焦在信息本身。
4. 在表格數據的狀態中，面型和線型是均分使用的狀態出現。
5. 在文字按鈕中如果要添加圖標，讓界面展現更豐富，線型按鈕居多。假如一旦按鈕很多，面型圖標會讓界面顯得太重。
6. 若標題區要出現按鈕，面型按鈕會使得區塊顯得更整體。
這里還想和大家說說「視覺尺寸與規范尺寸」的事情。之前遇到設計師這么問：“既然已經約定了圖標的設計規范，那是不是就嚴格按照規范區間來（嚴格按照基礎圖形參考區域來），但是有些圖標不適合直接套用規范啊。”
是的，其實很多不規則圖標是不適合直接套用規范的，就像一份周報格式不是所有崗位都適用一樣。如果設計師發現有些圖標直接套用規范不可行，是可以根據「視覺大小一致性」進行微調的。這不僅保證了前端開發的便捷，也保證了界面視覺的整潔。
既然是一套 B 端產品層/企業級圖標庫，那么必須要有規范的命名方式，這樣會方便設計師之間的協同，也會更方便開發與設計之間的協作，同時查找效率會提升。
那么命名有什么規律呢？其實只要根據項目的情況，團隊內有統一的認知即可。關于命名的中英文，也是視團隊而定，各有優缺點。比如是英文，那會方便開發直接用名字，不用重新取名（當然設計師取的英文名開發不喜歡，也會改）；用中文的話，方便檢索。
可以是：
尺寸/類型/圖標名稱/狀態
16px/導航/上傳/默認
形態/格式/圖標名稱
面型/方型/新增
模塊/圖標名稱/狀態
導航/分享/正常
好用的三方圖標庫還是很多的，雖然圖標庫質量參差不齊，但還是在一定程度上解放了設計師天天畫圖標的痛苦。這里介紹幾個圖標質量不錯的網站：
1. Noun Project
網站鏈接：https://thenounproject.com
2. Iconfont
3. ICONS8
網站鏈接：https://icons8.com
4. Font Awesome
網站鏈接：https://fontawesome.dashgame.com/
5. IconPark
網站鏈接：https://iconpark.oceanengine.com/home
當客戶提出圖標好不好看時，是一個正常人的反應，試著想想我們自己，不也總是會很表面得看待一件事情么。因此，客戶不會知道原來一個小小的圖標也是藏著大大智慧的。不過沒關系，當我們了解了小圖標內部的大智慧后，我們可以更輕松的駕馭圖標了，也可以知道在何種場景下，使用何種圖標可以提升界面展示效果，得到客戶的好評。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
