編輯導語：一套優(yōu)秀的圖標設計系統(tǒng)有利于幫助產品在各個平臺保持一致的設計語言和風格，給用戶一致的產品體驗。本文從用戶畫像出發(fā)，對B端圖標設計的關鍵要點展開了梳理分析，與大家分享。

01?前言

近些年，互聯(lián)網(wǎng)大廠們都紛紛創(chuàng)建內部的 “大中臺”系統(tǒng)，將不同業(yè)務中高度重疊的渠道、技術、部門等資源集成起來。作為B端設計師，在工作中也可以沿用這樣的思路，積累經(jīng)常使用的圖標資源，組建屬于B端的圖標庫，這可以極大地提高我們的工作效率。

B端產品最主要的目的是幫助企業(yè)或組織通過協(xié)同辦公軟件，來解決一些管理上的問題，比如員工出勤考核、在線交流、工作流程審批、大數(shù)據(jù)檢測等。因為目標用戶的不同，所以和C端的圖標設計會有所差異。

02?用戶畫像

用戶畫像又稱用戶角色，是一種描繪目標用戶、聯(lián)系用戶訴求與設計方向的有效工具。然而，B 端用戶畫像與C端用戶畫像又有著很大的不同，通過用戶畫像，我們能更好地理解特定情形下，用戶是如何完成工作的。B端用戶畫像由三部分構成，分別是企業(yè)畫像，客戶畫像和使用者畫像。

企業(yè)畫像：企業(yè)用戶畫像與個人用戶畫像有很大區(qū)別。個人用戶畫像是根據(jù)用戶社會屬性、生活習慣和消費行為等主要信息數(shù)據(jù)而抽象出的一個標簽化的用戶模型。而企業(yè)沒有這些特征，企業(yè)用戶畫像描述的則是企業(yè)基本 情況、經(jīng)營情況、消費決策和對產品的訴求等多維度企業(yè)商業(yè)信息數(shù)據(jù)，來幫助我們全面了解企業(yè)狀況。

客戶畫像：客戶畫像是指對于目標企業(yè)中決策層的描述，主要是指CEO或者高管，通常用戶數(shù)量少?？蛻舢嬒駜r值主要體現(xiàn)在三點：

1. 對產品的價值：幫助我們了解客戶需求，迭代產品，確定產品功能設計，有助于不斷迭代調整產品；
2. 對市場的價值：有助于調整營銷內容、營銷策略和渠道選擇；
3. 對銷售的價值：有助于調整銷售團隊結構和銷售打法，幫助銷售進行客戶篩選，找到有效客戶，提高轉化率，確定業(yè)務方向，合理配置團隊，完成業(yè)績指標。

使用者畫像：是指對于目標企業(yè)中真正使用產品的用戶描述，通常數(shù)量較多，且處于各個職位，可以是公司小職員，也可以是高層管理者。

03?設計特點

B端類的產品有ERP、OA、CRM、SAAS和CMS等，目標用戶一般為群體，有著業(yè)務復雜，行業(yè)屬性明顯，門檻較高的特點。大多數(shù)B端產品功能多樣化，層層連接，沒有明確的主次之分。

B 端產品的設計注重工作效率的提升、低成本的投入，更穩(wěn)定和更安全。在設計開始之前，我們必須要非常了解業(yè)務需求，并做好統(tǒng)一化設計。即需要更多的考慮業(yè)務使用場景，將復雜的業(yè)務邏輯轉化成高效的操作流程，使得B端用戶能夠提升工作效率。那么如何在b端產品中做好圖標設計呢。

04?設計規(guī)范

有時候物理平衡和視覺平衡是相互矛盾的關系，比如，我們在相同大小的區(qū)域內繪制正方形、圓形和三角形，我們會發(fā)現(xiàn)雖然他們物理關系上是一致的，但是視覺上給人的感覺卻是大小不一的，那么，我們該如何解決這個問題呢？

關于這一點，Material desig參考面積相等原則制定了一套規(guī)范化的標準，按照圖標的飽滿度，通過圓形、正方形、豎矩形和橫矩形，讓圖標大小看起來是一致的，統(tǒng)一的。

在現(xiàn)實情況中，即使我們參考面積相等原則來繪制圖標，在項目落地后發(fā)現(xiàn)視覺上或多或少都會給人一些不協(xié)調的感覺。規(guī)范是死的，人是活的，在遇到這個問題的時候，我們可以憑借自己的主觀判斷進行一些微調。

按照網(wǎng)格規(guī)范和面積相等原則，解決了圖標視覺大小的問題之后，還有一個問題值得我們注意——圖標尺寸。因為每個圖標的形狀都是不一樣的，尺寸也是不同的，為了方便我們前端同學落地，我們可以在輸出圖標時，保證每個圖標文件的大小都是一致的。

我們可以規(guī)定一個比圖標本身略大的尺寸，保證所有圖標都能放進去。在圖標與這個尺寸之間的空白像素，正好也能幫助我們規(guī)避圖標落地后，切圖邊緣像素可能被截斷的現(xiàn)象發(fā)生。我們稱這個區(qū)域為——安全邊距。

在Material Design平臺規(guī)范中，對于安全邊距的統(tǒng)一規(guī)定為2dp。而iOS對于安全邊距的規(guī)范卻是沒有一個準確的數(shù)字，他們是根據(jù)不同的圖標使用場景給出的不同的圖標網(wǎng)格和圖標安全間距。

05?設計三要素

1. 可讀

首先要清楚，圖標必須具備可識別性和可讀性，永遠不要犧牲圖標所代表的含義。

2. 簡潔

盡量少用細節(jié)。每一筆都要簡潔而有目的地傳達icon所代表的本質。

3. 統(tǒng)一

可以有自己的特點，但是得少加獨特的細節(jié)，保持圖標在整體上是統(tǒng)一的。

在這里向大家推薦一些比較好的圖標資源網(wǎng)站，幫助大家學習和參考。

06?推薦圖標庫

1）REMIXICON

https://remixicon.com/

Remix Icon 是一套面向設計師和開發(fā)者的開源圖標庫。圖標風格為中性風格，適用于各種用戶群體的項目。與拼湊混搭的圖標庫不同，Remix Icon 的每一枚圖標都是由設計師按照統(tǒng)一規(guī)范精心繪制的，并確保每一枚圖標在擁有完美像素對齊的基礎上風格一致且簡潔易讀。圖標以24×24網(wǎng)格為基準，分為“線性圖標”和“面型圖標”兩種風格。所有的圖標均可免費用于個人項目和商業(yè)項目。

2）Fearher

https://feathericons.com/

Feather 是一個簡單漂亮的開源圖標庫，強調功能、一致性和簡單性。

3）EVA Icons

https://akveo.github.io/eva-icons/#/

Eva Icons是一個免費開源的精美圖標庫，適合于設計Web、iOS、Android產品，目前包含了480多個開源圖標，設計師下載素材包即可使用，免費設計師尋找優(yōu)質ICON素材的煩惱。

4）Heroicons

https://heroicons.dev/

Heroicons是由Tailwind CSS的創(chuàng)建者構建的另一個很棒的開源圖標庫。它具有超過165個具有填充和輪廓樣式的獨立圖標，但每個元素也提供深色和白色版本，圖標的外觀非常優(yōu)質且制作精良。

這些圖標的入門非常簡單，他們還提供了Figma中的庫。如果你想包含所有的圖標，你可以從公共資源庫中下載所有的SVG文件。

作者：付珍，UI設計師

本文來源于人人都是產品經(jīng)理合作媒體@58用戶體驗設計中心（微信公眾號@58UXD），作者@付珍

題圖來自pexels，基于CC0協(xié)議