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

?

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

?

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

?

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

?

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

?

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

?

我們把圖標(biāo)單拎出來(lái)，可以明顯看出幾個(gè)典型問(wèn)題。

?

幾個(gè)典型問(wèn)題：

?

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

視覺(jué)大小不一致，第一個(gè)和第四個(gè)對(duì)比尤其明顯；

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

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

?

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

?

我們?cè)谠O(shè)計(jì)功能多、布局緊湊的頁(yè)面時(shí)，首要確保圖標(biāo)清晰明確、無(wú)歧義，再考慮設(shè)計(jì)感。

?

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

?

?

?

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

?

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

?

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

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

?

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

?

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

·線(xiàn)條精簡(jiǎn)的線(xiàn)性圖標(biāo)

?

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

?

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

?

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

?

?

?

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

?

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

?

?

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

?

2.1. 單一元素、輔助元素

?

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

?

2.2.? 線(xiàn)性、面性、線(xiàn)面混合

?

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

?

面性：面性具有體塊感，視覺(jué)重心強(qiáng)，通常搭配混色（兩種顏色及以上），以達(dá)到增加視覺(jué)吸引力的目的，我們?cè)贏PP的金剛區(qū)經(jīng)常見(jiàn)到。

?

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

?

2.3.? 單色、混色

?

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

?

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

?

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

?

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

第三步：保持視覺(jué)大小的一致性

?

?

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

?

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

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

?

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

?

?

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

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

?

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

?

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

?

?

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

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

?

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

?

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

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

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

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

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

?

我們?cè)谠O(shè)計(jì)中可隨時(shí)從組件庫(kù)調(diào)用所需圖標(biāo)。

?

還可以隨時(shí)打開(kāi)原始文檔，以便對(duì)規(guī)范文檔進(jìn)行編輯與更新。

?

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

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

?

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

?

結(jié)語(yǔ)

?

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

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

來(lái)源網(wǎng)絡(luò)