編輯導(dǎo)讀：評價圖標設(shè)計，首先關(guān)注的清晰性和專業(yè)性，最后才考慮美觀性。但是很多企業(yè)想要視覺層面好看的圖標、有創(chuàng)意的圖標、顏色豐富的圖標，本文作者根據(jù)自身工作經(jīng)驗，總結(jié)了B端圖標的設(shè)計點，希望對你有幫助。

好了，開始今天的分享吧~

今年年初，我到客戶現(xiàn)場進行需求溝通，在溝通結(jié)束后，客戶問了我一個問題，我竟然不知如何回答，只在當(dāng)時說了：“好的好的，我們會進行優(yōu)化的。”

當(dāng)時客戶是這么說的：“為什么界面的圖標這么普通，毫無新意，能不能設(shè)計的好看點。雖然我們是B端產(chǎn)品，但這樣子的圖標真的不好看?！?/p>

雖然我心里知道B端產(chǎn)品首先是以可用、易用為主的，那么圖標也不例外，在評價圖標設(shè)計的時候，我們首先看圖標是否體現(xiàn)了可用與易用，是否讓用戶通過看圖標就可以聯(lián)想到這個功能是什么（合理、無歧義表達）；同時圖標是否符合設(shè)計規(guī)則，讓界面看起來統(tǒng)一與專業(yè)。若圖標符合以上要素，就可以再來看圖標好不好看的問題了。

不過這并不是一位客戶的問題，后面我們還遇到了很多客戶有類似的問題，一上來就想要視覺層面好看的圖標、有創(chuàng)意的圖標、顏色豐富的圖標。

那B端圖標設(shè)計真的只需要考慮好不好看嗎？作為設(shè)計者的我們，還能做什么呢？其實，B端圖標設(shè)計是帶著腳鐐在跳舞，小小的圖標藏著大大的智慧，下面我們一起來看看吧~

圖標也叫icon，它是對現(xiàn)實世界的概括、抽象、隱喻，在產(chǎn)品軟件中，它會向我們傳達功能與操作。

有些圖標已經(jīng)成為人人熟悉并一致認同的傳播語言，例如刪除、設(shè)置、男士、女士、刷新、電話、郵件，看到這些圖標，人們的反應(yīng)基本是一致的，無需再多說什么。

一、圖標分類

圖標在B端界面的用途我們就不展開長篇大論說了，簡單來說圖標除了做點綴，還可以直接表達功能與用途。因此，我們可以將B端圖標分為兩大類：示意類圖標和半裝飾類圖標。

1.1 示意類圖標

示意類圖標（也有稱之為功能類圖標）是指可以向用戶示意功能用途的抽象化圖形，可以和文字配合使用，也可以單獨使用。

該類圖標在中后臺系統(tǒng)的界面中會比較常用，例如基礎(chǔ)組件、導(dǎo)航菜單、狀態(tài)、功能性模塊。示意類圖標不僅以可用的方式豐富了界面效果，在一定程度上也緩解了用戶的視覺疲勞（試想，全是文字的界面會怎么樣）。

1.2 半裝飾類圖標

為什么我們要取名「半裝飾類圖標」呢？原因在于，在B端界面上，不會無緣無故出現(xiàn)純裝飾、毫無寓意的圖標，任何圖標的出現(xiàn)即便原本是為了裝飾，設(shè)計者在設(shè)計時也需要思考其含義屬性。

該類圖標會在中后臺導(dǎo)航、中后臺工作臺、Dashboard、B端網(wǎng)站等地方出現(xiàn)，它們可以讓B端界面活躍起來。

我們可以發(fā)現(xiàn)，某些場景下使用示意類圖標會更好（比如基礎(chǔ)組件），某些場景下使用半裝飾類圖標會更好（比如B端網(wǎng)站），某些場景下使用任意一類圖標都可以（比如中后臺導(dǎo)航菜單）。

回到一開始客戶的問題：把圖標設(shè)計的好看點，他說了好幾個地方，記得好像有樹控件 、導(dǎo)航菜單、按鈕等。設(shè)計者們需看看目前客戶講的場景是哪個，有些場景不適合亮麗的圖標，這會喧賓奪主，例如基礎(chǔ)組件中。

我們深刻了解B端圖標類型的使用場景，在設(shè)計決策時會更加得心應(yīng)手。

二、圖標設(shè)計規(guī)則

雖然示意類圖標和半裝飾類圖標視覺形式不同，但在繪制上的規(guī)則是互通的。我們團隊輸出了一套企業(yè)級B端圖標設(shè)計規(guī)范，不僅可以幫助新人設(shè)計師快速上手，并且可以使團隊內(nèi)設(shè)計師高效協(xié)作，保證設(shè)計結(jié)果的一致性。接下來和大家分享下思路，這是一套可復(fù)用的方法。

2.1 約定圖標繪制區(qū)域

我們需要給一整套圖標約定合適的繪制區(qū)域，保證不論哪位設(shè)計師輸出的圖標，均符合設(shè)計標準。并且原始圖標大小一致，可以保證前端使用也非常友好。

假如都是48px*48px區(qū)域繪制的圖標，它們均縮放到16px*16px即可；如果一個是在48px*48px畫板上繪制的，一個是在88px*88px畫板上繪制的，它們都縮小到16px*16px，會導(dǎo)致圖標看起來視覺不一致。若期望它們看起來一致，就需要專門為不同畫板的圖標設(shè)計繪制規(guī)則。

這里在和大家分享一個小心得：我們團隊在約定圖標繪制區(qū)域時，發(fā)現(xiàn)了一個問題。Antd的圖標是繪制在1024px*1024px畫板上的，但又有一些團隊是繪制在16px*16px，到底應(yīng)該選取哪種畫板呢？經(jīng)過實際操作后我們發(fā)現(xiàn)，畫板越大，設(shè)計細節(jié)可以越豐富。但縮小到小尺寸時，會有小數(shù)點的虛邊（不過不妨礙前端應(yīng)用，用戶也看不到虛邊）。而小尺寸畫板繪制圖標，畫板全在視線范圍內(nèi)，設(shè)計師繪制圖標時更有安全感。所以，不論用什么尺寸的畫板，只要團隊成員一致認同即可，不用過于糾結(jié)。

2.2 設(shè)置出血位

除了要讓圖標繪制到統(tǒng)一的畫板中，我們還約定了出血位，要求所有圖標均保留出血位（出血位默認使用固定值），出血位起到的作用是：防止設(shè)計師圖標繪制不小心貼邊后，圖標在實際應(yīng)用場景中會出現(xiàn)缺失現(xiàn)象。當(dāng)然，出血位的默認數(shù)值并不是一成不變的，允許設(shè)計師在繪制一些特殊形狀的圖標時，有調(diào)整空間，保證視覺平衡。

2.3 約定元素調(diào)整規(guī)則

針對示意類圖標：

線條：我們會要求設(shè)計師在繪制圖標的線條/圓點時默認使用某個數(shù)值，然后設(shè)定線條粗細/圓點大小的遞增或遞減規(guī)律，例如以2的倍數(shù)為主基調(diào)繪制，默認為6px粗細/6px大小。但允許設(shè)計師在繪制圖標時，不合適用默認數(shù)值的，就按照增減規(guī)律去指導(dǎo)設(shè)計，如下所示。

圓角：圖標采用何種內(nèi)外圓角設(shè)計會影響圖標給人的感覺，數(shù)值大的圓角會讓用戶感覺親切；數(shù)值小的圓角會讓用戶感覺硬朗、專業(yè)。采用哪種圓角方式，設(shè)計師可以參考產(chǎn)品調(diào)性去規(guī)定。

針對半裝飾類圖標：

半裝飾類圖標在設(shè)計上也不是隨意為之，除了要可以表達文案內(nèi)涵外，假如是一整套的圖標系列也需要約定元素調(diào)整的規(guī)則。

例如約定在「幾何圖形+業(yè)務(wù)圖形」的設(shè)計基礎(chǔ)上進行發(fā)揮，保證圖標放到一起具有很強的一致性。并且半裝飾類圖標還要設(shè)定色彩范圍（主色、輔色），如此可以讓界面色彩不雜亂，嚴謹有序?？梢钥吹津v訊云官網(wǎng)的圖標采用了類似的設(shè)計方法。

2.4 分層打造秩序

對于圖標畫板來說，它不是一個平面，它就像樓房一樣，是分層的。從底層到最上層的內(nèi)容依次為：主畫板區(qū)域、核心內(nèi)容繪制區(qū)域、基礎(chǔ)圖形參考區(qū)域、實際圖標。

2.5 從基礎(chǔ)型拓展

我們在設(shè)計圖標時，都應(yīng)該先從基礎(chǔ)型開始思考——圓形、矩形、三角形、正方形等，保證計構(gòu)圖上的節(jié)奏感和規(guī)整性。當(dāng)基礎(chǔ)型無法滿足需要的時，以它們?yōu)闇氏蛲馍l(fā)，在遵循設(shè)計規(guī)范的基礎(chǔ)上，做視覺上的平衡和微調(diào)。

如果是落到實際軟件中應(yīng)用的，建議所有圖標最后都要合并路徑，保證圖形規(guī)整和干凈，同時便于正確輸出和使用。

三、圖標畫板尺寸

在「2.1 約定圖標繪制區(qū)域」中，我們說到了要為一套圖標約定統(tǒng)一的畫板區(qū)域，但這個事情給設(shè)計師造成了困擾，還不止一位設(shè)計師問我：“那是不是我不能在用其他尺寸的畫板來設(shè)計圖標了?！贝鸢府?dāng)然是否定的。約定畫板尺寸不是約束，恰恰是在規(guī)則中給予了設(shè)計師有序拓展的能力。

假如不約定畫板尺寸，那么設(shè)計師直接放飛，每個圖標都有自己的尺寸，并且有些還會出現(xiàn)長方形的形態(tài)。畢竟每個人的工作習(xí)慣不同、面對的產(chǎn)品不同，直接打開軟件畫圖標是最快的方式。

而首先約定畫板尺寸，設(shè)計師就會有條理地進行繪制，在遇到特殊情況時進行有序拓展，我們可以稱之為場景拓展法。例如設(shè)計師可以為B端基礎(chǔ)組件、工作臺常用導(dǎo)航模塊、結(jié)果頁的圖標各自設(shè)計一套繪制尺寸。

那設(shè)計師要怎么判斷什么時候采用場景拓展法去設(shè)計呢？我們可以優(yōu)先使用默認畫板尺寸設(shè)計圖標，在遇到特殊場景不允許情況下，采用場景拓展法去執(zhí)行，針對界面風(fēng)格有場景區(qū)別的，可以規(guī)定幾類畫板尺寸，為不同場景使。

四、線型與面型

線型圖標與面型圖標也是設(shè)計師經(jīng)常在討論的話題，他們常常討論「什么情況下使用線型圖標，什么情況下使用面型圖標」。做過比較多B端產(chǎn)品的小伙伴可以發(fā)現(xiàn)，沒有說哪種場景必須使用線型圖標，哪種場景必須使用面型圖標，主要還是看當(dāng)前產(chǎn)品調(diào)性合適哪種，并且使用某類型圖標后，對界面產(chǎn)生的效果是什么。

例如當(dāng)界面圖標較多時，采用面型圖標，會顯得頁面很重，會把用戶視覺引導(dǎo)到圖標而不是重點數(shù)據(jù)上。

線型圖標與面型圖標在界面中使用，是一項系統(tǒng)工程，是由多方因素決定的。但我們設(shè)計師需要保證B端界面圖標使用的統(tǒng)一性，即便按照場景區(qū)分，也需要認真思考，是不是有必要。

就如界面字號使用定律一樣，建議不要超過3種，多了會讓界面雜亂，降低界面設(shè)計品質(zhì)。圖標也是如此，不論面型還是線型，要站在產(chǎn)品角度去整體把握，而非線型和面型的簡單選擇。很多B端產(chǎn)品是兩種類型混用的，但它們很好的劃分了使用場景。

這里我總結(jié)了一些線型圖標與面型圖標常用的場景（以B端中后臺為例，但這并不是唯一選擇）：

在導(dǎo)航上（菜單極其多），常見默認用線型，選中用面型。

在導(dǎo)航上（菜單很少，單層），粗一些的線型圖標或者面型圖標都會用，且會比較個性化，以提升產(chǎn)品整體調(diào)性。

在基礎(chǔ)組件中，通常使用線型圖標，且顏色淺，用戶可以把注意力聚焦在信息本身。

在表格數(shù)據(jù)的狀態(tài)中，面型和線型是均分使用的狀態(tài)出現(xiàn)。

在文字按鈕中如果要添加圖標，讓界面展現(xiàn)更豐富，線型按鈕居多。假如一旦按鈕很多，面型圖標會讓界面顯得太重。

若標題區(qū)要出現(xiàn)按鈕，面型按鈕會使得區(qū)塊顯得更整體。

五、視覺尺寸與規(guī)范尺寸

這里還想和大家說說「視覺尺寸與規(guī)范尺寸」的事情。之前遇到設(shè)計師這么問：“既然已經(jīng)約定了圖標的設(shè)計規(guī)范，那是不是就嚴格按照規(guī)范區(qū)間來（嚴格按照基礎(chǔ)圖形參考區(qū)域來），但是有些圖標不適合直接套用規(guī)范啊?！?/p>

是的，其實很多不規(guī)則圖標是不適合直接套用規(guī)范的，就像一份周報格式不是所有崗位都適用一樣。如果設(shè)計師發(fā)現(xiàn)有些圖標直接套用規(guī)范不可行，是可以根據(jù)「視覺大小一致性」進行微調(diào)的。這不僅保證了前端開發(fā)的便捷，也保證了界面視覺的整潔。

六、圖標命名

既然是一套B端產(chǎn)品層/企業(yè)級圖標庫，那么必須要有規(guī)范的命名方式，這樣會方便設(shè)計師之間的協(xié)同，也會更方便開發(fā)與設(shè)計之間的協(xié)作，同時查找效率會提升。

那么命名有什么規(guī)律呢？其實只要根據(jù)項目的情況，團隊內(nèi)有統(tǒng)一的認知即可。關(guān)于命名的中英文，也是視團隊而定，各有優(yōu)缺點。比如是英文，那會方便開發(fā)直接用名字，不用重新取名（當(dāng)然設(shè)計師取的英文名開發(fā)不喜歡，也會改）；用中文的話，方便檢索。

可以是：

尺寸/類型/圖標名稱/狀態(tài)16px/導(dǎo)航/上傳/默認形態(tài)/格式/圖標名稱面型/方型/新增模塊/圖標名稱/狀態(tài)導(dǎo)航/分享/正常

七、三方圖標庫

好用的三方圖標庫還是很多的，雖然圖標庫質(zhì)量參差不齊，但還是在一定程度上解放了設(shè)計師天天畫圖標的痛苦。這里介紹幾個圖標質(zhì)量不錯的網(wǎng)站：

7.1 Noun Project

https://thenounproject.com

7.2 Iconfont

https://www.iconfont.cn

7.3 ICONS8

https://icons8.com

7.4 Font Awesome

https://fontawesome.dashgame.com/

7.5 IconPark

https://iconpark.oceanengine.com/home

八、寫在最后

當(dāng)客戶提出圖標好不好看時，是一個正常人的反應(yīng)，試著想想我們自己，不也總是會很表面得看待一件事情么。因此，客戶不會知道原來一個小小的圖標也是藏著大大智慧的。不過沒關(guān)系，當(dāng)我們了解了小圖標內(nèi)部的大智慧后，我們可以更輕松的駕馭圖標了，也可以更知道在何種場景下，使用何種圖標可以提升界面展示效果，得到客戶的好評。

#專欄作家#

知果，公眾號：知果日記，人人都是產(chǎn)品經(jīng)理專欄作家。浙江工商大學(xué)品牌設(shè)計專業(yè)碩士，《B端思維-產(chǎn)品經(jīng)理的自我修煉》作者。在產(chǎn)品設(shè)計流程、產(chǎn)品設(shè)計原則、產(chǎn)品設(shè)計方法、產(chǎn)品設(shè)計規(guī)范方面均有豐富經(jīng)驗

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

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

以上就是【我的下巴掉了！學(xué)到了嗎（一次客戶溝通后,我悟出了什么）一次客戶溝通后,我悟出問題-一次客戶溝通后，我悟出了「B端圖標」若干設(shè)計點】的全部內(nèi)容。