處女座速成法！設計師的像素眼是怎樣煉成的？

@姬小光?：傳說的像素眼，也就是可以快速分辨出 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像素有多寬”也是一道不錯的面試題。

總結

像素眼其實很容易訓練的，初期的時候可以多注意一下小雞君上面提到的重災區，往往會有收獲。

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

作者微信公眾號，歡迎關注喲。

【優設職場經驗合集】

總監過來人的經驗分享！
《總監必備技！聊聊如何做好設計師管理？》

如何管理兩種不同類型的設計師？
《總監修煉之路！如何管理才氣型/實干型的設計師？》

人氣超旺的職場真相揭秘！
《這才是真相！為什么中國的甲方都不愿意為設計付出高額費用？》

投稿者：@姬小光

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量102萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com