如何設(shè)計(jì)圖標(biāo)？圖標(biāo)設(shè)計(jì)流程是什么？

設(shè)計(jì)的過程是思維發(fā)散的過程，一般遵循固定的設(shè)計(jì)流程。在實(shí)際工作中，設(shè)計(jì)流程并不是絕對(duì)的。有的流程可能會(huì)被跳過或忽略，如調(diào)研與討論;有的流程會(huì)反復(fù)停留，如修改與擴(kuò)展。下面，通過講解圖標(biāo)設(shè)計(jì)的流程為讀者提供一個(gè)關(guān)于設(shè)計(jì)流程的思路，為日后的設(shè)計(jì)工作奠定基礎(chǔ)。

1. 定義主題

定義主題是指把要設(shè)計(jì)的圖標(biāo)所涉及的關(guān)鍵詞羅列出來，重點(diǎn)詞匯突出顯示，確定這些圖標(biāo)是圍繞一個(gè)什 么樣的主題展開設(shè)計(jì)，對(duì)整體的設(shè)計(jì)有一個(gè)把控，如圖下圖所示。

關(guān)鍵詞羅列形式

2. 尋找隱喻

“隱喻”是指真實(shí)世界與虛擬世界之間的映射關(guān)系，“尋找隱喻”是指通過關(guān)鍵詞進(jìn)行頭腦風(fēng)暴，在彼類事物的暗示之下感知、體驗(yàn)、想象此類事物的心理行為。如“休息”這個(gè)關(guān)鍵詞，可以聯(lián)想到下面的圖形，如下圖所示。

關(guān)鍵詞聯(lián)想

從圖可以看出，通過“休息”這個(gè)關(guān)鍵詞，聯(lián)想到了沙發(fā)和床，因?yàn)樗鼈兌加行菹⒌墓δ?。每一個(gè)工作和學(xué)習(xí)的環(huán)境都不一樣，導(dǎo)致對(duì)于某個(gè)詞的隱喻理解也有所不同。例如，經(jīng)常喝咖啡的人，認(rèn)為工作忙碌，來一杯香醇的咖啡就是休息。

當(dāng)然應(yīng)用是為大多數(shù)人制作的，所以要挑選最能被大多數(shù)人接受的事物來抽象圖形。除非你的應(yīng)用是為某個(gè)群體設(shè)計(jì)的個(gè)性應(yīng)用。

3. 抽象圖形

抽象圖形要求設(shè)計(jì)師將生活中的原素材進(jìn)行歸納，提取素材的顯著特點(diǎn)，明確設(shè)計(jì)的目的，這是創(chuàng)作圖標(biāo)的基礎(chǔ)，如下圖所示。

抽象化的圖標(biāo)

在上圖中，“飛機(jī)”和“拉桿箱”都進(jìn)行了抽象化處理，汲取各自最顯著的特點(diǎn)，形成了最終的圖標(biāo)。需要注意的是，圖形的抽象必須控制，圖形太復(fù)雜或者太簡單，識(shí)別度都會(huì)路任如下圖所示。

實(shí)物抽象化程度

通過上圖容易看出，當(dāng)“飛機(jī)”過于寫實(shí)，甚至接近照片時(shí)，就會(huì)顯得非常復(fù)雜且太過具象。當(dāng)“飛機(jī)”過于簡單，甚至只能看到圓形輪廓的時(shí)候，就已經(jīng)看不出什么了，太過抽象。太過具象和太過抽象的圖形識(shí)別性都非常低。

4. 繪制草圖

經(jīng)過對(duì)實(shí)物的抽象化汲取后，便可以進(jìn)行草圖的繪制。在這個(gè)過程中，主設(shè)計(jì)師需要將實(shí)物轉(zhuǎn)化成視覺形象，即最初的草圖，如下圖所示。當(dāng)然草稿可能有很多方案，這時(shí)需要篩選出若于種滿意的方案繼續(xù)下面的流程。

圖標(biāo)草圖

5. 確定風(fēng)格

在確定了圖標(biāo)的基準(zhǔn)圖形后，下一步就是確定標(biāo)準(zhǔn)色。我們可以根據(jù)圖標(biāo)的類型選擇合適的顏色。當(dāng)不知道使用什么顏色的時(shí)候藍(lán)色是最穩(wěn)妥的選擇。目前圖標(biāo)設(shè)計(jì)主流是扁平化風(fēng)格、如下圖所示。

扁平化圖標(biāo)

值得一提的是，在UI設(shè)計(jì)中，大部分扁平化圖標(biāo)以單色圖形為主，從技法上來說，這樣降低了設(shè)計(jì)的難度。

6. 制作和調(diào)整

根據(jù)既定的風(fēng)格，使用軟件制作圖標(biāo)。在扁平化風(fēng)格盛行的今天，單獨(dú)的圖形設(shè)計(jì)需要更多的設(shè)計(jì)考量，需要經(jīng)過大量的推敲，設(shè)計(jì)調(diào)整。因此在圖標(biāo)的制作中，會(huì)修正一些草圖中的不足，也可能增加一些新的設(shè)計(jì)靈感。

7. 場(chǎng)景測(cè)試

圖標(biāo)的應(yīng)用環(huán)境有很多種，有的在App Store上使用，有的在手機(jī)上使用。手機(jī)的背景色也各不相同，有深色系的，也有淺色系的。我們要保證圖標(biāo)在各個(gè)場(chǎng)景下都有良好的識(shí)別性，因此在圖標(biāo)上線前，設(shè)計(jì)師需要在多種圖標(biāo)的應(yīng)用場(chǎng)景中進(jìn)行測(cè)試。

猜你喜歡：

什么是UI網(wǎng)頁設(shè)計(jì)?網(wǎng)頁結(jié)構(gòu)分析和網(wǎng)頁分類

網(wǎng)頁設(shè)計(jì)用什么軟件？【web前端頁面設(shè)計(jì)】

Web網(wǎng)頁設(shè)計(jì)師具體做哪些工作？

網(wǎng)頁設(shè)計(jì)前端頁面制作的規(guī)范要求和注意事項(xiàng)

傳智教育UI設(shè)計(jì)培訓(xùn)班