系統(tǒng)圖標(biāo)即應(yīng)用于系統(tǒng)內(nèi)的基礎(chǔ)圖標(biāo)，pc端、網(wǎng)頁端和APP等應(yīng)用內(nèi)的導(dǎo)航、按鈕、列表、彈窗內(nèi)的圖標(biāo)。

?

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

?

·修飾性圖標(biāo)（來源：dribbble）

?

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

?

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

?

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

?

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

?

幾個典型問題：

?

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

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

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

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

?

針對上述問題做了適當(dāng)調(diào)整，如下：

?

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

?

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

?

?

?

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

?

第一步：選擇合適的圖標(biāo)原型

?

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

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

?

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

?

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

·線條精簡的線性圖標(biāo)

?

·帶有修飾性線條的圖標(biāo)

?

·造型概括的面形圖標(biāo)

?

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

?

?

?

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

?

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

?

?

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

?

2.1. 單一元素、輔助元素

?

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

?

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

?

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

?

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

?

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

?

2.3.? 單色、混色

?

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

?

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

?

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

?

系統(tǒng)圖標(biāo)設(shè)計方法
?

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

?

?

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

?

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

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

?

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

?

?

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

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

?

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

?

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

?

?

系統(tǒng)圖標(biāo)設(shè)計方法
?

第四步：圖標(biāo)的管理與維護

?

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

?

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

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

·設(shè)計規(guī)范文檔中的圖標(biāo)

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

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

?

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

?

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

?

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

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

?

在sketch的插件中可隨時查看圖標(biāo)項目和調(diào)用相應(yīng)的圖標(biāo)。

?

結(jié)語

?

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

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

來源網(wǎng)絡(luò)