[網頁設計] 網頁版面設計

一、　網頁版面設計的含義
  
網頁的版面設計同報紙雜志等平面媒體的版面設計有很多相通之處。所謂網頁的版面設計，是在有限的屏幕空間上將多媒體元素進行有機組合，將傳達內容所必要的各種構成要素的均衡、調和、律動的視覺導向以及空白等，根據主題的要求予以必要的關系設計，進行一種視覺的關聯和合理配置。                                                                                   一個成功的網頁版面設計不僅能提高版面的注意價值，而且有利于該網頁主題的信息傳達并加強對瀏覽者的視覺留存。

二、　網頁版面的形式與內容的統一

網頁的版式和傳統印刷品的版式編排一樣多種多樣。

  采用哪種版式并不是設計者的想當然，不同的網站主題（個人宣傳、產品銷售、提供服務等）對網頁構成元素編排方式的要求是不同的，要依據受眾的需求、市場的狀況、版主的自身情況進行綜合分析，還要明確建立該網站的目的、為誰提供產品或服務、能提供什么樣的產品或服務、該網站的目標受眾以及受眾的特點等一系列定位之后才能決定的。如商務類版式的平易近人、娛樂類版式的生動活潑、科技類版式的嚴謹周密都是根據網站的個性特點來確定的。那些只講花哨的表現形式或者過于強調獨特的設計形式而脫離內容，只重視網頁形式上的美感而淡化了主題思想的邏輯，將削弱網頁主題的訴求效果，是不足取的。版式始終應為內容服務，設計者只有深入領會主題內容的精神，再融匯自己的思想，找到一個較完美的表現方式，才能真正體現出網站獨具的分量和特有價值。

  從視覺符號方面來看，視覺符號是相對于語言符號的點、線、面、色彩等視覺性記號。形式法則和構成規律是視覺語言的語法和句法，要將豐富的意義和多樣的形式組織成統一的頁面結構，形式語言必須符合頁面的內容，體現內容的豐富含義�？梢赃\用對比與調和、對稱與平衡、節奏以及留白等手段，通過空間、文字、圖形之間的相互關系建立整體的均衡狀態，產生和諧的美感以及新鮮的個性。

三、　網頁版面的尺寸和構成要素

   一般的印刷品都有固定的規格尺寸，而網頁的尺寸則是由瀏覽者來控制的。網頁版面指的是在瀏覽器上看到的完整的一個頁面（可以包含框架和層）。網頁頁面會根據當前瀏覽窗口的大小自動格式化輸出；不同種類、版本的瀏覽器觀察同一個網頁頁面時，其效果會有所不同；而且用戶瀏覽器的工作環境不同，顯示效果也不一樣。這就使網頁設計者不能精確控制頁面的每個元素的尺寸和位置，一般折中為６００×８００像素。網頁的構成要素主要有：網絡標志、色彩、字體、圖片、宣傳標語、導航條等。１．　網絡的標志應是該網絡的特色和內涵的集中體現。２．網絡頁面的色彩包括網站的標準色彩、文字鏈接的色彩、圖片的主色彩、頁面的背景色和邊框色彩等。色彩的適當選用能體現網站的外觀形象，延伸網站的內涵形象。但是網站色彩的設計，種類不能過多、純度也不宜過高，以避免引起瀏覽者的視覺疲勞。同時也要巧妙運用其他色彩作為點綴，使畫面活躍又不喧賓奪主。３．網絡頁面的字體主要包括網站的標志、標題、及主菜單的主要字體以及字體的可閱讀*，如字體的粗細、顏色等。在此基礎上發揮字體的圖形性、裝飾功能，對字體的自身趣味適當表現，以提高瀏覽者的閱讀興趣。４．網絡頁面中圖片的運用可以增加頁面內容的形象*，更直觀地表現或渲染主題，因此它在頁面元素的編排中也是一個重要部分。大面積的圖版易表現感性訴求，有朝氣和真實感；小面積的圖版給人精致的感覺，使人視線集中；大小圖片的搭配使用，可以產生視覺上的節奏變化和畫面空間的變化。圖片少則頁面顯得平穩，圖片多則頁面顯得活潑。５．　網絡頁面的宣傳標語往往體現一個網站的特色、精神和目標。清晰直白地表明該網站的形象，增加頁面與頁面之間的統一感，從而加深瀏覽者的印象。６．　網絡頁面的導航條是瀏覽者在一個網站的多個內容之間，即頁面與頁面之間跳轉連接的樞紐，它外觀形態的醒目和鏈接的條理性設計將直接影響網站的瀏覽率。

四、網站版面的視覺流程設計

   所謂的視覺流程，是頁面內容的一種視覺傳達過程，是以人的生理和心理習慣的認知模式來進行的，是將各種構成要素在視覺運動的規定下進行空間定位，即從注意力的捕捉起，通過視覺流向的誘導，直至最后的印象留存，體現出這一程序的規劃和誘導性。合理的視覺流程應在與人們的認識過程的心理順序和思維發展的邏輯一致的基礎上，根據信息的主次（即傳達重點）來確定各元素的順序，并通過精心安排從而影響、引導瀏覽者的視線移動。

  １．常見的幾種視覺流程形式。我們知道，畫面中任何視覺形象都有其力動性和誘導性。垂直線引導人的視線作上下移動；水平線引導人的視線作左右移動；斜線更有張力，使視線斜方向移動；折線和正方形使視線作四個方向的輻射；圓形則是一種均衡的輻射狀的擴散；三角形使視線沿三個方向運動。此外，構成元素的位置、走向也會影響頁面力的方向，構成元素的自身的方向、色彩的深淺則影響到力的強弱。

２．考慮頁面上的每個元素所產生的力并結合主題內容的主次，來安排各個元素的位置。人們在閱讀時視線通常是：從左到右，從上到下，從左上到右下。因此在構圖中，一般注意力最大的位置依次是版面的上部、左部、中上，它們即是畫面的最佳視域。主題不同，則各個構成元素的重要性也不同，把它們放在不同的視覺領域，則會產生不同的注意力價值。

  ３．此外，網頁版面的視覺流程設計因網頁的**性和超鏈接性、視覺在空間上無限延展的連貫性而同樣很重要。網站內容一次性全部呈現，瀏覽者的閱讀順序也不是單線性的。很多層次中隱藏的信息會被不同的瀏覽者發現或忽略，導致同一網站對不同的瀏覽者會有不同的呈現面貌。瀏覽者的閱讀***，對設計者而言則是不確定性。因此，除了要考慮單個頁面的視覺流程外，更要注意各種可能發生鏈接的頁面與頁面之間視覺流程的巧妙安排和誘導。

五、網頁版面的空間設計

網頁往往包含的信息量很大，但由于網頁的超鏈接特征，使它的空間可以無限擴展。設計者通常把產品或服務的不同賣點分別集中在不同的路徑之中，在細化的分頁中可以根據次主題的不同，對各個構成元素的空間進行多樣化安排。

  網絡上的三維空間是一個假想空間，它是由無數個具體的二維平面空間組成的虛擬世界。這些二維的平面空間就是網頁。二維平面的空間是借助各個構成元素的比例關系、位置關系以及動靜變化等空間因素表現出來的。各個元素的形象的彎曲變化、大小變化、色彩變化、位置的前后疊壓、紋理的漸變、元素之間清晰與模糊的對照以及**法的應用、疏密的變化、矛盾空間等所產生的視覺效果都不相同，都能豐富平面的視覺深度，使之產生富有彈性層次的空間效果。空間設計在作用于瀏覽者的視覺感受的同時，也產生不同的心理感受，增加畫面的注目率。一般ZF類和商業類的網站的空間安排往往注重條理化，分層分級的簡潔明快；媒體類以及個人類網站則追求時尚的或出人意料的、或神秘的、或非常態的個性化空間效果。

六、網頁版面的動感設計

  從網頁版面單個頁面的動感表現來說，和傳統報刊等的動感表現方法是一致的。畫面的動靜效果是相對的，是相互依存的，無動就無靜。“動”在畫面上表現為構成元素輪廓的不規則、張揚，或是構成元素有動態動勢，或是畫面色彩的鮮明跳躍；“靜”則是構成元素的形體輪廓的規則、平穩以及色彩的單純簡潔。

而從網頁版面整體的動感效果來說則是有網頁自身的獨特性。


１．從單個頁面談多媒體功能的利用


  網絡資源的優勢之一就是多媒體功能。用三維動畫、ＦＬＡＳＨ、動畫ＧＩＦ、滾動字幕、背景音樂、特殊音效等多媒體手段來表現一些頁面內容。意境優美的或是風趣幽默的多種動畫、符號、音樂片段的搭配使頁面顯得活潑、有生氣，無疑對提高頁面注目率大有好處。但是對這些元素的運用也要緊扣主題的需要，協調整個版面的色彩氣氛、視覺流程，把“動”的元素和其他“靜”的元素融為一體，使二者相得益彰，而不能無節制地濫用各種動態效果，使人眼花繚亂。



２．從頁面與頁面之間的關系談超鏈接的跳躍動感

網頁的超鏈接，打破了以前人們接受信息的線性方式，形成網頁的多屏、多頁、嵌套的特征，瀏覽者可以在各種主題之間**跳轉。這時，設計者必須考慮建立快捷而完善的導航系統，從而使主題思想更加有條理地呈現出來。網站的服務對象是人，那么用戶體驗就是導航設計的核心。導航設計的目的是如何組構所有你期望傳達的信息以便瀏覽者可以最準確地獲取這些信息，使瀏覽者在閱讀中感覺一切都非常流暢——簡單、清晰、快捷。在滿足了導航條功能性的基礎上，我們也要考慮導航條的裝飾*，諸如它的形態、色彩、位置、大小等和頁面其他元素的協調，以豐富整個網頁的效果。


３．從網頁的長期效應談交互性和持續性的動感

網頁不同于傳統媒體之處在于它的信息更新和交互的及時*，它可以使受眾隨時登陸并長期關注。因此，設計者的工作不是一次作品發表后就結束的，必須根據網站各個階段的運作目標配合網站不同時期的經營策略和用戶的反饋信息，經常對網頁進行調整和修改。這樣，從設計者而言網頁版面的設計是一個動態持續過程，而用戶的體驗自然也隨之不斷變化。

七、結束語

在網頁的版面編排中，視覺流程和空間分割是支撐網頁平面視覺元素組構的骨架，是互為一體的，視覺流程即是一種空間運動。再加上網頁的存在方式的特殊性——動感*，構成了網頁編排的三大要素，把握三者的關系無疑是網頁版面編排的關鍵。