摘要:這引發了對設計流程以及使用工具的新思考能否在貼近并盡量覆蓋各種真實使用環境的情況下,又易于修改答案網頁效果圖設計新思路答案是拋棄原有的在效果圖制作方法,轉而使用以及等構建真實的基礎網頁效果,最終以截圖的形式獲得效果圖展示給客戶。
舊流程:P圖傳統的PS網頁設計已經跟不上如今流式布局潮流的發展了,PS不可能把所有移動設備的尺寸都做一個版本出來。如果PS的頁面過多,期間要修改一個通用的東西,也是牽一發而動全身。網頁效果圖設計新思路:使用html+css+less完成你的任務吧!
在網頁設計的過程中,效果圖一般總是通過Photoshop做出來的。多則幾十過百的圖層以及各種PS效果的確是把網頁的樣式效果做出來了,并且也容易分塊切圖或者直接在其中取到某些圖片素材。
新思考:P的圖太多,有好多小地方要修改怎么辦?如果要用在響應式網站的設計并且內容都要使用流式布局的時候,要對每種情況都對應著去做一張PS效果圖,工程量巨大,并且顯得不太現實。另外當你需要修改網頁中某個元素的大小或背景的時候,手動對一張張PS效果圖作修改簡直是一個噩夢。
這引發了對設計流程以及使用工具的新思考:能否在貼近并盡量覆蓋各種真實使用環境的情況下, 又易于修改?
答案:網頁效果圖設計新思路答案是拋棄原有的在PS效果圖制作方法,轉而使用HTML以及CSS等構建真實的基礎網頁效果,最終以截圖的形式獲得效果圖展示給客戶。客戶對某個地方提出修改意見時,你回去執行改動也會變得很輕松,只需修改CSS中的一兩行代碼;若是使用less的話,有時只需改一個變量值,就能達到想要的效果。
或許你會抨擊這不就將樣式設計與前端代碼構建的職能混淆了嗎? 其實HTML、CSS等只是制作效果圖的工具,網站效果輪廓前后當然是差不多,但這并不是最終的前端代碼,僅用作基本的效果展示。最終網站前端實現的代碼結構,還會跟后臺輸出、適應組件化復用、還有瀏覽器兼容等有關,可以說它們完全是兩碼事。
不要害怕學習要做到蛻變,這給網頁設計者更高的要求,脫離Photoshop去學習基本的前端語言。新時代下, 網頁設計不再可能像平面設計那樣的專職于圖形圖像,還要結合Web技術來使設計更貼近瀏覽器的真實環境,同時也減少了不必要的重復勞動。
可能在固定布局的設計中,Photoshop依然是最好的工具,但流式布局響應式設計的浪潮涌來,能突破傳統結合Web技術來做設計,才能走在前端,贏在未來。
收獲的感動我多年前已經開始嘗試使用PS和前端技術混用,收到的效果很大。特別對于獨立開發者來說,我們經常要同時做UI設計和前端開發,在UI這一端使用HTML和CSS的話,后面的開發流程更加輕松,在前端開發時能參考或者復用的地方你會發現有很多,節省了你重復狂敲Emmet的時光。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/116467.html
摘要:這引發了對設計流程以及使用工具的新思考能否在貼近并盡量覆蓋各種真實使用環境的情況下,又易于修改答案網頁效果圖設計新思路答案是拋棄原有的在效果圖制作方法,轉而使用以及等構建真實的基礎網頁效果,最終以截圖的形式獲得效果圖展示給客戶。 傳統的PS網頁設計已經跟不上如今流式布局潮流的發展了,PS不可能把所有移動設備的尺寸都做一個版本出來。如果PS的頁面過多,期間要修改一個通用的東西,也是牽一發...
摘要:前言這里筑夢師是一名正在努力學習的開發工程師目前致力于全棧方向的學習希望可以和大家一起交流技術共同進步用簡書記錄下自己的學習歷程個人學習方法分享本文目錄更新說明目錄學習方法學習態度全棧開發學習路線很長知識拓展很長在這里收取很多人的建議以后決 前言 這里筑夢師,是一名正在努力學習的iOS開發工程師,目前致力于全棧方向的學習,希望可以和大家一起交流技術,共同進步,用簡書記錄下自己的學習歷程...
閱讀 2508·2021-11-15 11:38
閱讀 1958·2021-11-05 09:37
閱讀 2279·2021-10-08 10:12
閱讀 2816·2019-08-30 15:55
閱讀 2117·2019-08-30 15:52
閱讀 1230·2019-08-29 13:24
閱讀 469·2019-08-26 18:27
閱讀 1480·2019-08-26 18:27