///
系統圖示即應用于系統内的基礎圖示，pc端、網頁端和App等應用内的導航、按鈕、清單、彈窗内的圖示。
系統圖示不同于富有細節的修飾性圖示，清晰明确得傳達互動目的是設計師的首要任務，其次是可複用性和高效率。是以相較而言，系統圖示設計得更加精煉。
·修飾性圖示（來源：dribbble）
·系統圖示（來源：dribbble）
目前在做B端，是以以B端産品為例。B端産品所謂好的體驗，除了要做到功能互動一緻，還需要在視覺上保持一緻，避免使用者産生疑惑。系統圖示作為其中重要的視覺元素，更需要做到精簡高效。
我在試用網上某産品時，遇到下圖。這是一個資料處理頁（局部），操作欄中密集的排列着很多按鈕，按鈕樣式為“圖示+文字”。
我們把圖示單拎出來，可以明顯看出幾個典型問題。
幾個典型問題：
- 圖示線條粗細不一緻；
- 視覺大小不一緻，第一個和第四個對比尤其明顯；
- 風格不統一，面性和線性混搭；
- 個别圖示不夠簡潔明确，比如這個“查找替換”用了一個斜上方視圖的望遠鏡，辨識度較低。
針對上述問題做了适當調整，如下：
我們在設計功能多、布局緊湊的頁面時，首要確定圖示清晰明确、無歧義，再考慮設計感。
比如上面的第五個圖示中，“列顯示”看起來是個不太常見的按鈕，我們不用将“列”和“顯示”的意思用一個圖示都傳達出來，否則在圖示小，内容多的情況下，圖示細節太多很容易”糊“在一起，導緻整個圖示無法分辨。我們隻需要表達出“列”的意思，再加上按鈕文字說明，能夠讓使用者快速了解這個按鈕的功能即可。
系統圖示設計方法
第一步：選擇合适的圖示原型
常見的系統圖示一般都有預設的樣式，比如“設定”一般就用齒輪來表現，“搜尋”正常就是一個放大鏡，這些圖示要麼就是由認知習慣而來、要麼就是隐喻真實的使用場景。
如果你不想讓使用者使用你的産品很費勁的話，就用這些正常預設的樣式吧。當然，為了使我們的圖示具有獨特性和設計感，你可以在正常樣式上增加細節擴充。
選擇圖示就像選擇伴侶，沒有最好，隻有最合适。不同場景需要選擇符合該場景下互動方式的圖示。
如下圖三個示例中都有“編輯”功能，根據不同的應用場景與風格，設計細節也有所不同。
·線條精簡的線性圖示
·帶有修飾性線條的圖示
·造型概括的面形圖示
在B端場景中，大部分時候都可以根據産品的風格和應用場景來選擇合适的圖示原型。
系統圖示設計方法
第二步：統一設計風格，符合産品調性
每個産品根據其功能、定位，都會有其産品調性，不同的産品調性，系統圖示的設計風格也迥然不同。圖示的屬性有很多，一組和諧統一的系統圖示，它們的基本屬性應該是一緻的。
2.1. 單一進制素、輔助元素
通常情況下，當圖示表意為同類别功能或相似功能時會用輔助元素加以區分，是以一組系統圖示中可以同時出現單一進制素和輔助元素。但需注意同一組圖示的輔助元素要區分明顯，易識别。比如下圖這組圖示中增加的輔助元素就很難識别。
2.2. 線性、面性、線面混合
線性：元素單一、表現力弱，但線條本身簡練、可塑性強，可以通過對線條的設計，塑造可愛、專業、嚴謹等多種風格。是以線性圖示在系統圖示中使用率最高。
面性：面性具有體塊感，視覺重心強，通常搭配混色（兩種顔色及以上），以達到增加視覺吸引力的目的，我們在APP的金剛區經常見到。
線面混合：表現力介于線性與面性之間，相比于線性圖示更有活力和質感，又不會在頁面中太過搶眼。通常在一些年輕使用者多、表現生活品質的産品中出現，比如airbnb、綠洲等。
2.3. 單色、混色
單色：隻使用一種顔色的圖示，具有穩定、統一的特點。
混色：使用二種及以上顔色的圖示，混色圖示可運用品牌VI系統的配色來增加産品記憶，塑造品牌形象，也可以增加頁面的視覺表現力。
但是混色圖示在開發中較難維護，而svg格式下的單色圖示隻需前端同僚在代碼中修改色值即可，多色圖示則需要設計修改後重新傳遞一份檔案給前端同僚。
系統圖示設計方法
第三步：保持視覺大小的一緻性
在設計好樣式、定義了配色之後，圖示設計中最基礎也是最重要的一步來了：保持圖示的視覺一緻性。如果一組圖示在頁面中大大小小，即使設計得再炫酷，也是一組不規範的圖示。
3.1. 統一設計尺寸和線條粗細
在設計之初，我們需要先定義統一的圖示尺寸和線條粗細（線性圖示），不确定的話就多做幾版嘗試，前期試錯總比後期大動幹戈去修改來的好。你可以用24*24的畫闆尺寸，也可以根據需要自己定義。
需要注意的是，如果是用sketch設計圖示，輪廓化後的圖示放大時，線條的圓形端點會發生變形（除非将圖形拼合），但在ai中不會發生變化，是以在sketch設計圖示時，盡量選擇常用尺寸中最大的。
3.2. 根據參考線規範圖示視覺大小
在24*24的畫闆内，邊距預留2px後，藍色矩形框中為安全區域，友善規範圖示大小。
下圖是當圖示是正方形、矩形、圓形四種形狀下的位置，根據上圖參考線，我們可以确定圖示在畫闆中的位置。
其他不規則形狀在參考線中的位置。
系統圖示設計方法
第四步：圖示的管理與維護
當産品從零到一逐漸成型和完善之後，系統圖示也會越來越多、越來越難以維護。後期容易出現同一個功能好幾種種圖示的情況，影響統一性。
4.1. 設計規範文檔
一般産品設計中期，設計師會慢慢形成設計規範文檔，便于提高設計效率和團隊協作，其中圖示規範必不可少。圖示規範中一般包含産品中所有設計到的圖示，一到二種常用尺寸，基礎圖示以及其他圖示。
·設計規範文檔中的圖示
4.2. 元件化圖示庫
tch中的symbol功能，我們可以很友善的将規範中的圖示元件化，然後添加進元件庫。
我們在設計中可随時從元件庫調用所需圖示。
還可以随時打開原始文檔，以便對規範文檔進行編輯與更新。
4.3. 在iconfont中建立項目
阿裡的iconfont非常适合圖示項目管理與團隊協作
我們把圖示上傳到建立的項目中，配合插件“kithen”就可以在sketch中随時檢視和調用相應項目中的圖示。
在sketch的插件中可随時檢視圖示項目和調用相應的圖示。
結語
系統圖示在UI設計中是非常基礎的圖形化語言，也在頁面互動中起到很重要的作用。單個圖示的設計并不難，但是系統化、規範化所有圖示并在項目中不斷應用與複用，是對UI設計能力的考驗。
随着設計工具的更新疊代，我們需要不斷學習并利用好這些工具，提高工作效率，才能将有限的時間利用到更重要的設計内容中去。