解決圖標(biāo)的邊緣鋸齒(毛刺)問題

圖標(biāo)設(shè)計是UI設(shè)計中的最基礎(chǔ)部分，也是最終用戶看到的直接用來評價軟件成功與否的一個標(biāo)準(zhǔn)。在很多朋友看來，圖標(biāo)設(shè)計就像畫圖一樣簡單，但是隨著工作的進(jìn)行，問題也不像開始想的那么簡單了，去年畢業(yè)后我去以前公司任職UI設(shè)計師后，開始了我個人的第一個UI任務(wù)----設(shè)計一個桌面小時鐘，方案很快就完成了（圖片１），老總也很爽快地拍板通過，然后就按研發(fā)人員一起把程序?qū)崿F(xiàn)出來，在桌面上顯示出來（圖片２），這時老總搖著頭說：“肯定不行”。

　　很快就快一年了，最近在幾個UI論壇上都經(jīng)常看到有朋友問有關(guān)圖標(biāo)在軟件里顯示后邊緣鋸齒（毛刺）怎么解決的問題，深圳UI群或者其他同行群里也不鮮人問，我都會粗略說一下，今天在兩個群里都有朋友問起，覺得有必要把自己對于這個問題的解決方法整理一下貼出來供大家參考，也方便以后有朋友問起直接給他看。

  圖片１　　圖片２


　　就從今天在深圳UI群里提問的那位朋友說起吧，他把圖標(biāo)做成ICO和GIF后放到程序里，運行后出現(xiàn)了邊緣鋸齒（毛刺）現(xiàn)象　

　　我給這位朋友的建議是：
　　1.在轉(zhuǎn)成 gif 或 ico 后對邊緣進(jìn)行處理，處理的目標(biāo)讓邊緣更平滑，具體的方法是把邊緣像素的顏色調(diào)得接近一點，相對顏色深一點，這樣可以使其不太破碎而且輪廓更清晰。但這方法比較費時，而且不是每一個圖都可以用，特別是在線條比較細(xì)的時候。
　　2.不使用透明圖標(biāo)，把圖標(biāo)的背景色和即將應(yīng)用界面的背景顏色設(shè)成一樣。這個方法比較干脆，缺點是這個圖標(biāo)在動用的時候背景不一定一樣，而且在不同操作系統(tǒng)下軟件的默認(rèn)背景顏色也不同（比如winXP是#ECE9D8，win2000及以下系統(tǒng)是#C0C0C0），如果圖標(biāo)的背景顏色跟環(huán)境的背景顏色不同那就比較難看了，所以有時會做幾種背景顏色，麻煩。
　　3.第三個方法是在第二個方法的基礎(chǔ)上進(jìn)來改進(jìn)的，思路是保留圖標(biāo)邊緣的過度部分，又不讓圖標(biāo)背景區(qū)域太大，具體做法是：
把圖標(biāo)的區(qū)域選出來，把圖標(biāo)區(qū)域擴(kuò)大一個像素得到，再把這個區(qū)域作為背景的填充區(qū)域，這時再把圖標(biāo)疊加上去得到，這個時候再做邊緣像素化，這時再轉(zhuǎn)成程序能接受的應(yīng)用格式(ico、gif、bmp），應(yīng)用到程序里就沒有邊緣鋸齒（毛刺）的問題了。這里面還有一個背景顏色的選擇問題，如果能確定程序最終顯示的背景顏色，那設(shè)成跟它一樣就萬事大吉了，如果是其他顏色，本人的經(jīng)驗是盡量設(shè)成灰度色。
　　還有一個問題，就是我在前公司第一次做的那個桌面時鐘界面了，當(dāng)時研究了一下其他軟件，都很少有把軟件的外殼做成非矩形狀的，那時才明白就是為了避免邊緣鋸齒問題，看看人家QQ吧，也是直來直去的，最多就在邊角搞一個六度角，但這樣用戶已經(jīng)可以接受了。
　
現(xiàn)在的軟件技術(shù)也已經(jīng)支持邊緣的平滑了，但那是更高一級的設(shè)計了，我們還是選想辦法配合好我們自己人把手頭的項目做好吧。
　　我所知道的方法就這些，希望有更好方法的朋友不也指點一下，讓大家能更好地進(jìn)步！