Web設計流程優化：網頁效果圖設計新思路

傳統的PS網頁設計已經跟不上現在流式佈局潮流的發展了，PS不可能把全部移動設備的尺寸都作一個版本出來。若是PS的頁面過多，期間要修改一個通用的東西，也是牽一髮而動全身。網頁效果圖設計新思路：使用html+css+less完成你的任務吧！

舊流程：P圖

在網頁設計的過程當中，效果圖通常老是經過Photoshop作出來的。多則幾十過百的圖層以及各類PS效果的確是把網頁的樣式效果作出來了，而且也容易分塊切圖或者直接在其中取到某些圖片素材。

新思考：P的圖太多，有好多小地方要修改怎麼辦？

若是要用在響應式網站的設計而且內容都要使用流式佈局的時候，要對每種狀況都對應着去作一張PS效果圖，工程量巨大，而且顯得不太現實。另外當你須要修改網頁中某個元素的大小或背景的時候，手動對一張張PS效果圖做修改簡直是一個噩夢。

這引起了對設計流程以及使用工具的新思考：可否在貼近並儘可能覆蓋各類真實使用環境的狀況下， 又易於修改？

答案：網頁效果圖設計新思路

答案是拋棄原有的在PS效果圖製做方法，轉而使用HTML以及CSS等構建真實的基礎網頁效果，最終以截圖的形式得到效果圖展現給客戶。客戶對某個地方提出修改意見時，你回去執行改動也會變得很輕鬆，只需修改CSS中的一兩行代碼；如果使用less的話，有時只需改一個變量值，就能達到想要的效果。

或許你會抨擊這不就將樣式設計與前端代碼構建的職能混淆了嗎？ 其實HTML、CSS等只是製做效果圖的工具，網站效果輪廓先後固然是差很少，但這並非最終的前端代碼，僅用做基本的效果展現。最終網站前端實現的代碼結構，還會跟後臺輸出、適應組件化複用、還有瀏覽器兼容等有關，能夠說它們徹底是兩碼事。

不要懼怕學習

要作到蛻變，這給網頁設計者更高的要求，脫離Photoshop去學習基本的前端語言。新時代下， 網頁設計再也不可能像平面設計那樣的專職於圖形圖像，還要結合Web技術來使設計更貼近瀏覽器的真實環境，同時也減小了沒必要要的重複勞動。

可能在固定佈局的設計中，Photoshop依然是最好的工具，但流式佈局響應式設計的浪潮涌來，能突破傳統結合Web技術來作設計，才能走在前端，贏在將來。

收穫的感動

我多年前已經開始嘗試使用PS和前端技術混用，收到的效果很大。特別對於獨立開發者來講，咱們常常要同時作UI設計和前端開發，在UI這一端使用HTML和CSS的話，後面的開發流程更加輕鬆，在前端開發時能參考或者複用的地方你會發現有不少，節省了你重複狂敲Emmet的時光。