做UI设计的时候，你有没有遇到过这种情况：明明画得挺精细的图标，放到界面上就是显得模糊、发虚？尤其是小尺寸下，边缘像糊了一层雾。问题很可能出在——像素没有对齐。
像素对齐到底是什么？
简单来说，像素对齐就是让图标的线条、边缘严格落在屏幕的物理像素点上。现在的屏幕由一个个微小的像素点组成，每个点只能显示一种颜色。当你画一个1px的边框时，如果它恰好落在两个像素之间，系统就得“估算”颜色，结果就是边缘变灰、变虚。
比如你在设计软件里画一条1px高的横线，位置设在y=10.5，那这条线就卡在第10和第11个像素中间。显示器没法显示“半个像素”，只能用两个像素一起浅一点的颜色来模拟，视觉上就成了模糊的2px线。
小图标尤其敏感
手机App里的导航图标、工具栏按钮，很多只有24x24甚至16x16像素大小。这种尺寸下，一条模糊的边就能毁掉整个图标的清晰感。设计师常说“一像素决定质感”，说的就是这个道理。
举个例子，一个放大镜图标，如果外圈圆形没对齐像素，放大后会看到锯齿或重影；搜索图标的把手部分一旦偏了0.5px，看起来就像粗了一倍，整体比例就崩了。
怎么检查是否对齐？
大多数设计工具都提供“像素网格”功能。在Figma、Sketch或Photoshop里打开像素预览模式，放大到400%以上，看图标的边缘是不是和网格线完全重合。如果有任何部分落在格子中间，就要手动调整坐标或路径。
以SVG为例，导出前要确保所有x、y、width、height的值都是整数：
<rect x="10" y="5" width="16" height="16" />而不是：
<rect x="10.3" y="5.7" width="16.2" height="15.8" />开发也要配合
即使设计师交了对齐的稿，前端切图时也可能出问题。比如用CSS把图标设成width: 23px，而原始图是24px，浏览器缩放时就会模糊。最好用原始尺寸，或者确保缩放比例是整数倍（如0.5x、2x）。
另外，移动端适配时，注意设备的像素密度。Retina屏虽然物理像素多，但逻辑像素仍是标准值，按设计稿的整数尺寸使用就不会错。
自动化的帮助
现在有些工具能自动修复不对齐的问题。比如SVGO可以优化SVG路径，把小数坐标四舍五入；Figma插件“Pixel Perfect”能实时提醒偏移。但不能完全依赖工具，肉眼检查仍是最后一道防线。
像素对齐不是炫技，而是基本功。就像写字要横平竖直，图标清晰了，界面才显得干净利落。用户可能说不出哪里变了，但一眼就觉得“这App做得挺用心”。