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

摸索階段

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

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

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

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

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

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

實踐出真知

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

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

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

功能型圖標(biāo)

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

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

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

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