編輯導(dǎo)讀：不管用什么產(chǎn)品，最常見的就是各種圖標(biāo)。通過圖標(biāo)，用戶能夠直接明了地獲取信息。圖標(biāo)的設(shè)計(jì)看似簡單，卻蘊(yùn)含著很多知識點(diǎn)。本文作者對如何進(jìn)行圖標(biāo)設(shè)計(jì)展開分析，希望對你有幫助。

哈嘍，大家好，我是幺零三，我又來了。前陣子在做一些圖標(biāo)設(shè)計(jì)的刻意練習(xí)，今天主要分享我在接觸圖標(biāo)設(shè)計(jì)時的一些思考，希望對大家日常工作有所幫助。

01 常見圖標(biāo)風(fēng)格匯總

• 線性
• 面型
• 線面

1.1 線性

• 單色
• 雙色
• 漸變
• 不透明度
• 一筆成形
• 斷點(diǎn)

1.1.1 單色

單色線性擁有簡潔、清晰的特性，在視覺層級上較低，適用于基礎(chǔ)功能圖標(biāo)。b端較為常見，移動端常見在設(shè)置頁面或?qū)Ш綑谕ㄖ⒎窒淼葓D標(biāo)設(shè)計(jì)上。

1.1.2 雙色

雙色線性在單色的基礎(chǔ)上豐富配色，解決了單色線性原本過于單調(diào)的問題，在提升趣味性的同時，也將視覺層級進(jìn)行了提高，同樣適用于基礎(chǔ)功能圖標(biāo)。在使用過程中需要注意的是豐富的配色會偏向年輕化，需要考慮是否符合產(chǎn)品風(fēng)格及主流目標(biāo)用戶審美。

1.1.3 漸變

線性漸變還可以在用色上進(jìn)行區(qū)分，簡潔的用色可以給人帶來科技、炫酷感，在車載ui中較常見。豐富的漸變配色則更適合運(yùn)營入口設(shè)計(jì)，有著年輕化、熱烈的氛圍。

1.1.4 不透明度

線性雙色可以和不透明度風(fēng)格進(jìn)行很好的比較，前者視覺更跳躍，個性更鮮明。而后者在使用時普適性更強(qiáng)，即豐富配色細(xì)節(jié)，又避免視覺過于跳躍（可以把它理解為同類色配色）。所以在大多數(shù)使用場景下，不透明度風(fēng)格都是一個很好選擇。

1.1.5 斷點(diǎn)

斷點(diǎn)風(fēng)格有線性單色&雙色該有的個性，并且在線性雙色基礎(chǔ)上繼續(xù)提升趣味性，使用需要注意產(chǎn)品目標(biāo)人群年齡段。

1.1.6 一筆成型

該風(fēng)格設(shè)計(jì)感和個性都極強(qiáng)，很考驗(yàn)設(shè)計(jì)師對造型繪制的把控，功底不夠就很容易導(dǎo)致設(shè)計(jì)后出現(xiàn)識別問題。所以設(shè)計(jì)難度較大，且延展性較弱，難以表達(dá)復(fù)雜語義，使用需謹(jǐn)慎。

1.2 面性

• 單色
• 雙色
• 不透明度
• 晶白
• 磨砂玻璃
• 等軸側(cè)（2.5d）
• 漸變
• 新擬態(tài)
• 輕質(zhì)感
• 明暗質(zhì)感
• 寫實(shí)
• 抽象
• 卡通插畫
• 像素風(fēng)格

面性與線性的區(qū)別在于前者視覺面積更大，整體視覺層級比線性高。以下部分和線性風(fēng)格重疊的內(nèi)容就不贅述。

1.2.1 單色

1.2.2 雙色

1.2.3 不透明度

面型不透明度風(fēng)格，通過調(diào)節(jié)前后不透明度可以帶來較強(qiáng)的空間感，使用場景較廣泛。

1.2.4 晶白

晶白嚴(yán)格來說也算質(zhì)感圖標(biāo)（白色質(zhì)感）的一種，常見于品類圖標(biāo)設(shè)計(jì)，通過透明度、投影、漸變等參數(shù)調(diào)節(jié)，使整體立體感和空間感都很強(qiáng)。

1.2.5 磨砂玻璃

又叫毛玻璃風(fēng)格，是通過背景模糊，或剪切模糊圖層的技法來表達(dá)通透、有層次、精致的視覺感受，但由于容易與淺色背景相融，造成對比度不足難以識別的問題，所以在使用中需要注意無障設(shè)計(jì)。

1.2.6 等軸側(cè)

也叫2.5d，有很強(qiáng)的趣味性，及識別度，適合重要入口或運(yùn)營設(shè)計(jì)。但這類風(fēng)格較為卡通，且表現(xiàn)花哨。使用需要注意應(yīng)用場景及目標(biāo)人群年齡段，避免干擾信息閱讀和不符和產(chǎn)品風(fēng)格。

1.2.7 漸變

這類風(fēng)格可以很好的吸引用戶注意力，在電商、美食類產(chǎn)品中較常見，主要注意配色干凈協(xié)調(diào)。

1.2.8 新擬態(tài)（Neumorphism）

新擬態(tài)圖標(biāo)色彩相對單一，與背景融合度較高，通過高光、投影表現(xiàn)一定的立體感。通常是整個產(chǎn)品就是新擬態(tài)風(fēng)格時才使用。所以該風(fēng)格局限性較大，再有這類風(fēng)格與背景對比較弱，無障設(shè)計(jì)問題較大。

1.2.9 輕質(zhì)感

通過大量漸變、投影來表現(xiàn)立體感，整體風(fēng)格偏年輕化，常見在教育類產(chǎn)品中，使用注意配色干凈和諧。

1.2.10 明暗質(zhì)感

通過調(diào)節(jié)同一色相不同明度、飽和度來營造前后空間感，整體風(fēng)格統(tǒng)一。

1.2.11 寫實(shí)

這類圖標(biāo)特點(diǎn)很明顯，有極高的識別度，目前美團(tuán)外賣品類區(qū)入口就是該風(fēng)格，整體偏年輕化。主要考驗(yàn)設(shè)計(jì)師造型繪制、技法表現(xiàn)能力。

1.2.12 抽象

通過幾何圖形組合、色彩使用來表達(dá)美的視覺感受。這類圖標(biāo)藝術(shù)（裝飾）價(jià)值更大，不追求識別度，美觀即可。

1.2.13 卡通插畫

這類風(fēng)格既可以做圖標(biāo)又可以做空狀態(tài)插圖，設(shè)計(jì)美觀有特色即可。

1.2.14 像素風(fēng)格

這類移動端界面較少見，目前只在一個海外電商產(chǎn)品（Jollychic）中看過，還有就是一些像素游戲中，比如「泰拉瑞亞」、「我的世界」。

1.3 線面

• 線面
• 描邊插畫

1.3.1 線面

和線性雙色圖標(biāo)類似，趣味性較強(qiáng)，具備個性化特點(diǎn)，可以做Tab選中狀態(tài)。

1.3.3 描邊插畫

類似卡通插畫，在卡通插畫基礎(chǔ)上加入描邊。同樣顏色，在一些特定的前后交接處利用線條做區(qū)分，算是多一種設(shè)計(jì)表現(xiàn)形式，同樣美觀有特色即可。

1.4 性格

• 粗線
• 細(xì)線
• 圓角
• 直角

1.4.1 粗線

力量感、穩(wěn)重、男性等感受

1.4.2 細(xì)線

品質(zhì)感、精致、女性化

1.4.3 圓角

安全、親和、年輕

1.4.4 直角

嚴(yán)謹(jǐn)、正式、果斷利落

由于圖標(biāo)風(fēng)格繁多，所以以上列舉并不包含所有圖標(biāo)風(fēng)格。

02 圖標(biāo)設(shè)計(jì)流程

• 明確語義
• 關(guān)鍵詞詳解發(fā)散
• 確定風(fēng)格
• 提取造型
• 創(chuàng)意輸出

2.1 明確語義

圖標(biāo)存在的目的是起引導(dǎo)作用，在豐富頁面視覺的同時，幫助用戶更快的獲取信息（當(dāng)然圖標(biāo)的使用意義還有很多）。設(shè)計(jì)師在將文字翻譯成圖標(biāo)前，必須先理解其文字含義。因?yàn)樽罱K呈現(xiàn)的圖標(biāo)，需要用戶一眼能準(zhǔn)確反翻譯其中含義（藝術(shù)抽象、裝飾類圖標(biāo)除外）。

在C端設(shè)計(jì)中，以Tab為例，一些常見文案：首頁、分類、發(fā)現(xiàn)、我的，這類語義還算比較清晰的。但在B端設(shè)計(jì)或工具類APP中就會遇到一些復(fù)雜語義。以我的工作來說，目前在做一款網(wǎng)站搭建工具，后臺常會需要設(shè)計(jì)組件及對應(yīng)的圖標(biāo)，比如：滑動商品、多圖列表、上拉圖文列表這些語義比較復(fù)雜的圖標(biāo)，在一定程度上會比較難精準(zhǔn)傳達(dá)文案。

2.2 關(guān)鍵詞詳解發(fā)散

這一步有點(diǎn)類似情緒版使用，但不同的是：我們需要將確定的詞（A)進(jìn)行詳細(xì)解釋，再將解釋文案中關(guān)鍵的詞語進(jìn)行發(fā)散，得出一系列相關(guān)聯(lián)的詞（A1、A2、A3…）。有時間還可以根據(jù)這些詞找到對應(yīng)的圖片，再看在這些相關(guān)聯(lián)的圖片中，有哪些細(xì)節(jié)可以傳遞最開始我們確定的那個詞（A）的意思。

2.3 確定風(fēng)格

我們可以借助情緒版，根據(jù)產(chǎn)品定位和目標(biāo)用戶描述，再結(jié)合應(yīng)用場景，在目前已有的風(fēng)格中找到符合產(chǎn)品氣質(zhì)，符合當(dāng)前模塊視覺層級的圖標(biāo)風(fēng)格。

前面我們已經(jīng)了解了目前常見的圖標(biāo)風(fēng)格有三大類：線性、面型、線面，其中還有很多細(xì)分，比如在線性中又分粗線（沉穩(wěn)、力量）、細(xì)線（品質(zhì)）、曲線（女性化），還有圓角、直角，每種類型所傳遞的感受都不同。在創(chuàng)意前期，我們將每個點(diǎn)合理進(jìn)行隨機(jī)組合（如下圖）即可創(chuàng)造一種更新穎的風(fēng)格。

2.4 提取造型

經(jīng)過關(guān)鍵詞詳解發(fā)散，其實(shí)我們已經(jīng)獲得了很細(xì)節(jié)點(diǎn)，接下來將這些細(xì)節(jié)點(diǎn)進(jìn)行合理融合后，就可以得到代表同一語義但形式各異的基礎(chǔ)圖標(biāo)樣式（這個階段還只是想法階段，可以通過手繪方式記錄組合形式，不用特別精細(xì)化）。

2.5 創(chuàng)意輸出

在設(shè)計(jì)執(zhí)行前我們需要先了解兩個大知識點(diǎn)：

• 圖標(biāo)設(shè)計(jì)規(guī)范
• 圖標(biāo)設(shè)計(jì)注意點(diǎn)

2.5.1 圖標(biāo)設(shè)計(jì)規(guī)范

• 常見圖標(biāo)尺寸
• 圖標(biāo)盒子使用

2.5.1.1 常見圖標(biāo)尺寸

在界面圖標(biāo)設(shè)計(jì)中最常用尺寸：12×12、16×16、24×24、32×32、48×48（其他尺寸：64×64、96×96、128×128、256×256、512×512）

2.5.1.2 圖標(biāo)盒子使用

什么是圖標(biāo)盒子？其作用是什么？

圖標(biāo)盒子即圖標(biāo)約束網(wǎng)格，來源于Material design。使用圖標(biāo)盒子有利于使我們創(chuàng)造的系列圖標(biāo)保持規(guī)范與統(tǒng)一。

2.5.2 圖標(biāo)設(shè)計(jì)注意事項(xiàng)

• 簡潔美觀
• 易于識別
• 細(xì)節(jié)統(tǒng)一
• 像素對齊
• 視覺大小一致
• 飽滿透氣
• 融入品牌基因

2.5.2.1 簡潔美觀

圖標(biāo)是否美觀，會受設(shè)計(jì)師對圖標(biāo)造型把控、圖標(biāo)構(gòu)成元素比例、配色等設(shè)計(jì)能力影響。在UI界面功能圖標(biāo)設(shè)計(jì)中，通常會盡量減少不必要的細(xì)節(jié)，降低圖標(biāo)復(fù)雜度，來幫助用戶快速識別。當(dāng)然圖標(biāo)也有豐富細(xì)節(jié)的做法，常見在一些重要運(yùn)營入口上。

2.5.2.2 易于識別

識別度的問題，在最前面明確語義中就有提到過，這里就不贅述。

2.5.2.3 細(xì)節(jié)統(tǒng)一

在細(xì)節(jié)中包含：表現(xiàn)風(fēng)格、描邊粗細(xì)、端點(diǎn)類型、圓角大小、斜角角度、配色、投影參數(shù)等（不同風(fēng)格圖標(biāo)的細(xì)節(jié)不同，這里只是列舉部分），上述細(xì)節(jié)在系列圖標(biāo)中都應(yīng)保持一致。

2.5.2.4 像素對齊

在圖標(biāo)繪制中，需盡量避免坐標(biāo)位置xy或?qū)捀邊?shù)出現(xiàn)小數(shù)點(diǎn)，以此保證最終導(dǎo)出的圖標(biāo)是清晰的。

2.5.2.5 視覺大小一致

由于不同圖標(biāo)外輪廓不同，就會導(dǎo)致哪怕在物理大小上相同的圖標(biāo)（假設(shè)都是24×24），但視覺上可能還是會給人大小不一致的感受，因此我們需要借助前面提到的圖標(biāo)盒子進(jìn)行約束調(diào)整。

2.5.2.6 飽滿透氣

圖標(biāo)的飽滿透氣，不一定需要加入很多筆畫（描邊、裝飾等）細(xì)節(jié)。而是盡可能在形成風(fēng)格的同時，簡化能影響識別度的關(guān)鍵筆畫，通過調(diào)節(jié)筆畫大小、長短、位置使圖標(biāo)達(dá)到一個最平衡狀態(tài)。

以如下途牛_我的頁面_功能區(qū)圖標(biāo)為例：

圖中標(biāo)紅圖標(biāo)就存在飽滿度不足，及內(nèi)部較擁擠的情況，第一感受是看起來不舒適，品質(zhì)感比較低。除此外，還存在如下問題：

• 圖標(biāo)大小很明顯不一致
• 設(shè)計(jì)語言不統(tǒng)一，有圓角有直角
• 圖標(biāo)風(fēng)格不一致，有透明度+分割形式（我的保單）、有純透明度形式（專屬顧問、我的收藏）、還有其余單色實(shí)心形式

2.5.2.7 融入品牌基因

在圖標(biāo)中融入品牌基因可以有效的提升產(chǎn)品品牌感，作為高階設(shè)計(jì)師必備技能之一，常見提取維度：

• 顏色
• 設(shè)計(jì)語言
• Logo輪廓

以我之前的豆果美食項(xiàng)目為例，提取到如下細(xì)節(jié)：

顏色：提取黃色、綠色兩類顏色

曲率（設(shè)計(jì)語言）：品牌Logo走線順滑、自然、圓潤，個性鮮明

分離（設(shè)計(jì)語言）：黃色區(qū)域與綠色區(qū)域雖不相交，但存在聯(lián)系。（分離間留白）

根據(jù)提取到的基因，最終得到如下兩套風(fēng)格不同，但語言相同且都具備品牌感的圖標(biāo)。

Logo輪廓：在圖標(biāo)中融入品牌logo外輪廓（Google Play），或根據(jù)logo輪廓結(jié)合應(yīng)用特性進(jìn)行延展（Microsoft）。

03 案例展示

就以途牛為例，對我的頁面功能圖標(biāo)進(jìn)行優(yōu)化。

3.1 明確語義

根據(jù)文案進(jìn)行詳細(xì)翻譯，幫助我們充分理解文案。

3.2 關(guān)鍵詞詳解發(fā)散

以「專屬顧問」為例：

釋義：有專門的知識或經(jīng)驗(yàn)，受聘為機(jī)關(guān)團(tuán)體或單獨(dú)個人提供專門咨詢的人。

提取釋義中關(guān)鍵信息，生成關(guān)鍵詞：專業(yè)、專人，再根據(jù)關(guān)鍵形容詞發(fā)散一系列具象名詞。

3.3 確定風(fēng)格

根據(jù)產(chǎn)品調(diào)性和模塊視覺層級以及考慮延展性，初步確定如下風(fēng)格組合起來是比較適合：

線性：雙色、不透明度、斷點(diǎn)面性：單色、雙色、不透明度、輕質(zhì)感、明暗質(zhì)感線面：線面

在實(shí)際查看中，發(fā)現(xiàn)Tab的風(fēng)格為單色+不透明度+斷點(diǎn)風(fēng)格。

為了和Tab拉開差異，最終確定以如下風(fēng)格進(jìn)行組合表現(xiàn)比較符合產(chǎn)品調(diào)性：

線性：雙色

面性：單色、雙色、不透明度、輕質(zhì)感、明暗質(zhì)感

線面：線面

3.4 提取造型

通過手繪或大腦想象進(jìn)行造型構(gòu)思，這里我就不展示手繪過程（行吧，我承認(rèn)就是畫的太丑了不敢放）。

3.5 設(shè)計(jì)執(zhí)行

由于不同風(fēng)格對圖標(biāo)造型構(gòu)思有所影響，且圖標(biāo)類型很多，不同特點(diǎn)組合起來樣式更多。案例精力有限，所以只以線性雙色風(fēng)格做演示，希望大家靈活使用。

這一步就是將手繪圖形矢量化，在矢量化創(chuàng)意過程中，我們可能會對手繪的圖形進(jìn)一步簡化細(xì)節(jié)或新增造型，這都很正常。只需注意在整個繪制過程中遵循圖標(biāo)設(shè)計(jì)規(guī)范，以及注意圖標(biāo)設(shè)計(jì)注意事項(xiàng)即可。

圖標(biāo)盒子使用

創(chuàng)意輸出

Tips：

在繪制造型時需注意，圖標(biāo)文案詳解中的關(guān)鍵詞也有優(yōu)先級，以如下「禮品卡」圖標(biāo)為例，是表達(dá)禮品的意思多？還是表達(dá)卡的意思多？這個會影響圖標(biāo)中相關(guān)元素的面積大小。

站在商業(yè)角度看可能會更傾向于方案2，突出禮品，來吸引用戶。站在入口文案清晰傳達(dá)的角度，可能我會更傾向于方案1。

1or2？

最后對專屬客服進(jìn)行多風(fēng)格嘗試，最終效果如下：

附上部分繪制過程中的淘汰稿：

04 圖標(biāo)資源輸出

在將圖標(biāo)輸出給前端前，需要溝通好使用何種格式，目前常用圖標(biāo)格式分為兩大類：

矢量格式：

SVG：縮放無損、體積小、支持前端樣式修改參數(shù)、單色情況下方便前端修改顏色來表達(dá)圖標(biāo)狀態(tài)，減少重復(fù)上傳。

位圖格式：

• PNG：支持透明格式
• JPG：兼容性強(qiáng)，適合大尺寸高飽和度圖像
• GIF：動態(tài)圖標(biāo)使用，缺點(diǎn)是透明情況下邊緣容易出現(xiàn)鋸齒。

這里主要介紹靜態(tài)圖標(biāo)中，svg格式在工作中如何輸出給前端同學(xué)使用（借助iconfont）。

svg圖標(biāo)交接方式：

1）圖標(biāo)資源優(yōu)化

在iconfont官方繪制指南中有描述，在導(dǎo)出前需要按如下規(guī)則優(yōu)化圖標(biāo)資源：

2）選中圖標(biāo)導(dǎo)出svg格式

以Figma為例，優(yōu)化圖標(biāo)資源后，選中圖標(biāo)將輸出格式選擇為導(dǎo)出svg。

3）上傳iconfont

在資源管理下，選擇需要上傳的位置。

選擇上傳圖標(biāo)

4）選擇顏色提交模式

去除顏色并提交：適合單色圖標(biāo)，去除顏色提交可以方便前端使用代碼修改參數(shù)，減少不同狀態(tài)圖標(biāo)重復(fù)上傳。

保存顏色并提交：適合多色圖標(biāo)（注意：在單色情況下，選擇保留顏色提交，前端則無法通過代碼修改圖標(biāo)顏色）。

最后當(dāng)我們把圖標(biāo)都上傳好后，就可以將前端同學(xué)拉入團(tuán)隊(duì)項(xiàng)目中開心進(jìn)行玩耍。

好了，以上就是本篇要分享的全部內(nèi)容，希望對各位有所幫助。

本文由 @幺零三 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議