UI設(shè)計(jì)中的圖標(biāo)設(shè)計(jì)指南

　　這是一個(gè)注意事項(xiàng)清單，也可以被視作為圖標(biāo)設(shè)計(jì)指南，即使設(shè)計(jì)趨勢(shì)發(fā)生變化，這些規(guī)則和經(jīng)驗(yàn)依然適用。遵循這些規(guī)則和技巧，能夠確保圖標(biāo)從設(shè)計(jì)到使用都可以更加無(wú)縫和順暢。今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中的圖標(biāo)設(shè)計(jì)指南進(jìn)行簡(jiǎn)單的說(shuō)明一下。
 

　　我們并沒(méi)有重新發(fā)明輪子，相反，我們會(huì)以這種方式來(lái)呈現(xiàn)我們的工作流程細(xì)節(jié)，希望它也能幫你有效地組織工作。

 

　　循序漸進(jìn)地設(shè)計(jì)圖標(biāo)
 

　　像我們需要系統(tǒng)而大量地設(shè)計(jì)圖標(biāo)，設(shè)計(jì)流程是最重要的事情。正如你所看到的，繪制流程在圖標(biāo)繪制之前，就已經(jīng)開(kāi)始了。
 

　　了解你要?jiǎng)?chuàng)建的圖標(biāo)的含義。明白不同圖標(biāo)的使用場(chǎng)景，不同的圖標(biāo)分別代表著什么，了解哪些圖標(biāo)需要使用隱喻，哪些圖標(biāo)使用現(xiàn)實(shí)世界中真實(shí)的形象。
 

　　梳理出圖標(biāo)正確的隱喻，腦暴出可能的符號(hào)和形象。記住圖標(biāo)的含義和形象之間的關(guān)聯(lián)，以最佳的形式呈現(xiàn)圖標(biāo)，直指本質(zhì)。借助詞典和單詞集來(lái)獲取圖標(biāo)相關(guān)的概念的關(guān)鍵詞，同義詞和定義。簡(jiǎn)化和抽象你的想法，你會(huì)找到一個(gè)抽象概念「翻譯」出來(lái)的對(duì)象。
 

　　不要拘泥于現(xiàn)在當(dāng)前的任務(wù)和狀態(tài)，盡量進(jìn)行徹底的調(diào)研，盡可能地搜集相關(guān)參考資料?？赡苡腥艘呀?jīng)為這一主題設(shè)計(jì)了很不錯(cuò)的圖標(biāo)版本，可以參考已有的設(shè)計(jì)，獲取靈感。
 

　　確定圖標(biāo)的樣式。圖標(biāo)應(yīng)該是扁平的，線性的，Material Design，是用符號(hào)還是借助手繪來(lái)呈現(xiàn)。有的 UI界面有很清晰的要求，比如 iOS 平臺(tái)和 Material Design，如果 UI 有非常清晰固定的設(shè)計(jì)風(fēng)格，那么圖標(biāo)的設(shè)計(jì)需要盡量貼近。
 

　　按照選定的方式來(lái)呈現(xiàn)設(shè)計(jì)，看看它最終呈現(xiàn)是否正確。保持整體設(shè)計(jì)的一致性。
 

　　注意圖標(biāo)要矢量化，連基本的草圖都應(yīng)該是矢量化的。
 

　　在 UI 布局中測(cè)試圖標(biāo)的設(shè)計(jì)。
 

　　Icons8 的實(shí)戰(zhàn)案例
 

　　按照上面的流程，能夠繪制出不同樣式足夠優(yōu)秀的圖標(biāo)合集。下面是我們?cè)谶@樣的流程下所設(shè)計(jì)出來(lái)的圖標(biāo)示例。

 

　　圖標(biāo)設(shè)計(jì)

 

　　動(dòng)物圖標(biāo)

 

　　老式圖標(biāo)
 

　　注意事項(xiàng)清單
 

　　如果你像我們一樣每天設(shè)計(jì)圖標(biāo)的話，也會(huì)碰到各種各樣的問(wèn)題。其中最重要的是下面的注意事項(xiàng)清單，它們能夠確保我們不同的人在不同的時(shí)期不同狀態(tài)下，設(shè)計(jì)出來(lái)的圖標(biāo)能夠協(xié)調(diào)到一個(gè)主題、一個(gè)系統(tǒng)當(dāng)中。如果你也要設(shè)計(jì)圖標(biāo)的話，可以將下面的清單打印出來(lái)，貼在自己的桌子旁邊作為參考。
 

　　1. 像素完美
 

　　讓圖標(biāo)踩在每個(gè)像素點(diǎn)上，確保清晰不模糊。

 

　　2. 視覺(jué)重量
 

　　用斜視的方法來(lái)感知圖標(biāo)，看看成套的圖標(biāo)是否都具有相同的大小。斜視、調(diào)整、再看、再調(diào)整，直至均勻理想。為了保持總體視覺(jué)重量的一致性，我們會(huì)使用「完美的圓形和正方形」來(lái)和所有的新圖標(biāo)進(jìn)行對(duì)比。

 

　　3. 幾何圖形
 

　　盡量使用簡(jiǎn)單堅(jiān)實(shí)的幾何形狀來(lái)繪制所有必要的線條，它們會(huì)讓你的圖標(biāo)顯得更加牢固可靠，具有吸引力和說(shuō)服力。

 

　　4. 清晰簡(jiǎn)潔
 

　　刪除所有無(wú)法傳達(dá)圖標(biāo)概念的細(xì)節(jié)，避免讓圖標(biāo)顯得沉重而復(fù)雜。

 

　　5. 足夠的空間
 

　　確保圖標(biāo)內(nèi)每個(gè)細(xì)節(jié)和元素都有足夠的空間，不會(huì)顯得過(guò)于擁擠或者空曠。

 

　　6. 對(duì)比度
 

　　在黑色和白色的背景上檢查圖標(biāo)的全部細(xì)節(jié)，看看是否其中的每種顏色都是可見(jiàn)的，以及元素之間的對(duì)比是否足夠。

 

　　7. 視覺(jué)統(tǒng)一
 

　　檢查線條的粗細(xì)重量，邊角的大小，配色方案，細(xì)節(jié)層次和設(shè)計(jì)元素在整個(gè)合集中是否是不變且一致的。

 

　　8. 圖層排序

　　確保圖標(biāo)中圖層順序清晰而規(guī)整。這是一種良好的習(xí)慣和專業(yè)的精神。

        總結(jié)

       想要讓 圖標(biāo)設(shè)計(jì)更加優(yōu)秀，其實(shí)在很多時(shí)候都需要在細(xì)節(jié)上打磨即可。郭老師之前也分享過(guò)《2020年UI設(shè)計(jì)的10個(gè)趨勢(shì)》、《UI設(shè)計(jì)中評(píng)論區(qū)設(shè)計(jì)指南》、《UI設(shè)計(jì)中啟動(dòng)頁(yè)的三種設(shè)計(jì)類型》、《UI設(shè)計(jì)中響應(yīng)式設(shè)計(jì)技巧》等，類似這樣的方法有很多，后面我還會(huì)繼續(xù)補(bǔ)充。如果你想了解更多的知識(shí)，請(qǐng)把問(wèn)題留言給在線小姐姐，我會(huì)進(jìn)行一一解答。想看更多，敬請(qǐng)關(guān)注AAA教育官網(wǎng)。