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