設計(jì)師(shī)在畫(huà)圖時(shí)總是(s¶σ∑hì)要(yào)經曆各種各樣的(de) ¶嘗試，畫(huà)icon也(yě)是(shì)同樣的(de)，都(dōu)¥€ε‌不(bù)知(zhī)道(dào)什(sh₽♥≈¥én)麽是(shì)最好(hǎo)的(de)，隻§∞€能(néng)在多(duō)次的(de)嘗試後得(de)出最優≤♥解。挑選最優解很(hěn)簡單，重要(y¶$ào)的(de)是(shì)哪來(lái)那(nà)麽多(duō€"₹)的(de)方案/靈感？這(zhè)篇文(wén↕↔)章(zhāng)就(jiù)以繪制(zhì)四個(gè)底部tab的(deεΩ)icon——首頁、低(dī)碳生(shēng)活、₽®•®低(dī)碳商城(chéng)、我的(de)，跟‌Ω大(dà)家(jiā)分(fēn)享。

整體(tǐ)是(shì)四個(gè)大(dà)步驟×'：

Part.01尋找參考：要(yào)先腦(nǎε•<§o)爆，再找參考

Part.02細化(huà)圖形：從(cóng)小(xiǎo)到(dà<β¥o)大(dà)将差異化(huà)融入

Part.03細化(huà)風(fēng)格：優先參考app的♠λ≠‍(de)設計(jì)風(fēng)格

Part.04整體(tǐ)調整：最關鍵最基礎Ω<♠‌的(de)設計(jì)修養

01、尋找參考：要(yào)先腦(nǎo)爆，再找參考

以最常見(jiàn)的(de)「首頁」icon 為(¶λ'<wèi)例，想到(dào)首頁你(nǐ)會(huì)想到(±∏dào)什(shén)麽圖形？

那(nà)一(yī)定是(shì)「房(fán↓≈g)子(zǐ)」對(duì)不(bù)對(du✔€γì)？如(rú)果你(nǐ)直接去(qù)i≠δconfont上(shàng)搜首頁，也(yě∑€<δ)是(shì)給你(nǐ)出來(lái)一(yīπ ×π)堆房(fáng)子(zǐ)：

如(rú)果你(nǐ)的(de)思路(lù)在開(kāi)頭就(jiù)僅限↓'于此，那(nà)後續方向嘗試也(yě)會(huì)受到(dào)局限 ↑®。這(zhè)時(shí)需要(yào)在£α↑這(zhè)一(yī)步就(jiù)發散下←≈ $(xià)思路(lù)，腦(nǎo)爆一(yī)下(x ×§ià)，可(kě)以從(cóng)行(x¥™£íng)業(yè)角度和(hé)自(zì)身(shēn)産品的(de)角度去↕‌(qù)出發。

比如(rú)現(xiàn)在畫(huà)的(de)這(zhè)↓₽∞‌個(gè)首頁 icon，屬于是(shì)環λ™保行(xíng)業(yè)內(nèi)的(de)，那(nà)首頁 icon 是™¶(shì)不(bù)是(shì)可(kě)以是(shì)「地(dì)球α 」「樹(shù)苗」？再從(cóng)自(zì)身(shēn‌© )産品角度出發，看(kàn)看(kàn)app內(nèi)的(de)LOGOΩΩ≤δ、吉祥物(wù)。那(nà)麽現(xiàn)在↔₽光(guāng)首頁這(zhè)個(gè)ic‍♠'on就(jiù)能(néng)想到(dào)5個(gè)可(kě)​∑設計(jì)的(de)方向。

隻有(yǒu)聯想的(de)關鍵詞越多(duō≥•₹¶)，可(kě)檢索的(de)範圍就(jiù)越廣 σ。按照(zhào)這(zhè)種思路(lù)每≠ββ個(gè)icon都(dōu)能(néng)找到(dào)很(hěn→‌→)多(duō)參考，再根據參考畫(huà)出 icon。

此時(shí)「首頁」這(zhè)個(gè)圖标畫(♥↔÷​huà)出了(le)以上(shàng)六種圖标造型，「樹(shù≠ γ)苗」「地(dì)球」的(de)圖标都(dōu)比較獨特，但(dàε&$↔n)是(shì)目前房(fáng)子(zǐ)♣ ≠這(zhè)個(gè)圖标就(jiù)太常見(jiàn)、太大♦λ £(dà)衆了(le)。

在畫(huà)圖标時(shí)不(bù)可(kě)避免地(dì​λ×)也(yě)會(huì)有(yǒu)一(yī)些(xiē)比較常見(jià∑≈★✘n)的(de)、普通(tōng)的(de) icon，就(jiα←±ù)可(kě)以對(duì)這(zhè)些(xiē)常見(jiàn)的(♠β₹de) icon 進行(xíng)調整，讓它不(bù)至于這(zhè)↕↓↔麽大(dà)衆。

02、細化(huà)圖形：從(cóng)小(xiǎo↔↕<​)到(dào)大(dà)将差異化(huà)融入

可(kě)以賦予普通(tōng)圖标一(yī)點差異化(huà)，讓它看(÷✘₽kàn)起來(lái)更不(bù)同一(yī)些(xiē)。從(cóng)小δ¶(xiǎo)點入手，将它基礎形進行(xíng)微₹βε♥(wēi)調，從(cóng)大(dà)點入手，可(kě)以将行¶‌(xíng)業(yè)屬性和(hé)品牌圖形融入圖标。

如(rú)果從(cóng)小(xiǎo)的(de)調整入手，可¶∏§ε(kě)以考慮将圖标外(wài)輪廓做(∏φ zuò)一(yī)些(xiē)微(wēi)調。将房(fáng)子(zǐ)的♥σ(de)外(wài)部造型進行(xíng)☆ &≈調整，一(yī)共微(wēi)調出5種房(fáng)子(zǐ)的 ♥​(de)造型：

小(xiǎo)的(de)調整能(néng₩≠≥)讓這(zhè)個(gè)圖标稍微(wēi)變得(de)不(bù)一♠'₩(yī)樣一(yī)些(xiē)。而從(cóng)大(dà)方向上(shà↑✔δ¶ng)可(kě)以發生(shēng)更明(míng)φ'顯、直觀的(de)變化(huà)，讓圖标的(de)差異化(huà)特☆← ♠征也(yě)更加明(míng)顯。如(rú)何對(♣ duì)圖标進行(xíng)更大(dà)的(de)改觀？大(dà)家(jiā✔σ♦)可(kě)以從(cóng)行(xíng)業¥↕(yè)屬性的(de)融入、品牌圖形的(de>γ↓')融入去(qù)嘗試。比如(rú)這(zhè)§γ≠個(gè)首頁圖标你(nǐ)希望他(tā)帶有(y™ ǒu)環保的(de)行(xíng)業(yè)屬性₽π，而環保類icon的(de)參考裡(lǐ)常見(×≠♦jiàn)的(de)元素有(yǒu)樹(shù)苗、樹(shù)葉、閃電(‍✔σdiàn)：

這(zhè)些(xiē)元素都(dōu)可(kě)以和(hé)房♦€α₩(fáng)子(zǐ)進行(xíng)很(hěn)好(hǎo)地(d‍≤ì)結合：

除了(le)融入行(xíng)業(yè)屬性，大(dà₩≠)家(jiā)也(yě)可(kě)以将自(zì)己産品的(de)品牌圖形融入÷↔→★icon，比如(rú)像飛(fēi)豬、馬蜂窩app都(dōu)有(®®↕yǒu)将自(zì)己的(de)吉祥物(wù)oΩ•r品牌圖形融入其中：

03、細化(huà)風(fēng)格：優先參考app ®≈‌設計(jì)風(fēng)格

通(tōng)過以上(shàng)兩步，把 icon 的≈Ω§‍(de)外(wài)形确定下(xià)來(lá‌'i)後，就(jiù)可(kě)以開(kāi)始細化(huà)λσ  圖标風(fēng)格了(le)，如(rú)果不(bù)知(zhī)道(dào)∏✔ <該采用(yòng)什(shén)麽風(fēng£©β)格，不(bù)如(rú)先看(kàn)看(kàn)自(zì)家(ji✘‌♥ā)app的(de)風(fēng)格或設計(jì)語言是(shì>✔®>)什(shén)麽，可(kě)以根據app風(fēng)格細化♠★(huà)圖标風(fēng)格。如(rú)果這(zhè∞★)款app的(de)頁面風(fēng)格是(shì)扁©∞‍ 平、漸變、線條：

那(nà)麽 icon 就(jiù)可(kě)以按照(z₩→φ≠hào)扁平、漸變、帶線條的(de)方向₩∏₽去(qù)走。以首頁這(zhè)個(gè) icon 舉例，就(jiù€<λ)能(néng)畫(huà)出以下(xià)幾種方向☆€：

04、整體(tǐ)調整：最關鍵基礎的(de)設計(jì)修養

用(yòng)上(shàng)面講到(dào)的(d"®÷e)三大(dà)步驟，補齊剩下(xià)三個(gè) icon，最↔"→®後一(yī)步就(jiù)是(shì)對'↑(duì)這(zhè)一(yī)組icon進行(x∑≥íng)整體(tǐ)的(de)調整。大(dà)緻基于三大(dà€♥¥)點去(qù)做(zuò)調整：

1.要(yào)保證一(yī)套圖标起碼有(yǒu)2個(gè•ε÷)以上(shàng)的(de)不(bù)同點，個(g×≠₹δè)别圖标沒有(yǒu)過多(duō)的(de)想法，可(kě<£πβ)以保持普通(tōng)。

2.遵循統一(yī)性：最後檢查一(yī)遍整體(tǐ) icon 統≈™♣§一(yī)性，包括視(shì)覺大(dà)£π☆₹小(xiǎo)統一(yī)、圓角統一(yī)、正負形比例統一(yī)、描邊粗細β®✘€統一(yī)。

3.視(shì)覺平衡：每一(yī)個(gè)icon在視(shì)覺上(s​ ∏hàng)看(kàn)起來(lái)都(dōu)要(yào)在中央。✔α≥∞

總結

以上(shàng)就(jiù)是(shì)在設計(jì)圖标時(shíπ•↔≤)必須經曆的(de)幾大(dà)步驟和(hé)獲取圖标設>↕↓計(jì)靈感的(de)辦法。其實無論經驗豐富與否，隻有(yǒu)反複的(de≥©)嘗試才能(néng)得(de)出最好(hǎo)的(deφ↑)方案，希望大(dà)家(jiā)都(dōu σ)越來(lái)越牛！