淺析百分百還原網站效果圖的可行性分析

最近和朋友交流，說到作好的頁面和美工效果圖的偏差問題，看能不能百分百還原。根據哲學的角度來講，偏差只能縮小不能消滅。

就一些問題附上個人說明：

1、文字方面

PS文字 字體大小：144px；行高：204px。（黃色是是html的截圖，紅色的是ps的截圖，）

區別：

（1）字體這邊基本是吻合的，底部和右側偏差1像素左右

（2）區域相差比較大，兩個黑色框表明各自的區域，html行高第一行和最後一行的字體上下都有很大的距離

html是上邊37像素，下邊29像素，中間兩個文字的距離是66像素，文字高137像素。

效果圖是上邊5像素，下邊19.5像素，中間兩個文字的距離是66像素，文字高137像素。

彷佛無章可循。不知道之間的轉換關係是什麼樣的，歡迎你們留言，一塊兒探討。

2、圖標，建議用阿里巴巴圖標，網址http://www.iconfont.cn/，美工製做的時候本身在用的同時，加入購物車中，每一個項目能夠新建一個文件夾，方便管理。

Iconfont 就是指用字體文件取代圖片文件，來展現圖標、特殊字體等元素的一種方法。

阿里巴巴圖標的好處：

（1）資源豐富，涵蓋了大部分須要的圖標，能夠節省美工時間，提升效率。

（2）美工若是有本身的首創的圖形，也能夠進行上傳，一次設計，終身使用。

（3）對於前端來講，加載文件體積小，矢量圖，不變形，兼容性好，支持css能夠直接經過代碼改變大小和顏色。

 

 

 

3、統一，組建化

美工設計的時候，不妨先和前端制定一些規則，好比一級標題，二級標題的字體顏色，樣式的標準化，可使代碼重複使用，而不會出現無章可循，生無可戀的現象。

 

3、標註文件，好比SKETCH設計生成的頁面會有一個Marketch，輔助衡量尺寸，對於前端的製做大有裨益。

 4、極端狀況的處理

在製做效果圖的時候，對於文字、圖片的展示方式，總會有極端狀況產生，好比，效果圖圖片展現是一行，若是出現多張圖片怎麼處理，省略仍是換行展現；文字的展現是鋪開展現，仍是超出必定的寬度進行隱藏或者添加省略號。開始設計效果圖時候就思考的多一點，對於後來的頁面製做和數據交互會有很大的好處。

 好比這個標題就是超出多少文字後出現省略號。

5、詳情的文檔或圖片說明，以及用到的小圖片。

（1）涉及一些交互，好比，鼠標點擊的範圍，是文字上，仍是一塊區域，這就須要詳盡的圖來展現，或者文檔來講明，畢竟按照常規作完，出現不符合您心理想象的，返工會須要不少的時間，不如一步到位來的好。

（2）文字間距，大小，顏色標明。

（3）對於PS中用的圖標，能夠按頁面放到不一樣的文件夾中，若是頁面比較少，則放到一個文件夾中也是能夠的。命名儘可能用英文或者阿拉伯數字，儘可能不出現中文。大小能夠經過 @2x來區分。圖片要儘可能壓縮在200k如下。