designers-pixel-eyes-1

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

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

1xsy20151022

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

那么傳說的像素眼真的有那么神奇?1px 的差異真的那么隱蔽嗎?當然不是。

下面小雞君就來分享一下這些容易被像素眼發現的重災區,只要你用心觀察,一定是可以看出差距的。

不同字號對齊

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

比如下面這張圖,底邊有 1px 沒有對齊,左側下沉了一點:

2xsy20151022

我們把截圖放到 PS 里面看一下,為了清晰,我把參考線調成了黑色:

3xsy20151022

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

圖片與文字對齊

圖片與文字對齊是網頁制作還原時的一大重災區,沒有之一。隨便打開一個網頁,幾乎十有八九可以找到對不齊的地方。

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

我們來看下面這張圖:

4xsy20151022

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

5xsy20151022

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

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

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

等高元素對齊

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

6xsy20151022

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

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

7xsy20151022

問題已經很明顯了,顯然,這里也是個重災區。

結尾元素的邊框

當多個列表元素中間有邊框相隔時,往往有些童鞋會忘記去掉結尾的邊框。這里也是重災區:

8xsy20151022

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

hb220151022

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

垂直居中的對齊

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

比如這個:

hb0151022

在視覺效果上已經比較居中了,我們看看放大效果:

9xsy20151022

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

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

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

狀態變換時的位置抖動

這是個非常隱蔽的災區,我們頁面中經常有很多操作是有狀態變換的。大家都知道,網頁的具體實現時,是用 background-image 來定位的,而兩種狀態又是互斥的,所以很多新人會忽略狀態切換時的位置變化。

比如這張圖中的收藏,單獨看兩種狀態幾乎看不出任何問題:

10xsy20151022

但是如果來回切換幾次,就會發現高亮的狀態比正常的狀態下,圖標向左挪動了 1px,我們看看大圖:

11xsy20151022

放大之后,圖標與文字間距的差異已經非常明顯了。

像素眼的比例尺

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

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

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

比如下圖這個字是 12px :

12xsy20151022

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

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

總結

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

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

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

jxgqr

【優設職場經驗合集】

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

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

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

投稿者:@姬小光

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

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

點贊
收藏

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏