圖標設(shè)計的流程

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

1. 定義主題

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

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

2. 尋找隱喻

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

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

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

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

3. 抽象圖形

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

抽象化的圖標

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

實物抽象化程度

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

4. 繪制草圖

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

圖標草圖

5. 確定風(fēng)格

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

扁平化圖標

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

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

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

7. 場景測試

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

猜你喜歡：

PS里7種不同摳圖工具的使用場景和使用方法

什么是像素、英寸和分辨率？

UI設(shè)計流程：UI設(shè)計工作全過程

黑馬程序員UI設(shè)計培訓(xùn)課程