2021-4-13 高勁
最近遇到一個同學，說做了很多稿圖標的方案最終還是沒有確定下來，但眼看著產品馬上就要上線了，該怎么辦。經過一輪溝通，發現他陷入幾個新手設計師在畫圖標比較容易犯的問題：
從以上這幾個問題，我們進行深入思考，會發現其實這些只是表面上的問題，實際上是在說什么呢？
基于以上這個案例，分享下我在日常設計中常用的一些方法，希望可以幫助遇到相同問題的小伙伴們進行一些答疑，從而幫助你們打破壁壘，高效成長。
下面發改分成 3 個部分來進行闡述：思考維度的鍛煉；圖形的設計方法；系統化方案呈現
當我們要設計一個圖標的時候最容易入手的就是圖標的表意，從表意延伸到圖形的設計，然后再加以不同的設計手法（線、面、線面等等）。
1. 圖標的表意
圖標的表意方式，大概可以拆分為以下幾種：具有普識性的圖標、可進行表意延伸的圖標、通過組合的圖標、抽象的需要關聯的圖標。
2. 普識型圖標
即我們在現實生活中常見且具有常識性性的圖標，例如：刪除、添加、放大、搜索、筆記本、手機、眼睛、禮物等等。這類的圖標重點在于形體的打磨上需要多花一些時間，從不同的角度進行嘗試，比如以刪除為例子，同樣的造型但可以有不同的設計表現。
3. 表意延伸的圖標
即一個事物可以被延伸為一個或者多個圖形表現的圖標，例如：點贊、瀏覽、設置、收藏、評論、事件等等。例如點贊-延伸為你很棒用大拇指來表達，游戲延伸為游戲手柄、設置-延伸為機械操作用齒輪來表達，評論延伸為對話使用對話框來表達，瀏覽-延伸為用眼睛的圖標表達。
除此之外延伸表意的圖標可以有多種設計方式，例如以事件為案例。
4. 組合型圖標
主要是指該類圖標的表意需要通過 2 個以上的圖形進行組合才能更加準確進行表現，例如：群、群聊、好友、添加聯系人、情侶、轉賬、紅包。
5. 創造類圖標
特指認識中沒有，因為產品需要被二次創造出來的圖標，一般在一些新生業務中會常出現，這類圖標初期往往需要伴隨文字一同出現。例如：微信的朋友圈、視頻號、小程序、手機系統的 Wi-Fi、藍牙等類型等圖標。
常規的圖標表現方法（線形、線面、面形、插圖、疊色等等）我們基本都了解，但作為設計師更應該知道潮流趨勢，清楚現在流行什么類型的設計，這樣才能讓你作出更加出彩的設計。
這里分享幾種目前最流行的圖標設計類型：
1. 磨砂質感圖標
磨砂質感圖標作為 2020 年底最流行的圖標，已經在不少 APP 中看得了相關的設計，從設計方法上并不難，重點還是在于是否有需要和應用場景。
2. 插圖+磨砂質感
圖標使用小插圖的方式進行繪制，然后再結合高斯模糊的視覺表現手法，整體讓圖標更具有層次感和通透感。
3. 3D 質感圖標
3D 作為這 2 年最流行的設計趨勢，自然也牽動著設計師的心。但 3D 的打磨相對會比較耗費時間，不過仍然是值得一試的設計方式之一，目前在 APP 的設計中比較少見到應用，或許會成為 2021 的趨勢之一。
4. 3D 磨砂質感圖標
基于 3D 與毛玻璃圖標的結合，整體的表現結合了這 2 種風格的特點，既保留了毛玻璃圖標的通透，同時也具有 3D 的空間感。
5. 流光溢彩的圖標
算是屬于漸變類型的一種，但顏色和細節的跨度相比常規的漸變圖標更加豐富，整體讓人感覺具有流光的效果，更加具有未來感。不過從目前來說，更適合作為獨立的應用 APP 設計，作為常規的圖標設計需要一定的接受度。
想要了解設計的方法之前，我們得了解有哪些類型的圖標，具體大家可以查看我之前撰寫過的文章，里面有詳細的分析了圖標的設計類型。除此之外，這里還可以分享下我日常中設計圖標使用的方法。
這個專題也有超詳細的分類和教程 → https://www.uisdc.com/zt/icon-drawing-guide
1. 表意+基礎形
基礎形體使用普適性較高的圖標造型，在圖標的亮點或者點綴處通過表意關聯進行創意設計，從而讓圖標獲得新的感受，但又具有較高的識別性。案例：例如我們以日歷圖標為案例，可以比較直觀的使用日歷的普識圖形，然后通過日期的方式來進行強調賦予圖標生命力，然后再疊加上顏色和質感，并且增加一點小趣味的折角設計。
2. 關聯延展
基于實際場景的認識來進行圖形關聯延展，并且進行一定的美感升級及圖形的優化，延展出最終的圖標設計，這種方法可以大大提高大家對于圖標的識別度。案例：設計一個快速聊天表意的圖標，聊天我們常規使用氣泡，快速我們可以關聯為閃電，然后把氣泡和閃電進行結合。
3. 組合升級創意
利用一些正負形的創意方法，使用 A、B 圖形的進行有機融合或剪切，使其獲得新的圖標造型，讓整體的圖標感受更具有創意點。案例：例如我們嘗試畫一個具有宇宙感受的游戲圖標，可以通過手柄和星球的有機結合讓整體的圖標帶有游戲和星球的意思，整體提升了表達的創意。
方案的呈現屬于設計的一部分，雖然不能起到決定性的作用，但好的呈現效果往往可以幫助我們得到更好的印象分，這里分享一下我在設計過程中嘗試的一些方法。方案的大小或者輸出的類型也決定著我們呈現方案的類型，下面根據不同的類型分享不同的呈現案例。
1. 縱橫對比法
適用于需要大量嘗試的時候，以窮舉輸出為典型案例，我們可以用最基礎的圖形為中心點，結合圖形的表意和圖形風格進行縱橫的發散性擴展，例如橫向為表意、縱向為圖形風格，中間部分屬于交叉部分。
案例模版
2. 單個圖標創意思考
對于一些標志類或重要的圖標，我們需要闡述我們的設計想法或者來源，這種呈現的方式就可以很直觀且簡潔的表現我們的思考。
案例模版
3. 整套輸出
對于一整套的圖標，我們需要在案例上呈現圖形的設計規則，包括但不限于有：圓角、角度、組合規范、斜度等等。除了呈現圖形之外，請補充上顏色的應用規則、顏色的表意等等。
案例模版
圖標設計雖然是一個小內容但卻很重要，反映著著整個頁面的精致度，在 UI 界面來說是除界面排版之外最重要的一環，因此是很值得我們去研究的設計之一，建議在日常工作中多練習多看。
文章來源：優設網 作者：ID設計站
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務