頁(yè)面設(shè)計(jì)包括甚多，可大可小，我分以下幾個(gè)要點(diǎn)與大家討論：頁(yè)面平鋪、整體規(guī)劃、功能易用性、氣氛情感表達(dá)。大家有什么問(wèn)題可以給我來(lái)信[email protected]。
　　一、頁(yè)面平鋪
　　把頁(yè)面平鋪開(kāi)，主要的物件有：導(dǎo)航欄、LOGO、Banner、按鈕、圖片、文字。下面我就針對(duì)最主要的幾個(gè)部分具體講解。

　　1.導(dǎo)航欄
　　導(dǎo)航欄如果設(shè)計(jì)得恰到好處，是會(huì)給網(wǎng)頁(yè)本身增色很多(千萬(wàn)不要太花哨，它屬于功能物件，喧賓奪主就不好了)。導(dǎo)航欄有一排、兩排、多排、圖片導(dǎo)航和Frame 框架快捷導(dǎo)航等等各種情況的設(shè)計(jì)。有時(shí)候是橫排，有時(shí)候則是豎排。另外還有一些動(dòng)態(tài)的導(dǎo)航欄，如很精彩的Flash導(dǎo)航。導(dǎo)航欄設(shè)計(jì)要點(diǎn)歸納如下：

　　1)導(dǎo)航不多的情況下，通常是一排，橫豎都可以，其實(shí)欄目超過(guò)6個(gè)就可以考慮用兩排。

　　2)導(dǎo)航欄目很多的情況，也可以多排，甚至不規(guī)則地多排(一排個(gè)數(shù)不同，或長(zhǎng)度不同)。商業(yè)設(shè)計(jì)或門(mén)戶(hù)站點(diǎn)通常都會(huì)有很多頻道，設(shè)計(jì)起來(lái)，就要考慮橫向雙排。使用豎排，會(huì)占用太大空間。

　　3)通常內(nèi)容不多的情況下，可能無(wú)所謂欄目，站點(diǎn)就包括了導(dǎo)航的具體內(nèi)容，如圖1所示。

　　4)雙排導(dǎo)航未必要挨在一起，可以自由一些，如圖2所示：上排有導(dǎo)航欄，圖片分隔開(kāi)后則另起一排。

　　5)圖片式導(dǎo)航，很漂亮，占用頁(yè)面空間比較大。如圖2中每一個(gè)孩子圖像就是一個(gè)點(diǎn)擊熱點(diǎn)。

　　6)我推薦大家多用Flash制作導(dǎo)航，其體積小、變化多。

　　7)內(nèi)容很豐富的站點(diǎn)，可以考慮使用快捷導(dǎo)航，即Frame 框架快捷導(dǎo)航，是因?yàn)椴还苣氵M(jìn)入哪個(gè)頁(yè)面都可以快速跳躍到另外的欄目，不會(huì)失去方向。

　　8)利用DHTML、JS、動(dòng)態(tài)隱藏層等技術(shù)實(shí)現(xiàn)的多變化的導(dǎo)航，都有瀏覽器的支持問(wèn)題。我建議大家不要給信息很多的站點(diǎn)作此導(dǎo)航。

　　9)不是所有的網(wǎng)站都有導(dǎo)航的。大家可根據(jù)自己情況而定。

　　2.LOGO(標(biāo)志)
　　關(guān)于LOGO的設(shè)計(jì)我會(huì)在以后的“CI行銷(xiāo)”一文中具體講解。這里我暫歸納下列兩個(gè)設(shè)計(jì)要點(diǎn)：

　　1)LOGO的位置通常在頁(yè)面的左上角。根據(jù)你的設(shè)計(jì)，它不是一成不變的，所謂個(gè)性的設(shè)計(jì)，不論商業(yè)或個(gè)人，都要去大膽嘗試。這里為大家列出LOGO在頁(yè)面上常見(jiàn)的布局情況(圖3)，以作參考。

　　2)網(wǎng)站的LOGO，雖然有動(dòng)態(tài)的，但是絕對(duì)不適宜過(guò)分的動(dòng)感，且不是所有的網(wǎng)站標(biāo)志都適合選用動(dòng)態(tài)。

　　3.BANNER(廣告條)類(lèi)型
　　幾種國(guó)際尺寸的Banner如下：468×60(全尺寸Banner)、392×72(全尺寸帶導(dǎo)航條Banner)、234×60(半尺寸Banner)、125×125(方形按鈕)、120×90(按鈕類(lèi)型1)、120×60(按鈕類(lèi)型2)、88×31(小按鈕)、120×240(垂直Banner)，其中468×60的和88×31最多用，下面就常用的為大家講解一下。

　　1)468×60 全尺寸Banner

　　雖然尺寸為國(guó)際標(biāo)準(zhǔn)，但是在設(shè)計(jì)頁(yè)面的時(shí)候，完全可以根據(jù)你的頁(yè)面占用空間來(lái)制定Banner廣告位和廣告條大小。

　　(1)一個(gè)頁(yè)面內(nèi)不易超出兩個(gè)468×60 全尺寸Banner。兩個(gè)條的時(shí)候，一般是上面一個(gè)，下面一個(gè)，如圖4所示。

　　(2)設(shè)計(jì)Banner配合頁(yè)面的兩種情況：?jiǎn)慰碆anner很難看，但是放入網(wǎng)頁(yè)中，卻會(huì)使網(wǎng)頁(yè)設(shè)計(jì)豐富而炫目，一般也就是468×60的Banner有這本事了。還有設(shè)計(jì)的時(shí)候必須要考慮LOGO跟別站互換時(shí)如何更適合他人網(wǎng)頁(yè)的風(fēng)格，所以該多做一些不同顏色不同情況的Banner。

　　2)88×31的Banner

　　(1)大家俗稱(chēng)它為L(zhǎng)OGO。

　　(2)好的Banner也要符合網(wǎng)站的風(fēng)格。經(jīng)常遇到一個(gè)很棒的Banner點(diǎn)開(kāi)卻是很難看的主頁(yè)。雖然有被欺騙的感覺(jué)，但是從行銷(xiāo)的角度講，它設(shè)計(jì)越好，點(diǎn)擊率越高，也就越成功。

　　(3)如圖4中，區(qū)域7內(nèi)的一般的廣告條， 88×31 Banner也可以用來(lái)豐富頁(yè)面。這樣的情況很少見(jiàn)，值得注意。

　　3)Banner設(shè)計(jì)注意點(diǎn)：

　　(1)Banner有動(dòng)態(tài)和靜態(tài)兩種。在瀏覽網(wǎng)頁(yè)的過(guò)程中，雖然閃爍的圖案會(huì)產(chǎn)生瞬間記憶刺激，引起注意，但這種記憶往往為壓迫性的，久之易產(chǎn)生負(fù)面效應(yīng)，從而模糊記憶。而穩(wěn)定的畫(huà)面不易引發(fā)特殊的關(guān)注，但如果有良好的界面引導(dǎo)和內(nèi)容，可產(chǎn)生良性的記憶，持久而牢固。根據(jù)粗略統(tǒng)計(jì)，100個(gè)Banner里面有1/3是靜態(tài)的。看來(lái)大家對(duì)動(dòng)態(tài)的Banner更加看好。

　　(2)Banner的“重量”要輕！以468×60的Banner為例，最好是15K左右，不要超過(guò)22K。而88×31的Banner最好在5K左右，不要超過(guò)7K。

　　4)設(shè)計(jì)要點(diǎn)：

　　(1)Banner的文字不能太多，用一兩句話(huà)來(lái)表達(dá)即可。

　　(2)廣告語(yǔ)要朗朗上口。

　　(3)圖形無(wú)須太繁雜，文字盡量使用黑體等粗壯的字體，否則在視覺(jué)上很容易被網(wǎng)頁(yè)其他內(nèi)容淹沒(méi)。

　　(4)圖形盡量選擇顏色數(shù)少，能夠說(shuō)明問(wèn)題的事物。

　　(5)如果選擇顏色很復(fù)雜的物體，要考慮一下在低顏色數(shù)情況下，是否會(huì)有明顯的色斑。

　　(6)盡量不要使用彩虹色、暈邊等復(fù)雜的特技圖形效果，這樣做會(huì)大大增加圖形所占據(jù)的顏色數(shù)，增大體積。

　　4.按鈕
　　網(wǎng)頁(yè)設(shè)計(jì)是新的行業(yè)，沒(méi)有很久的歷史和規(guī)范的教本，長(zhǎng)期以來(lái)對(duì)按鈕的定義也不是很清晰。哪些算是按鈕呢？如圖5中用圈作記的地方：其中“用戶(hù)登錄”、“登錄按鈕”“More按鈕”、“個(gè)股推薦”等等類(lèi)似物件，通常都統(tǒng)稱(chēng)為按鈕。某種意義上導(dǎo)航的存在形式也是按鈕，只是它的功能很特殊。如果經(jīng)常做網(wǎng)頁(yè)，就會(huì)感覺(jué)到按鈕設(shè)計(jì)的要求已越來(lái)越高。

　　按鈕設(shè)計(jì)要點(diǎn)：

　　1)設(shè)計(jì)按鈕要同頁(yè)面的整體協(xié)調(diào)，不能太搶眼。

　　2)有的頁(yè)面很單調(diào)，還要依靠花哨的按鈕來(lái)提一下。

　　3)選用的字體，選用的插圖，或插圖及字體搭配，都要考慮字跡清楚，色彩簡(jiǎn)單一些，不要超過(guò)四種。

　　4)很長(zhǎng)的按鈕可能就是框架的分界，盡量要纖細(xì)一些，否則頁(yè)面會(huì)顯臃腫。

　　5.圖片
　　為了美化頁(yè)面，圖片是任何一個(gè)頁(yè)面都要用到的，但要考慮網(wǎng)速，建議大家能不用就不用，圖片的運(yùn)用要合理。

　　圖片運(yùn)用要點(diǎn)：

　　1)圖形的主體最好清晰可見(jiàn)。

　　2)圖形的含義最好簡(jiǎn)單明了。

　　3)圖片內(nèi)所含文字應(yīng)該清晰容易辨認(rèn)。

　　4)背景與主體明度對(duì)比比例應(yīng)為3∶1到5∶1之間為宜。

　　5)淡色系列的背景有助于整體和諧。

　　6)淡色材質(zhì)背景最佳，能與主題分離之淺色標(biāo)志或文字背景亦可。

　　6.文字
　　文字也是設(shè)計(jì)的。這里給大家列出幾個(gè)設(shè)計(jì)要點(diǎn)：

　　1)每一行文字的長(zhǎng)度最好20到30個(gè)中文字(40到60個(gè)英文字母)。

　　2)行距與字距已由軟件內(nèi)定。設(shè)計(jì)時(shí)注意段落與段落間空行及首行縮排方式以輔助閱讀。

　　3)標(biāo)題以H1到H3字號(hào)為佳，內(nèi)文Font size=3到4級(jí)為佳。

　　4)同版面字型最好在三種以?xún)?nèi)。

　　5)文字的顏色最好也是三種以?xún)?nèi)。

　　6)文字在顏色上要與背景區(qū)別。

　　7)內(nèi)文的排列向左對(duì)齊并與左邊界保持適當(dāng)距離。可以用表格填入文字以達(dá)此效果。

　　8)表格或清單內(nèi)的字運(yùn)用相同字型與字體大小，以利辨別。這些都是為用戶(hù)服務(wù)的設(shè)計(jì)，很重要哦！

　　二、整體規(guī)劃
　　1.有共性，才有統(tǒng)一，有細(xì)節(jié)區(qū)別，就有層次。

　　2.防止設(shè)計(jì)與實(shí)現(xiàn)過(guò)程中的偏差，不要定死具體要放多少條信息。

　　3.設(shè)計(jì)的各部分，要配合整體風(fēng)格，夸張一點(diǎn)好像VI。

　　4.不僅頁(yè)面上各項(xiàng)設(shè)計(jì)要統(tǒng)一，而且網(wǎng)站的各級(jí)別頁(yè)面也要統(tǒng)一。

　　5.頁(yè)面要“透氣”，就是信息不要太過(guò)集中，以免文字編排太緊密。

　　6.不要有太多分散注意力的點(diǎn)。動(dòng)態(tài)閃爍要適中。

　　7.頁(yè)面留白部分，要根據(jù)平面設(shè)計(jì)原理來(lái)設(shè)計(jì)，請(qǐng)注意，分欄式結(jié)構(gòu)不宜留白。

　　8.還要考慮到瀏覽器上部占用的屏幕空間，防止圖片截?cái)嗟仍斐梢曈X(jué)效果不好。

　　9.首頁(yè)留白布局部分我為大家準(zhǔn)備了一個(gè)例圖(圖6)供參考。

　　三、功能易用性
　　任何網(wǎng)站都要把這個(gè)問(wèn)題放在第一位。不過(guò)大家請(qǐng)注意以下幾點(diǎn)：

　　1.導(dǎo)航欄應(yīng)最先調(diào)入，以便常客快速前往所需信息空間。

　　2.頁(yè)面長(zhǎng)度要短，使得用戶(hù)在信息空間內(nèi)可迅速移動(dòng)。

　　3.導(dǎo)航設(shè)計(jì)方向要一致。支持導(dǎo)航的層次按鈕應(yīng)當(dāng)從上到下或從左到右，但不要兩者都用，不要混用方向。

　　四、氣氛情感表達(dá)
　　氣氛會(huì)自然地激發(fā)出一種情感，不管它來(lái)自圖片、顏色、標(biāo)題或者是動(dòng)態(tài)的廣告，只要是來(lái)自頁(yè)面，本身就具備了一種表達(dá)思想。舉個(gè)對(duì)比很鮮明的例子：瀏覽恐怖站點(diǎn)和瀏覽圣誕節(jié)慶祝頁(yè)面，你會(huì)有怎樣的感覺(jué)呢？這就是個(gè)性。

　　五、推薦站點(diǎn)
　　1.導(dǎo)航
　　http://www.blashig.com/ 非常不錯(cuò)的Flash導(dǎo)航。

　　http://www.mtvhome.de/ 德國(guó)mtv站點(diǎn)，導(dǎo)航很典雅。

　　http://www.mtve.com/ 值得學(xué)習(xí)的下拉式菜單導(dǎo)航，進(jìn)任何一個(gè)頁(yè)面你都會(huì)看見(jiàn)那個(gè)Flash，真的很漂亮。

　　http://www.alistapart.com/index.html　右置導(dǎo)航并不常見(jiàn)。

　　http://www.giantrobot.com/index2.html　簡(jiǎn)易的導(dǎo)航，也很舒服。

　　介紹兩個(gè)收集Banner 的站點(diǎn)，可以學(xué)習(xí)一下別人的創(chuàng)意，提高自己。

　　http://www.homepagecn.com/fbl_brjx/

　　http://www.v-4ever.com/8dstudio/base.htm

　　2.按鈕
　　http://www.apple.com/ 蘋(píng)果按鈕，經(jīng)典且著名。

　　http://www.mtvchinese.com/臺(tái)灣Mtv。

　　http://www.mtvjapan.com/shows/index.html日本MTV，我覺(jué)得它的按鈕真的不錯(cuò)。簡(jiǎn)潔、特別。

　　3.圖片運(yùn)用
　　http://www.mayto.com/

　　http://www.photoshopclub.com/

　　4.首頁(yè)的留白
　　http://www.fathomcapital.com/default1.htm

　　http://www.litewerx.dk/

　　5.頁(yè)面內(nèi)的留白
　　http://www.mtvasia.com/Music/AtoZ/index.html 它還是右邊導(dǎo)航的，圖片運(yùn)用也很好。

　　6.情感烘托好的站點(diǎn)
　　http://www.celine.com/ 時(shí)尚站點(diǎn)，一個(gè)很棒的Flash。