系統(tǒng)圖標即應用于系統(tǒng)內的基礎圖標，pc端、網(wǎng)頁端和APP等應用內的導航、按鈕、列表、彈窗內的圖標。

?

系統(tǒng)圖標不同于富有細節(jié)的修飾性圖標，清晰明確得傳達交互目的是設計師的首要任務，其次是可復用性和高效率。因此相較而言，系統(tǒng)圖標設計得更加精煉。

?

·修飾性圖標（來源：dribbble）

?

·系統(tǒng)圖標（來源：dribbble）

?

目前在做B端，所以以B端產(chǎn)品為例。B端產(chǎn)品所謂好的體驗，除了要做到功能交互一致，還需要在視覺上保持一致，避免用戶產(chǎn)生疑惑。系統(tǒng)圖標作為其中重要的視覺元素，更需要做到精簡高效。

?

我在試用網(wǎng)上某產(chǎn)品時，遇到下圖。這是一個數(shù)據(jù)處理頁（局部），操作欄中密集的排列著很多按鈕，按鈕樣式為“圖標+文字”。

?

我們把圖標單拎出來，可以明顯看出幾個典型問題。

?

幾個典型問題：

?

圖標線條粗細不一致；

視覺大小不一致，第一個和第四個對比尤其明顯；

風格不統(tǒng)一，面性和線性混搭；

個別圖標不夠簡潔明確，比如這個“查找替換”用了一個斜上方視圖的望遠鏡，辨識度較低。

?

針對上述問題做了適當調整，如下：

?

我們在設計功能多、布局緊湊的頁面時，首要確保圖標清晰明確、無歧義，再考慮設計感。

?

比如上面的第五個圖標中，“列顯示”看起來是個不太常見的按鈕，我們不用將“列”和“顯示”的意思用一個圖標都傳達出來，否則在圖標小，內容多的情況下，圖標細節(jié)太多很容易”糊“在一起，導致整個圖標無法分辨。我們只需要表達出“列”的意思，再加上按鈕文字說明，能夠讓用戶快速了解這個按鈕的功能即可。

?

?

?

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

?

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

?

常見的系統(tǒng)圖標一般都有默認的樣式，比如“設置”一般就用齒輪來表現(xiàn)，“搜索”常規(guī)就是一個放大鏡，這些圖標要么就是由認知習慣而來、要么就是隱喻真實的使用場景。

如果你不想讓用戶使用你的產(chǎn)品很費勁的話，就用這些常規(guī)默認的樣式吧。當然，為了使我們的圖標具有獨特性和設計感，你可以在常規(guī)樣式上增加細節(jié)擴展。

?

選擇圖標就像選擇伴侶，沒有最好，只有最合適。不同場景需要選擇符合該場景下交互方式的圖標。

?

如下圖三個示例中都有“編輯”功能，根據(jù)不同的應用場景與風格，設計細節(jié)也有所不同。

·線條精簡的線性圖標

?

·帶有修飾性線條的圖標

?

·造型概括的面形圖標

?

在B端場景中，大部分時候都可以根據(jù)產(chǎn)品的風格和應用場景來選擇合適的圖標原型。

?

?

?

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

?

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

?

?

每個產(chǎn)品根據(jù)其功能、定位，都會有其產(chǎn)品調性，不同的產(chǎn)品調性，系統(tǒng)圖標的設計風格也迥然不同。圖標的屬性有很多，一組和諧統(tǒng)一的系統(tǒng)圖標，它們的基本屬性應該是一致的。

?

2.1. 單一元素、輔助元素

?

通常情況下，當圖標表意為同類別功能或相似功能時會用輔助元素加以區(qū)分，所以一組系統(tǒng)圖標中可以同時出現(xiàn)單一元素和輔助元素。但需注意同一組圖標的輔助元素要區(qū)分明顯，易識別。比如下圖這組圖標中增加的輔助元素就很難識別。

?

2.2.? 線性、面性、線面混合

?

線性：元素單一、表現(xiàn)力弱，但線條本身簡練、可塑性強，可以通過對線條的設計，塑造可愛、專業(yè)、嚴謹?shù)榷喾N風格。所以線性圖標在系統(tǒng)圖標中使用率最高。

?

面性：面性具有體塊感，視覺重心強，通常搭配混色（兩種顏色及以上），以達到增加視覺吸引力的目的，我們在APP的金剛區(qū)經(jīng)常見到。

?

線面混合：表現(xiàn)力介于線性與面性之間，相比于線性圖標更有活力和質感，又不會在頁面中太過搶眼。通常在一些年輕用戶多、表現(xiàn)生活品質的產(chǎn)品中出現(xiàn)，比如airbnb、綠洲等。

?

2.3.? 單色、混色

?

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

?

混色：使用二種及以上顏色的圖標，混色圖標可運用品牌VI系統(tǒng)的配色來增加產(chǎn)品記憶，塑造品牌形象，也可以增加頁面的視覺表現(xiàn)力。

?

但是混色圖標在開發(fā)中較難維護，而svg格式下的單色圖標只需前端同事在代碼中修改色值即可，多色圖標則需要設計修改后重新交付一份文件給前端同事。

?

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

第三步：保持視覺大小的一致性

?

?

在設計好樣式、定義了配色之后，圖標設計中最基礎也是最重要的一步來了：保持圖標的視覺一致性。如果一組圖標在頁面中大大小小，即使設計得再炫酷，也是一組不規(guī)范的圖標。

?

3.1.? 統(tǒng)一設計尺寸和線條粗細

在設計之初，我們需要先定義統(tǒng)一的圖標尺寸和線條粗細（線性圖標），不確定的話就多做幾版嘗試，前期試錯總比后期大動干戈去修改來的好。你可以用24*24的畫板尺寸，也可以根據(jù)需要自己定義。
?

?

需要注意的是，如果是用sketch設計圖標，輪廓化后的圖標放大時，線條的圓形端點會發(fā)生變形（除非將圖形拼合），但在ai中不會發(fā)生變化，因此在sketch設計圖標時，盡量選擇常用尺寸中最大的。

?

?

3.2.? 根據(jù)參考線規(guī)范圖標視覺大小

在24*24的畫板內，邊距預留2px后，藍色矩形框中為安全區(qū)域，方便規(guī)范圖標大小。

?

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

?

其他不規(guī)則形狀在參考線中的位置。

?

?

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

第四步：圖標的管理與維護

?

當產(chǎn)品從零到一逐漸成型和完善之后，系統(tǒng)圖標也會越來越多、越來越難以維護。后期容易出現(xiàn)同一個功能好幾種種圖標的情況，影響統(tǒng)一性。

?

4.1.? 設計規(guī)范文檔

一般產(chǎn)品設計中期，設計師會慢慢形成設計規(guī)范文檔，便于提高設計效率和團隊協(xié)作，其中圖標規(guī)范必不可少。圖標規(guī)范中一般包含產(chǎn)品中所有設計到的圖標，一到二種常用尺寸，基礎圖標以及其他圖標。

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

4.2.? 組件化圖標庫
?

tch中的symbol功能，我們可以很方便的將規(guī)范中的圖標組件化，然后添加進組件庫。
?

?

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

?

還可以隨時打開原始文檔，以便對規(guī)范文檔進行編輯與更新。

?

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

阿里的iconfont非常適合圖標項目管理與團隊協(xié)作（https://www.iconfont.cn/）。我們把圖標上傳到創(chuàng)建的項目中，配合插件“kithen”就可以在sketch中隨時查看和調用相應項目中的圖標。

?

在sketch的插件中可隨時查看圖標項目和調用相應的圖標。

?

結語

?

系統(tǒng)圖標在UI設計中是非?；A的圖形化語言，也在頁面交互中起到很重要的作用。單個圖標的設計并不難，但是系統(tǒng)化、規(guī)范化所有圖標并在項目中不斷應用與復用，是對UI設計能力的考驗。

隨著設計工具的更新迭代，我們需要不斷學習并利用好這些工具，提高工作效率，才能將有限的時間利用到更重要的設計內容中去。

來源網(wǎng)絡