說起網(wǎng)頁設(shè)計師的工作，可能很多人的第一感覺就是設(shè)計網(wǎng)頁，其實網(wǎng)頁設(shè)計師的工作可不是這么簡單!網(wǎng)頁設(shè)計只是網(wǎng)頁設(shè)計師工作的一部分，除此之外，網(wǎng)頁設(shè)計師還要參與網(wǎng)站的前期策劃，并且在設(shè)計過程當中還要考慮后期的功能如何實現(xiàn)。

　　職場明星：王楠
　　從事職業(yè)：網(wǎng)頁設(shè)計師
　　職業(yè)范疇：網(wǎng)頁設(shè)計、制作
　　月薪：6000元
　　所在企業(yè)：西南網(wǎng)景網(wǎng)絡(luò)科技公司
　　職場宣言：每一個頁面都是一件藝術(shù)品

　　目前我在公司負責的更多是一些管理工作和建站過程中的網(wǎng)站整體規(guī)劃工作，而不再是網(wǎng)頁設(shè)計師的工作。今天之所以寫這篇文章，主要是希望把我個人從事這么多年網(wǎng)頁設(shè)計工作的一些經(jīng)驗同大家分享，也算是給那些有志于從事網(wǎng)頁設(shè)計工作以及正在找這方面工作的人一個參考。

　　網(wǎng)頁設(shè)計職場技巧和經(jīng)驗分享

　　簡單就是美 給用戶最想看的

　　很多網(wǎng)頁設(shè)計師一開始都會陷入這樣一個誤區(qū)——在頁面中加入很多元素和修飾，同時加入很多的Javascript代碼、Flash效果等，把“好看的”都擺上去，以求頁面“華麗無比”。殊不知這樣的頁面帶給用戶的只會是眼花繚亂的感覺，反而找不到想要看的內(nèi)容。根據(jù)相關(guān)統(tǒng)計顯示，如果用戶第一次訪問某一個頁面，在3～10秒內(nèi)找不到自己感興趣的內(nèi)容，那么他就會毫不猶豫地選擇離開這個頁面。

　　留住用戶，第一印象自然要好，就目前網(wǎng)頁發(fā)展的趨勢而言，“簡單”的設(shè)計風格更符合主流，因此頁面中的修飾元素和樣式都不宜過多，同時樣式要盡量保持統(tǒng)一或接近，以文字顏色、字體等不超過3種為宜，以避免造成頁面混亂的感覺。這一點在一些公司的形象網(wǎng)站或企業(yè)網(wǎng)站當中尤為明顯——頁面主要以網(wǎng)站導航、形象(產(chǎn)品)宣傳Banner和公司業(yè)務(wù)為主。例如聯(lián)想中國網(wǎng)站、Dell公司網(wǎng)站等(圖1)。

　　結(jié)構(gòu)要主流 給用戶最習慣的

　　除了頁面的表現(xiàn)形式，設(shè)計網(wǎng)頁時還要保證最重要的內(nèi)容占據(jù)頁面當中最顯眼的位置。通過對用戶瀏覽網(wǎng)頁習慣的調(diào)查，一個頁面當中最顯眼的位置以字母“F”形分布(圖2)，這也是用戶瀏覽頁面的順序：首先，用戶會以從左至右的方式看頁面最上方，然后是從上至下瀏覽頁面的左側(cè)部分，接著是根據(jù)左側(cè)內(nèi)容瀏覽右側(cè)部分。雖然具體情況不盡相同，但大體如此，因此這也是網(wǎng)頁設(shè)計師安排頁面內(nèi)容的一個重要依據(jù)。

　　一般情況下，網(wǎng)站頁面結(jié)構(gòu)可簡單分為三部分：頭部、主體和頁腳。頭部和頁腳在一個網(wǎng)站當中的樣式基本是固定的，不同的頁面不會有太大區(qū)別，特別是頁腳，因為主要放置網(wǎng)站信息和聯(lián)系方式等，因此幾乎是一樣的。而頭部當中可能包含一些形象廣告，所以不同頁面可能稍有不同。

　　如同上文所述，根據(jù)用戶的瀏覽習慣和網(wǎng)站設(shè)計的基本風格，一般情況下頁面的頭部用來放置網(wǎng)站導航和形象(廣告)Banner，左側(cè)以小字體放置二級導航和輔助功能導航，主體部分以稍微大一點的字體放置網(wǎng)站主要內(nèi)容。這樣是最符合用戶瀏覽習慣的頁面形式。此外，如果主體部分采用左中右結(jié)構(gòu)，右側(cè)也應以輔助補充和廣告內(nèi)容為主。

　　搭配要合理 給用戶最便捷的

　　既然一個網(wǎng)站頁面的基本樣式和內(nèi)容都是固定的，那網(wǎng)頁設(shè)計師還能怎樣發(fā)揮自己的創(chuàng)意進行設(shè)計呢？首先需要說明的是，我們這里為大家講解的主要是傳統(tǒng)網(wǎng)站的設(shè)計，也是最常見的網(wǎng)站設(shè)計，如公司形象網(wǎng)站、企業(yè)網(wǎng)站或其他行業(yè)網(wǎng)站等的設(shè)計，而不包括一些個性化的網(wǎng)站設(shè)計，因為個性化網(wǎng)站的設(shè)計需要達到的效果就是與眾不同，因此并無任何規(guī)律可言。

　　在傳統(tǒng)網(wǎng)站設(shè)計過程中，既然頁面的基本框架和內(nèi)容都已經(jīng)確定，如何能夠在這個框架內(nèi)讓網(wǎng)站頁面在清爽的同時又可以展現(xiàn)更多內(nèi)容，就需要網(wǎng)頁設(shè)計師了解網(wǎng)頁制作技術(shù)，通過技術(shù)手段豐富頁面內(nèi)容和樣式。

　　以最為常用的標簽功能為例(標簽功能是指將頁面當中不同分類的內(nèi)容以標簽的形式歸類，用戶點擊相應標簽就可以查看相應標簽中的內(nèi)容)，國內(nèi)主要的門戶網(wǎng)站新浪和網(wǎng)易，如果不采用標簽功能，全部內(nèi)容采用平鋪的方式，那么頁面無疑將非常冗長，而采用標簽功能，既保證了主要內(nèi)容都在最主要的位置展現(xiàn)，又保證了給用戶提供最感興趣的內(nèi)容，另提供了更多選擇，讓用戶可以選擇查看可能感興趣的內(nèi)容(見圖3上)�？梢哉f，同樣的頁面，是否采用標簽功能將有完全不同的效果。

　　除了標簽功能，還有很多其他技術(shù)手法，例如層功能(層功能多用于鼠標懸浮操作，通過鼠標懸浮將隱藏的層展示出來，以實現(xiàn)在有限的范圍內(nèi)展示更多的內(nèi)容，如淘寶網(wǎng)的二級導航，見圖3下)等。

　　可見，只有網(wǎng)頁設(shè)計師了解這些技術(shù)才有可能在設(shè)計時將這些技術(shù)融會貫通并付諸實踐，從而豐富頁面展現(xiàn)形式，充分利用頁面空間，在有限的區(qū)域內(nèi)展示更多的內(nèi)容。而這些技術(shù)也都是以服務(wù)用戶為綱，以“不給用戶添麻煩”為準。

　　規(guī)范是王道 給后期維護減負

　　上文我們主要說了一些網(wǎng)頁設(shè)計上的總體思路，也是“大方向”，下面我們說一下網(wǎng)頁設(shè)計師需要注意的工作細節(jié)，這里就以網(wǎng)頁制作時的HTML代碼和CSS樣式表為例。我們都知道，雖然一個網(wǎng)站的設(shè)計方案通過Photoshop設(shè)計出樣式圖之后再進行頁面制作工作一般不會出現(xiàn)返工的問題，但修改是不可避免的，包括網(wǎng)站在運行了一段時間之后根據(jù)實際情況進行修改也是非常常見的，這就要求我們在前期制作頁面的時候打好基礎(chǔ)，為后期的修改維護做好準備。

　　規(guī)范格式 源碼查看更方便

　　很多網(wǎng)頁設(shè)計師在進行頁面制作的時候只是在可視化環(huán)境當中編輯(這是萬萬不可的，如果設(shè)計師不能駕馭純源碼模式，那么他就一定不是一名合格的網(wǎng)頁設(shè)計師)，這就很容易產(chǎn)生冗余代碼，從而使源碼混亂。而源碼混亂，一方面會影響頁面的執(zhí)行效率，另外一方面也會在后期修改的時候產(chǎn)生莫名其妙的問題。因此規(guī)范源碼格式，可以有效減少后期修改的工作量，提高工作效率。

　　不要懶惰 關(guān)鍵點加上注釋

　　除了規(guī)范源碼的格式，制作網(wǎng)頁時在HTML源碼當中加入必要的注釋是非常重要的!因為注釋可以為我們后期的修改提供重要的參考信息，例如一段代碼的功能說明、一個區(qū)域的開始或結(jié)尾等等。這樣在后期修改的時候就可以實現(xiàn)不需要再次查看源碼來區(qū)分，只要根據(jù)注釋針對特定區(qū)域進行修改或替換即可，從而大大降低后期修改維護的難度。

　　請點擊“下一頁”，我們看看王楠為什么說“網(wǎng)頁設(shè)計師是地道的雜家”。