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

作為設(shè)計(jì)師，最關(guān)心的也許就是排版好不好看、圖片美不美觀、視覺炫不炫，我們盡可能的去把設(shè)計(jì)稿做的最漂亮，然后就把碩大的PSD文件就直接發(fā)給重構(gòu)了，殊不知這個時候重構(gòu)正在恨你：我擦，這么大的PSD，還木有打開！本來就開了各種瀏覽器編輯器神馬的又要打開苕大的PSD文件，機(jī)子要卡死了?。?！機(jī)子卡死就算了吧，打開一看，我去，幾百個圖層呀！好吧幾百個圖層也就算了，為什么我明明拖動按鈕，卻把各種連七八糟的圖層拖進(jìn)來了，根本找不到我要的圖層！！

瞧瞧多么恐怖的事情，但是也許我們只要管理好PSD圖層就可以改變這種抱怨。

對于圖層管理，這可能是大家比較容易忽視的操作習(xí)慣，特別是初學(xué)者或者新人，也可能有人說：這有什么值得一提的？！做好設(shè)計(jì)稿就行了，其他交給重構(gòu)吧！我們看多了程序員井井有條的代碼，規(guī)范有序的文檔，認(rèn)為圖層命名不是我們要干的事情—-其實(shí)不然，下面有幾個原因：
1）使用PSD的群體：設(shè)計(jì)師本人、客戶、工程技術(shù)人員（程序員）、新人接手等。
2）PSD圖層太多，當(dāng)時記得，時間一長容易忘記。
3）項(xiàng)目設(shè)計(jì)過程難免有需求更改、修改建議，導(dǎo)致設(shè)計(jì)稿需要反復(fù)修改，雜亂的圖層結(jié)構(gòu)是不是讓你更添一愁呢？
4）作為一名網(wǎng)頁重構(gòu)工作者，會直接面對你的PSD文件，無序的圖層及命名令人抓狂。。。。

看來管理好圖層真的很重要。

話說講之前看下這張圖，一起感受下這樣的圖層面板，PS：里面的人物（藝名：主席），年會上的照片。這相片很應(yīng)景有木有，還有下面的嚇尿的小Q。

切換一下，再看下這里。美女就不解釋了。。。

話說我們要對圖層進(jìn)行管理，合理命名就是關(guān)鍵了。先看下命名與圖層排列：

看一個案例，設(shè)計(jì)稿與HTML頁面的的名稱對應(yīng)位置圖?？梢钥聪伦筮叴a的幾個節(jié)點(diǎn)，用顏色做了區(qū)分，顏色對應(yīng)了右邊的模塊，最外面的紅色（wrapper）是這個頁面的外套，對應(yīng)PSD上就是整個頁面；重慶網(wǎng)站建設(shè)公司,成都網(wǎng)頁設(shè)計(jì)公司,網(wǎng)站設(shè)計(jì)公司接下來紫色（header），對應(yīng)PSD上的頭部（LOGO+導(dǎo)航）；同理：綠色、黃色?？梢园l(fā)現(xiàn)基本是從上到下的順序，當(dāng)然還有例外的情況，這里就不說了。看個直觀感受就可以了。

我自己不怎么喜歡鏈接圖層（右圖紅色區(qū)域），我更喜歡分組（左圖），按照每個功能快來建組，如果自己喜歡你就用吧~~

剛才看了HTML代碼和對應(yīng)PSD的簡單案例，大家也許發(fā)現(xiàn)規(guī)律了，為了方便操作，建議按照模塊名稱來命名，圖層的順序與頁面上看到的元素順序一致：從上到下，從左到右。

可能有人問：PSD上圖層的名字是隨便寫的嗎？其實(shí)不是，命名是參考高級語言編程語法來進(jìn)行的，個人比較喜歡用駱駝規(guī)則或者下劃線規(guī)則，如果還要分個勝負(fù)的話，我更喜歡駱駝規(guī)則。

除了第一個邏輯點(diǎn)首字母小寫外，其余邏輯點(diǎn)首字母都大寫，見示例。

網(wǎng)頁里常用的模塊名稱：

直接看圖和對應(yīng)的中英文名稱：整個頁面（wrap/wrapper）

頭部（header）

主導(dǎo)航（mainNav）,如果整個頁面只有一個導(dǎo)航就用“導(dǎo)航（nav）”

頁腳，或者叫版權(quán)（footer）

面包屑（breadCrumb）,平常叫慣了面包屑，其實(shí)它的來歷是有一個故事的，具體故事就不講了，自己百度下吧。

搜索（search）

登錄（login）…  等等。

了解了圖層命名，也許你的PSD圖層已經(jīng)幾百個了，該對圖層管理管理了。

1）什么是模塊化
2）模塊化調(diào)用、復(fù)用
3）效率和輸出

模塊化的定義，每個模塊完成一個特定的子功能，所有的模塊按某種方法組裝起來，成為一個整體，完成整個系統(tǒng)所要求的功能。在系統(tǒng)的結(jié)構(gòu)中，模塊是可組合、分解和更換的單元。
貌似文字有點(diǎn)復(fù)雜，模塊化是程序設(shè)計(jì)里面的詞語，我們這里就可以簡化下：按照視覺功能塊組建一個PSD圖層分組，類似前面說的頭部（header）、登錄（login）、搜索（search）等。

模塊化組建后，可以在各個頁面作為公共組件來使用，就不必要把相同的圖層再設(shè)計(jì)組合一遍了，直接把這個分組拖進(jìn)來就是了。
模塊化在門戶官網(wǎng)的項(xiàng)目設(shè)計(jì)中尤為重要，特別顯效率，后面還有講到。

雖然我們對圖層命名了，自然會耽誤一些設(shè)計(jì)時間，可能有人覺得效率變低了嘛？！ 我自己覺得一方面這是一個設(shè)計(jì)師的職業(yè)習(xí)慣問題，另一方面這并不耽誤你提升效率，當(dāng)遇到大型門戶網(wǎng)站設(shè)計(jì)時，你會發(fā)現(xiàn)這是多么的好用。

個人經(jīng)驗(yàn)，當(dāng)你開始關(guān)注你的PSD圖層結(jié)構(gòu)的時候，其實(shí)對圖層面板上每個圖層到底是什么內(nèi)容并不關(guān)心，所以我比較喜歡這么做：
在圖層選項(xiàng)那里把圖層預(yù)覽改為“無”，這樣圖層面板就清爽了，有的都是結(jié)構(gòu)，一目了然。

回歸正題：舉幾個梨子。大家對比看左右兩邊的內(nèi)容及圖層變化：基本規(guī)則是模塊化命名、從上到下、從左到右。

之前做的案例都是如此。

前面說了智能對象在大型網(wǎng)站設(shè)計(jì)上會極大的提升效率，如果不信可以繼續(xù)看：

簡單的說就是智能對象反復(fù)放大縮小時候不會失真出現(xiàn)鋸齒和模糊變形，當(dāng)然前提是放大的尺寸不要超過轉(zhuǎn)換成智能對象之前的尺寸大小。

大型官網(wǎng)設(shè)計(jì)中很多模塊是需要反復(fù)使用的，通常的做飯是有幾個就改幾個，不停的復(fù)制，拖放，不停的復(fù)制樣式、粘貼樣式。累不累啊你。。。
可以這樣支招：在同一個頁面如果有很多元素是一樣的，可以把這個元素轉(zhuǎn)換成智能對象，以后如果有改動在圖層上雙擊這個智能對象進(jìn)去編輯下保存就可以了，該頁面的該類型的元素就都改過來了。如果相同的元素不是在一個頁面，可以使用“替換內(nèi)容”指令，見下圖：

公共模塊使用智能對象，批量修改，批量替換，高效快捷。在智能對象所在圖層右鍵，在彈出菜單中選擇“替換內(nèi)容”，將預(yù)先保存在你項(xiàng)目目錄中的PSB文件替換到PSD中來；這里需要注意，你所存放的psb文件需要放在你的項(xiàng)目目錄下，因?yàn)槟J(rèn)情況下雙擊智能對象時，打開的只是暫存盤里的psb文件，并不是你所在項(xiàng)目下的psb文件。

另外在做物料展示的時候智能對象的使用也可以很方便，不會破壞原有大圖，在印刷品的設(shè)計(jì)也可以很方便。

比喻這個例子：需要把WSD的LOGO按照手提袋的透視關(guān)系調(diào)整尺寸角度，通常情況我們就是直接那一張圖貼上去然后調(diào)啊調(diào)的，好不容易調(diào)整好了。結(jié)果換袋子了，是另一個方向的透視，苦逼的我們又得按照新袋子的透視來調(diào)整LOGO，累不累啊你。。。

其實(shí)上面那個LOGO已經(jīng)是智能對象了，如上圖，我們再雙擊下圖層進(jìn)去看看：

這個就是原始LOGO文件了，完好無損，可人兒的。

還有一個地方用智能對象也很提升效率，做客戶端的時候經(jīng)常會需要輸出N多的icon尺寸，這是一個快捷的辦法，原理跟剛才一樣。當(dāng)然這樣的縮放icon在精細(xì)度上沒有純手工的來得好。只供一個思路哈。

小結(jié)一下：智能對象在多頁面的、多重復(fù)公共模塊、VI物料包裝展示的時候會顯著提升效率。

另一個話題：與重構(gòu)有關(guān)的，有時候 設(shè)計(jì)師也不斷的抱怨頁面仔做出的頁面沒有設(shè)計(jì)稿上的好看，不是間距大了就是間距小了，不是字體小了就是字體大了，不是圖片壓縮的太厲害就是壓根圖片切少 了，或者動畫也不是我們想要的效果。。。。，越到這些我不能全怪他們，我們也有責(zé)任，畢竟他們不是設(shè)計(jì)，但是我個人的觀點(diǎn)是重構(gòu)需要一些PS技巧或設(shè)計(jì)理論，在設(shè)計(jì)師沒有時間走查頁面的時候也能輸出比較高質(zhì)量的頁面。

市面上大大小小的瀏覽器幾十種，常見的大致也有十來種，由于每個瀏覽器自身渲染頁面的差異，并不是同一個頁面在所有瀏覽器上看到的都一樣，我大致用90%的還原度來衡量吧，也可能有些設(shè)計(jì)師要求重構(gòu)100%還原，成都網(wǎng)站建設(shè)公司,成都網(wǎng)頁設(shè)計(jì)公司,成都網(wǎng)站設(shè)計(jì)公司那我表示那位重構(gòu)相當(dāng)苦逼，保證頁面跟設(shè)計(jì)稿90%一致，有不少工作需要設(shè)計(jì)師和重構(gòu)共同參與的，比喻設(shè)計(jì)師在時間允許的情況下做好標(biāo)注，哪個地方多少像素，用什么顏色值，高度是多少等標(biāo)注在頁面上。

重構(gòu)者不關(guān)關(guān)注代碼本身，也可以跳出代碼看看視覺表現(xiàn)層，四川網(wǎng)站建設(shè)公司,成都網(wǎng)頁設(shè)計(jì)公司,成都網(wǎng)站設(shè)計(jì)公司如果確實(shí)對幾像素看不出來，可以截圖放在psd上做對比，這個方法很容易自己發(fā)現(xiàn)問題，成本也比較低。

在表格做網(wǎng)頁時期，圖片和圖標(biāo)幾乎都是單個的，加載一張圖片就是一次http請求，服務(wù)器就要讀取一次，頻繁的讀取再加上大量的用戶不斷的訪問，很可能讓服務(wù)器承受不起而掛機(jī)。因此需要盡可能的減少http請求，合并背景圖是一個很有效的辦法。
通常背景圖的輸出質(zhì)量百分比可以調(diào)在60-80%，對比較重要的icon、圖片可以調(diào)為100%輸出高質(zhì)量圖片。
在網(wǎng)頁加載過程中，或因?yàn)榫W(wǎng)速原因圖片暫時沒有加載出來而出現(xiàn)短時間空白，建議給該區(qū)域預(yù)先定義好背景色，以提示用戶該區(qū)域是有內(nèi)容的。
鼠標(biāo)停在圖片上時，適當(dāng)?shù)奶砑觮itle或者alt，以方便用戶在圖片加載失敗時可以知道這張圖片是干什么用的。
按需加載，異步加載，類似蘋果官網(wǎng)上很多地方用到了異步加載，好處是提高主要頁面的加載速度，用戶需要的時候才加載其他附件頁面。
少用CSS濾鏡，現(xiàn)在應(yīng)該很少人用了，基本都是采用優(yōu)雅降級或提示用戶升級瀏覽器。
網(wǎng)站上線前壓縮CSS和JS文件，注意記得備份。

我喜歡用這個詞，雖然自己并沒有達(dá)到代碼優(yōu)雅，做到代碼優(yōu)雅還需要不斷的努力，一些細(xì)節(jié)足夠讓專家看到你是否具備職業(yè)化素養(yǎng)，這里就不班門弄斧了，還是看圖吧~~~~~~。

新聞標(biāo)題：網(wǎng)頁設(shè)計(jì)與重構(gòu)那些事兒
分享鏈接：http://bm7419.com/news/170061.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈、移動網(wǎng)站建設(shè)、建站公司、做網(wǎng)站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)