今天來(lái)跟大家伙兒聊聊我是咋設(shè)計(jì)UI圖標(biāo)的，整個(gè)過(guò)程還挺有意思的。

摸索階段

我也不太懂，就覺得UI設(shè)計(jì)嘛不就是畫幾個(gè)小圖標(biāo)，能有多難？結(jié)果一上手，發(fā)現(xiàn)根本不是那么回事！我畫出來(lái)的東西，要么就是跟別人家的長(zhǎng)得差不多，要么就是我自己都看不懂這是個(gè)啥玩意兒。

學(xué)習(xí)過(guò)程

后來(lái)我就琢磨著，這不行，得學(xué)！我就到處找資料，看人家大神們是怎么設(shè)計(jì)的。發(fā)現(xiàn)人家設(shè)計(jì)圖標(biāo)都講究個(gè)“規(guī)矩”。

是可識(shí)別性。 人家說(shuō)這是最重要的，你得讓人一眼就看明白你這圖標(biāo)是干啥的，不能讓人猜謎語(yǔ)似的。這就像你看到一個(gè)叉叉就知道是關(guān)閉，看到一個(gè)放大鏡就知道是搜索，對(duì)？

然后是差異性。 我得讓我的圖標(biāo)跟別人家的不一樣，得有自己的特色，要不然用戶記不?。∵@就跟咱們平時(shí)買東西一樣，總得挑個(gè)自己喜歡的、特別點(diǎn)的，對(duì)?

再就是用柵格線。 這個(gè)我一開始也不太明白，后來(lái)才知道，這是為讓圖標(biāo)看起來(lái)更整齊、更協(xié)調(diào)。就像咱們寫字一樣，用田字格寫出來(lái)的字就比隨便亂寫的要好看，是一個(gè)道理。

實(shí)踐出真知

學(xué)這么多，我就開始動(dòng)手畫。我先定一個(gè)主題，比如說(shuō)，我要設(shè)計(jì)一套購(gòu)物App的圖標(biāo)。

• 我先畫一個(gè)購(gòu)物車，這個(gè)得讓人一眼就看出來(lái)是能買東西的。
• 然后我又畫一個(gè)搜索框，這個(gè)得讓人知道是能搜東西的。
• 我還畫一個(gè)“我的”圖標(biāo)，這個(gè)得讓人明白是能看到自己信息的。

畫完之后，我還得不斷地修改，看看哪里不協(xié)調(diào)，哪里不夠突出，哪里容易讓人誤解。這過(guò)程挺磨人的，有時(shí)候一個(gè)圖標(biāo)我得改個(gè)十幾遍，但改完之后，看著自己設(shè)計(jì)的圖標(biāo)，心里還是挺有成就感的。

功能型圖標(biāo)

除上面說(shuō)的那些應(yīng)用型圖標(biāo)，我還設(shè)計(jì)一些功能型圖標(biāo)。這些圖標(biāo)主要是為指示、提醒、概括和表述一些信息。比如說(shuō)：

• 我設(shè)計(jì)一個(gè)向右的箭頭，表示“下一步”。
• 我還設(shè)計(jì)一個(gè)打勾的圓圈，表示“已完成”。
• 我又設(shè)計(jì)一個(gè)感嘆號(hào)，表示“警告”。

設(shè)計(jì)這些圖標(biāo)，最重要的一點(diǎn)就是要表意準(zhǔn)確，絕對(duì)不能讓人產(chǎn)生誤解。要不然，用戶點(diǎn)錯(cuò)按鈕，那可就麻煩大！

設(shè)計(jì)UI圖標(biāo)可不是個(gè)簡(jiǎn)單的事兒，得用心學(xué)，用心琢磨，還得不斷地練習(xí)。不過(guò)當(dāng)你看到自己設(shè)計(jì)的圖標(biāo)被大家認(rèn)可的時(shí)候，那種感覺，真是太棒！