編者按：今天的教程除了一枚線性圖標(biāo)的操作演示，更重要的是幫同學(xué)們領(lǐng)會(huì)UI設(shè)計(jì)師必備的化繁為簡(jiǎn)，抽絲剝繭的能力。初學(xué)圖標(biāo)繪制的同學(xué)，絕對(duì)需要里邊提到的這個(gè)方法~

幾何

對(duì)于初學(xué)者來(lái)說(shuō)，我們可以這樣理解，任何東西都可以用這四種圖形組合而成：

當(dāng)我想要用圖標(biāo)來(lái)表現(xiàn)一個(gè)物體時(shí)，我會(huì)先仔細(xì)觀察，然后盡可能將其拆分為最簡(jiǎn)單的形狀。譬如，水滴可以用一個(gè)三角形和一個(gè)圓圈組成。

心形圖標(biāo)可以由兩個(gè)圓圈和一個(gè)三角形組成。

我通常會(huì)使用Adobe Illustrator來(lái)制作這些圖形。矢量圖形的線條粗細(xì)、節(jié)點(diǎn)以及圖形之間的關(guān)系都非常易于控制。在Illustrator中，圖形和線條間的互相轉(zhuǎn)換也非常便捷。這些信息也許非?；A(chǔ)，但卻是我制作大多數(shù)，甚至是復(fù)雜圖標(biāo)的方法。下面這個(gè)例子細(xì)節(jié)略多，是我最近為bill of rights所做的圖標(biāo)，其中，我也完全使用了相同的方式。

界面圖標(biāo)

我最近正在為一款超贊的iPhone應(yīng)用Parker Planner制作一組圖標(biāo)。我很喜歡這個(gè)項(xiàng)目，這組用戶(hù)界面圖標(biāo)的要點(diǎn)是在易于理解和功能性強(qiáng)的同時(shí)，具有美觀性，幫助用戶(hù)在這款略為復(fù)雜的應(yīng)用中進(jìn)行導(dǎo)航。

下面，讓我們來(lái)細(xì)看一下這些圖標(biāo)，并且分析我的制作步驟。我們就以垃圾桶圖標(biāo)為例，它就是由三個(gè)圓角矩形和三根線條組成的。

1、選擇圓角矩形工具

2、拖拽鼠標(biāo)，畫(huà)出形狀

3、根據(jù)所需調(diào)整線條粗細(xì)

我通常會(huì)在整套圖標(biāo)中選用一到兩種粗細(xì)的線條。

這樣可以保持所有圖標(biāo)的整體性和一致性。

4、畫(huà)出另一個(gè)圓角矩形，作為蓋子。

5、再用一個(gè)圓角矩形畫(huà)出蓋子的把手。

6、擦去把手底部的半個(gè)圓角矩形。

7、現(xiàn)在，在桶身上繪制三條直線。

8、好啦，一個(gè)垃圾桶圖標(biāo)就此誕生！你可以根據(jù)所需，調(diào)整顏色和線條粗細(xì)。

另有一些有用的工具，對(duì)制作圖標(biāo)很有幫助——路徑查找器：可對(duì)各類(lèi)形狀進(jìn)行切割、組合以及合并。

線條／填充工具：形狀的線條色和填充色之間的轉(zhuǎn)換。

再有我最?lèi)?ài)的工具——線條面板：將圖形轉(zhuǎn)折點(diǎn)由直角轉(zhuǎn)為圓角。

當(dāng)完成一整套圖標(biāo)設(shè)計(jì)后，我通常將它們肩并肩放成一排，來(lái)檢查是否有哪個(gè)特別奇怪，隨之進(jìn)行調(diào)整。

最后，我會(huì)將它們置入應(yīng)用進(jìn)行檢驗(yàn)，看看它們是否作用良好。

總結(jié)一下，制作優(yōu)秀圖標(biāo)不止是學(xué)習(xí)Illustrator的使用訣竅，當(dāng)然，熟練掌握軟件也是必不可少的。更重要的是，你要練習(xí)將所見(jiàn)的事物分解為簡(jiǎn)單的圖形。這項(xiàng)關(guān)鍵技能是助你成為圖標(biāo)設(shè)計(jì)大師的秘訣！加油！

【信息圖達(dá)人的必由之路】：

再來(lái)一波工具：
《拿走不謝！21款超實(shí)用的酷炫「數(shù)據(jù)可視化工具」》

設(shè)計(jì)方法在此：
《超實(shí)用！四個(gè)方法幫你搞定數(shù)據(jù)可視化界面設(shè)計(jì)（附神器）》
《當(dāng)紅設(shè)計(jì)趨勢(shì)！揭秘信息可視化圖表的設(shè)計(jì)方法》

原文地址：Awwwards
譯文地址：doo-plus

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量100萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com