設計理論:網頁像素誤差的解決方案

來源:互聯網
上載者:User

像素誤差

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

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

解決方案

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

標註:

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

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

效果如下:



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。