個性網頁設計之頁面設計

　頁面設計包括甚多，可大可小，我分以下幾個要點與大家討論：頁面平鋪、整體規劃、功能易用性、氣氛情感表達。大家有什么問題可以給我來信relen@sina.com。
　　一、頁面平鋪
　　把頁面平鋪開，主要的物件有：導航欄、LOGO、Banner、按鈕、圖片、文字。下面我就針對最主要的幾個部分具體講解。

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

　　1)導航不多的情況下，通常是一排，橫豎都可以，其實欄目超過6個就可以考慮用兩排。

　　2)導航欄目很多的情況，也可以多排，甚至不規則地多排(一排個數不同，或長度不同)。商業設計或門戶站點通常都會有很多頻道，設計起來，就要考慮橫向雙排。使用豎排，會占用太大空間。

　　3)通常內容不多的情況下，可能無所謂欄目，站點就包括了導航的具體內容，如圖1所示。

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

　　5)圖片式導航，很漂亮，占用頁面空間比較大。如圖2中每一個孩子圖像就是一個點擊熱點。

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

　　7)內容很豐富的站點，可以考慮使用快捷導航，即Frame 框架快捷導航，是因為不管你進入哪個頁面都可以快速跳躍到另外的欄目，不會失去方向。

　　8)利用DHTML、JS、動態隱藏層等技術實現的多變化的導航，都有瀏覽器的支持問題。我建議大家不要給信息很多的站點作此導航。

　　9)不是所有的網站都有導航的。大家可根據自己情況而定。

　　2.LOGO(標志)
　　關于LOGO的設計我會在以后的“CI行銷”一文中具體講解。這里我暫歸納下列兩個設計要點：

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

　　2)網站的LOGO，雖然有動態的，但是絕對不適宜過分的動感，且不是所有的網站標志都適合選用動態。

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

　　1)468×60 全尺寸Banner

　　雖然尺寸為國際標準，但是在設計頁面的時候，完全可以根據你的頁面占用空間來制定Banner廣告位和廣告條大小。

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

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

　　2)88×31的Banner

　　(1)大家俗稱它為LOGO。

　　(2)好的Banner也要符合網站的風格。經常遇到一個很棒的Banner點開卻是很難看的主頁。雖然有被欺騙的感覺，但是從行銷的角度講，它設計越好，點擊率越高，也就越成功。

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

　　3)Banner設計注意點：

　　(1)Banner有動態和靜態兩種。在瀏覽網頁的過程中，雖然閃爍的圖案會產生瞬間記憶刺激，引起注意，但這種記憶往往為壓迫性的，久之易產生負面效應，從而模糊記憶。而穩定的畫面不易引發特殊的關注，但如果有良好的界面引導和內容，可產生良性的記憶，持久而牢固。根據粗略統計，100個Banner里面有1/3是靜態的?？磥泶蠹覍討B的Banner更加看好。

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

　　4)設計要點：

　　(1)Banner的文字不能太多，用一兩句話來表達即可。

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

　　(3)圖形無須太繁雜，文字盡量使用黑體等粗壯的字體，否則在視覺上很容易被網頁其他內容淹沒。

　　(4)圖形盡量選擇顏色數少，能夠說明問題的事物。

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

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

　　4.按鈕
　　網頁設計是新的行業，沒有很久的歷史和規范的教本，長期以來對按鈕的定義也不是很清晰。哪些算是按鈕呢？如圖5中用圈作記的地方：其中“用戶登錄”、“登錄按鈕”“More按鈕”、“個股推薦”等等類似物件，通常都統稱為按鈕。某種意義上導航的存在形式也是按鈕，只是它的功能很特殊。如果經常做網頁，就會感覺到按鈕設計的要求已越來越高。

　　按鈕設計要點：

　　1)設計按鈕要同頁面的整體協調，不能太搶眼。

　　2)有的頁面很單調，還要依靠花哨的按鈕來提一下。

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

　　4)很長的按鈕可能就是框架的分界，盡量要纖細一些，否則頁面會顯臃腫。

　　5.圖片
　　為了美化頁面，圖片是任何一個頁面都要用到的，但要考慮網速，建議大家能不用就不用，圖片的運用要合理。

　　圖片運用要點：

　　1)圖形的主體最好清晰可見。

　　2)圖形的含義最好簡單明了。

　　3)圖片內所含文字應該清晰容易辨認。

　　4)背景與主體明度對比比例應為3∶1到5∶1之間為宜。

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

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

　　6.文字
　　文字也是設計的。這里給大家列出幾個設計要點：

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

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

　　3)標題以H1到H3字號為佳，內文Font size=3到4級為佳。

　　4)同版面字型最好在三種以內。

　　5)文字的顏色最好也是三種以內。

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

　　7)內文的排列向左對齊并與左邊界保持適當距離?？梢杂帽砀裉钊胛淖忠赃_此效果。

　　8)表格或清單內的字運用相同字型與字體大小，以利辨別。這些都是為用戶服務的設計，很重要哦！

　　二、整體規劃
　　1.有共性，才有統一，有細節區別，就有層次。

　　2.防止設計與實現過程中的偏差，不要定死具體要放多少條信息。

　　3.設計的各部分，要配合整體風格，夸張一點好像VI。

　　4.不僅頁面上各項設計要統一，而且網站的各級別頁面也要統一。

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

　　6.不要有太多分散注意力的點。動態閃爍要適中。

　　7.頁面留白部分，要根據平面設計原理來設計，請注意，分欄式結構不宜留白。

　　8.還要考慮到瀏覽器上部占用的屏幕空間，防止圖片截斷等造成視覺效果不好。

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

　　三、功能易用性
　　任何網站都要把這個問題放在第一位。不過大家請注意以下幾點：

　　1.導航欄應最先調入，以便?？涂焖偾巴栊畔⒖臻g。

　　2.頁面長度要短，使得用戶在信息空間內可迅速移動。

　　3.導航設計方向要一致。支持導航的層次按鈕應當從上到下或從左到右，但不要兩者都用，不要混用方向。

　　四、氣氛情感表達
　　氣氛會自然地激發出一種情感，不管它來自圖片、顏色、標題或者是動態的廣告，只要是來自頁面，本身就具備了一種表達思想。舉個對比很鮮明的例子：瀏覽恐怖站點和瀏覽圣誕節慶祝頁面，你會有怎樣的感覺呢？這就是個性。

　　五、推薦站點
　　1.導航
　　http://www.blashig.com/ 非常不錯的Flash導航。

　　http://www.mtvhome.de/ 德國mtv站點，導航很典雅。

　　http://www.mtve.com/ 值得學習的下拉式菜單導航，進任何一個頁面你都會看見那個Flash，真的很漂亮。

　　http://www.alistapart.com/index.html　右置導航并不常見。

　　http://www.giantrobot.com/index2.html　簡易的導航，也很舒服。

　　介紹兩個收集Banner 的站點，可以學習一下別人的創意，提高自己。

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

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

　　2.按鈕
　　http://www.apple.com/ 蘋果按鈕，經典且著名。

　　http://www.mtvchinese.com/臺灣Mtv。

　　http://www.mtvjapan.com/shows/index.html日本MTV，我覺得它的按鈕真的不錯。簡潔、特別。

　　3.圖片運用
　　http://www.mayto.com/

　　http://www.photoshopclub.com/

　　4.首頁的留白
　　http://www.fathomcapital.com/default1.htm

　　http://www.litewerx.dk/

　　5.頁面內的留白
　　http://www.mtvasia.com/Music/AtoZ/index.html 它還是右邊導航的，圖片運用也很好。

　　6.情感烘托好的站點
　　http://www.celine.com/ 時尚站點，一個很棒的Flash。