kuya's blog~~ 从用户角度出发

　　图标设计是UI设计中的比较基础部分，也是最终用户看到的直接用来评价软件质量的一个标准。在很多朋友看来，图标设计就像画图一样简单，但是随着工作的进行，问题也不像开始想的那么简单了，去年毕业后我去以前公司任职UI设计师后，开始了我个人的第一个UI设计任务----设计一个桌面小时钟，方案很快就完成了（图片１），老总也很爽快地拍板通过，然后就跟研发人员一起把程序实现出来，在桌面上显示出来（图片２），这时老总摇着头说：“肯定不行”。

　　很快就一年了，最近在几个UI论坛上都经常看到有朋友问有关图标在软件里显示后出现边缘锯齿（毛刺）怎么解决的问题，深圳UI群或者其他同行群里也不鲜人问，有空我都会说一下，今天在两个群里都有朋友问起，觉得还是把自己对于这个问题的解决方法整理一下贴出来供大家参考，也方便以后有朋友问起直接给他看。

图片１　　图片２

　　就从今天在深圳UI群里提问的那位朋友说起吧，他把图标做成ICO和GIF后放到程序里，运行后出现了边缘锯齿（毛刺）现象　
　　

　　我给这位朋友的建议是：
　　1.在输出 gif 或 ico 前对边缘进行处理，处理的目标是让边缘更平滑，具体的方法是把边缘像素的颜色调得接近一点，相对颜色深一点，这样可以使其不太破碎而且轮廓更清晰。但这方法比较费时，而且不是每一个图都可以用，特别是在线条比较细的时候。
　　2.不使用透明图标，把图标的背景色和即将应用界面的背景颜色设成一样。这个方法比较干脆，缺点是这个图标在被用的时候背景不一定一样，而且在不同操作系统下软件的默认背景颜色也不同（比如winXP是#ECE9D8，win2000及以下系统是#C0C0C0，这个值直接由桌面主题定义），如果图标的背景颜色跟环境的背景颜色不同那就比较难看了，所以有时会做几种背景颜色，还不一定满足，麻烦。
　　3.第三个方法是在第二个方法的基础上进来改进的，思路是保留图标边缘的羽化部分，又不让图标背景区域太大，具体做法是：　
      我们先把要处理的图标层定义为图层1，新建一个图层2，叠在图层1下面，把图标的区域选出来得到选区1，把选区1扩大一个像素(“选择”--“修改”--“扩边” )得到选区2，再把选区2作为填充区域填充图层2，把图层1和图层2合并为新图层命名为图层3，这个时候再对图层3进行边缘像素化，然后转成程序能接受的应用格式(ico、gif、bmp)，应用到程序里就没有边缘锯齿（毛刺）的问题了。注意转换为gif或ico时粉红色部分是透明的，而转换为bmp是粉红色部分就是透明色了，一般默认的透明色是#FF00FF，也可以自己定义。

      这里面还有一个背景颜色(图层2)的选择问题，如果能确定程序最终显示的背景颜色，那设成跟它一样就万事大吉了，如果是其他颜色，本人的经验是尽量设成灰度色。

　
　　还有一个问题，就是我在前公司第一次做的那个桌面时钟界面的时候，当时研究了一下其他软件，都很少有把软件的外壳做成非矩形状的，那时才明白就是为了避免边缘锯齿问题，看看人家QQ吧，也是直来直去的，最多就在边角搞一个六度角，但这样用户已经可以接受了。
　

      现在的软件技术也已经支持边缘的平滑了，就是利用带Alpha通道的BMP图来实现，但那是更高一级的设计，需要程序的支持了，我们还是选想办法配合好我们自己人把手头的项目做好吧。
　　我所知道的方法就这些，希望有更好方法的朋友不也指点一下，让大家能更好地进步！

　　相关连接：带Alpha通道的BMP图

个人解决ICON边缘锯齿的方法