資訊專欄INFORMATION COLUMN
摘要：這引發(fā)了對設(shè)計流程以及使用工具的新思考能否在貼近并盡量覆蓋各種真實使用環(huán)境的情況下，又易于修改答案網(wǎng)頁效果圖設(shè)計新思路答案是拋棄原有的在效果圖制作方法，轉(zhuǎn)而使用以及等構(gòu)建真實的基礎(chǔ)網(wǎng)頁效果，最終以截圖的形式獲得效果圖展示給客戶。
舊流程：P圖傳統(tǒng)的PS網(wǎng)頁設(shè)計已經(jīng)跟不上如今流式布局潮流的發(fā)展了，PS不可能把所有移動設(shè)備的尺寸都做一個版本出來。如果PS的頁面過多，期間要修改一個通用的東西，也是牽一發(fā)而動全身。網(wǎng)頁效果圖設(shè)計新思路：使用html+css+less完成你的任務(wù)吧！
在網(wǎng)頁設(shè)計的過程中，效果圖一般總是通過Photoshop做出來的。多則幾十過百的圖層以及各種PS效果的確是把網(wǎng)頁的樣式效果做出來了，并且也容易分塊切圖或者直接在其中取到某些圖片素材。
新思考：P的圖太多，有好多小地方要修改怎么辦？如果要用在響應(yīng)式網(wǎng)站的設(shè)計并且內(nèi)容都要使用流式布局的時候，要對每種情況都對應(yīng)著去做一張PS效果圖，工程量巨大，并且顯得不太現(xiàn)實。另外當(dāng)你需要修改網(wǎng)頁中某個元素的大小或背景的時候，手動對一張張PS效果圖作修改簡直是一個噩夢。
這引發(fā)了對設(shè)計流程以及使用工具的新思考：能否在貼近并盡量覆蓋各種真實使用環(huán)境的情況下， 又易于修改？
答案：網(wǎng)頁效果圖設(shè)計新思路答案是拋棄原有的在PS效果圖制作方法，轉(zhuǎn)而使用HTML以及CSS等構(gòu)建真實的基礎(chǔ)網(wǎng)頁效果，最終以截圖的形式獲得效果圖展示給客戶。客戶對某個地方提出修改意見時，你回去執(zhí)行改動也會變得很輕松，只需修改CSS中的一兩行代碼；若是使用less的話，有時只需改一個變量值，就能達到想要的效果。
或許你會抨擊這不就將樣式設(shè)計與前端代碼構(gòu)建的職能混淆了嗎？ 其實HTML、CSS等只是制作效果圖的工具，網(wǎng)站效果輪廓前后當(dāng)然是差不多，但這并不是最終的前端代碼，僅用作基本的效果展示。最終網(wǎng)站前端實現(xiàn)的代碼結(jié)構(gòu)，還會跟后臺輸出、適應(yīng)組件化復(fù)用、還有瀏覽器兼容等有關(guān)，可以說它們完全是兩碼事。
不要害怕學(xué)習(xí)要做到蛻變，這給網(wǎng)頁設(shè)計者更高的要求，脫離Photoshop去學(xué)習(xí)基本的前端語言。新時代下， 網(wǎng)頁設(shè)計不再可能像平面設(shè)計那樣的專職于圖形圖像，還要結(jié)合Web技術(shù)來使設(shè)計更貼近瀏覽器的真實環(huán)境，同時也減少了不必要的重復(fù)勞動。
可能在固定布局的設(shè)計中，Photoshop依然是最好的工具，但流式布局響應(yīng)式設(shè)計的浪潮涌來，能突破傳統(tǒng)結(jié)合Web技術(shù)來做設(shè)計，才能走在前端，贏在未來。
收獲的感動我多年前已經(jīng)開始嘗試使用PS和前端技術(shù)混用，收到的效果很大。特別對于獨立開發(fā)者來說，我們經(jīng)常要同時做UI設(shè)計和前端開發(fā)，在UI這一端使用HTML和CSS的話，后面的開發(fā)流程更加輕松，在前端開發(fā)時能參考或者復(fù)用的地方你會發(fā)現(xiàn)有很多，節(jié)省了你重復(fù)狂敲Emmet的時光。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116467.html
摘要：這引發(fā)了對設(shè)計流程以及使用工具的新思考能否在貼近并盡量覆蓋各種真實使用環(huán)境的情況下，又易于修改答案網(wǎng)頁效果圖設(shè)計新思路答案是拋棄原有的在效果圖制作方法，轉(zhuǎn)而使用以及等構(gòu)建真實的基礎(chǔ)網(wǎng)頁效果，最終以截圖的形式獲得效果圖展示給客戶。 傳統(tǒng)的PS網(wǎng)頁設(shè)計已經(jīng)跟不上如今流式布局潮流的發(fā)展了，PS不可能把所有移動設(shè)備的尺寸都做一個版本出來。如果PS的頁面過多，期間要修改一個通用的東西，也是牽一發(fā)...
摘要：先來看一張系統(tǒng)前后端架構(gòu)模型圖。一種接口的約定本文用于定義一種統(tǒng)一的接口設(shè)計方案，希望具有參考價值。，和都是常見的軟件架構(gòu)設(shè)計模式，它通過分離關(guān)注點來改進代碼的組織方式。 如何無痛降低 if else 面條代碼復(fù)雜度 相信不少同學(xué)在維護老項目時，都遇到過在深深的 if else 之間糾纏的業(yè)務(wù)邏輯。面對這樣的一團亂麻，簡單粗暴地繼續(xù)增量修改常常只會讓復(fù)雜度越來越高，可讀性越來越差，有沒...
摘要：前言這里筑夢師是一名正在努力學(xué)習(xí)的開發(fā)工程師目前致力于全棧方向的學(xué)習(xí)希望可以和大家一起交流技術(shù)共同進步用簡書記錄下自己的學(xué)習(xí)歷程個人學(xué)習(xí)方法分享本文目錄更新說明目錄學(xué)習(xí)方法學(xué)習(xí)態(tài)度全棧開發(fā)學(xué)習(xí)路線很長知識拓展很長在這里收取很多人的建議以后決 前言 這里筑夢師,是一名正在努力學(xué)習(xí)的iOS開發(fā)工程師,目前致力于全棧方向的學(xué)習(xí),希望可以和大家一起交流技術(shù),共同進步,用簡書記錄下自己的學(xué)習(xí)歷程...
閱讀 2504·2021-11-15 11:38
閱讀 1948·2021-11-05 09:37
閱讀 2256·2021-10-08 10:12
閱讀 2807·2019-08-30 15:55
閱讀 2112·2019-08-30 15:52
閱讀 1220·2019-08-29 13:24
閱讀 462·2019-08-26 18:27
閱讀 1471·2019-08-26 18:27
