QQ空間項目組視覺設計的啟發

像素誤差

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

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

解決方法

怎麼更好的解決像素差的問題呢？ISD Webteam眾人一陣頭腦風暴過後得出了結論—標注。

所謂“標注”，泛指標示距離的牌柱或特制的目標。對頁面設計稿進行標注，可以大大降低像素誤差，尤其適用於portal類產品。

目前在Qzone項目組進行標注的內容包括：頁面行寬、間距、對齊等關鍵點的具體像素數值。為了易於識別，標注以圖標“I”為標示，使用紅色12號新宋體。

效果如下：

執行

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

反饋

很快的收到了頁面重構同事的反饋：

標注作為參考，約定，相比設計原型，更為精細；

能更快捷地了解設計稿的意圖，減少了溝通成本；

能節省更多重復的測量工作；

增強了下游環節包括開發線對還原視覺稿的意識。

反饋中也有很多改進建議，比如：更注重文本行間數值的標注，更多的關注間距、元素寬高、顏色值、邊框寬度、字體大小、文本段落行等的標注。這些建議，還需要我們在後續實際工作中來不斷優化了。 

一些收獲

第一：視覺設計師，會更加注意行高與間距，在視覺上能夠最精准還原到所設計的樣式以保證體驗順暢，3lian素材，強調設計還原與網頁的品質；更容易關注到視覺層次的設計，容易形成統一的視覺規范和品牌；

第二：重構工程師，會更加可控和高效，方便重構工程師在最短時間內做出頁面及模板；也提高還原設計稿的意識，降低還原的難度；

第三：引導開發線的同事對細節的重視；

第四：將最完美的界面體驗呈現在用戶面前；

隨著互聯網產品變化的速度越來越快，我們面對的設計工作也越來越復雜，這需要我們找到更多、更好的方法來提高效率，提升品質。

“標注”，也許就是一次卓有成效的嘗試。