2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

原作者：Lerroy，10年6月加入騰訊公司，視覺設(shè)計(jì)師，進(jìn)入騰訊前一直從事網(wǎng)頁設(shè)計(jì)、網(wǎng)頁重構(gòu)以及前端開發(fā)工作。主導(dǎo)并參與過包括手機(jī)QQ瀏覽器微收藏、MXD團(tuán)隊(duì)博客、超級QQ、應(yīng)用寶、騰訊應(yīng)用開放平臺等項(xiàng)目。

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

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

對于圖層管理，這可能是大家比較容易忽視的操作習(xí)慣，特別是初學(xué)者或者新人，也可能有人說：這有什么值得一提的？！做好設(shè)計(jì)稿就行了，其他交給重構(gòu)吧！我們看多了程序員井井有條的代碼，規(guī)范有序的文檔，認(rèn)為圖層命名不是我們要干的事情—-其實(shí)不然，下面有幾個(gè)原因：
1）使用PSD的群體：設(shè)計(jì)師本人、客戶、工程技術(shù)人員（程序員）、新人接手等。
2）PSD圖層太多，當(dāng)時(shí)記得，時(shí)間一長容易忘記。
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)鍵了。先看下命名與圖層排列：

?

看一個(gè)案例，設(shè)計(jì)稿與HTML頁面的的名稱對應(yīng)位置圖。可以看下左邊代碼的幾個(gè)節(jié)點(diǎn)，用顏色做了區(qū)分，顏色對應(yīng)了右邊的模塊，最外面的紅色（wrapper）是這個(gè)頁面的外套，對應(yīng)PSD上就是整個(gè)頁面；接下來紫色（header），對應(yīng)PSD上的頭部（LOGO+導(dǎo)航）；同理：綠色、黃色。可以發(fā)現(xiàn)基本是從上到下的順序，當(dāng)然還有例外的情況，這里就不說了。看個(gè)直觀感受就可以了。

?

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

?

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

?

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

?

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

?

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

?

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

?

頭部（header）

?

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

?

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

?

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

?

搜索（search）

?

登錄（login）… ?等等。

?

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

?

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

?

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

?

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

?

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

?

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

?

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

?

之前做的案例都是如此。

?

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

?

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

?

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

?

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

?

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

?

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

?

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

?

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

?

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

?

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

?

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

?

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

?

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

?

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

?

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

轉(zhuǎn)載于:https://my.oschina.net/u/1000159/blog/160566

總結(jié)

以上是生活随笔為你收集整理的：网页设计与重构那些事儿的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。