速成法如何炼成设计师的像素眼

速成法:如何炼成设计师的像素眼？作者:一网学最后更新时间：2015-10-2310:15:32小编：传说的像素眼，也就是可以快速分辨出1px以上差异的双眼，往往由资深设计师所get√，想要练就一双迷人的像素眼，除了常年累月的经验之外，还是有些技巧可以快速掌握的。今天分享7个像素眼的常用场合，按图索骥，用心观察，你也可以修炼成功！传说的像素眼真的有那么神奇？1px的差异真的那么隐蔽吗？当然不是。下面小鸡君就来分享一下这些容易被像素眼发现的重灾区，只要你用心观察，一定是可以看出差距的。不同字号对齐大小字号搭配，是最容易分清主次信息的手法了。在页面的具体实现过程中，也很容易忽略这里的对齐问题。所以，这里往往是展示你像素眼技能的好地方。比如下面这张图，底边有1px没有对齐，左侧下沉了一点：我们把截图放到PS里面看一下，为了清晰，我把参考线调成了黑色：可以看到，左侧的销售价三个字的底部已经有1px在参考线以下了。所以下次，作为一个追求极致的设计师，再看到页面时就可以先关注一下这种地方，一定会有意想不到的收获。图片与文字对齐图片与文字对齐是网页制作还原时的一大重灾区，没有之一。随便打开一个网页，几乎十有八九可以找到对不齐的地方。之所以会如此严重，一方面与从业人员经验有关，另外，不同浏览器关于垂直居中的兼容性问题也确实比较多。对于一些不太主流的浏览器，也不会要求100%还原设计稿了，几个像素的差距是可以接受的。我们来看下面这张图：乍一看总感觉歪歪扭扭，这也跟多个不同图标组合有关，非对称的图标会在视觉上造成偏重的感觉。我们再看放大图：其实单从图标上看，已经是对齐的了。左侧的眼睛上下紧贴参考线边缘，而另外两个图标上下各留1px。但是，如果你看得足够仔细，你会发现数字的上方距离参考线是4px，而下方距离参考线是3px。那么问题来了，16px高的眼睛图标，如何能与9px高的数字垂直居中对齐？答案是：不可棱！(16px–9px)/2=3.5px，网页上是没有0.5px的，所以只能一个3px一个4px。所以，如果设计稿就是酱紫，那就永远无法对齐了。等高元素对齐等高元素对齐也是很常见的，比如下图这种两个等高的按钮：这种设计有个小问题，就是右侧的浅色边框与左侧的色块放在一起的时候，视觉上就会感觉右侧的高度少一点。因为右侧的边框太接近白色背景，而左侧的对比则比较明显，边界更清晰。但是我想说的不是这个问题，而是这张图里面的两个按钮，确实在垂直方向上错开了1px，我们来看放大图：问题已经很明显了，显然，这里也是个重灾区。结尾元素的边框当多个列表元素中间有边框相隔时，往往有些童鞋会忘记去掉结尾的边框。这里也是重灾区：这张图乍一看像是加了个阴影特效，貌似效果还不错。但是有些设计的配色，就不一定有这么好的效果了。我们来看看放大图：所以，在有多个列表元素并带有边框时，大家就要注意一下第一个元素（有的时候是左侧边框或者上边框）和最后一个元素了。垂直居中的对齐其实前面说的很多都是垂直居中对齐，可见页面仔实现垂直居中有多么难了。对于最常见的按钮，中间带文字的，也是很容易对不齐的。比如这个：在视觉效果上已经比较居中了，我们看看放大效果：从技术上来说，这个已经算是垂直居中了。汉字的baseline在底部，所以真正的底部是“煮”字下面多出那四个点的底部，也就是第三条线的位置。如果按照第二条线来划分，刚好上下都是9px。但是这张图上，除了“煮”字的底部多了1px，其他都是对齐的。所以视觉效果上的底线应该是在第二条线的位置，也就是上面9px下面10px，所以会感觉有一点点偏。这种情况与字体息息相关，也没有什么好办法，如果内容固定的话，可以考虑为了视觉偏重而刻意采用不对称的间距，以此来弥补视觉的偏重。状态变换时的位置抖动这是个非常隐蔽的灾区，我们页面中经常有很多操作是有状态变换的。大家都知道，网页的具体实现时，是用background-image来定位的，而两种状态又是互斥的，所以很多新人会忽略状态切换时的位置变化。比如这张图中的收藏，单独看两种状态几乎看不出任何问题：但是如果来回切换几次，就会发现高亮的状态比正常的状态下，图标向左挪动了1px，我们看看大图：放大之后，图标与文字间距的差异已经非常明显了。像素眼的比例尺好了，讲了这么多像素眼可以发挥的重灾区，再讲一个参照物小技巧。很多人刚一开始没有任何参照物，根本不知道页面或者手机上的任何东西的大小，也就无法得出其他元素的大小。其实，对于手机来说，有物理尺寸、像素分辨率、像素比等等，不过一般人不会记得，也没办法去心算出来这些结果。那么最直接的参照物就是，最常用的网页字体，正文一般都用12px，所以你可以看附近的正文，如果是12px，那么就相当于有了一个小比例尺了。比如下图这个字是12px：你大概就能估计出蓝灰文字中间的间距也就是5~6px了，所以你只需要记住几个常见的字号在各种设备上的长相，那么你就有了一系列的比例尺了。这里没有考虑放大因素，retina屏等等，如果把这些都考虑进去的话，那么我想“100像素有多宽”也是一道不错的面试题。总结像素眼其实很容易训练的，初期的时候可以多注意一下小鸡君上面提到的重灾区，往往会有收获。慢慢地就会对这些差异越来越敏感，再后来你就可以瞬间看出页面上的各种瑕疵了，这真的不是处女座的神技，任何人都可以的。投稿者：姬小光推荐阅读：设计误区：20个设计新手常见的排版问题摄影后期：手把手教你调出日剧风格的照片干货：深度解析摄影构图的的3大作用！【一网学原创文章投稿邮箱：[e-mail]】点击：3关键字：像素科普经验分享设计师