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

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

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

幾個典型的問題：

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

當我們設(shè)計一個功能較多、布局緊湊的頁面時，首先要保證圖標清晰、不含糊，然后再考慮設(shè)計感。

例如，上面的第五個圖標中，“列顯示”似乎是一個不常見的按鈕。 我們不需要用一個圖標來傳達“列”和“顯示”的含義。 否則，在圖標較小、內(nèi)容較多的情況下，圖標過多的細節(jié)很容易被“模糊”在一起，使整個圖標難以區(qū)分。 我們只需要表達“欄”的含義，并添加按鈕的文字說明，就可以讓用戶快速了解這個按鈕的功能。

系統(tǒng)圖標設(shè)計方法

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

常見的系統(tǒng)圖標通常都有默認樣式。 例如，“設(shè)置”一般用蠕蟲表示，“搜索”通常用放大鏡表示。 這種圖標要么源自認知習慣，要么就是真實的使用場景。

如果您不希望用戶難以使用您的產(chǎn)品，請使用此通用默認樣式。 事實上，為了讓我們的圖標具有獨特性和設(shè)計感，你可以在常規(guī)樣式上減少細節(jié)擴展。

選擇圖標就像選擇合作伙伴，沒有最好，只有最合適。 不同的場景需要選擇與場景中的交互方式相匹配的圖標。

如右側(cè)三個示例所示，都有“編輯”功能，根據(jù)不同的應(yīng)用場景和風格，設(shè)計細節(jié)也有所不同。

· 帶有流線型線條的線性圖標

?修改腰圍的圖標

·具有廣義形狀的人臉圖標

在B端場景中，大多數(shù)時候，你可以根據(jù)產(chǎn)品風格和應(yīng)用場景來選擇合適的圖標原型。

系統(tǒng)圖標設(shè)計方法

第二步：統(tǒng)一設(shè)計風格，符合??產(chǎn)品調(diào)性

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

2.1. 單元件、輔助元件

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

2.2. 線性、曲面、線面融合

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

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

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

2.3. 單色、混色

單色：僅使用一種顏色的圖標具有穩(wěn)定、統(tǒng)一的特征。

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

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

系統(tǒng)圖標設(shè)計方法

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

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

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

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

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

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

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

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

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

系統(tǒng)圖標設(shè)計方法

第四步：圖標管理與維護

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

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

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

·設(shè)計規(guī)范文件中的圖標

4.2. 組件圖標庫

借助tch中的函數(shù)，我們可以輕松地將規(guī)范中的圖標組件化，然后將其添加到組件庫中。

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

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

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

阿里項目管理和團隊合作專用圖標

我們將圖標上傳到創(chuàng)建的項目中，通過插件“”，可以隨時查看和調(diào)用對應(yīng)項目中的圖標。

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

結(jié)語

系統(tǒng)圖標是UI設(shè)計中非?；A(chǔ)的圖形語言，在頁面交互中也發(fā)揮著重要作用。 單個圖標的設(shè)計并不難，將所有圖標系統(tǒng)化、標準化并在項目中不斷應(yīng)用和復用，是對UI設(shè)計能力的考驗。

隨著設(shè)計工具的更新迭代，我們需要不斷學習并用好這個工具，才能提高工作效率，能夠?qū)⒂邢薜臅r間用在更重要的設(shè)計內(nèi)容上。

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