傳說的像素眼，也就是可以快速分辨出 1px 以上差異的雙眼，往往由資深設(shè)計(jì)師所 get√，想要練就一雙迷人的像素眼，除了常年累月的經(jīng)驗(yàn)之外，還是有些技巧可以快速掌握的。今天分享7個(gè)像素眼的常用場(chǎng)合，按圖索驥，用心觀察，你也可以修煉成功！

小雞君本人是個(gè)苦逼程序員，但小雞君的像素眼也不比任何一個(gè)設(shè)計(jì)師差。當(dāng)然了，距離真正的像素眼神人還是有很大差距的，比如下面這種游戲，小雞君還真是玩不起：

不過對(duì)于平常的工作來說，比如還原個(gè)視覺稿什么的，小雞君的雙眼還是綽綽有余的（不是指?jìng)€(gè)數(shù)）。

那么傳說的像素眼真的有那么神奇？1px 的差異真的那么隱蔽嗎？當(dāng)然不是。

下面小雞君就來分享一下這些容易被像素眼發(fā)現(xiàn)的重災(zāi)區(qū)，只要你用心觀察，一定是可以看出差距的。

不同字號(hào)對(duì)齊

大小字號(hào)搭配，是最容易分清主次信息的手法了。在頁(yè)面的具體實(shí)現(xiàn)過程中，也很容易忽略這里的對(duì)齊問題。所以，這里往往是展示你像素眼技能的好地方。

比如下面這張圖，底邊有 1px 沒有對(duì)齊，左側(cè)下沉了一點(diǎn)：

我們把截圖放到 PS 里面看一下，為了清晰，我把參考線調(diào)成了黑色：

可以看到，左側(cè)的銷售價(jià)三個(gè)字的底部已經(jīng)有 1px 在參考線以下了。所以下次，作為一個(gè)追求極致的設(shè)計(jì)師，再看到頁(yè)面時(shí)就可以先關(guān)注一下這種地方，一定會(huì)有意想不到的收獲。

圖片與文字對(duì)齊

圖片與文字對(duì)齊是網(wǎng)頁(yè)制作還原時(shí)的一大重災(zāi)區(qū)，沒有之一。隨便打開一個(gè)網(wǎng)頁(yè)，幾乎十有八九可以找到對(duì)不齊的地方。

之所以會(huì)如此嚴(yán)重，一方面與從業(yè)人員經(jīng)驗(yàn)有關(guān)，另外，不同瀏覽器關(guān)于垂直居中的兼容性問題也確實(shí)比較多。對(duì)于一些不太主流的瀏覽器，也不會(huì)要求 100% 還原設(shè)計(jì)稿了，幾個(gè)像素的差距是可以接受的。

我們來看下面這張圖：

乍一看總感覺歪歪扭扭，這也跟多個(gè)不同圖標(biāo)組合有關(guān)，非對(duì)稱的圖標(biāo)會(huì)在視覺上造成偏重的感覺。我們?cè)倏捶糯髨D：

其實(shí)單從圖標(biāo)上看，已經(jīng)是對(duì)齊的了。左側(cè)的眼睛上下緊貼參考線邊緣，而另外兩個(gè)圖標(biāo)上下各留 1px。

但是，如果你看得足夠仔細(xì)，你會(huì)發(fā)現(xiàn)數(shù)字的上方距離參考線是 4px，而下方距離參考線是 3px。那么問題來了，16px 高的眼睛圖標(biāo)，如何能與 9px 高的數(shù)字垂直居中對(duì)齊？

答案是：不可棱！ (16px – 9px)/2 = 3.5px，網(wǎng)頁(yè)上是沒有 0.5px 的，所以只能一個(gè) 3px 一個(gè) 4px。所以，如果設(shè)計(jì)稿就是醬紫，那就永遠(yuǎn)無(wú)法對(duì)齊了。

等高元素對(duì)齊

等高元素對(duì)齊也是很常見的，比如下圖這種兩個(gè)等高的按鈕：

這種設(shè)計(jì)有個(gè)小問題，就是右側(cè)的淺色邊框與左側(cè)的色塊放在一起的時(shí)候，視覺上就會(huì)感覺右側(cè)的高度少一點(diǎn)。因?yàn)橛覀?cè)的邊框太接近白色背景，而左側(cè)的對(duì)比則比較明顯，邊界更清晰。

但是我想說的不是這個(gè)問題，而是這張圖里面的兩個(gè)按鈕，確實(shí)在垂直方向上錯(cuò)開了 1px，我們來看放大圖：

問題已經(jīng)很明顯了，顯然，這里也是個(gè)重災(zāi)區(qū)。

結(jié)尾元素的邊框

當(dāng)多個(gè)列表元素中間有邊框相隔時(shí)，往往有些童鞋會(huì)忘記去掉結(jié)尾的邊框。這里也是重災(zāi)區(qū)：

這張圖乍一看像是加了個(gè)陰影特效，貌似效果還不錯(cuò)。但是有些設(shè)計(jì)的配色，就不一定有這么好的效果了。我們來看看放大圖：

所以，在有多個(gè)列表元素并帶有邊框時(shí)，大家就要注意一下第一個(gè)元素（有的時(shí)候是左側(cè)邊框或者上邊框）和最后一個(gè)元素了。

垂直居中的對(duì)齊

其實(shí)前面說的很多都是垂直居中對(duì)齊，可見頁(yè)面仔實(shí)現(xiàn)垂直居中有多么難了。對(duì)于最常見的按鈕，中間帶文字的，也是很容易對(duì)不齊的。

比如這個(gè)：

在視覺效果上已經(jīng)比較居中了，我們看看放大效果：

從技術(shù)上來說，這個(gè)已經(jīng)算是垂直居中了。漢字的 baseline 在底部，所以真正的底部是“煮”字下面多出那四個(gè)點(diǎn)的底部，也就是第三條線的位置。

如果按照第二條線來劃分，剛好上下都是 9px。但是這張圖上，除了“煮”字的底部多了 1px，其他都是對(duì)齊的。所以視覺效果上的底線應(yīng)該是在第二條線的位置，也就是上面 9px 下面 10px，所以會(huì)感覺有一點(diǎn)點(diǎn)偏。

這種情況與字體息息相關(guān)，也沒有什么好辦法，如果內(nèi)容固定的話，可以考慮為了視覺偏重而刻意采用不對(duì)稱的間距，以此來彌補(bǔ)視覺的偏重。

狀態(tài)變換時(shí)的位置抖動(dòng)

這是個(gè)非常隱蔽的災(zāi)區(qū)，我們頁(yè)面中經(jīng)常有很多操作是有狀態(tài)變換的。大家都知道，網(wǎng)頁(yè)的具體實(shí)現(xiàn)時(shí)，是用 background-image 來定位的，而兩種狀態(tài)又是互斥的，所以很多新人會(huì)忽略狀態(tài)切換時(shí)的位置變化。

比如這張圖中的收藏，單獨(dú)看兩種狀態(tài)幾乎看不出任何問題：

但是如果來回切換幾次，就會(huì)發(fā)現(xiàn)高亮的狀態(tài)比正常的狀態(tài)下，圖標(biāo)向左挪動(dòng)了 1px，我們看看大圖：

放大之后，圖標(biāo)與文字間距的差異已經(jīng)非常明顯了。

像素眼的比例尺

好了，講了這么多像素眼可以發(fā)揮的重災(zāi)區(qū)，再講一個(gè)參照物小技巧。很多人剛一開始沒有任何參照物，根本不知道頁(yè)面或者手機(jī)上的任何東西的大小，也就無(wú)法得出其他元素的大小。

其實(shí)，對(duì)于手機(jī)來說，有物理尺寸、像素分辨率、像素比等等，不過一般人不會(huì)記得，也沒辦法去心算出來這些結(jié)果。

那么最直接的參照物就是，最常用的網(wǎng)頁(yè)字體，正文一般都用 12px，所以你可以看附近的正文，如果是 12px，那么就相當(dāng)于有了一個(gè)小比例尺了。

比如下圖這個(gè)字是 12px ：

你大概就能估計(jì)出藍(lán)灰文字中間的間距也就是 5~6px 了，所以你只需要記住幾個(gè)常見的字號(hào)在各種設(shè)備上的長(zhǎng)相，那么你就有了一系列的比例尺了。

這里沒有考慮放大因素，retina 屏等等，如果把這些都考慮進(jìn)去的話，那么我想“100像素有多寬”也是一道不錯(cuò)的面試題。

總結(jié)

像素眼其實(shí)很容易訓(xùn)練的，初期的時(shí)候可以多注意一下小雞君上面提到的重災(zāi)區(qū)，往往會(huì)有收獲。

慢慢地就會(huì)對(duì)這些差異越來越敏感，再后來你就可以瞬間看出頁(yè)面上的各種瑕疵了，這真的不是處女座的神技，任何人都可以的。

原文來自：優(yōu)設(shè)

作者：@姬小光