我目前在做B端，所以就以B端產(chǎn)品為例。B端產(chǎn)品所謂好的體驗(yàn)，不僅需要功能交互一致，還需要視覺一致，避免用戶產(chǎn)生混淆。系統(tǒng)圖標(biāo)作為重要的視覺元素，需要簡潔、高效。四步掌握B端系統(tǒng)圖標(biāo)設(shè)計(jì)

我在網(wǎng)上試用一款產(chǎn)品的時(shí)候，看到了下面這張圖，這是一個數(shù)據(jù)處理頁面（局部），操作欄里密密麻麻的排列著很多按鈕，按鈕樣式為“icon+文字”。

如果我們單獨(dú)取出圖標(biāo)，我們可以清楚地看到幾個典型的問題。

幾個典型的問題：

1、圖標(biāo)線條粗細(xì)不一致；

2、視覺大小不一致，第一張與第四張對比尤為明顯；

3、風(fēng)格不統(tǒng)一，面型、線型混雜；

4、部分圖標(biāo)不夠簡潔清晰，如“查找和替換”圖標(biāo)采用向上傾斜的望遠(yuǎn)鏡形狀，辨識度較低。

針對上述問題，現(xiàn)作出相應(yīng)調(diào)整，具體如下：

當(dāng)我們設(shè)計(jì)一個功能多、布局緊湊的頁面時(shí)，首先要保證圖標(biāo)的清晰無歧義，然后再考慮設(shè)計(jì)感。比如上圖第五個圖標(biāo)，“列顯示”看上去是一個不常見的按鈕，我們沒必要在一個圖標(biāo)里傳達(dá)“列”和“顯示”的含義，否則當(dāng)圖標(biāo)較小、內(nèi)容較多時(shí)，過多的圖標(biāo)細(xì)節(jié)很容易“模糊”在一起，讓整個圖標(biāo)變得難以區(qū)分。我們只需要表達(dá)“列”的含義，并添加按鈕文字描述，讓用戶快速了解這個按鈕的功能即可。

步驟 1：選擇正確的圖標(biāo)原型

常見的系統(tǒng)圖標(biāo)通常都有默認(rèn)樣式，例如“設(shè)置”通常用齒輪表示，“搜索”通常用放大鏡表示。這些圖標(biāo)要么源于認(rèn)知習(xí)慣，要么是對真實(shí)使用場景的隱喻。如果你不想讓用戶在使用你的產(chǎn)品時(shí)遇到困難，就使用這些圖標(biāo)吧。

默認(rèn)的樣式就是常規(guī)的樣式，當(dāng)然，為了讓我們的圖標(biāo)顯得獨(dú)特、有設(shè)計(jì)感，你可以在常規(guī)樣式上添加一些細(xì)節(jié)。

選擇圖標(biāo)就像選擇伴侶，沒有最好，只有最合適。不同的場景需要選擇符合該場景交互方式的圖標(biāo)。以下三個示例均有“編輯”功能。根據(jù)應(yīng)用場景和風(fēng)格的不同，設(shè)計(jì)細(xì)節(jié)也有所不同。

簡單的線性圖標(biāo)

帶有裝飾線條的圖標(biāo)

具有一般形狀的臉部圖標(biāo)

在B端場景中sketch視覺設(shè)計(jì)教程，很多時(shí)候可以根據(jù)產(chǎn)品風(fēng)格和應(yīng)用場景選擇合適的圖標(biāo)原型。

上面的案例是我們圖標(biāo)設(shè)計(jì)的第一步，從圖標(biāo)庫中選取合適的圖標(biāo)原型之后，我們還需要根據(jù)自己系統(tǒng)的風(fēng)格對其進(jìn)行重新設(shè)計(jì)、上色。

第二步：統(tǒng)一設(shè)計(jì)風(fēng)格，與產(chǎn)品基調(diào)相符

每個產(chǎn)品根據(jù)其功能和定位都有各自的產(chǎn)品基調(diào)，不同的產(chǎn)品基調(diào)會導(dǎo)致系統(tǒng)圖標(biāo)的設(shè)計(jì)風(fēng)格不同。圖標(biāo)有很多屬性，一套和諧統(tǒng)一的系統(tǒng)圖標(biāo)應(yīng)該具有相同的基本屬性。

2.1. 單一元素、輔助元素

一般情況下，圖標(biāo)代表同一類別或類似功能時(shí)，會使用輔助元素來區(qū)分，因此一套系統(tǒng)圖標(biāo)可以同時(shí)包含單個元素和輔助元素，但需要注意的是，同一套圖標(biāo)的輔助元素要區(qū)分清晰，容易識別，例如下圖中添加到圖標(biāo)集合中的輔助元素，就很難識別。

2.2 線性、平面、線面混合

線性：元素單一，表現(xiàn)力較弱，但線條本身簡潔sketch視覺設(shè)計(jì)教程，可塑性強(qiáng)。通過線條的設(shè)計(jì)，可以創(chuàng)造出可愛、專業(yè)、嚴(yán)謹(jǐn)?shù)榷喾N風(fēng)格。因此，線性圖標(biāo)在系統(tǒng)圖標(biāo)中最常用。

面：面具有體積感，視覺重心強(qiáng)，通常搭配混色（兩種或兩種以上顏色），增加視覺吸引力，我們在APP的金剛區(qū)經(jīng)?？吹剿?。

線面混合：表現(xiàn)力介于線與面之間，相比線型圖標(biāo)更具動感和質(zhì)感，但在頁面上不會太過搶眼，一般出現(xiàn)在年輕用戶較多、體現(xiàn)生活品質(zhì)的產(chǎn)品中，例如綠洲。

2.3. 單色和混合色

單色：顧名思義就是只使用一種顏色的圖標(biāo)，穩(wěn)定、統(tǒng)一。

混色：使用兩種或兩種以上顏色的圖標(biāo)。混色圖標(biāo)可以利用品牌VI系統(tǒng)的配色，增加產(chǎn)品記憶度，塑造品牌形象，同時(shí)也增加頁面的視覺表現(xiàn)力。

但混色圖標(biāo)在開發(fā)過程中的維護(hù)難度較大，SVG 格式的單色圖標(biāo)，前端同事只需在代碼中修改顏色值即可，而多色圖標(biāo)則需要修改設(shè)計(jì)，并重新提交文件給前端同事。

步驟 3：保持視覺尺寸一致

設(shè)計(jì)好樣式、定義好配色之后，圖標(biāo)設(shè)計(jì)最基礎(chǔ)也是最重要的一步就是保持圖標(biāo)的視覺一致性。如果一組圖標(biāo)在頁面上一大一小，即使設(shè)計(jì)得再酷，也還是一組不規(guī)則的圖標(biāo)。

3.1.統(tǒng)一設(shè)計(jì)尺寸和線條粗細(xì)

設(shè)計(jì)之初，我們需要定義統(tǒng)一的圖標(biāo)大小和線條粗細(xì)（線性圖標(biāo)），如果不確定，可以多試幾個版本，前期犯錯總比后期大改好?？梢允褂?4*24的畫板尺寸，也可以根據(jù)需要自行定義。

需要注意的是，如果你在設(shè)計(jì)圖標(biāo)，當(dāng)輪廓圖標(biāo)被放大時(shí)，線條的圓形端點(diǎn)會變形（除非圖形拼湊在一起），但這在 AI 中不會改變。因此，在設(shè)計(jì)圖標(biāo)時(shí)，盡量選擇最大的常用尺寸。

3.2. 根據(jù)參考線標(biāo)準(zhǔn)化圖標(biāo)的視覺尺寸

在24*24的畫板中，預(yù)留2px邊距后，藍(lán)色矩形框?yàn)榘踩珔^(qū)域，方便規(guī)范圖標(biāo)大小。

下圖是圖標(biāo)在正方形、長方形、圓形四種形狀時(shí)的位置，根據(jù)上圖中的參考線，我們就可以確定圖標(biāo)在畫板中的位置。

參考線內(nèi)其他不規(guī)則形狀的位置。

步驟4：圖標(biāo)管理和維護(hù)

隨著產(chǎn)品逐漸成型和完善，系統(tǒng)圖標(biāo)數(shù)量會增多，維護(hù)難度加大，后期容易出現(xiàn)同一個功能有好幾個圖標(biāo)的情況，影響統(tǒng)一性。

4.1 設(shè)計(jì)規(guī)范文件

一般在產(chǎn)品設(shè)計(jì)中期，設(shè)計(jì)師為了提高設(shè)計(jì)效率和團(tuán)隊(duì)協(xié)作，都會逐漸形成設(shè)計(jì)規(guī)范文檔，其中圖標(biāo)規(guī)范是必不可少的。圖標(biāo)規(guī)范一般包括產(chǎn)品中設(shè)計(jì)的所有圖標(biāo)、一兩個常用尺寸、基礎(chǔ)圖標(biāo)和其他圖標(biāo)。

設(shè)計(jì)規(guī)范文件中的圖標(biāo)

4.2. 組件化圖標(biāo)庫

利用其中的功能，我們可以輕松地將規(guī)范中的圖標(biāo)組件化，然后添加到組件庫中。

我們可以在設(shè)計(jì)過程中隨時(shí)從組件庫中調(diào)用所需的圖標(biāo)。

還可以隨時(shí)打開原始文檔來編輯和更新規(guī)范文檔。

4.3. 在中創(chuàng)建項(xiàng)目

阿里巴巴的圖標(biāo)項(xiàng)目管理非常適合用于圖標(biāo)項(xiàng)目管理和團(tuán)隊(duì)協(xié)作，我們將圖標(biāo)上傳到創(chuàng)建的項(xiàng)目中，通過插件“”可以隨時(shí)在圖標(biāo)庫中查看、調(diào)用對應(yīng)項(xiàng)目中的圖標(biāo)。

在插件中您可以隨時(shí)查看圖標(biāo)項(xiàng)并調(diào)用相應(yīng)的圖標(biāo)。

結(jié)論

系統(tǒng)圖標(biāo)是UI設(shè)計(jì)中非?；A(chǔ)的圖形語言，在頁面交互中也扮演著重要的角色。單個圖標(biāo)的設(shè)計(jì)并不難，但將所有圖標(biāo)系統(tǒng)化、標(biāo)準(zhǔn)化，并在項(xiàng)目中不斷應(yīng)用和復(fù)用，就很考驗(yàn)UI設(shè)計(jì)能力了。隨著設(shè)計(jì)工具的更新迭代，我們

你需要不斷學(xué)習(xí)并運(yùn)用好這些工具來提高你的工作效率，以便將有限的時(shí)間用在更重要的設(shè)計(jì)內(nèi)容上。

大部分優(yōu)秀的圖標(biāo)在這四個步驟中都有自己的標(biāo)準(zhǔn)，因此我們在設(shè)計(jì)圖標(biāo)時(shí)也應(yīng)該做到統(tǒng)一和標(biāo)準(zhǔn)化。

如果你想學(xué)習(xí)設(shè)計(jì)或者提高你的設(shè)計(jì)，你可以來AAA教育。

如有侵權(quán)請聯(lián)系刪除！