成都網站建設/成都網站優化/網頁界面設計的重要規范

閱讀 ?·? 發布日期 2019-01-10 19:44 ?·? admin
成都網站建設/成都網站優化/網頁界面設計的重要規范,網站界面設計是一門獨特的藝術，既要從外觀上有創意以到達吸引眼球的目的，還要結合圖形和版面設計的相關原理。通常，企業網站用戶界面的設計一般應遵循以下幾個基本原則：

一．用戶導向原則（User oriented）

設計網頁首先要明確網頁的使用者，要站在用戶體驗立場上來考慮和設計。要做到這一點，就必須要和用戶溝通，了解他們的需求、目標、期望以及偏好等。網頁的設計者要清楚，用戶之間是有差別的，他們的能力也各有不同。比如有的用戶可能會在視覺方面有所欠缺（如色盲），對很多的顏色分辨不清；有的用戶的聽覺也可能會有些障礙，對于網站的語音提示反應比較遲鈍；而且相當一部分用戶的計算機使用經驗還很初級，對于復雜一點的操作就會感覺到很費力。另外，用戶使用的計算機機器配置是千差萬別的，如顯卡、聲卡、內存、網速、操作系統以及瀏覽器等都會有所不同。設計者如果忽視了這些差別，設計出的網頁在不同的機器上顯示就會造成錯亂。

二．簡潔和易于操作原則

簡潔和易于操作是網頁設計的重要的原則。網站主要是用于普通網民來查閱信息的網絡服務。沒必要在網頁上設置過多的操作，堆積很多復雜和花哨的圖片。此原則的要求如下：

1、網頁的下載不要超過6秒鐘（普通的家庭寬帶為2M的，速度一般在220kb/s）；
2、網頁盡量使用文本鏈接，盡量減少大幅圖片和動畫的使用，加快網頁的打開時間；
3、操作設計盡量簡單，并且要有明確的操作提示；
4、網站所有的內容和服務都盡量在顯眼處向用戶予以說明等。

三．布局控制（Layout）

在網頁排版布局方面，很多網頁設計者還不夠重視，網頁界面設計排版過于死板，甚至照抄他人。如果網頁的布局凌亂，僅把大量的信息堆集在頁面上，就會干擾瀏覽者的閱讀。一般在網頁界面的版式設計上所要遵循的原則有：

1、7±2的Miller公式。
根據心理學家George A.Miller的研究表明，人一次性接受的信息量在7個比特左右為宜。總結一個公式為：一個人一次所接受的信息量為 7±2 比特。這一原理被廣泛應用于網站建設中，一般網頁上面的欄目選擇更佳在5～9個之間，如果網站所提供給瀏覽者選擇的內容鏈接超過這個區間，人在心理上就會煩躁，壓抑，會讓人感覺到信息太密集，看不過來，很累。例如Aol.com的欄目設置：Main、MyAol、Mail、People、Search、Shop、Channels和Devices共八個分類。Msn.com的欄目設置：MSN Home、My MSN、Hotmail、Search、Shopping、Money和People & Chat共七項。然而很多國內的網站在欄目的設置遠遠超出這個區間。

2、分組處理。
上面提到，對于信息或欄目的分類，不能超過9個。但如果你的內容實在是太多，超出9個，就需要進行分組處理。如果，你的網頁上有幾十篇文章的鏈接，需要每隔7篇加一個空行或平行線做以分組。如果你的網站內容欄目超出9個，如騰訊公司的網站或其它幾個比較知名的門戶，有很多個欄目，超過了9個。為了不破壞7±2的Miller公式，在設計時把比較有代表性的分類加粗，然后再按性質分組，更終如下圖分成了6列大的欄目，具體請訪問www.qq.com參考。

騰訊網-網站欄目設計

四．視覺平衡（Visual balance）

網頁設計時，各種元素（如圖形、文字、空白）都要有視覺平衡作用。根據視覺原理，圖形與一塊文字相比較，圖形的視覺作用要大一些。所以，為了達到視覺平衡，設計網頁時需要以更多的文字來平衡一張圖片。另外，按照中國人的閱讀習慣是從左到右，從上到下，因此視覺平衡也要遵循這個這個原則。例如，你的很多的文字是采用左對齊〈Align=left〉，需要在網頁的右面加一些圖片或一些較明亮、較醒目的顏色。
通常情況下，每張網頁都會設置一個頁眉部分和一個頁腳部分，頁眉部分通常放置一些Banner廣告或導航條及網站LOGO，而頁腳部分通常放置聯系方式和版權信息等，頁眉和頁腳在設計上也要注重視覺平衡。同時，也決不能低估空白的價值；網頁上所顯示的信息非常密集，這樣不但不利于讀者閱讀，甚至會引起讀者反感，破壞該網站的形象。在網頁設計上，適當的地方增加一些留白，精煉和升華你的網頁的形象及美感，使得頁面變得簡潔。

五．色彩的搭配及文字的可閱讀性

顏色是影響網頁的重要因素之一，不同的顏色對人的感覺有不同的影響，比如：紅色和橙色使人興奮并使得心跳加速；黃色使人聯想到陽光，是一種快活的顏色；黑色顯得比較莊重，考慮到你希望對瀏覽者產生什么影響，為網頁設計選擇更恰當的顏色（包括背景色、元素顏色、文字顏色、鏈節顏色等）。

為了方便閱讀網站上的信息資訊，可以借鑒參考報紙及雜志的編排方式將網頁的內容分欄設計，甚至兩欄也要比一滿頁的視覺效果要好。另外一種能夠提高文字可讀性的因素是字體的選擇，通用的字體（Arial，Courier New，Garamond，Times New Roman，中文宋體）更易閱讀，特殊字體用于標題效果較好，但是不適合正文。如果在整個頁面使用一些特殊字體（如Cloister，Gothic，Script，Westminster，華文彩云，華文行楷），這樣讀者閱讀起來感覺一定很糟糕。這類特殊字體如果在頁面上大量使用，會使得閱讀頗為費力，瀏覽者的眼睛很快就會疲勞，不得不轉移到其他頁面。

六．和諧與一致性
通過對網站的各種元素（顏色、字體、圖形、空白等）使用一定的規格，使得設計良好的網頁看起來應該是和諧的。或者說，網站的眾多獨立網頁看起來更像一個整體。網站界面設計上要保持一致性，這是很重要的一點。一致的網站結構設計，可以讓瀏覽者對網站的形象有深刻的記憶與印象；一致的導航設計，可以讓瀏覽者迅速而又有效的進入在網站中自己所需要的部分；一致的操作設計，可以讓瀏覽者快速學會在整個網站的各種功能操作。如果破壞這一原則，就會誤導瀏覽者，并且讓整個網站顯得雜亂無章，給人留下不良的印象。

當然，網站設計的一致性并不意味著刻板和一成不變，有的網站在不同欄目使用不同的風格，或者隨著時間的推移不斷的改版網站，會給瀏覽者帶來新鮮的感覺。

七．個性化

1、符合網絡文化

企業網站不同于傳統的企業商務活動，要符合Internet網絡文化的要求。首先，網絡更早為非正式性、非商業化的，只是科研人員用來交流信息的。其次，網絡信息是只在計算機屏幕上顯示而沒有打印出來閱讀，網絡上的交流具備隱蔽性，誰都不知道對方的真實身份和信息。此外，許多人在上網的時候是在家中或網吧等一些比較休閑，比較隨意的環境下。此時訪客的使用環境所蘊涵的思維模式與坐在辦公室里西裝革履的時候是截然不同的。因此，整個互聯網的文化是一種休閑的、非正式性的、輕松活潑的文化。在網站上使用幽默的網絡語言，創造一種休閑的、輕松愉快、非正式的氛圍就會使網站的訪問量大增。

2、塑造網站個性

另外，網站的整體風格和整體氣氛表達要同企業形象相符合并且應該很好的體現企業CI。

八．網頁的整體規劃與選擇
1、尺寸

800×600能照顧到所有網友的電腦，但相當是張“小報”。
1024×768漸成主流。1024×768能比800×600多出一欄的信息。
正文頁采用自適應設計，能在正文頁做更多相關內容。首頁也可以嘗試自適應的設計。自適應設計的核心是要留出寬度伸縮自如的欄。
在1024×76模式下，頁面的長度不易超過10屏。
隨著電腦升級換代，分辨率提高，電腦屏幕能夠提供的面積越來越大，這是一種難得的資源，要充分利用。“小報”改“大報”要增加一倍的紙張成本，網站改“寬版”，成本的增加卻要小得多。

2、字體字號

目錄頁用小字號，為的是放更多的標題。
正文頁用大字號。為的是讓讀者讀得舒坦。
慎用不容易看清楚的楷體。楷體的作用等于圖片，主要起美化版面的作用。
多用對搜索引擎友好的標粗，來表示重點。

3、顏色

同一個頁面的顏色不要超過4種。眼花繚亂，容易產生視覺疲勞。
顏色對比不要反差太大。網頁版面不是美術作品，要避免形式對內容的喧賓奪主。
文字＋底色能夠起到很好的突出作用，在視覺變化上相當于圖片的作用。

4、靜態化

訪問量大的頁都應該靜態化，以便減少服務器壓力，增強網站穩定性。訪問不到的網頁是更差的網頁。
動態化和靜態化在一個頁面中結合使用，能同時得到輕負荷和即時交互性的好處。
哪些頁面的哪些地方需要靜態化要在一開始就考慮，訪問量大了之后，再高考慮，就遲了，由動態化轉為靜態化，會有很多歷史問題。

5、分欄

首頁選4欄？還是3欄？
正文頁多用2欄。
“縱向邏輯”是指將相近的內容從上至下排列，而不是從左向右排列。如果讀者對這方面內容感興趣，他會從上至下，逐行閱讀。這樣可充分力利用首屏，讓首頁增多從上至下閱讀的可能。
避免一欄太強，一欄太弱。通過圖片、套紅等手段進行調控。平均使用讀者主意力。使讀者不敢放過左中右任何一欄。

6、圖片

有圖有真相，一圖勝千言。十分必要時才用。因為圖片的編輯成本和帶寬成本都比較文字高很多。
在目錄頁的圖，小點，再小點，多用特寫；小分辨率，能看就行。在正文頁的圖，保證清晰，美觀。正文頁有的是版面。
正文頁在5屏之內，盡量不要分頁。讓讀者一次讀完。

7、導航條與網站地圖

導航條是網站的門牌號碼，不能隨意更改。否則，讀者會迷路，找不到他原來看的內容。
導航條上的分類名的前后次序要兼顧重點和讀者閱讀邏輯，即歸類擺放。
導航條更多三行。更好二行。太多行顯重。
導航的更多，就是網站地圖。網站地圖的摘要版可以放在網站底部，成為底部導航。網站的底部導航，很有必要。其好處是：一、可放多行；二、可形成網站底部的閱讀重點。將讀者從首屏帶到更后一屏，期間會增加很多點擊。
主導航和頻道導航：主導航每頁都有，頻道導航只在本頻道頁面出現。