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

作者：@姬小光

传说的像素眼，也就是可以快速分辨出 1px 以上差异的双眼，往往由资深设计师所 get√，想要练就一双迷人的像素眼，除了常年累月的经验之外，还是有些技巧可以快速掌握的。今天分享7个像素眼的常用场合，按图索骥，用心观察，你也可以修炼成功！

小鸡君本人是个苦逼程序员，但小鸡君的像素眼也不比任何一个设计师差。当然了，距离真正的像素眼神人还是有很大差距的，比如下面这种游戏，小鸡君还真是玩不起：

不过对于平常的工作来说，比如还原个视觉稿什么的，小鸡君的双眼还是绰绰有余的（不是指个数）。

那么传说的像素眼真的有那么神奇？1px 的差异真的那么隐蔽吗？当然不是。

下面小鸡君就来分享一下这些容易被像素眼发现的重灾区，只要你用心观察，一定是可以看出差距的。

一、不同字号对齐

大小字号搭配，是最容易分清主次信息的手法了。在页面的具体实现过程中，也很容易忽略这里的对齐问题。所以，这里往往是展示你像素眼技能的好地方。

比如下面这张图，底边有 1px 没有对齐，左侧下沉了一点：

我们把截图放到 PS 里面看一下，为了清晰，我把参考线调成了黑色：

可以看到，左侧的销售价三个字的底部已经有 1px 在参考线以下了。所以下次，作为一个追求极致的设计师，再看到页面时就可以先关注一下这种地方，一定会有意想不到的收获。

二、图片与文字对齐

图片与文字对齐是网页制作还原时的一大重灾区，没有之一。随便打开一个网页，几乎十有八九可以找到对不齐的地方。

之所以会如此严重，一方面与从业人员经验有关，另外，不同浏览器关于垂直居中的兼容性问题也确实比较多。对于一些不太主流的浏览器，也不会要求 100% 还原设计稿了，几个像素的差距是可以接受的。

我们来看下面这张图：

乍一看总感觉歪歪扭扭，这也跟多个不同图标组合有关，非对称的图标会在视觉上造成偏重的感觉。我们再看放大图：

其实单从图标上看，已经是对齐的了。左侧的眼睛上下紧贴参考线边缘，而另外两个图标上下各留 1px。

但是，如果你看得足够仔细，你会发现数字的上方距离参考线是 4px，而下方距离参考线是 3px。那么问题来了，16px 高的眼睛图标，如何能与 9px 高的数字垂直居中对齐？

答案是：不可棱！ (16px – 9px)/2 = 3.5px，网页上是没有 0.5px 的，所以只能一个 3px 一个 4px。所以，如果设计稿就是酱紫，那就永远无法对齐了。

三、等高元素对齐

等高元素对齐也是很常见的，比如下图这种两个等高的按钮：

这种设计有个小问题，就是右侧的浅色边框与左侧的色块放在一起的时候，视觉上就会感觉右侧的高度少一点。因为右侧的边框太接近白色背景，而左侧的对比则比较明显，边界更清晰。

但是我想说的不是这个问题，而是这张图里面的两个按钮，确实在垂直方向上错开了 1px，我们来看放大图：

问题已经很明显了，显然，这里也是个重灾区。

四、结尾元素的边框

当多个列表元素中间有边框相隔时，往往有些童鞋会忘记去掉结尾的边框。这里也是重灾区：

这张图乍一看像是加了个阴影特效，貌似效果还不错。但是有些设计的配色，就不一定有这么好的效果了。我们来看看放大图：

所以，在有多个列表元素并带有边框时，大家就要注意一下第一个元素（有的时候是左侧边框或者上边框）和最后一个元素了。

五、垂直居中的对齐

其实前面说的很多都是垂直居中对齐，可见页面仔实现垂直居中有多么难了。对于最常见的按钮，中间带文字的，也是很容易对不齐的。

比如这个：

在视觉效果上已经比较居中了，我们看看放大效果：

从技术上来说，这个已经算是垂直居中了。汉字的 baseline 在底部，所以真正的底部是“煮”字下面多出那四个点的底部，也就是第三条线的位置。

（编辑：应用网_丽江站长网）

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