網站頁面設計技巧

網站的設計既簡單又復雜，一個成功的網站不僅僅要引人注目的設計，還要優秀的內容，讓網站能成為一種獨有的風格，這樣用戶才能能好享受用戶體驗。網站首頁是用戶評判企業的第一標準，是用戶第一眼看到的東西，因此首頁承擔著樹立企業形象的重任。框架頁起到導航的作用，在各欄目內部主要內容的介紹，都可以通過框架頁進入普通頁，讓瀏覽者能夠快速了解網站的主要內容。普通頁面是最主要的信息頁面也是網站的最終頁面。對于大型網站這種結構很重要，但是對于小型網站，規模比較小，頁面的數量也不是很多，這個時候框架頁可能就起到跟普通頁面一樣的作用。

那么在網站設計的過程中有哪些小技巧呢？下面詳細介紹各頁面的設計技巧：

一、首頁設計技巧

現在印刷精美的產品目錄或廣告隨處可見，當我們看到這些印有產品目錄或廣告的精美印刷制品的時候，我們心里或多或少都會對有關的產品形成一種好感，看著精美的印刷品，覺得賣家是用心做廣告，相比他們的產品也不會差，看著比較高級的產品會更加吸引人的眼球。而對于那些相對來說比較毛糙的印刷品，我們第一眼看上去對他們的產品就會留下一個不好的印象，從而對他們產品的可信度就會降低。好，現在說說網站的設計，相信您會同意這種說法：網站的頁面就好比是“無紙的印刷品”。

一般來說網站首頁的展示形式有兩種，一種是純粹的形象展示，這種類型文字信息比較少，圖像比較多，通過藝術造型和設計布局，樹立公司形象，展示產品，向用戶展示出一種形象、一個氛圍，從而吸引瀏覽者進入瀏覽。要想達到這個效果，需要設計者有良好的設計基礎，通過布局，顏色搭配給用戶留下深刻的印象，當然啦，我們不能只顧著設計，我們的目的是營銷，推廣我們的產品，在設計的過程中一定要牢記這一點。

另外一種是羅列信息型，這種主要是羅列出網站主要內容分類、重點信息、網站導航、公司信息等等，也就是我們上邊所說的框架頁，一般大中型企業會用到這種方式。因為這種類型是以展示信息為主，比較審核網站信息量大，內容豐富的網站。設計人員在設計的時候要在細微之處體現企業形象，建議在設計時候要認真閱讀企業的ＣＩ手冊，熟悉企業標志、吉祥物、字體及用色標準，往往平淡之中一個優美的符合企業特點的曲線就能夠給人以深刻的印象，從而將企業形象印在瀏覽者的腦海里。設計人員在設計過程中要注意使用這些語言符號來表達一種獨特的企業信息。

二、風格保持一致——內頁設計技巧

1、結構的一致性：在網站的設計過程當中，網站的統一性占有很重要的地位，而網站結構的統一是網站風格統一的重要手段，包括網站布局、文字排版、裝飾性元素出現的位置、導航的統一、圖片的位置等等，如果您去留戀一些國外的著名網站，就會驚奇地發現，這些網站的結構驚奇的一致。在結構的一致性中，我們要強調網站標志性元素的一致性，即網站或公司名稱、網站或企業標志、導航及輔助導航的形式及位置、公司聯系信息等，這種方式是目前網站普遍采用的結構，一方面減少設計、開發的工作量，同時更有利于以后的網站維護與更新。

2、色彩的一致性：在同一個網站內，色彩的一致會讓用戶感覺到自己是在一個網站內瀏覽頁面。保持網站主體顏色一致，只改變局部色塊。人的視覺對色彩要比對布局更加敏感，容易在大腦中形成記憶符號，一個色彩獨特的網站會給人留下深刻的印象。如果企業有自己的形象，建議可以從這里邊挑選一到兩種主要色彩，幾種輔助色彩，這樣可以給用戶線上線下一直的感覺，更加貼合企業形象，并且使企業形象深入人心。

3、利用導航取得統一：導航是網站一個重要的組成部分，一個成功的網站，富有企業特性的導航將會給人留下深刻的印象，比如把標志的形態融合在導航之中，或者將導航在整個網頁的設計之中濃墨重彩一筆描繪出來，多花點時間在導航上，設計出一個出色的網站。

4、特別元素的一致性：在網站設計的過程當中，個別具有特點的元素（比如標志，象征圖形，局部設計等）重復出現，這些特別的元素會給用戶留下深刻的印象。比如網站結構在某一點上的變化，由直線變為圓弧、暗色點綴的亮色、色彩中的補色等等。

5、利用圖像取得統一：在網頁中使用圖像時一定要慎之又慎，尤其是一些動畫，網頁當中最好不好充斥著各種可有可無的動畫，這些動畫如果跟企業內容沒有關系，最好還是不要，這樣只會增加工作量，并沒有實際的作用。這里我們所說的利用圖像取得統一，不是在每頁中放置幾個動畫！而是作為網站結構一部分的局部圖像，根據網頁內容的不同，配以相應的圖像或動畫，從而給用戶形成頁面的連續性。在動畫跟圖像的應用上一定要小心謹慎。

6、利用背景取得統一：從技術的角度而言，網頁的背景包括兩種背景色和背景圖像。一般來說，我們不提倡使用背景圖像，原因如下：第一，兩者的下載速度不一樣，背景顏色的下載速度可以忽略不計，而背景圖像的下載速度就得根據圖像字節的大小下載了。如果使用了背景圖像，背景圖像顏色比較深的話，最好將背景顏色也設置為深色，這樣在等待瀏覽器下載圖片的過程中，背景是深色的，文字就可以很好地展示出來，因為默認的背景顏色是白色，文字也是淺色的話，文字沒法展示。第二，展示效果，在設計時一定要注意背景圖片不能太過于雜亂，這樣的話，前面的文字展示效果就被遮蓋了，背景圖像太過于搶眼，讓用戶沒辦法閱讀，給人一種很不舒服的感覺。如果說背景比較搶眼，要對背景進行處理減少不透明度或者降低亮度，讓背景圖像與背景顏色融合。

三、色彩搭配

對于很多設計師來說，顏色搭配是一個難題，如何運用顏色搭配表達出豐富的含義，體現企業形象是網頁設計師需要研究，掌握的問題。如何進行顏色搭配是一門學問，下面是在實踐中的一些總結。

1、采用相同色系顏色：相同色系就是色環上間距在45°左右的顏色，這種顏色搭配可以讓網頁趨于一致，缺點就是頁面太過于單調，為了彌補這個缺點可以點綴一些對比色的圖片或者局部顏色，兩者形成對比，單調中增加一些可愛。

2、采用對比色：對比色就是色環上處于對角左右45°范圍內的顏色。這樣顏色搭配出來的網站比較活潑，顏色對比比較明顯。它有一個很明顯的缺點就是用色過多會造成色彩雜亂。

3、采用過渡色：過渡色能夠神奇地將幾種不協調的色彩統一起來，在網頁中合理地使用過渡色能夠使你的色彩搭配技術更上一層樓。過渡色包括幾種形式：兩種色彩的中間色調、單色中混入黑、白、灰進行調和以及單色中混入相同色彩進行調和等等。

四、版面布局

一般來說，網站布局是多種多樣的，設計比較靈活。從排版布局的角度而言，我們可以設計成等分一欄式、兩欄式、三欄式、多欄式，不等分兩欄式、三欄式、多欄式等等，但因為瀏覽器寬幅有限，一般不宜設計成三欄以上的布局。

在排版布局中要著重考慮的是導航，標志等比較重要的部分放置位置，一般情況下，這些是放在頂部的位置，尾部是一些企業鏈接，或者導航也可以放在右側等等。正文可以采用傳統的布局，也可以做成一屏一屏展示的效果，這些要相互搭配，保證結構清晰合理即可。