編輯導(dǎo)語(yǔ)：一套優(yōu)秀的圖標(biāo)設(shè)計(jì)系統(tǒng)有利于幫助產(chǎn)品在各個(gè)平臺(tái)保持一致的設(shè)計(jì)語(yǔ)言和風(fēng)格，給用戶(hù)一致的產(chǎn)品體驗(yàn)。本文從用戶(hù)畫(huà)像出發(fā)，對(duì)B端圖標(biāo)設(shè)計(jì)的關(guān)鍵要點(diǎn)展開(kāi)了梳理分析，與大家分享。

01?前言

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

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

02?用戶(hù)畫(huà)像

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

企業(yè)畫(huà)像：企業(yè)用戶(hù)畫(huà)像與個(gè)人用戶(hù)畫(huà)像有很大區(qū)別。個(gè)人用戶(hù)畫(huà)像是根據(jù)用戶(hù)社會(huì)屬性、生活習(xí)慣和消費(fèi)行為等主要信息數(shù)據(jù)而抽象出的一個(gè)標(biāo)簽化的用戶(hù)模型。而企業(yè)沒(méi)有這些特征，企業(yè)用戶(hù)畫(huà)像描述的則是企業(yè)基本 情況、經(jīng)營(yíng)情況、消費(fèi)決策和對(duì)產(chǎn)品的訴求等多維度企業(yè)商業(yè)信息數(shù)據(jù)，來(lái)幫助我們?nèi)媪私馄髽I(yè)狀況。

客戶(hù)畫(huà)像：客戶(hù)畫(huà)像是指對(duì)于目標(biāo)企業(yè)中決策層的描述，主要是指CEO或者高管，通常用戶(hù)數(shù)量少?？蛻?hù)畫(huà)像價(jià)值主要體現(xiàn)在三點(diǎn)：

1. 對(duì)產(chǎn)品的價(jià)值：幫助我們了解客戶(hù)需求，迭代產(chǎn)品，確定產(chǎn)品功能設(shè)計(jì)，有助于不斷迭代調(diào)整產(chǎn)品；
2. 對(duì)市場(chǎng)的價(jià)值：有助于調(diào)整營(yíng)銷(xiāo)內(nèi)容、營(yíng)銷(xiāo)策略和渠道選擇；
3. 對(duì)銷(xiāo)售的價(jià)值：有助于調(diào)整銷(xiāo)售團(tuán)隊(duì)結(jié)構(gòu)和銷(xiāo)售打法，幫助銷(xiāo)售進(jìn)行客戶(hù)篩選，找到有效客戶(hù)，提高轉(zhuǎn)化率，確定業(yè)務(wù)方向，合理配置團(tuán)隊(duì)，完成業(yè)績(jī)指標(biāo)。

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

03?設(shè)計(jì)特點(diǎn)

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

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

04?設(shè)計(jì)規(guī)范

有時(shí)候物理平衡和視覺(jué)平衡是相互矛盾的關(guān)系，比如，我們?cè)谙嗤笮〉膮^(qū)域內(nèi)繪制正方形、圓形和三角形，我們會(huì)發(fā)現(xiàn)雖然他們物理關(guān)系上是一致的，但是視覺(jué)上給人的感覺(jué)卻是大小不一的，那么，我們?cè)撊绾谓鉀Q這個(gè)問(wèn)題呢？

關(guān)于這一點(diǎn)，Material desig參考面積相等原則制定了一套規(guī)范化的標(biāo)準(zhǔn)，按照?qǐng)D標(biāo)的飽滿(mǎn)度，通過(guò)圓形、正方形、豎矩形和橫矩形，讓圖標(biāo)大小看起來(lái)是一致的，統(tǒng)一的。

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

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

我們可以規(guī)定一個(gè)比圖標(biāo)本身略大的尺寸，保證所有圖標(biāo)都能放進(jìn)去。在圖標(biāo)與這個(gè)尺寸之間的空白像素，正好也能幫助我們規(guī)避圖標(biāo)落地后，切圖邊緣像素可能被截?cái)嗟默F(xiàn)象發(fā)生。我們稱(chēng)這個(gè)區(qū)域?yàn)椤踩吘唷?/p>

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

05?設(shè)計(jì)三要素

1. 可讀

首先要清楚，圖標(biāo)必須具備可識(shí)別性和可讀性，永遠(yuǎn)不要犧牲圖標(biāo)所代表的含義。

2. 簡(jiǎn)潔

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

3. 統(tǒng)一

可以有自己的特點(diǎn)，但是得少加獨(dú)特的細(xì)節(jié)，保持圖標(biāo)在整體上是統(tǒng)一的。

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

06?推薦圖標(biāo)庫(kù)

1）REMIXICON

https://remixicon.com/

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

2）Fearher

https://feathericons.com/

Feather 是一個(gè)簡(jiǎn)單漂亮的開(kāi)源圖標(biāo)庫(kù)，強(qiáng)調(diào)功能、一致性和簡(jiǎn)單性。

3）EVA Icons

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

Eva Icons是一個(gè)免費(fèi)開(kāi)源的精美圖標(biāo)庫(kù)，適合于設(shè)計(jì)Web、iOS、Android產(chǎn)品，目前包含了480多個(gè)開(kāi)源圖標(biāo)，設(shè)計(jì)師下載素材包即可使用，免費(fèi)設(shè)計(jì)師尋找優(yōu)質(zhì)ICON素材的煩惱。

4）Heroicons

https://heroicons.dev/

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

這些圖標(biāo)的入門(mén)非常簡(jiǎn)單，他們還提供了Figma中的庫(kù)。如果你想包含所有的圖標(biāo)，你可以從公共資源庫(kù)中下載所有的SVG文件。

作者：付珍，UI設(shè)計(jì)師

本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶(hù)體驗(yàn)設(shè)計(jì)中心（微信公眾號(hào)@58UXD），作者@付珍

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