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