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

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

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

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

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

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

思考維度的鍛煉

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

1. 圖標(biāo)的表意

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

2. 普識(shí)型圖標(biāo)

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

3. 表意延伸的圖標(biāo)

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

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

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

4. 組合型圖標(biāo)

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

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

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

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

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

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

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

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

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

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

3. 3D 質(zhì)感圖標(biāo)

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

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

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

5. 流光溢彩的圖標(biāo)

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

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

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

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

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

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

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

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

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

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

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

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

1. 縱橫對(duì)比法

適用于需要大量嘗試的時(shí)候，以窮舉輸出為典型案例，我們可以用最基礎(chǔ)的圖形為中心點(diǎn)，結(jié)合圖形的表意和圖形風(fēng)格進(jìn)行縱橫的發(fā)散性擴(kuò)展，例如橫向?yàn)楸硪狻⒖v向?yàn)閳D形風(fēng)格，中間部分屬于交叉部分。

案例模版

2. 單個(gè)圖標(biāo)創(chuàng)意思考

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

案例模版

3. 整套輸出

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

案例模版

總結(jié)

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

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

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