中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

不同字號對齊

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

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

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

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

圖片與文字對齊

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

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

我們來看下面這張圖：

乍一看總感覺歪歪扭扭，這也跟多個不同圖標組合有關(guān)，非對稱的圖標會在視覺上造成偏重的感覺。我們再看放大圖：

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

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

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

等高元素對齊

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

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

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

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

結(jié)尾元素的邊框

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

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

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

垂直居中的對齊

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

比如這個：

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

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

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

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

狀態(tài)變換時的位置抖動

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

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

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

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

像素眼的比例尺

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

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

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

比如下圖這個字是 12px ：

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

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

總結(jié)

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

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

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

作者：@姬小光