目前正在做B端，所以以B端產品為例。 B端產品所謂的良好體驗，不僅需要實現(xiàn)一致的功能交互，還需要在視覺上保持一致，避免引起用戶的疑慮。 系統(tǒng)圖標作為重要的視覺元素，需要精簡、高效。四步掌握B端系統(tǒng)圖標設計

當我在互聯(lián)網上試用產品時，我看到了右邊的圖片。 這是一個數(shù)據(jù)處理頁面（部分）。 操作欄中密集排列著許多按鈕，按鈕樣式為“圖標+文字”。

我們單獨拿起圖標，就能清晰地看到幾個典型問題。

幾個典型的問題：

1、圖標腰線粗細不一致；

2、視覺尺寸不一致，尤其是第一張和第四張的對比；

3、風格不統(tǒng)一，面狀、線狀混搭；

4、部分圖標不夠簡潔、清晰。 比如這個“查找與替換”使用的是斜向上視角的望遠鏡，識別度較低。

針對上述問題，我們進行了適當調整，具體如下：

當我們設計一個功能較多、布局緊湊的頁面時，首先要保證圖標清晰、不含糊，然后再考慮設計感。 比如在第五個圖標里面，“欄目顯示”似乎是一個不常見的按鈕。 我們不需要用一個圖標來傳達“欄”和“顯示”的含義，否則在圖標小、內容多的情況下，太多的圖標細節(jié)很容易被“模糊”在一起，使得整個圖標難以區(qū)分。 我們只需要表達“欄”的含義，并添加按鈕的文字說明，就可以讓用戶快速了解這個按鈕的功能。

第 1 步：選擇合適的圖標原型

常見的系統(tǒng)圖標通常都有默認樣式。 例如，“設置”一般用蠕蟲表示，“搜索”通常用放大鏡表示。 這種圖標要么源自認知習慣，要么就是真實的使用場景。如果你不想讓用戶費勁去使用你的產品sketch視覺設計教程，就用這個

常規(guī)默認樣式。 事實上，為了讓我們的圖標具有獨特性和設計感，你可以在常規(guī)樣式上減少細節(jié)擴展。

選擇圖標就像選擇合作伙伴，沒有最好，只有最合適。 不同的場景需要選擇與該場景下的交互形式相匹配的圖標。 如右側三個示例所示，都有“編輯”功能，根據(jù)不同的應用場景和風格，設計細節(jié)也有所不同。

腰圍流線型線性圖標

腰圍經過修改的圖標

輪廓臉圖標

在B端場景中，很多時候，你可以根據(jù)產品風格和應用場景來選擇合適的圖標原型。

上面的案例是我們圖標設計的第一步。 從圖標庫中選擇了合適的圖標原型后，我們需要根據(jù)自己的系統(tǒng)風格重新設計和配色。

第二步：統(tǒng)一設計風格，符合??產品調性

每個產品都會根據(jù)其功能和定位有自己的產品調性。 不同的產品調性，系統(tǒng)圖標的設計風格完全不同。 圖標有很多屬性。 一組和諧統(tǒng)一的系統(tǒng)圖標應該具有相同的基本屬性。

2.1、單一元件、輔助元件

一般情況下，輔助元素在代表相同類別或相似功能的圖標時用于區(qū)分圖標，因此單個元素和輔助元素可以同時出現(xiàn)在一組系統(tǒng)圖標中。 但需要注意的是，同一組圖標中的輔助元素要鮮明、易于識別。 例如，右側圖標集中降低的輔助元素很難識別。

2.2、線性、平面、線面融合

線性：元素單一，表現(xiàn)力較弱，但腰線本身較淺，可塑性強。 通過腰線的設計，可以打造出甜美、職業(yè)、嚴謹?shù)榷喾N風格。 因此，線性圖標在系統(tǒng)圖標中使用率最高。

面部特征：面部特征具有體積感和強烈的視覺重心。 一般采用混合色（兩種以上）搭配，以達到降低視覺吸引力的目的。 我們經常在APP的金港區(qū)看到它。

線面融合：表現(xiàn)力介于線與面之間。 與線性圖標相比，它更具動感和質感，并且不會在頁面上過多搶鏡。 一般出現(xiàn)在一些年輕用戶較多、彰顯生活品質的產品中，例如綠洲等。

2.3、單色、混色

單色：顧名思義，只使用一種顏色圖標，具有穩(wěn)定、統(tǒng)一的特點。

混合顏色：使用兩種或多種顏色的圖標。 混色圖標可以利用品牌VI系統(tǒng)的色彩搭配，減少產品記憶，塑造品牌形象，同時也減少頁面的視覺表現(xiàn)力。

而且sketch視覺設計教程，混合色圖標在開發(fā)過程中維護起來比較困難，而svg格式的單色圖標只需要后端同學在代碼中改變顏色值即可，而多色圖標則需要重新傳遞給后端——設計變更后結束學生。

第 3 步：保持視覺尺寸一致性

設計完風格并定義配色方案后，圖標設計最基本也是最重要的一步來了：保持圖標的視覺一致性。 如果頁面上有一組大大小小的圖標，無論設計得多么耀眼，它仍然是一組不規(guī)則的圖標。

3.1. 統(tǒng)一設計規(guī)格和腰圍厚度

在設計之初，我們需要定義統(tǒng)一的圖標規(guī)格和腰線粗細（線性圖標）。 如果您不確定，請嘗試更多版本。 前期的試錯比后期的大改變要好。 可以使用24*24的畫板規(guī)格，也可以根據(jù)需要自己定義。

需要注意的是，如果使用設計圖標，當輪廓圖標放大時，腰線的方形端點會變形（除非圖形組合），但在ai中不會改變，所以設計圖標時，盡量選擇常用尺寸中最大的。

3.2. 根據(jù)參考線標準化圖標的視覺尺寸

在24*24的畫板中，行距預留2px后，紅色圓框就是安全區(qū)域，方便規(guī)范圖標大小。

右圖為圓形、矩形、圓形四種形狀中圖標的位置。 根據(jù)上圖中的參考線，我們可以確定圖標在畫板中的位置。

指南中其他不規(guī)則形狀的位置。

第四步：圖標管理與維護

當產品從零到一逐漸形成和建立的時候，系統(tǒng)圖標就會變得越來越難以維護。 后期很容易出現(xiàn)同一個功能的多個圖標，影響統(tǒng)一性。

4.1. 設計規(guī)范文件

通常在產品設計中期，設計師為了提高設計效率和團隊協(xié)作，會逐漸生成設計規(guī)范文檔，其中圖標規(guī)范必不可少。 圖標規(guī)范通常包括產品中設計的所有圖標、一兩個常用規(guī)范、基本圖標和其他圖標。

設計規(guī)范文檔中的圖標

4.2. 組件圖標庫

有了里面的功能，我們就可以輕松地將規(guī)范中的圖標組件化，然后添加到組件庫中。

我們可以在設計中隨時從組件庫中調用所需的圖標。

還可以隨時打開原始文檔，方便規(guī)范文檔的編輯和更新。

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

阿里的圖標特別適合項目管理和團隊協(xié)作。 我們將圖標上傳到創(chuàng)建的項目中，通過插件“”，可以隨時查看和調用對應項目中的圖標。

在插件中，您可以查看圖標項目并隨時調用相應的圖標。

結語

系統(tǒng)圖標是UI設計中非常基礎的圖形語言，在頁面交互中也發(fā)揮著重要作用。 單個圖標的設計并不難，將所有圖標系統(tǒng)化、標準化，并在項目中不斷應用和復用，是對UI設計能力的考驗。隨著設計工具的更新迭代，我們

需要不斷學習并利用好這個工具，以提高工作效率，將有限的時間用在更重要的設計內容上。

大多數(shù)優(yōu)秀的圖標在這四個步驟中都有自己的規(guī)范，所以我們在設計圖標時也應該做到統(tǒng)一和標準化。

如果你想學習設計或者提高設計，可以來AAA教育。

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