K2.08.3DPI-unaware blur and misalignment设计
未做每显示器感知的应用会在高分屏上出现模糊或错位
别名: 高分屏模糊 · 逻辑像素错位 · DPI unaware
概念解释
应用按 96 DPI 画进一块后备缓冲,操作系统再把整块缓冲拉伸到 200% 的屏上:文字发虚,细线变成两像素的糊带,点击热区还停在未拉伸前的位置。未做每屏感知(DPI-unaware)的后果是高分屏上的模糊和错位——人看见的像素和系统以为的命中矩形不是同一套坐标。它不是「比例该去哪查」的流程,也不是「图标文件该不该换一套」的资源问题,而是不感知时用户实际看到的两种败相。
机制
不感知的应用在逻辑像素空间里绘图和做命中,操作系统只能把那张已经画完的图当位图放大。放大制造模糊:每个源像素变成一块同色方块,字形边缘失去与屏像素的对齐。错位来自第二套坐标:命中测试若仍用未缩放的窗口矩形,而合成器已经把画面拉大,光标热点会对着空白,或点在相邻控件上。还有一种错位不靠拉伸:应用把物理像素和逻辑像素混用,边框画了「1 像素」却按物理像素去描,在 200% 屏上细得几乎看不见,或按逻辑像素去描却用物理坐标去点,热区偏了整整一个倍数。模糊是采样不够;错位是两套单位没统一。两者可以同时出现,修复路径不同。
边界
整数倍拉伸(恰好 200%)上,有的图标碰巧仍可辨,人会把模糊当成「略差一点」而不是故障;非整数倍(125%、150%)上插值更脏,投诉才集中。已经由系统按每屏比例重栅格的文字,可能清晰而图标仍糊——不要用「文字还行」判定整窗感知正确。低分屏上不感知和应用做对了看起来一样,问题只在高分屏暴露。全屏独占若自己按物理分辨率画,不走桌面合成器,不会出现这种拉伸式模糊,但窗口化之后立刻出现。
怎么落地
- 声明每屏感知,在当前屏的比例下自己画文字和矢量,不要交给系统把整窗当位图拉伸。
- 绘图与命中使用同一套逻辑坐标,再统一乘以当前屏比例得到物理像素;禁止一部分代码写逻辑、一部分写物理。
- 1 逻辑像素的细线要对齐物理像素网格,避免落在两个物理像素之间变成一条灰带。
- 验证:在 200% 屏上打开应用,看字形和发丝线是否发虚;把光标移到按钮边缘逐像素点按,热区是否与可见边界重合。再把窗口拖到 100% 屏,确认没有反向的「热区过大、画面偏小」。模糊和错位要分开记:前者看截屏边缘,后者看点击坐标。