日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

網(wǎng)頁設(shè)計(jì)與重構(gòu)那些事兒

云知道建站


網(wǎng)頁設(shè)計(jì)與重構(gòu)那些事兒


作為設(shè)計(jì)師 ， 最關(guān)心的也許就是排版好不好看、圖片美不美觀、視覺炫不炫 ， 我們盡可能的去把設(shè)計(jì)稿做的最漂亮 ， 然后就把碩大的PSD文件就直接發(fā)給重構(gòu)了 ， 殊不知這個(gè)時(shí)候重構(gòu)正在恨你：

這么大的PSD ， 還木有打開!本來就開了各種瀏覽器編輯器神馬的又要打開若大的PSD文件 ， 機(jī)子要卡死了!!!機(jī)子卡死就算了吧 ， 打開一看 ， 我去 ， 幾百個(gè)圖層呀!好吧幾百個(gè)圖層也就算了 ， 為什么我明明要拖動(dòng)按鈕 ， 各種連七八糟的圖層也拖進(jìn)來了 ， 根本找不到我要的圖層!!
對(duì)于圖層管理 ， 這可能是大家比較容易忽視的操作習(xí)慣 ， 特別是初學(xué)者或者新人 ， 也可能有人說：這有什么值得一提的?做好設(shè)計(jì)稿就行了 ， 其他交給重構(gòu)吧!我們看多了程序員井井有條的代碼 ， 規(guī)范有序的文檔 ， 認(rèn)為圖層命名不是我們要干的事情—-其實(shí)不然 ， 下面有幾個(gè)原因：
1)使用PSD的群體：設(shè)計(jì)師本人、客戶、工程技術(shù)人員(程序員)、新人接手等 。
1)PSD圖層太多 ， 當(dāng)時(shí)記得 ， 時(shí)間一長(zhǎng)容易忘記 。
2)項(xiàng)目設(shè)計(jì)過程難免有需求更改、修改建議 ， 導(dǎo)致設(shè)計(jì)稿需要反復(fù)修改 ， 雜亂的圖層結(jié)構(gòu)是不是讓你更添一愁呢?
3)作為一名網(wǎng)頁重構(gòu)工作者 ， 會(huì)直接面對(duì)你的PSD文件 ， 無須的圖層及命名令人抓狂 。。。。
看來管理好圖層真的很重要 。
1)PSD圖層命名
2)模塊化管理你的圖層
3)智能對(duì)象的使用
4)重構(gòu)也需關(guān)注設(shè)計(jì)
看一個(gè)案例 ， 設(shè)計(jì)稿與HTML頁面的的名稱對(duì)應(yīng)位置圖 ?？梢钥聪伦筮叴a的幾個(gè)節(jié)點(diǎn) ， 用顏色做了區(qū)分 ， 顏色對(duì)應(yīng)了右邊的模塊 ， 最外面的紅色(wrapper)是這個(gè)頁面的外套 ， 對(duì)應(yīng)PSD上就是整個(gè)頁面;接下來紫色(header) ， 對(duì)應(yīng)PSD上的頭部(LOGO+導(dǎo)航);同理：綠色、黃色 。可以發(fā)現(xiàn)基本是從上到下的順序 ， 當(dāng)然還有例外的情況 ， 這里就不說了 ?？磦€(gè)直觀感受就可以了 。
網(wǎng)頁里常用的模塊名稱：
直接看圖和對(duì)應(yīng)的中英文名稱：整個(gè)頁面(wrap/wrapper)、頭部(header)、主導(dǎo)航(mainNav),如果整個(gè)頁面只有一個(gè)導(dǎo)航就用“導(dǎo)航(nav)”、頁腳 ， 或者叫版權(quán)(footer)、搜索(search)、登錄(login)… 等等 。
了解了圖層命名 ， 也許你的PSD圖層已經(jīng)幾百個(gè)了 ， 該對(duì)圖層管理管理了 。
1)什么是模塊化
2)模塊化調(diào)用、復(fù)用
3)效率和輸出
模塊化的定義 ， 每個(gè)模塊完成一個(gè)特定的子功能 ， 所有的模塊按某種方法組裝起來 ， 成為一個(gè)整體 ， 完成整個(gè)系統(tǒng)所要求的功能 。在系統(tǒng)的結(jié)構(gòu)中 ， 模塊是可組合、分解和更換的但愿 。
貌似文字有點(diǎn)復(fù)雜 ， 模塊化是程序設(shè)計(jì)里面的詞語 ， 我們這里就可以簡(jiǎn)化下：按照視覺功能塊組建一個(gè)PSD圖層分組 ， 類似前面說的頭部(header)、登錄(login)、搜索(search)等 。
模塊化組建后 ， 可以在各個(gè)頁面作為公共組件來使用 ， 就不必要把相同的圖層再設(shè)計(jì)組合一遍了 ， 直接把這個(gè)分組拖進(jìn)來就是了 。
模塊化在門戶官網(wǎng)的項(xiàng)目設(shè)計(jì)中尤為重要 ， 特別顯效率 ， 后面還有講到 。
雖然我們對(duì)圖層命名了 ， 自然會(huì)耽誤一些設(shè)計(jì)時(shí)間 ， 可能有人覺得效率變低了嘛?! 我自己覺得一方面這是一個(gè)設(shè)計(jì)師的職業(yè)習(xí)慣問題 ， 另一方面這并不耽誤你提升效率 ， 當(dāng)遇到大型門戶網(wǎng)站設(shè)計(jì)時(shí) ， 你會(huì)發(fā)現(xiàn)這是多么的好用 。

推薦閱讀