设计师的像素眼是怎样炼成的？

比如这张图中的收藏，单独看两种状态几乎看不出任何问题：

但是如果来回切换几次，就会发现高亮的状态比正常的状态下，图标向左挪动了 1px，我们看看大图：

放大之后，图标与文字间距的差异已经非常明显了。

七、像素眼的比例尺

好了，讲了这么多像素眼可以发挥的重灾区，再讲一个参照物小技巧。很多人刚一开始没有任何参照物，根本不知道页面或者手机上的任何东西的大小，也就无法得出其他元素的大小。

其实，对于手机来说，有物理尺寸、像素分辨率、像素比等等，不过一般人不会记得，也没办法去心算出来这些结果。

那么最直接的参照物就是，最常用的网页字体，正文一般都用 12px，所以你可以看附近的正文，如果是 12px，那么就相当于有了一个小比例尺了。

比如下图这个字是 12px ：

你大概就能估计出蓝灰文字中间的间距也就是 5~6px 了，所以你只需要记住几个常见的字号在各种设备上的长相，那么你就有了一系列的比例尺了。

这里没有考虑放大因素，retina 屏等等，如果把这些都考虑进去的话，那么我想“100像素有多宽”也是一道不错的面试题。

总结

像素眼其实很容易训练的，初期的时候可以多注意一下小鸡君上面提到的重灾区，往往会有收获。

慢慢地就会对这些差异越来越敏感，再后来你就可以瞬间看出页面上的各种瑕疵了，这真的不是处女座的神技，任何人都可以的。

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!