最近遇到一個同學，說做了很多稿圖標的方案最終還是沒有確定下來，但眼看著產(chǎn)品馬上就要上線了，該怎么辦。經(jīng)過一輪溝通，發(fā)現(xiàn)他陷入幾個新手設計師在畫圖標比較容易犯的問題：

• 面對產(chǎn)品提出的疑問，不知道如何拆解，僅停留在表面的理解，“美”or“丑”
• 思考的方案呈現(xiàn)不夠系統(tǒng)，導致多次修改，也未被采納
• 對于圖標多方案的設計輸出缺乏方法，漫無目的的設計方案
• 思考不夠發(fā)散，存在局限性，不敢大膽突破
• 過度糾結，都在做方案，做出了但方案都不過關

從以上這幾個問題，我們進行深入思考，會發(fā)現(xiàn)其實這些只是表面上的問題，實際上是在說什么呢？

• 美 or 丑：實際上是我們對于圖形或圖標的設計趨勢是否了解，我們設計的圖標設計是否符合現(xiàn)在的趨勢，我們闡述方案的時候是否足夠的自信這個是現(xiàn)在流行的風格？
• 多次修改：這個實際上是反饋我們呈現(xiàn)方案的功力或者能力，我們做的設計是否足夠系統(tǒng)性，多套方案中是否有命中對方想要的點
• 漫無目的的設計：基于上述第 2 點的框架下，我們在輸出圖標的時候設計呈現(xiàn)的維度是否足夠全面，從表意到圖形美觀度上是否有足夠多的思考
• 局限性：因為日常看得少，所以在實際案例設計的時候也會受到局限，因此養(yǎng)成日常積累的習慣比臨時思考會更好
• 過度糾結：這種表現(xiàn)是表明你已經(jīng)陷入到了設計本身，而缺乏跳出來看看更多參考的勇氣了，這時應該先停住，找找參考，幫助打開思考壁壘

基于以上這個案例，分享下我在日常設計中常用的一些方法，希望可以幫助遇到相同問題的小伙伴們進行一些答疑，從而幫助你們打破壁壘，高效成長。

下面發(fā)改分成 3 個部分來進行闡述：思考維度的鍛煉；圖形的設計方法；系統(tǒng)化方案呈現(xiàn)

思考維度的鍛煉

當我們要設計一個圖標的時候最容易入手的就是圖標的表意，從表意延伸到圖形的設計，然后再加以不同的設計手法（線、面、線面等等）。

1. 圖標的表意

圖標的表意方式，大概可以拆分為以下幾種：具有普識性的圖標、可進行表意延伸的圖標、通過組合的圖標、抽象的需要關聯(lián)的圖標。

2. 普識型圖標

即我們在現(xiàn)實生活中常見且具有常識性性的圖標，例如：刪除、添加、放大、搜索、筆記本、手機、眼睛、禮物等等。這類的圖標重點在于形體的打磨上需要多花一些時間，從不同的角度進行嘗試，比如以刪除為例子，同樣的造型但可以有不同的設計表現(xiàn)。

3. 表意延伸的圖標

即一個事物可以被延伸為一個或者多個圖形表現(xiàn)的圖標，例如：點贊、瀏覽、設置、收藏、評論、事件等等。例如點贊-延伸為你很棒用大拇指來表達，游戲延伸為游戲手柄、設置-延伸為機械操作用齒輪來表達，評論延伸為對話使用對話框來表達，瀏覽-延伸為用眼睛的圖標表達。

除此之外延伸表意的圖標可以有多種設計方式，例如以事件為案例。

• 方案 A：事件具有時間性，所以可以考慮用日歷來置換；
• 方案 B：事件具有告知的行為，所以考慮用喇叭來突出這個行為；
• 方案 C：事件具有檔案的意味，所以我們可以用表單的圖形來做沿用。

4. 組合型圖標

主要是指該類圖標的表意需要通過 2 個以上的圖形進行組合才能更加準確進行表現(xiàn)，例如：群、群聊、好友、添加聯(lián)系人、情侶、轉賬、紅包。

5. 創(chuàng)造類圖標

特指認識中沒有，因為產(chǎn)品需要被二次創(chuàng)造出來的圖標，一般在一些新生業(yè)務中會常出現(xiàn)，這類圖標初期往往需要伴隨文字一同出現(xiàn)。例如：微信的朋友圈、視頻號、小程序、手機系統(tǒng)的 Wi-Fi、藍牙等類型等圖標。

圖標的表現(xiàn)方法

常規(guī)的圖標表現(xiàn)方法（線形、線面、面形、插圖、疊色等等）我們基本都了解，但作為設計師更應該知道潮流趨勢，清楚現(xiàn)在流行什么類型的設計，這樣才能讓你作出更加出彩的設計。

這里分享幾種目前最流行的圖標設計類型：

1. 磨砂質感圖標

磨砂質感圖標作為 2020 年底最流行的圖標，已經(jīng)在不少 APP 中看得了相關的設計，從設計方法上并不難，重點還是在于是否有需要和應用場景。

2. 插圖+磨砂質感

圖標使用小插圖的方式進行繪制，然后再結合高斯模糊的視覺表現(xiàn)手法，整體讓圖標更具有層次感和通透感。

3. 3D 質感圖標

3D 作為這 2 年最流行的設計趨勢，自然也牽動著設計師的心。但 3D 的打磨相對會比較耗費時間，不過仍然是值得一試的設計方式之一，目前在 APP 的設計中比較少見到應用，或許會成為 2021 的趨勢之一。

4. 3D 磨砂質感圖標

基于 3D 與毛玻璃圖標的結合，整體的表現(xiàn)結合了這 2 種風格的特點，既保留了毛玻璃圖標的通透，同時也具有 3D 的空間感。

5. 流光溢彩的圖標

算是屬于漸變類型的一種，但顏色和細節(jié)的跨度相比常規(guī)的漸變圖標更加豐富，整體讓人感覺具有流光的效果，更加具有未來感。不過從目前來說，更適合作為獨立的應用 APP 設計，作為常規(guī)的圖標設計需要一定的接受度。

圖標的設計方法

想要了解設計的方法之前，我們得了解有哪些類型的圖標，具體大家可以查看我之前撰寫過的文章，里面有詳細的分析了圖標的設計類型。除此之外，這里還可以分享下我日常中設計圖標使用的方法。

這個專題也有超詳細的分類和教程 → https://www.uisdc.com/zt/icon-drawing-guide

1. 表意+基礎形

基礎形體使用普適性較高的圖標造型，在圖標的亮點或者點綴處通過表意關聯(lián)進行創(chuàng)意設計，從而讓圖標獲得新的感受，但又具有較高的識別性。案例：例如我們以日歷圖標為案例，可以比較直觀的使用日歷的普識圖形，然后通過日期的方式來進行強調賦予圖標生命力，然后再疊加上顏色和質感，并且增加一點小趣味的折角設計。

2. 關聯(lián)延展

基于實際場景的認識來進行圖形關聯(lián)延展，并且進行一定的美感升級及圖形的優(yōu)化，延展出最終的圖標設計，這種方法可以大大提高大家對于圖標的識別度。案例：設計一個快速聊天表意的圖標，聊天我們常規(guī)使用氣泡，快速我們可以關聯(lián)為閃電，然后把氣泡和閃電進行結合。

3. 組合升級創(chuàng)意

利用一些正負形的創(chuàng)意方法，使用 A、B 圖形的進行有機融合或剪切，使其獲得新的圖標造型，讓整體的圖標感受更具有創(chuàng)意點。案例：例如我們嘗試畫一個具有宇宙感受的游戲圖標，可以通過手柄和星球的有機結合讓整體的圖標帶有游戲和星球的意思，整體提升了表達的創(chuàng)意。

系統(tǒng)化方案呈現(xiàn)

方案的呈現(xiàn)屬于設計的一部分，雖然不能起到?jīng)Q定性的作用，但好的呈現(xiàn)效果往往可以幫助我們得到更好的印象分，這里分享一下我在設計過程中嘗試的一些方法。方案的大小或者輸出的類型也決定著我們呈現(xiàn)方案的類型，下面根據(jù)不同的類型分享不同的呈現(xiàn)案例。

1. 縱橫對比法

適用于需要大量嘗試的時候，以窮舉輸出為典型案例，我們可以用最基礎的圖形為中心點，結合圖形的表意和圖形風格進行縱橫的發(fā)散性擴展，例如橫向為表意、縱向為圖形風格，中間部分屬于交叉部分。

案例模版

2. 單個圖標創(chuàng)意思考

對于一些標志類或重要的圖標，我們需要闡述我們的設計想法或者來源，這種呈現(xiàn)的方式就可以很直觀且簡潔的表現(xiàn)我們的思考。

案例模版

3. 整套輸出

對于一整套的圖標，我們需要在案例上呈現(xiàn)圖形的設計規(guī)則，包括但不限于有：圓角、角度、組合規(guī)范、斜度等等。除了呈現(xiàn)圖形之外，請補充上顏色的應用規(guī)則、顏色的表意等等。

案例模版

總結

圖標設計雖然是一個小內(nèi)容但卻很重要，反映著著整個頁面的精致度，在 UI 界面來說是除界面排版之外最重要的一環(huán)，因此是很值得我們?nèi)パ芯康脑O計之一，建議在日常工作中多練習多看。

文章來源：優(yōu)設網(wǎng)     作者：ID設計站

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務