像素誤差
看自己設(shè)計好上線的網(wǎng)站，偶爾會發(fā)覺像素行間出現(xiàn)了彈性空間，總在不經(jīng)意間蹦出一定的差距。有些頁面很難發(fā)現(xiàn)，比如活動類頁面，這類頁面多呈不規(guī)則造型，在設(shè)計上也更加靈活多變。但在portal類的頁面設(shè)計上，像導(dǎo)航、登錄框、行距等，幾個像素的誤差可能就會影響到用戶的感受。這時，像素誤差問題就很直觀了。

面對不斷成長的用戶，Qzone的平臺、活動等不斷的推陳出新，新的視覺觀感、新的操作方式、新的體驗等等都在追求盡善盡美。但由于時間進(jìn)度和對界面的不同理解，以及上線前開發(fā)聯(lián)調(diào)等原因，導(dǎo)致線上的頁面和設(shè)計稿對比，會出現(xiàn)幾個像素的誤差。這看似不起眼的像素誤差，可能導(dǎo)致用戶無法實現(xiàn)操作目標(biāo)，增加用戶的操作成本，讓用戶沮喪，讓我們產(chǎn)品的體驗大打折扣。如何讓視覺設(shè)計師輸出的設(shè)計稿能更加準(zhǔn)確無誤的展現(xiàn)在用戶面前，是一個問題。

解決方法
怎么更好的解決像素差的問題呢？ISD Webteam眾人一陣頭腦風(fēng)暴過后得出了結(jié)論—標(biāo)注。

所謂“標(biāo)注”，泛指標(biāo)示距離的牌柱或特制的目標(biāo)。對頁面設(shè)計稿進(jìn)行標(biāo)注，可以大大降低像素誤差，尤其適用于portal類產(chǎn)品。

目前在Qzone項目組進(jìn)行標(biāo)注的內(nèi)容包括：頁面行寬、間距、對齊等關(guān)鍵點的具體像素數(shù)值。為了易于識別，標(biāo)注以圖標(biāo)“I”為標(biāo)示，使用紅色12號新宋體。

效果如下：

執(zhí)行
剛開始執(zhí)行的時候覺得花的時間較多，不能充分的享受設(shè)計完成后的愉悅，而要面對增設(shè)標(biāo)注這項“浩大”的工程，枯燥的放大，拉取標(biāo)尺，移動水平線，填寫數(shù)據(jù)，還是難免覺得麻煩。也會不經(jīng)意的疑惑，這樣真的能更利于制作和減小像素差嗎？

反饋
很快的收到了頁面重構(gòu)同事的反饋：
標(biāo)注作為參考，約定，相比設(shè)計原型，更為精細(xì)；
能更快捷地了解設(shè)計稿的意圖，減少了溝通成本；
能節(jié)省更多重復(fù)的測量工作；
增強(qiáng)了下游環(huán)節(jié)包括開發(fā)線對還原視覺稿的意識。

反饋中也有很多改進(jìn)建議，比如：更注重文本行間數(shù)值的標(biāo)注，更多的關(guān)注間距、元素寬高、顏色值、邊框?qū)挾取⒆煮w大小、文本段落行等的標(biāo)注。這些建議，還需要我們在后續(xù)實際工作中來不斷優(yōu)化了。

一些收獲
第一：視覺設(shè)計師，會更加注意行高與間距，在視覺上能夠最精準(zhǔn)還原到所設(shè)計的樣式以保證體驗順暢，強(qiáng)調(diào)設(shè)計還原與網(wǎng)頁的品質(zhì)；更容易關(guān)注到視覺層次的設(shè)計，容易形成統(tǒng)一的視覺規(guī)范和品牌；
第二：重構(gòu)工程師，會更加可控和高效，方便重構(gòu)工程師在最短時間內(nèi)做出頁面及模板；也提高還原設(shè)計稿的意識，降低還原的難度；
第三：引導(dǎo)開發(fā)線的同事對細(xì)節(jié)的重視；
第四：將最完美的界面體驗呈現(xiàn)在用戶面前；

隨著互聯(lián)網(wǎng)產(chǎn)品變化的速度越來越快，我們面對的設(shè)計工作也越來越復(fù)雜，這需要我們找到更多、更好的方法來提高效率，提升品質(zhì)。

“標(biāo)注”，也許就是一次卓有成效的嘗試。

原文：http://webteam.tencent.com/?p=892