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

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

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

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

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

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

思考維度的鍛煉

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

1. 圖標的表意

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

2. 普識型圖標

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

3. 表意延伸的圖標

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

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

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

4. 組合型圖標

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

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

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

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

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

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

1. 磨砂質(zhì)感圖標

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

2. 插圖+磨砂質(zhì)感

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

3. 3D 質(zhì)感圖標

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

4. 3D 磨砂質(zhì)感圖標

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

5. 流光溢彩的圖標

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

圖標的設(shè)計方法

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

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

1. 表意+基礎(chǔ)形

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

2. 關(guān)聯(lián)延展

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

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

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

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

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

1. 縱橫對比法

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

案例模版

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

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

案例模版

3. 整套輸出

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

案例模版

總結(jié)

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

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

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