網頁界面設計論文模板(10篇)

導言：作為寫作愛好者，不可錯過為您精心挑選的10篇網頁界面設計論文，它們將為您的寫作提供全新的視角，我們衷心期待您的閱讀，并希望這些內容能為您提供靈感和參考。

篇1

引言

格式塔一詞來源于德文“Gestalt”的音譯，本意指的是形式、形狀、方式、實質。格式塔心理學是一種與藝術有緣的心理學理論，其主要目標是探討視覺感知及其與學習、思維的關系，它所研究的出發點就是“形”，“形”是經由知覺活動組織成的經驗中的整體，與視知覺活動密不可分。而網頁界面設計是視覺傳達設計向網絡媒體的延伸，主要是通過瀏覽者的視覺感知來接受網站信息。因此，研究格式塔理論在網頁界面設計中的運用，無疑對網頁界面的設計具有很大的指導作用。

格式塔理論在網頁界面設計中的應用

網頁設計是將特定的視覺信息要素，根據主題表達的需求在特定的頁面上進行的一種編輯和安排，其基礎是視覺生理學和視覺心理學。格式塔心理學派通過對視覺感知的生理研究，提出了一系列視感知規律，其中包含了“圖底”這個核心概念，和“簡明原則”“接近原則”“相似原則”“閉合原則”等視感知特性，將這些規律引入頁面設計，有助于我們優化視覺時代“形象過剩”狀態下盲目的網頁設計，提高信息傳達的速度與準確度。

1.圖與底

在人的知覺系統中最基本的一種知覺能力是在圖形與背景間作出區分。“圖”是居于前部的區域，“底”被看成是用來襯托圖的背景。相對而言，圖比底，輪廓較為完整、封閉，形狀較為規則，面積比較小，色彩比較鮮艷；此外，更重要的是，能組織成為一定意義的區域傾向于被感覺成圖。

由于圖與底之間存在的這種相對性質，在網頁設計中，應當明確區分圖與底，主體與背景。另外,主體自身結構要清晰明了，背景不能過于復雜，這樣才有利于瀏覽者辨別需要了解的信息。在背景的色彩搭配上應盡量選用同一色系的顏色，盡量避免同時使用色相環中相對的顏色，大面積同一顏色宜采用低對比度，避免用強烈刺激的顏色引起瀏覽者的視覺疲勞與厭煩情緒。格式塔理論的圖－底規則不僅說明了主體從背景中分離出來的條件,而且指出了背景在一個格式塔中的重要作用。因此在網頁設計中我們同樣不能忽視背景的作用，圖形是依賴于背景而存在的，要使主體感到存在，必然要有底將它襯托出來。因此無論在文字、色彩、圖像，還是動畫和視頻方面都要堅持圖底原則。

2.簡明原則

格式塔心理學家認為，人們的知覺有一種“簡化”傾向，所謂簡化并非僅指一般意義上的“簡單”，即物體中包含的成分少或成分之間的關系簡單，而是一種將任何刺激以盡可能簡單的機構組織起來的傾向。我們的眼睛只能接受少數幾個不相關聯的整體單位，如果一個格式塔中包括太多不相關的單位，眼睛就會試圖將其簡化，把各個單位加以組合，使之成為一個知覺上易于處理的整體，否則，整體形象將無法被正確感知，這種形象勢必會被人們忽視，以至拒絕接受。

我們可以將這一觀點延伸到網頁界面設計中。首先，在網頁界面結構的設計上，應避免使用過于復雜的網格結構，結構的設置應盡量簡單明了，符合人的視覺流程，也符合人們對規則形的喜好，利于瀏覽者以最短的時間找到最需要的信息。

其次，在圖像的選擇上，應避免使用過于繁復雜亂的、容易分散瀏覽者注意力的圖像，這樣會增加瀏覽者找尋信息的難度。

再次，在進行文字編輯時，應該考慮編輯的最終效果。文字應給人以清晰的視覺印象，避免頁面繁雜凌亂，減少不必要的裝飾變化，使人易認、易懂、易讀，不能為造型而編輯，忘記了文字本身是傳達內容和表達信息的主體。在字體的選擇上，雖然可供選擇的字體很多，但同一頁面上的字體種類最多只能有三四種，這樣才不會顯得花哨。字體的選擇應依據段落大小和內容層次,由重到輕、由粗到細。字號的選擇也應該依據內容層次由大到小，但到了節以下的層面，可以選用同一字號但用不同的字體加以區分。在文本密度方面，文本應該以短小的組塊形式出現，并且應該經過編輯，以簡化內容。3.接近原則和相似原則

接近原則和相似原則的本質上都是簡化和整體化知覺對象的組織原則，與前面的簡明原則類似，人們在傾向于簡化認識對象的同時，也傾向于將近似、接近的元素組合起來作為一個整體加以認知。也就是說如果不同的文字或圖形組成部分位置靠近，瀏覽者就比較容易看出它們是一起的。根據這一原理，對于頁面上的任何元素，如果在功能或內容上是相同或相近的，就應在一定程度上保持相對較小的空間距離，做到“物以類聚”。比如，頁面中用以解釋圖形或用以表明某一部分圖形的文字就應當緊挨其所指的圖形或部分圖形。

相似的物體也很容易被認為是從屬于一個系統，具有相似的功能。因而，需要通過將瀏覽者注意力集中于視覺范圍內的關鍵概念，幫助他們獲得信息。在網頁界面設計中，可以通過強調、動畫、對比色的使用或其他手段達到這一目的。假如一個圖形中的組成部分都屬于同一風格，這個圖形就被視為一個整體。為了使瀏覽者重點關注圖形中的特定部分，對這一部分可采用不同的顏色、動畫、閃爍或其他區分方式。但是，如果一幅畫面中區別過多，也會使瀏覽者難以注意需要獲得的信息。因此，這些方法應該用于強調關鍵信息或圖形的關鍵部分，而不宜用于大片信息。

4.閉合原則與網頁界面設計

閉合原則是指一種完成某種完形的行動。這一規則表明，每一種視覺樣式都可以被看成是一種陳述，對于模棱兩可的視覺樣式，人們會根據以往的經驗按照不同的樣式加以組織，這時不同的人會看到不同的東西。因此，在網頁界面設計時,應當避免出現不完整的圖形，以免使瀏覽者花費過多的時間去琢磨圖形的含義，而不是從網頁上獲取信息。

閉合規則還表明,視覺形象被知覺的形式是首先作為一個統一的整體被知覺，然后再以部分的形式被知覺。因此，在進行網頁界面設計時，要強調整體風格的統一，內容與形式的統一。

結語

將格式塔心理學引入網頁界面設計，目的是希望網頁設計向理性化的方向發展。隨著網絡的不斷發展，瀏覽者對頁面的要求也越來越高，但現在的頁面設計大多還是從直覺出發，離科學的頁面設計還有相當大的距離，因此要想達到科學的頁面設計，就要在設計時遵照人類的認知規律，并且將這些規律正確地應用到設計實踐中。而如何將格式塔理論與設計結合起來,仍是我們需要投入大量精力去研究與探討的問題。

參考文獻：

[1]曹方著.視覺傳達設計原理，江蘇美術出版社

篇2

隨著科技的發展、電腦及網絡的興起，網絡界面的出現使得人們的閱讀方式乃至生活方式發生著改變，直接影響著人們生活的方方面面。網絡界面設計作為平面設計陣營中的新生代，展現出數字信息時代下嶄新的藝術設計語言。當今是書籍設計與網絡設計共存的時代，實體與虛擬的并存，呈現出各自設計特征與發展方向。網頁界面設計中的視聽要素與所展現出的設計語言的新面貌，為已有的信息傳播方式帶來了新的展現平臺。網絡界面設計除了運用印制媒體設計的構成原理與視覺要素，還具備了其特有的鮮明特征。網絡界面設計的新特征展現在視覺藝術與網絡技術的不斷變革中。作為新生代的網絡界面設計是對印制媒體設計的繼承和發展，其與書籍設計相比有著其鮮明的特征。

一、新特征

（一）互動的距離。書籍設計呈現出一種“只讀藝術”，閱讀者在品讀過程中往往是被動的。而網絡媒體藝術是一種“可讀寫藝術”，瀏覽者可在登陸后實時關注，并在相關內容上進行瀏覽、反饋和答復等等，實現“零距離”交流互動。設計師將設計良好的界面、網絡技術開發和網絡交互性進行結合，將使網頁瀏覽者實現自由的、主動交互的選擇，這些對于書籍閱讀來說基本無法實現。

（二）線性與非線性。從書籍所呈現的內容文字來看，其呈現出“線性”排列，受其印制品的物理結構與相關內容空間編排的制約，這種由頭到尾線性文本的編排，使讀者產生單一方向的內容認知的過程。讀者在篩選內容后，在閱讀中是遵循一行一行的由前向后的讀覽方式，這就體現出“線性”閱讀的特色。網絡界面設計打破了傳統文本排列的架構。鏈接實現了文本闡述、拓展、補充等若干部分的內容。讀者根據需要將排列的文檔一部分一部分的劃分開，確定自己的閱讀中心，在屏幕上將閱讀空間內容重組，從而實現自主的個性化的文本閱讀意義。

（三）單一媒體與多媒體。多媒體的發展成為網頁界面設計的流行趨勢，與書籍設計這種單向媒體相比較而言，其優勢是集成圖形圖像、音效音樂、以及視頻動畫于一體，促使視覺觸覺聽覺等等全方位多角度多視點的傳達信息，吸引觀者。這種多表征的信息集合表現產生了“1+1＞2”的效果。網頁模擬出真實的場景這是書籍設計無法體現出的效果。這種多感設計已成為網頁設計中爭相展現的面貌。

（四）空間擴展。書籍版面展現出來的是平面二維空間，而網絡界面往往是二維和三維的共同體。三維空間具有更大的信息量，增添了新的維度，從而滿足人對空間心里真實的需要。同時，界面的層層串接使瀏覽者在網頁內容之間循序往復的互相套接，架構出層層深度的脈絡，吸引人們深入認知。

（五）即時性。信息的時效性是信息社會的基本特征。書籍編輯印制的時間過程往往比網絡編輯的過程要緩慢。由于網絡技術和網絡界面的設計特點，設計人員將編輯完整的網站或網頁于網絡，那么即可完成。這樣往往節省了書籍印制過程中所需的時間段，從而在第一時間將鮮活準確的信息廣泛的傳播，網絡信息的即時性特點也就體現了出來。另外在網絡中互動的平臺中，往往也體現出信息的時效性。例如：論壇中的相關討論和問題的回復，都體現出此特點。

（六）廣告的靈活性。作為互聯網上新興的一種廣告形式——以網絡為平臺的網絡廣告也就應運而生了。網絡廣告是一種結合傳統的廣告形式與網絡應用技術的一種全新形式。網絡廣告與書籍廣告相比而言，主要可以從溝通性、信息性和效果性幾個方面加以比較。

書籍廣告中，由于書的特質致使其溝通受眾面有限，書中的廣告信息內容往往和書籍相關，效果大多傾向靜態的圖文信息，這樣的信息在傳播的過程中給人的感官刺激較單一。當然隨著科技的發展，也出現一些新的廣告方式，如：書簽廣告，隨書附贈品中加入廣告等，但與網絡廣告相比而言單一化的特征明顯。反觀網絡廣告的特質，其信息溝通模式是多樣性、實時交互性流通，避免了書籍廣告那種將信息灌輸式的，用印象去勸誘目標受眾成為消費者。同時其信息覆蓋面更廣泛、信息容量更大，信息綜合表現效果更強。

二、差異的表現

（一）書籍封面與網站首頁

就書籍封面而言，其間的圖形和文字等元素編排相對固定，效果方面也是據其內容設計出靜止且有內涵的風貌。而網站首頁表現手法靈活度大，往往會結合動態與音效等手段來一一呈現。引入式和主題式是網站首頁展現的兩種主要手法。引入式往往使用動畫或圖形圖像在首頁，主要是利用少量的文字和氛圍去制造出一個對網站總體的展現和引入。而主題式主要指首頁上方以導航條為主，下面出現若干分類信息。此類首頁以文字居多，分欄表現便于檢索。由于這樣的網站信息量較大，因此在查閱期間往往需要滾屏瀏覽。

（二）版面與界面

1、書的目錄與網頁導航。翻開一本書，想了解本書的內容，往往會先瀏覽目錄。目錄是本書的提綱挈領，呈現的方式主要是各章節標題與頁碼組成，靜態的組織加入紙張的質感無不顯現出書卷之氣。網頁中起到“目錄”功能的位置是導航條。其間只強調標題而略去頁碼，靜態與動態的緊密結合，聲效與變幻色彩的加入無不展現出導航條的特色。2、版心與分欄。書籍版面中的版心一般相對比較大、內容集中在版心內部，尺幅變化相對不大，整本書的分欄比較規范統一化，如：單欄或兩欄等等。留白率是指版面與空白之比，留白率的恰當使用會提升視覺效果和信息的認知度。與書籍版面相比，網頁界面的版心和分欄相對更靈活，留白率更大。版面色彩之間的運用與銜接變化更豐富。3、文字與圖底。網頁界面不像書籍版面那樣分出左右兩頁，并按前后注明頁碼。網頁間鏈接靠的是層層的鏈接，編排中的文字和圖形靈活多變，往往出現加底色或底圖的形式。從字體角度來看，書籍設計時軟件中可選用的字體種類較多，作為網絡界面上顯現的字體是由瀏覽者所使用的機器內部的字體數量決定的。一般用戶所使用的電腦中的字體是隨系統安裝的，字體數量是很有限的。因此網絡界面的字體與書籍上的字體相比而言展現出較固定化的特點。4、順序的呈現。書籍由印制裝訂在一起，內容在安排上順序感強，由前至后的段落排列引導讀者的閱讀。網頁界面因其互動性的特點，設計的過程中在主頁的超鏈接上可以按照不同人群需要設計出各種人性化連接界面，在設計環節中展現出脈絡狀的連接。

（三）形態表現

1、虛擬與實物。當今書籍設計師打破了傳統六面體的造型，創新出多面體的異型開本，使書籍從外觀造型上就獲取了更豐富的實物面貌。網絡界面二維、多維造型以數字化模擬體現，形態多變且靜動結合，多變的虛擬形態吸引著瀏覽者的關注和探求。2、材料質感的真實性與模擬性。特種紙的選用在如今的書籍設計中被普遍使用，各種真實的紙張質感易于彰顯出書籍的品質與內涵。而網絡界面中質感的體驗由數字化模擬表現來實現，網間質感呈現的樣式與書籍質感相比更多樣，實現起來更直接迅速。

三、融合

以上通過書籍設計與網絡界面設計的比較，更明確地辨清兩者之間的設計特征。如今兩者在平面設計領域中也不斷呈現出互相影響，適度融合的特征。書籍設計中適度加入互動環節已成為不少設計師的青睞。隨著“電子書”、“網上書城”作為新生力量不斷與線下的實體書店進行多角度的組合，“線上虛擬、線下實物”統一的內容不同的場合彼此融會貫通，共同開發拓展銷售渠道。

篇3

一、人性化游戲界面設計理論基礎

良好的用戶體驗是人性化有些界面設計的基礎。用戶體驗發生在生活的每個瞬間，比如當你用水杯喝水時，會隨手將杯蓋放在任何你隨手可以放置的地方，當你在不注意的情況下會將杯蓋隨手放在任何地方，隨后因為沒有印象而忘記杯蓋放在了哪里。現在很多的水杯都將杯蓋設計成連接在杯子上的，這樣就不容易忘記放在哪里了。這樣的例子不計其數。用戶體驗在開發數字產品、系統及服務的不同設計與可用性學科，并通過界面的交互設計來影響人們的體驗。數字產品的用戶體驗設計包括三方面，即形式，行為和內容。操作是游戲體驗的必要行為，交互設計關注行為設計，也關注行為如何和形式與內容產生聯系。人性化的游戲界面設計就是將交互設計理念完美的融入界面設計中，將形式和內容通過交互設計達到一種自然的狀態，是玩家才做起來更加順暢而方便，提高游戲的娛樂性。人性化游戲界面設計不僅要考慮到玩家大眾的心理，使用習慣，使用環境等因素，還要更好的研究大眾的文化，審美等因素對游戲的影響。只有達到平衡才能使玩家和游戲之間順暢而自然地進行信息交流

游戲界面交互設計同一般的WEB設計有所區別。游戲的信息功能復雜，板塊較多，加上玩法和游戲特定的規范，在創新設計上需要設計師全方位的考慮周全，有舍有取。

二、人性化游戲界面設計原則

游戲界面就像是一個自助式的產品，他和很多網絡產品一樣，沒有像真正產品一樣的說明書，當新手引導結束后，用戶只能憑自己的互聯網產品使用經驗操作那些命令。一個不好的界面，會使游戲玩家因為一個操作的卡住最終放棄游戲，這將造成巨大的損失。游戲界面承擔著玩家與游戲之間溝通的媒介作用，直接和界面設計相關的除了美術部分就是交互設計。交互設計是關于行為，操作流程的，和外觀相比，更難于觀察和理解。作為游戲界面的交互，保證玩家使用界面順利成功的進行游戲，界面設計需要以為人本，并且必須遵循一些游戲界面特定的設計原則。

1.簡潔易用

Less is more的設計思想不管設計任何事物都有很好的指導意義。游戲的界面需要設計師盡量做到精簡，以免太多的按鈕和菜單出現在畫面上，并且過于華麗的修飾也會干擾到玩家的注意力，很可能分散玩家的注意力，是玩家不能集中精力于游戲世界。操作界面應該盡量做到簡單明確，并且盡量少占用屏幕空間。而有的游戲因為信息數據繁多，做到精簡的難度很大。但是也有設計師挑戰了這種矛盾。例如現在很多網頁游戲都將游戲構成單元和主要場景結合起來。例如圖一，將主要場景中的建筑和組成這個游戲的各個玩法單元結合起來。這樣不僅僅減少了界面上菜單按鈕的數量，也更好的將玩家吸引到游戲情境當中。不僅是玩家操作更順暢，減少記憶成本，增加了操作上的游戲樂趣。

圖二是《大將軍》網頁游戲中的城外界面的國家查找界面。設計者沒有用過多的裝飾，簡潔的操作界面一目了然，并且雖然是游戲，但是為了方便玩家尋找國家承包，增加了搜索功能，將互聯網其他產品的功能活用到游戲當中也是一個很巧妙的辦法。

2.遵循游戲習慣

上面講到了將互聯網其他的產品的一部分需求功能增加到游戲當中，這樣的做法也需要度。因為游戲作為一個已經給玩家固定印象的產品，有他的特征。網頁游戲發展了許多年，玩家已經培養成了固定的使用習慣，因此不能隨意的改變這些習慣。例如圖三所示。

圖三為網頁游戲《一代宗師》的英雄界面和主城界面。主城界面可以看出和其他的大部分網頁游戲沒有太多的區別。左上角為英雄頭像，名稱，等級和一些屬性。下方一條則為工具欄。左右兩邊為信息欄和任務欄。玩家已經經歷了多個類似設計的網頁游戲，已經培養起了固定的使用習慣，因此這樣的設計不會使玩家在尋找操作方式上花費太多時間。英雄界面則改動很大。圖四為一款網頁游戲的交互設計原型圖。圖四的設計是大多數網頁游戲英雄面板的設計方式。從左至右的方式選擇，符合用戶使用習慣。而圖三則將英雄的選擇方式放到了上方，將玩家關注的英雄裝備情況的區域縮小，放到了界面的下方，這樣做模糊了主次關系，將本該強化注意的裝備情況削弱了。不但視覺上不舒服，而且在操作上也加大了玩家的學習成本，很容易造成游戲用戶的流失。

3.可擴充原則

網頁游戲和一般的網絡產品不同的是，它會不斷地更新新的版本，增加新的功能，這樣才能適應不同玩家的不同需求，適應市場競爭。這樣也要求交互設計師再設計操作界面的時候，要給以后的游戲功能開發流出一定的空間，所謂的動態擴展空間。聽起來很困難，但是在工作中需要和游戲策劃者多多溝通，及時得到最新信息。

篇4

 

想要建立一個成功的網站，首先就要貫徹“以人為本”的原則，在現今的設計過程中能夠體現“以人為本”原則的設計就屬用戶體驗設計了。科技論文。這就不得不提到兩個名詞即用戶體驗和用戶界面概念的理解。

一、名詞概念

1.什么是用戶體驗

用戶體驗（user experience）簡稱UE，是指用戶在接受和使用一個產品（服務）的過程中建立起來的心理感受。用戶體驗無處不在，在日常生活中人們所接觸到的一切產品，例如，交通工具飛機、汽車、公交車、自行車，數碼產品電腦、手機、相機、mp3等，人們在使用的過程中都會產生純主觀的心理感受。這些純主觀的感受完全建立于用戶體驗產品的過程中，而產品的好壞或虧盈就由這些體驗感受所決定，所以產品設計中的以用戶為中心的用戶體驗設計顯得至關重要。

2．什么叫做用戶界面

用戶界面（User Interface）簡稱UI，界面（Interface）是人機互動過程中的一個層面；界面設計是一個復雜的有不同學科參與的工程，認知心理學、設計學、語言學等在此都扮演著重要的角色。比如，制作一個公司的網站時，不僅要兼顧用戶的便利，同時也要把這個公司引人注目的地方一起展現出來。如果把一個網站比喻成一棟房子，那么用戶界面則是房子的門面和裝潢，只有首先吸引用戶的眼球才能使用戶留在房子里去體驗生活。

二、用戶體驗設計的分類

在網站建設過程中如果只了解到用戶體驗的概念是不夠的，設計者們必須要理論結合實踐。因為用戶體驗是一種用戶純主觀性的心理感受，設計師們在很微小的細節進行調整，或許就會得到用戶的鐘愛。這些細節上的精心設計必須經過設計師對于用戶自身的調查與用戶反饋的信息才能整出頭緒，進行整合設計。那么通過調查與反饋用戶體驗的設計可以從以下幾個方面進行調整設計。

1.感官體驗

想要在網頁中設計出好的界面的話，感官效果是必須考慮的一個方面。要注意網頁的界面應該要保持一貫性不能給用戶帶來混亂感；在使用方法方面，設計風格要符合目標客戶的審美習慣，并具有一定的引導性。科技論文。界面的構成不能太復雜；主要內容應設計在引人注目的地方。同時，頁面布局重點突出，主次分明，圖文并茂。與企業的營銷目標相結合，將目標客戶最感興趣的，最具有銷售力的信息放置在最重要的位置。在設計頁面色彩時應該與品牌整體形象相統一，主色調和輔助色不超過三種顏色。以恰當的色彩明度和亮度，確保瀏覽者的瀏覽舒適度。

2.瀏覽體驗

瀏覽體驗顧名思義就是呈現給用戶瀏覽上的體驗，更強調的是吸引性。在一個網站中一切內容和服務都是從網站的導航延伸出去的，所以導航應該要動感、簡潔、清晰，分類條理最關鍵。隨著現在網站功能越漸強大，各類型網站中增加了越來越多的視頻、動畫元素，對網站速度的要求也越發苛刻。所以加快頁面的瀏覽速度選擇一家穩定的服務器托管商也至關重要。在網站的內容上設計者應該給用戶帶來舒適的文字環境。如今，網站博客撰寫已成為了一個很大的話題。我們需要用和朋友對話的方式來撰寫博客，讓用戶感覺到一種舒適溫馨的氛圍。這樣用戶就會少一些局促感，即使他們遇到了使用上的問題，也會心情愉悅的在網站幫助中尋找解決的辦法。

3. 信任體驗

4. 　互動體驗

它呈現給用戶操作上的體驗，強調網站的易用性。網站與用戶必須有高度的互動性，網站不是一張死板的宣傳單，要讓瀏覽者通過網站進行各種互動行為，包括直接聯系企業客服中心；在線留言或咨詢；在線訂購物品；發表評論等，總之，要讓網站和瀏覽者互動起來，通過網站把瀏覽者和企業連接起來。能互動的地方越多，這個網站的價值就越大。科技論文。因為只有和瀏覽者產生交流并可幫助瀏覽者解決實際問題，比如可以回答他的提問或直接購買產品，對瀏覽者來說你的網站才是有生命的，有價值的。

三、總結

網站的用戶體驗設計是是在互聯網時代開放、共享、自由的氛圍中的一種進化需要，并且它最終將成為無論是從需求分析、到界面設計再到開發到運行維護至關重要的一部分，因為我們隨時都需要將用戶置入服務的核心，用我們的愛來澆注產品本身。

參考文獻：

[1] 戴力農.當代設計研究理念：用戶體驗超人性化設計方法.上海交通大學出版社，2009

[2] 崔武子，齊華山，于寧. 界面設計與Visual Basic.清華大學出版社，2004（7）

[3]（(美) Jason Beaird著 熊平, 宓媛珊譯. 完美網頁設計. 北京:人民郵電出版社，2008（7）

篇5

現今,網絡已經成為現代社會不可或缺的好幫手,人們從網絡中能夠獲得大量的信息,其中網頁對于人們的幫助是不容忽視的;如果說網址是互聯網最基本的組成部分,那么網頁就是網址最基本的元素。他們是通過各種鏈接相互關聯,從而描述相關的主題或實現相同的目的。網頁是由文本、圖象、Flas、聲音、視頻、超級鏈接、表格、導航欄、交互式表單等基本元素構成,而這些元素從構成形式上看就是簡單的點、線、面等基本元素經過了藝術創造,變得更加的有質感；就拿文本來說,文本作為網頁中的基本元素，與平面構成中的點元素有著相同的作用――點睛之筆。再從構成的含義來說，它首先是一種造型的概念。所謂構成就是以數種以上的單元重新組合成為一個新的單元。然而構成它更多的是哲學和科學的含義:即“對象世界諸要素的分解與組合,使新的功能顯現。”構成是創造形態的方法,研究如何創造形象,形與形之間怎樣組合,以及形象排列的方法,可以說是一種研究形象構成的科學。

一、平面構成的發展及其基本特點對于網頁設計而言所代表的意義

平面構成是設計中最基本的訓練,是在平面上按一定的原理設計、策劃多種視覺形式。我們學習構成不是目的,而是形成目的的手段,是一種思維方式的訓練、分析和實驗,最后通過這種思維方式的開發,培養一種創造觀念,使我們有更多的想象力和創造性,開拓設計思路。那么,對于平面構成的發展,就要從包豪斯及其風格對現代設計的影響開始說,1919年,格羅佩斯在德國創辦了一所名叫包豪斯的設計學府,是需要具備充分的能力,運用所有科學、技術、知識和美學的資源,創造一個能滿足人類精神與物質雙重需要的新環境,以“提倡藝術與技術的統一”作為教學理念。平面構成從包豪斯的教學理念中衍生而來,他不是以表現具體的物象為特征,但是它反映了自然現象運動變化的規律性。可以從兩個方面來談它的基本特點:第一是它以直覺為基礎;用最簡單的點、線、面進行分解、組合、變化,反映出客觀現實所具有的運動規律。第二是它是一種高度強調理性活動的、自覺的、有意識的再創造過程。

二、平面構成的形態要素在網頁中所起的作用。點、線、面是平面構成中的三個形態要素

（一）點表示位置,它既無長度,也無寬度,是最小的單位

它在平面構成中的概念只是一個相對概念,為什么這么說呢?因為它是在比較中而存在，通過比較而顯現;這樣說吧,同一個圓,在小的框架里圓顯得很大,在大的框架里圓則顯得很小,這就是點的相對概念。很多人都認為點是小的,而且還是圓,實際上這種認知是錯誤的,自然界中的任何形態,只要縮小到了一定的程度,就能夠產生不同的點,點是視覺中心,所以說,在網頁中的每個字都可以看作是點,由字排列出的文本就形成了構成中所說的線及面了。

（二）線是點移動的軌跡

從平面構成來講,線是可以看的到的,它既有長度,也有一定的寬度和厚度,在設計中是不可缺少的元素。只要提到線,大家直接就能夠說出線的分類,既直線和曲線。而直線和曲線對于人們來說，是有很強的心理暗示作用,看到直線,人們就會想到靜;看到曲線,大家又能聯想到動;直線具有男性的特點,而曲線具有女性的特征;在很多網頁頁面設計上都運用到了線的特性。

（三）面是線的連續移動至終結而形成的

面是有長度、寬度的,只是沒有厚度而已。比如說直線平行移動形成長方形;直線旋轉則移動而成圓形;自由弧形移動就會構成有機形;如果直線和弧線結合就形成了不規則的形。在網頁設計中出現的圖像、動畫、交互式表單等都是由不同的點、線連續移動形成的面,給網頁一個完美的效果。像那些企業網站、購物網站、音樂網站以及游戲網站等,他們的網頁界面設計不僅有豐富的色彩吸引大眾,還有不同設計風格的構成形式更讓大家流連忘返。

三、平面構成形式在網頁中的具體運用

平面構成設計是有組織的、有秩序地進行排列、組合、分解,因此它也是必須遵循一種原則和設計形式。平面構成中的形式大量被運用到網頁界面中。

（一）重復構成在網頁中的藝術魅力

重復在構成中的概念被人們理解為”相同或相近的形態連續地、有規律地反復出現”或者是”把視覺形象秩序化、整齊化,在圖形中可以呈現出和諧統一富有整體感的視覺效果”。其實就象復印機復印東西一樣,就是我們所理解的重復。在網頁界面中,重復其實是被運用的最多的一種形式,比如說像購物網站中的購物、收藏等按鈕,就是運用了重復,在購物網站中,不可能只有一種物品,如果要向廣大消費者推銷更多商品,那么在網頁中出現”購買”和”收藏”按鈕,就要設計更多,讓大眾有更多的選擇機會,才能提升該網頁的點擊率。

（二）對比構成在網頁中的表現對瀏覽者的心理帶來的影響

對比是一種很自由的構成形式,它并不是以構成中的骨骼線為限制,而是依據形態自己本身的大小、疏密、虛實、現隱及形狀、色彩和肌理等方面的對比而構成的。如果說協調求的是近似的話,那么對比則求的就是差異。在自然界中,白天與黑夜、骯臟與干凈、溫暖與寒冷都是對立的結合,當圖形處于一種相異的狀況時,就會發生對比,像大小、長短、黑白等就是明顯的對比。在有的被文本占去大面積的網頁界面中，為什么會出現圖片、flas,甚至還會出現漂浮圖片,除了豐富界面以外,還有一種影響瀏覽者心理的作用,其實網頁界面中的文本與圖片、動畫、漂浮圖片形成一種對比,這和瀏覽者心理有關系嗎?當然,而且關聯很大,如果在一個網頁界面中,只有文本的話,那么這樣的網頁會給人一種什么感覺呢?乏味、枯燥、單調,而瀏覽的人可謂是寥寥無幾,加上圖片、動畫,甚至時不時的冒出漂浮圖片,不僅僅讓網頁界面內容顯得豐富多彩,更讓大眾對網頁的內容產生濃厚的興趣。萬事萬物除了遵循他們本應該遵循的規則外,偶爾的對立也能起到一定的催化劑,就如對比構成在網頁中給大眾心理所帶來的影響作用。

四、結束語

因為有了網絡,讓人類能夠更加方便、快捷地查詢信息;因為有了網站,讓人類能夠更加懂得如何去獲取新的信息;因為有了網頁,讓人類能夠及時獲得最新信息。網頁界面設計的美觀、新穎、時尚,讓大眾更愿意了解網頁!如今,網頁已經成為廣大消費者生活中不可或缺的一部分,網頁能夠為人們注入更多的新鮮血液。

參考文獻：

篇6

[1]周峰，王征.FLASHACTIONSCRIPT3.0網絡動畫編程基礎與實踐教程[M].北京：電子工業出版社，2008

[2]林紀河，祁玉芹.FLASHCS4網絡動畫制作簡明教程[M].北京：電子工業出版社，2009

[3]童罕，吳慶波，等.一種動態網頁加速技術中的機制探討[J].微計算機信息，2009(27)

[4]崔俊杰.動態網頁技術淺析[J].長沙民政職業技術學院學報，2006，13(13)

[5]李志勇，徐長通.基于ASP的WEB數據庫智能查詢[J].河南師范大學學報，2010，38(1)

參考文獻：

[1]雷蕓蕓.網頁設計中Flash動畫的視覺應用[J].新媒體研究，2016（3）.

[2]曹芳，李培培.《FLASH動畫制作》課程教學改革的探索與研究[J].科技視界，2016（2）.

[3]周秀芳.Flash動畫制作課程建設方案探究——以高職計算機應用專業為例[J].當代職業教育，2015（12）.

[4]李怡宏，楊薇.從“案例模仿”到“設計創作”的《Flash動畫設計》課程教學[J].信息與電腦（理論版），2015（24）.

[5]王德敏.微課程的開發應用[J].中國校外教育，2013，（6）.

[6]陳舒心.論“微課”在中職計算機專業課程中應用的可行性[J].廣東教育（職教版），2015，（3）.

[7]胡鐵生.微課的內涵理解與教學設計方法[J].廣東教育：綜合版，2014，（4）.

參考文獻：

[1]李建華.網頁設計的意義與現狀[J].太原城市職業技術學院學報，2014（08）.

[2]于紅波.淺議Flash技術在網站建設中的應用[J].山東紡織經濟，2011（12）.

[3]高華，黃劍鋒.Flash技術在網站設計中的應用與研究[J].才智，2012（28）.

[4]劉強.FlashCS3網站建設實例詳解[M].北京：電子工業出版社，2008.

參考文獻

[1]范朋.基于Qt的嵌入式Linux系統GUI的研究與實現[D].北京：北京郵電大學，2011.

[2]新視角文化行.FlashCS6動畫制作實戰從入門到精通[M].北京：人民郵電出版社，2013.

[3]佚名.MFC與Flash聯合界面開發技術[EB/OL].[2012？06？07].http：//kuantianxia.blog.51cto.com/1041305/891521.

篇7

現國家正加強中職學校精品課程建設，精品課程建設工程的目標是實現全國優質教學資源的共享，要求精品課程的相關內容全部通過網站的方式對外開放。因此，精品課程網站建設是精品課程建設中的一個重要環節。

目前很多資料或論文在涉及精品課程網站制作時，都以站在網站的技術開發角度進行論述，這些專業知識對于非計算機專業人員是較難透徹理解網站的開發過程。而且精品課程網站作為一個共享平臺，還要把課程的資源放到平臺上，涉及到平臺的建設、各個資源內容制作和整合等工作，更是需要團隊合作。一個完整的網站開發不像其它項目或者任務可以單獨完成，是需要一個團隊多個人分工合作完成。

一、網站項目開發團隊，包括以下的角色和職責：

（一）網站項目經理

職責：1.項目執行監理2.質量監督員

網站項目經理負責與用戶進行溝通，了解用戶開發網站的思想、用途和要求。并創建和維護項目的規劃和戰略文件，預算表，項目進度和甘特圖表，會議記錄，費用記錄和團隊其他詳細工作的項目文檔。并協調、溝通網站各項目小組的日常工作。

（二）藝術總監

職責：1.網頁界面設計師2.交互式設計師

（FLASH，JavaScript，Ajax）3.媒體專家（攝影，插圖，視頻，音效）。藝術總監的主要職責是設計網站的整體外觀和感覺。把網站排版、用戶界面設計、顏色標準、頁面布局細節、圖片要求、攝影、插畫、網站的視聽媒體等元素匯聚并形成一個整體。

（三）網站技術主管

職責：1.網頁程序設計師（.net，Java，PHP/Perl，Ruby）2.網頁工程師（XHTML，CSS，JavaScript，Ajax）3.數據庫管理員4.網站管理員網站技術主管必須掌握有網站的環境、開發語言和開發站點框架、選擇網絡數據庫等廣泛的網絡技術。他應該在技術人員、創意人員和項目團隊各主管中充當一個橋梁或者翻譯工作

（四）網站制作主管

在設計早期階段，網站制作主管主要負責把原始的網站模型、界面和藍圖轉化成HTML頁面。一旦網站規劃及設計完成并且信息架構也規劃好之后，網站制作主管的主要工作就是制作站點頁面，當然他可以直接用html編寫，或者使用網站內容管理系統（CMS），也可以用一些站點開發軟件，例如Adobe Dreamweaver。

（五）網站信息架構師

網站信息架構師主要負責網站的結構和內容進行組織和分類。在整個項目的設計和規劃早期階段，信息架構師是最活躍的。他要制定整個網站的內容結構，網站的框架結構，向客戶和網站開發團隊介紹網站的整體規劃。信息架構師也要與網站設計師緊密合作，制作用于顯示網站各個頁面的名稱、導航和頁面內容的網站藍圖。

1.文字撰稿人2.站點內容專家（內容協調，制作）。網站編輯負責整個網站的文字內容和編輯質量。他或她創建的網站編輯的基調，確定文字風格，并與客戶和相關內容的專家收集、整理。以上就是網站開發時所需要的六個基本角色及其職責，每個角色都有負責的方面。當然其中有可能一個人員充當幾個角色，也有可能一個角色里面要幾個人員組成。

二、網站項目開發過程及團隊各角色相互合作關系

從圖1-1我們可以把網站作為一個完整的項目，可以分為“規劃”和“站點制作”兩個主要階段。

（一）規劃階段

這個階段里要進行的工作就是用戶調查與網站規劃。網站項目經理要與用戶進行接觸，全面了解用戶的需求，包括網站的用途和要實現的功能。用戶也在這個階段明確要網站能實現的功能模塊和需要提供的材料。充分了解用戶需求后，藝術總監和網站信息架構師就要基于用戶的要求、網站的用途和網站訪問者等各方面的考慮，使用PhotoShop或其它工具繪制出網站首頁、二級頁面的圖形界面。與用戶確定好界面、功能與內容，就開始分兩條線路進行開發。1、技術路線：網站技術主管根據界面并與信息架構師一起進行技術規劃，制作好網站使用的開發語言、技術、數據結構和數據庫等。2、內容路線：網站編輯要開始規劃網站編輯的基調；內容在網頁上的表現形式（文本、圖片、視頻、動畫）；確定文字風格和網頁顯示的字體的大小與字形；

（二）站點制作階段

站點制作階段是實際開發周期，各項目小組根據前面制定好的規劃進行制作。網站信息架構師在各部門之間進行項目規則解釋、協調和統籌。1、程序開發：網站制作小組根據界面規劃把圖形界面轉換成網頁格式；依據技術規劃，制作網站的各頁面。從圖中的甘特表顯示，程序開發和網站合成占整個項目的最大時間比例。2、內容整理：網站編輯要與客戶和相關內容的專家收集、整理放到網站平臺的資源。網站資源如涉及到圖片、動畫和視頻等，網站編輯要與媒體專家合作共同制作。當平臺主要架構搭建成形，后臺數據庫建立完畢，網站編輯就可以把網內容上傳到網站平臺內，把網站合成。

篇8

【關鍵詞】

政府網站

網頁制作

ASP 技術

ACCESS 數據庫

【英文對照】

ABSTRACT

The portal website of government departments is the best candidate and inevitable choice for government affairs opening. Its construction is based on the related policies and regulations on government affairs opening which are enforced by the state. This paper presents the construction of one portal webpage based on ASP and ACCESS database. The design and implementation of webpage mainly consists of three parts: government affair opening， online government office， and online communication. The front-end consists of ten major modules， including leader's speech， government affair opening， government dynamics， policies and regulations etc. The backend is a hybrid of C/S and B/S technologies， HTML and JScript are combined together and session object is used for inter-page data communication and traced the status of user logon， web based lookup and remote administration of webpage are implemented and access control to user of different privileges is achieved. The access to webpage news adapts a three-tier scheme which includes main page， title page and sub-page， the main page provides the overall look-and-feel and orchestrate all the modules so to form a complete webpage.

【KeyWord】

Government website

Webpage Making

ASP

ACCESS database

【目

錄】

前言 2

正文 3

第 一 章 概 述 3

1.1 網頁制作背景 3

1.2 網頁制作的意義 3

1.3 開發工具簡介 4

第 二 章 可行性分析 5

2.1 B/S結構介紹 5

2.2 ACCESS 數據庫 5

2.3 ASP 技術 5

第 三 章 網頁需求分析 7

3.1 總體功能需求分析 7

3.1.1. 基本功能需求 7

3.1.2. 功能結構圖 7

3.2 網頁具體功能模塊需求分析 8

3.2.1. 政務公開功能 8

3.2.2. 網站辦事功能 8

3.2.3. 網上交流功能 8

3.3 網頁結構圖 9

3.4 網頁版面規劃 10

3.5 網站CI形象設計 10

3.6 網頁布局技術 11

第 四 章 數據庫設計 12

4.1 數據庫概念結構設計 12

4.2 數據庫邏輯結構設計 14

第 五 章 人機界面設計 17

5.1 后臺登錄界面設計 17

5.2 用戶管理頁面設計 18

5.3 信息檢索頁面設計 18

5.4 后臺管理頁面設計 19

第 六 章 系統程序設計 20

6.1 程序設計語言 20

6.2 部份源程序實現及文件 20

第 七 章 網頁測試 30

7.1 測試網站的建立 30

7.1.1. 測試網站環境 30

7.1.2. Web服務器IIS5.1簡介 30

7.1.3. 網頁測試 30

7.2 網頁及網站維護 31

第 八 章 結論 32

參考文獻 33

致 謝 34

【前言】

在我國，繼黨的十六大提出推行電子政務、提高行政效率之后，十六屆三中全會進一步強調要發展電子政務，提高政府的服務和管理水平。政府網站作為電子政務建設的龍頭是完善政府公共服務接入渠道的主要手段，它實現了按照用戶對象進行信息資源的整合，提供覆蓋用戶全生命周期的各種信息和服務。同時，網頁信息傳播的即時性和全面性確保了政府大量重要信息的廣泛共享，優化了社會資源配置，讓政務信息更便捷、更低成本地進行傳遞。通過訪問政府網頁，企業和社會公眾可以24小時不間斷地，不受任何空間界限影響地與政府進行信息交互，在促進政務公開，改進公共服務，提高行政效能，確保公眾知情權、參與權和監督權等方面有著顯著成效。

政府網站建設的含義就是利用Internet/Intranet等計算機通信技術，在Internet上建立正式站點，通過網絡實現政府在政治、經濟、社會、生活等諸多領域中的管理和服務職能，推動政府辦公自動化與網上便民服務，是政府和社會互動的重要窗口。論文就巴中市網頁的設計和制作作了詳細描述，網頁主要功能模塊設置緊緊圍繞部門職能職責，密切結合公眾需求，實現了預期設計目標，網頁經本地局域網測試運行正常。

【正文】

網頁制作

第 一 章 概 述

1.1 網頁制作背景

在當前這個網絡時代，電子政務是各國政府倡導和推動網絡化的5個重要應用領域中的首要。美國早在克林頓政府時期就開始積極倡導和推動電子政務和電子政府的建設。英國于2005年將所有的政府服務實現上網。新加坡更是從1981年就開始發展電子政務，目前其電子政務的發達程度已備受世人矚目。在我國，政府信息門戶網站作為展示政府整體形象的窗口和聯系群眾、服務群眾的橋梁正日益得到各級政府的重視。如今，全國各地的電子政務建設已進入實質階段，全國257個地市級城市中已經有90%的城市建立了自己的政府網站。在應用上，電子政務建設已經從網絡基礎建設向功能應用層面和社會服務層面轉變。隨著我國信息化進程的深入推進，將極大地調動整個社會活力，推動中國社會的飛速發展，并對中國未來的發展產生巨大的影響。

1.2 網頁制作的意義

首先，政府網站關系到政府的服務形象，關系到百姓的切身利益。政府部門通過制作網頁建立網站，是電子政務的最佳切入點和重要內容，政府網頁的發展水平是衡量一個地區電子政務進程的標志。在政府網頁上，政務信息公開程度，有關為民服務欄目健全情況，信息反饋情況，在線辦公與網上受理情況等關系到政府的服務形象，關系到百姓的切身利益。其次，政府網頁制作有利于政府各類信息的充分共享，有利于政府決策水平的不斷提高。通過網頁的各類平臺迅速直接地獲取公眾的反饋信息，準確掌握外部環境，大幅提高了正確決策與快速反應的能力。隨著政府各類信息的公開化，政民互動不斷加強，政府將在公眾面前展現出高效、透明的良好形象，這有利于提高社會凝聚力，對于維護社會穩定、促進社會發展具有重要意義。

1.3 開發工具簡介

在眾多的網頁設計與制作工具軟件中，我根據實際需求及對軟件的熟悉程度，主要選取了Photoshop CS3、Fireworks 8.0、Flash MX 2004、Macromedia Dreamweaver8進行網頁的開發和制作，這些軟件的主要特點分述如下。

? 網頁圖像設計工具——Photoshop CS3、Fireworks 8.0

在網頁制作過程中，首先要使用Photoshop或Fireworks 設計網頁和整體效果圖、處理網頁中的圖像、背景圖及網頁的圖標、按鈕等。Photoshop是平面圖像處理業界霸主Adobe公司推出的跨越PC和MAC兩界首屈一指的大型圖像處理軟件.它功能強大，操作界面友好，得到了廣大第三方開發廠家的支持，從而也贏得了眾多的用戶的青睞。Fireworks是Adobe公司推出的著名平面圖像設計和圖像處理軟件，它具有強大的圖像處理功能和操作易用性，受到廣大平面圖形設計人員及專業廣告設計師的青睞。它涉及圖像合成、色彩校正、圖層調板、通道使用、動作調板、路徑工具、濾鏡等圖像處理功能。可制作如按鈕制作、文字特效、材質紋理、三維物體、影像特效及廣告創意設計等多種用途。

? 動畫制作工具——Flash MX 2004

Flash MX 2004是Macromedia公司的一個的網頁交互動畫制作工具。用flash制作出來的動化是矢量的，不管怎樣放大、縮小，它還是清晰可見。 用flash制作的文件很小，這樣便于在互聯網上傳輸，它還采用了數據流技術，只要下載一部分，就能欣賞動畫，而且能一邊播放一邊傳輸數據。 交互性更是flash動畫的迷人之處，可以通過點擊按鈕、選擇菜單來控制動畫的播放，這些優點使flash日益成為網絡多媒體的主流。

? 網頁排版工具—— Macromedia Dreamweaver 8

Macromedia Dreamweaver 8是由Macromedia公司推出的，用于網頁開發和網站管理的專業化設計工具。它采用了多種新技術，具有設計和開發網站過程中需要的網站管理、網站設計、頁面制作、多媒體制作和動畫制作等豐富實用的功能；它具有友好的操作界面，在文檔窗口中可以打開各種浮動面板，同時還可以使用系統內置的多種對象進行操作。它將可視布局工具、應用程序開發功能和代碼編輯支持組合在一起，其功能強大，使得各個層次的開發人員和設計人員都能夠快速創建界面吸引人的基于標準的網站和應用程序。開發人員可以使用 Dreamweaver 及所選擇的服務器技術來創建功能強大的 Internet 應用程序，從而使用戶能連接到數據庫、Web 服務。

第 二 章 可行性分析

2.1 B/S結構介紹

B/S（Browser/Server，簡稱B/S）結構，即瀏覽器/服務器模式，它是WEB興起后的一種網絡結構模式，從傳統的二層C/S結構發展而來，通常采用三層結構：瀏覽器-Web服務器-數據庫服務器，WEB瀏覽器是客戶端最主要的應用軟件，瀏覽器通過Web Server 同數據庫進行數據交互。

在B／S體系結構系統中，用戶通過瀏覽器向分布在網絡上的許多服務器發出請求，服務器對瀏覽器的請求進行處理，將用戶所需信息返回到瀏覽器。而其余如數據請求、加工、結果返回以及動態網頁生成、對數據庫的訪問和應用程序的執行等工作全部由Web Server完成，這樣大大簡化了客戶端，減輕了系統維護與升級的成本和工作量，降低了用戶的總體擁有成本（TCO）。

該結構的缺點是存在數據安全性問題、對服務器要求過高、數據傳輸速度慢、軟件的個性化特點明顯降低，難以實現傳統模式下的特殊功能要求。

2.2 ACCESS 數據庫

Access是微軟公司推出的基于Windows的桌面關系數據庫管理系統（RDBMS），是Office系列應用軟件之一。它提供了表、查詢、窗體、報表、頁、宏、模塊7種用來建立數據庫系統的對象；提供了多種向導、生成器、模板，把數據存儲、數據查詢、界面設計、報表生成等操作規范化；為建立功能完善的數據庫管理系統提供了方便，也使得普通用戶不必編寫代碼，就可以完成大部分數據管理的任務。由于Access數據庫的ODBC驅動程序支持的SQL指令全，執行效率高，所以Access后臺數據庫+ASP服務器端程序+客戶端IE瀏覽器，是一個精練、實用、高效的組合模式。

2.3 ASP 技術

ASP是Active Server Page的縮寫，意為“動態服務器頁面”。ASP是微軟公司開發的代替CGI腳本程序的一種應用，它可以與數據庫和其它程序進行交互，是一種簡單、方便的編程工具。ASP的網頁文件的格式是.asp，現在常用于各種動態網站中。ASP是一種服務器端腳本編寫環境，可以用來創建和運行動態網頁或Web應用程序。ASP網頁可以包含HTML標記、普通文本、腳本命令以及COM組件等。利用ASP可以向網頁中添加交互式內容（如在線表單），也可以創建使用HTML網頁作為用戶界面的web應用程序。與HTML相比，ASP網頁具有實現動態網頁技術；包含在HTML代碼所組成的文件中，易于修改和測試；可以使用服務器端ActiveX組件來執行各種各樣的任務；方便連接ACCESS與SQL數據庫等多種優點，其主要缺點是開發人員要有豐富的經驗，否則會留出漏洞，讓黑客利用進行注入攻擊。安裝ASP時，系統提供了兩種腳本語言：VBScript和JScript，而VBScript則被作為系統默認的腳本語言。

第 三 章 網頁需求分析

3.1 總體功能需求分析

網頁功能分析就是以系統的觀點，對已選定的對象與開發范圍進行有目的、有步驟的實際調查和科學分析。分析的目的就是要弄清楚網頁要做什么，最終為后面的設計工作打下基礎。

該網頁作為電子政務的一種服務平臺，政務公開、在線辦事、網上交流是其基本的三大功能。

3.1.1. 基本功能需求

? 政務公開功能

根據2008年5月1日起施行的政府信息公開條例規定，行政機關應當將主動公開的政府信息，通過政府公報、政府網站、新聞會以及報刊、廣播、電視等便于公眾知曉的方式公開，確保公眾享有充分的知情權、監督權。

? 網站辦事功能

網上辦公辦事是網頁功能服務中非常重要的組成部分，是電子政務建設努力的方向。通過提供一些行政審批等項目的在線辦理極大地方便了群眾，減少了不必要的人為環節，節省了社會資源。

? 網上交流功能

通過搭建政民交流平臺，讓公眾不但能夠將自己的建議與意見直接反映給部門領導，實現普通群眾參政、議政的夙愿，而且使領導能夠通過這一平臺，傾聽民聲、關注民情、體察民意，進而為群眾辦理更多的實事、好事、貼心事。

3.1.2. 功能結構圖

3.2 網頁具體功能模塊需求分析

根據總體功能需求分析，該部門網頁確定政務公開、工作動態、領導講話等功能模塊，具體組成分別如下。

3.2.1. 政務公開功能

? 領導講話模塊

功能：即時領導關于三農工作的各種會議、現場講話。

作用：傳達精神，貫徹意圖。

? 政務公開模塊

政務公開模塊包含七個子模塊：機構職能、領導介紹、內設科室、農口系統、人事信息、規劃計劃、財政信息。模塊根據國家信息公開條例等法規政策要求，針對該政府部門必須公開的七個方面進行設置。

? 工作動態模塊

工作動態模塊，包含六個子模塊：綜合信息、新村建設、農業產業化、勞務開發、農田建設、移民工作。功能根據該政府部門各科室（辦）所承擔的職能職責進行設計，實現了各責任條塊當前工作信息的即時公開。

? 政策法規模塊

模塊設置農業法規、政策文件兩個子模塊，提供近年來國家關于三農工作各種重要法規、政策的瀏覽和下載，同時對本區、部門關于三農工作制定的各種政策文件進行了公開，使法規政策透明化，接受公眾監督。

? 專題專欄模塊

模塊包含科學發展觀、調研文章、企業推介、農業前沿四個子模塊。科學發展觀子模塊緊扣時代所需，調研文章子模塊是在互聯網上開辟的一個嶄新的調研舞臺，企業推介子模塊為本地龍頭企業的宣傳、推廣提供了一個新平臺。農業前沿子模塊放眼全球，宣傳、推介農業領域的最新技術、最新品種。

3.2.2. 網站辦事功能

? 網上辦事模塊

模塊設置便民服務、服務流程、資料下載、統計報表四個子模塊，將該部門能夠進行網上辦理的相關行政審批事項予以了公開，方便了群眾，提高了辦事效率，提升了部門形象。

3.2.3. 網上交流功能

? 在線交流模塊

模塊設置三農論壇、領導信箱、咨詢留言、網上投訴、網上調查五個子模塊。三農論壇子模塊為公眾之間相互交流提供了平臺。領導信箱、在線咨詢等四個子模塊，為政府部門決策即時提供了群眾的意見及建議。

? 聯系我們模塊

該模塊主要功能：收集網站的反饋信息。

3.3 網頁結構圖

3.4 網頁版面規劃

全部網頁采用1024×768分辨率制成，網頁訪問采用首頁、導航頁和新聞頁三級頁面形式。

? 首頁

首頁使用的是國字型結構布局。 國字型結構布局是一些大型網站所喜歡的類型，即最上面是網站的標題+主菜單，下半部分分為3個區域，左右分列一些兩小條內容，中間是主題內容，與左右一起羅列到底，最下面是網站的一些基本信息，聯系方式，版權聲明等。這種布局的優點是能夠充分利用版面，信息量大;缺點是頁面擁擠，不夠靈活。

? 導航頁

采用拐角型布局，優點是頁面結構清晰，主次分明，缺點是規矩呆板，容易讓人“看之無味。

? 新聞頁

使用標題正文型：這種類型即最上面是標題或類似的一些東西，下面是正文；本站子頁大部分是這個結構。

? 頁頭

本站頁頭以900×150的農村風景圖為底，左置“巴中市”六字及名稱英文“”Office of rural affairs，Bazhou District，Bazhong City，右邊放置宣傳語（FLASH動畫）一起構成。

? 頁腳

本站頁腳如下：

3.5 網站CI形象設計

? 主色調與色彩

網站采用代表了春天、希望、田野的“綠色”為主色調，與部門的農業、農村、農民三農工作性質相吻合。

? 字體

導航欄字體為“黑體”，14px；網站主欄目字體為“宋體”，14 px；正文字體為“宋體”，9 px；

? 交互方式

網站設置了專門的在線交流模塊，提供了論壇、網上投訴、咨詢留言、網上調查等多種交互方式。

3.6 網頁布局技術

網頁使用表格方式布局，同時用CSS進行樣式控制。表格布局的優勢在于它能對不同對象加以處理，而又不用擔心不同對象之間的影響。表格布局的缺點是，當我們用了過多表格時，頁面下載速度受到影響。CSS層疊樣式表是W3C組織新近批準的一個輔助HTML設計的新特性，它使整個HTML保持統一的外觀。過去在設置文本時，為了保持整個段落都使用相同的外觀，不得不為每一段設置屬性，很麻煩。采用CSS可以在設置文本之前，就指定整個文本的屬性，比如顏色、字體大小等等，獲得統一的文本外觀。

第 四 章 數據庫設計

數據庫在一個網頁系統中占有非常重要的地位，數據庫的結構好壞將直接影響到應用系統的實現效果和數據操作效率以及能否保證數據的一致性、完整性和安全性。

4.1 數據庫概念結構設計

數據庫概念設計的任務是根據用戶需求設計數據的概念數據模型，簡稱概念模型。概念模型是按用戶的觀點對數據和信息進行建模，是從用戶的角度看到的數據庫，它可以用E-R模型來表示。構成E-R圖的基本要素是實體型、屬性和關系，其表示方法為：實體型：用矩形表示，矩形框內寫明實體名；屬性：用橢圓形表示，并用無向邊將其與相應的實體連接起來；關系：用菱形表示，菱形框內寫明關系名，并用無向邊分別將有關實體連接起來，同時在無向邊旁標上聯系的類型。

根據前面的需求分析，可以得到本網頁數據庫系統的E-R圖，如圖4-1所示。

上述E-R圖的關系說明如下：管理員可以對所有網上調查、新聞信息、投訴留言、論壇發貼等實體進行增刪編輯，它們都是1：n的關系。一個管理員可以對論壇所有注冊用戶進行監管，一個超級管理員可以對多個后臺管理普通用戶進行監管，它們的關系也都是1：n。

各實體屬性的E-R圖如下：

4.2 數據庫邏輯結構設計

通過分析系統涉及的相關實體以及要收集、存儲和操縱的數據信息，本網頁數據庫共設置了新聞信息表（News）等6個表，分述如下。

? 新聞信息表:用于存儲新聞及政務信息。

表4-1 新聞信息表(News)

?

三農論壇表:用于存儲論壇發帖。

表4-2 三農論壇表(BBS)

?

投訴留言表:用于存儲群眾來信、投訴、咨詢及回復。

表4-3 投訴留言表(Message)

? 論壇注冊用戶表:用于存儲三農論壇注冊用戶信息。

表4-4 論壇注冊用戶表(User)

? 后臺管理員表:用于存儲管理員姓名、密碼、權限。

表4-5 后臺管理員表(ManageUser)

?

網上調查表:用于存儲網站調查項及投票。

表4-6 網上調查表(OnlineSurvey)

第 五 章 人機界面設計

5.1 后臺登錄界面設計

設計思想：登錄頁面主要實現用戶的登錄。通過用戶名、密碼、隨機密碼、IP、SessionID的組合驗證實現未登陸用戶的正常登陸和已登陸用戶中同一用戶名允許在同一IP上重復登陸，拒絕同一用戶名在不同IP上重復登陸。

圖5-1 登錄流程圖

圖5-2 管理員登錄界面

5.2 用戶管理頁面設計

設計思想：登錄頁面主要實現用戶的登錄，用戶有超級管理員、普通管理員。超級管理員可以對其進行任何的操作，包括對普通管理員的增刪、密碼修改。一般用戶只可以做權限之內的操作和只能對自身的信息作修改。

圖5-3 用戶管理流程圖

圖5-4 用戶管理界面

5.3 信息檢索頁面設計

設計思想：根據輸入的關鍵字實現單字段或多字段組合查詢。

圖5-5 信息檢索流程圖

5.4 后臺管理頁面設計

網站后臺管理系統提供了添加新聞內容、管理全部新聞、領導信箱管理、在線咨詢管理、公眾留言管理、網上投訴管理、網上調查管理、信息中心管理、超級管理選項、文件上傳十個功能選擇項，可以完成新聞信息的在線編輯、咨詢留言的在線回復、網上調查項的增減等管理任務。

圖5-7 后臺功能結構圖

第 六 章 系統程序設計

前面著重討論了系統功能模塊的設計，詳細分析了每一個模塊的功能，本章將就系統中模塊功能的具體實現，選取部分源程序進行討論。

6.1 程序設計語言

網站主要采用ASP作為程序設計代碼的開發工具。使用ASP作為開發工具可以方便地建立動態的、高性能的、安全的、跨平臺的先進動態網站，其突出特點有以下幾個：

? ASP可以將內容的生成和顯示進行分離

Web頁面開發者可以用HTML或XML 標識進行對最終頁面的設計，同時使用ASP Tag 或Java Script 來生成頁面上的動態內容，因為所有的腳本都在服務器端運行， 所以， 如果核心邏輯部分被封裝在標識中， 那么Web管理人員或頁面設計者將只能編輯ASP頁面的顯示方式， 而不會影響其內容的實質。

? 對不同瀏覽器的兼容

由于ASP技術采用了將ASP Tag 和Java Script 在服務器端解釋并執行而只將結果以HTML或XML的形式送回到客戶端的方法， 從而保證了對其它基于HTML的Web瀏覽器的完全兼容。

6.2 部份源程序實現及文件

? 數據庫訪問技術

網頁在采用微軟IIS/PWS的網絡平臺，通過服務器端運行的ASP程序來訪問后臺Access數據庫。數據庫訪問采用匿名身份驗證方式，使用戶無需輸入用戶名或密碼便可以對數據庫進行訪問。匿名身份驗證是指由 IIS創建IUSR、計算機名稱、帳戶（計算機名稱是正在運行IIS 的服務器名稱），當匿名用戶請求數據庫內容時IIS 會將該連接分配給 IUSER_ComputerName 帳戶，其中ComputerName。默認情況下，IUSER_ComputerName 帳戶為 Guests 組的成員。此組具有 NTFS 文件系統權限所規定的安全限制，這些限制指定訪問級別以及可提供給公共用戶的內容的類型。建立Access數據庫連接的步驟及參數意義如下：

第一行程序：建立一個ADO對象集中的Connection對象，也即連接對象。這是建立數據庫連接的初始步驟。執行這行程序后，Conn成為一個連接對象。

第二行程序：建立一個ADO對象集中的Recordset對象，以便利用Recordset對象操作數據庫（當然，這只是對數據庫操作的多種方式之一）。執行這行后，rs就成為一個Recordset對象。

第三行程序：利用連接對象Conn的Open方法打開一個指定的數據庫。首先利用Server對象的MapPath函數，取得要打開數據庫的完整的文件路徑，并存儲在變量DBQ中。其次，因為我們要打開的是Access數據庫，所以要指定ODBC驅動程序參數，表示要透過Access的ODBC驅動程序來訪問數據庫。到這里，就已經打開了數據庫名指定的數據庫。

第四行程序： Sql指令串。

第五行程序：利用rs對象的Open方法打開數據庫中的數據表。這其中有四個參數，其意義如下：

數據表名或SQL指令串：在這個參數里指定要打開的數據庫內的數據表名稱，或者是用SQL的Select指令串確定的數據表的指定范圍數據

Connection對象：指定已經打開的數據庫的Connection對象。

Recordset類型：表示打開數據表的方式，有四種選擇。數字0表示只讀方式，且當前記錄只能下移；數字1表示可讀寫方式，當前記錄可自由上下移動，但不能及時看到別的用戶建立的新記錄，除非重新啟動；數字2表示可讀寫方式，當前記錄可自由移動，而且可以及時看到別的用戶增加的新記錄；數字3表示只讀方式，但當前記錄可以自由移動。

鎖定類型：這個參數指定數據庫的鎖定功能。因為網絡上的數據庫都是多用戶的，很可能同時有多個用戶在操作數據庫。為了避免錯誤，讓同一時間只可能有一個用戶修改數據，就要用鎖定功能。有四種選擇：數字1表示只讀方式鎖定，用戶不能更改數據；數字2表示悲觀鎖定，當一個用戶用rs對象開始修改數據時就鎖定數據庫，直到用戶用rs.Update更新記錄后，才解除鎖定；數字3表示樂觀鎖定，只有在數據寫入數據庫中的時候才鎖定。數字4表示批次樂觀鎖定，只有在使用rs.UpdateBatch成批更新數據時候才鎖定數據記錄。

? 身份驗證

本網站身份驗證采用服務器端驗證代碼方式，密碼算法采用流行的MD5算法，同時附加客戶端隨機密碼驗證。MD5全稱Message-Digest Algorithm 5（信息-摘要算法），是由MIT Laboratory for Computer Science和RSA Data Security Inc的Ronald L. Rivest在90年代初向IEFT提交的一種不可逆運算加密算法，經MD2、MD3和MD4發展而來，面向32位的電腦。登陸驗證按一個IP可以有多個用戶登陸，一個用戶只能登陸一個IP的原則進行設計，具體代碼及解釋如下：

? 網上調查功能實現

圖6-1 網上調查投票界面

圖6-2 網上調查結果界面

網上調查實現代碼

第 七 章 網頁測試

7.1 測試網站的建立

7.1.1. 測試網站環境

網頁測試使用本單位局域網進行，配置如下：

服務器端：操作系統—Windows xp

Web服務器—IIS5.1

瀏覽器—IE6.0

客戶端：Internet Explorer6.0

7.1.2. Web服務器IIS5.1簡介

IIS是Internet Information Services的縮寫，是目前使用最廣泛的Web服務器，可以在UNIX和Windows平臺上運行。它與Windows NT Server完全集成，允許使用Windows NT Server內置的安全性以及NTFS文件系統建立強大靈活的Internet／Intranet站點。IIS組件主要包括Web服務器、FTP服務器、NNTP服務器和SMTP服務器，分別用于網頁瀏覽、文件傳輸、新聞服務和郵件發送等方面。

7.1.3. 網頁測試

? IIS配置

當IIS被成功安裝后，將在計算機C:\Inetpub\wwwroot下新建一個默認網站，通過修改默認網站配置可以建立自己的站點。如自己的網頁放在D:\Wy目錄下，首頁文件名為Index.asp，其具體步驟如下：

第一步：在“默認Web站點”上單擊右鍵，選“屬性”，以進入名為“默認Web站點屬性”設置界面。

第二步：轉到“主目錄”窗口，再在“本地路徑”輸入（或用“瀏覽”按鈕選擇）好自己網頁所在的“D:\Wy”目錄。

第三步：轉到“文檔”窗口，再按“添加”按鈕，根據提示在“默認文檔名”后輸入自己網頁的首頁文件名“Index.asp”。

第四步：在“默認Web站點”上單擊右鍵，選“新建虛擬目錄”，依次在“別名”處輸入“test”，在“目錄”處輸入“D:\Wy”后再按提示操作。

? 數據源（ODBC）配置

第一步：選擇控制面板中的管理工具打開數據源（ODBC）。

第二步：在選項卡系統DNS中添加Microsoft Access Driver(*.mdb)驅動并指定數據源為網站的數據庫文件。

? 測試

打開瀏覽器，直接在地址欄中輸入：localhost/test/index.asp或者127.0.0.1/test/index.asp即可。

7.2 網頁及網站維護

在測試完成后，網頁就可以到互聯網上了，接下來要做的就是網站的日常維護了。網站維護就是對服務器及相關軟硬件的維護，對可能出現的問題進行評估，制定響應時間，制定相關維護規定，將網站維護制度化、規范化，主要包括以下內容：

? 即時更新新聞內容

? 留言、投訴、咨詢、信箱定期回復

? 數據庫內容定期備份、刪減、分類

? 更正數據庫使用過程中發現的問題

? 定期進行綜合分析，不斷優化數據庫中數據結構，提高使用效率

? 在系統運行過程中應定期對管理員用戶名和密碼進行更新，并對IIS和NT權限作相應設置

第 八 章 結論

本次利用畢業設計的機會，為自己工作的單位設計了網頁。網頁使用ASP技術開發，具有良好的交互性能，具備強大的后臺管理功能。新聞、信息檢索、互動交流等主要模塊設計做到了與單位職能職責的緊密結合，達到了預期設計目標。網頁經單位局域網多次測試，在WindowsXP操作系統，IIS5.1的服務器環境上正常運行。

此次網頁制作，通過大量閱讀書籍和求助互聯網，使我初步掌握了網頁設計制作的一般過程、ASP簡單設計應用、CSS和表單布局常識、ACCESS數據庫設計技能。特別是在ASP編程階段，通過無數次解決測試過程中排查出的問題，我不僅回顧和應用了以前學習過的理念知識，還掌握了許多新的知識和技巧，獲益良多。但由于時間倉促，受一些技術和設備所限，網頁在美工、需求分析、網頁安全等方面存在諸多不足之處，有待后期運行中進一步改進和完善。

參考文獻

1. 《Dreamweaver CS3 入門 提高 精通》，薛凱，康亞雄編著，機械工業出版社 2008

2. 《Photoshop CS3 平面設計標準教程》，李建宏，雷波編著，機械工業出版社 2008

3. 《ASP網頁數據庫短訓教程》，劉瑞新，汪遠征編著，機械工業出版社 2005

4. 《Flash CS3動畫制作》，華信卓越編著，電子工業出版社 2008

5. 《網頁設計三合一》，甘登岱編著，清華大學出版社 2009

6. 《網頁設計與網站建》，邱云飛，溫國峰編著，清華大學出版社 2009

7. 《Access2007數據庫應用與開發》，楊繼萍，孫巖，梁文新編著，清華大學出版社 2008

8. 《網頁制作從入門到精通》，譚貞軍，劉斌編著，清華大學出版社 2008

9. nbagri.gov.cn/index.jsp（寧波農村經濟綜合信息網）

10. 68design.net/（網頁設計師聯盟）

11. wznb.gov.cn/（溫州市委農辦）

篇9

中圖分類號：TP315

畢業論文是高校本科教學過程中最重要的環節，也是最后的環節。現在的大多數高校，就畢業設計指導來說基本上都是通過師生見面來完成的，或者是通過電話聯系。這樣導師有時既浪費時間又不能及時給予指導和答疑。對于學生來說和老師過于頻繁的見面也會浪費一定的時間，面對就業壓力越來越大的今天，應屆畢業生面臨著找工作的難題也就越來越嚴重，學生沒有過多的精力和時間來和導師見面討論畢業設計中的各種問題。因此，在網絡如此發達的今天，采用網上的方式作為指導和答疑也不失是一種好的選擇。

基于ASP的畢業設計指導網站是用ASP動態網頁技術和SQL Server 2000開發，它涵蓋計算機技術和網絡技術兩門學科。是提供給畢業生和指導教師之間溝通交流的好的平臺。也是彌補目前許多高校的網站系統中一個小的漏缺，可以作為高校網站系統中的一小部分。正是這一不起眼的小部分，卻給畢業生和指導教師帶來了許多方便，節省了許多時間，又能及時地得到老師的指導，從而提高指導效率。

1 網站總體功能設計

基于ASP的畢業設計指導網站管理系統的主要用戶分為三種類型：管理員、教師、學生。針對不同的用戶類型，登錄進去都有不同的權限和操作功能。

2 系統功能實現

主要包括數據庫設計和網站功能設計。數據庫設計主要是創建數據庫和添加數據表，并創建觸發器和存儲過程等；網站功能設計主要是功能模塊的界面和程序代碼的實現。

2.1 數據庫設計

（1）創建數據庫和數據表

4）觸發器。觸發器是用戶定義在關系表上的一類由事件驅動的特殊過程。一旦定義，任何用戶對表的增、刪、改操作均由服務器自動激活相應的觸發器，在DBMS核心層進行集中的完整性控制。觸發器比約束更加靈活，實施比約束更為復雜的檢查和操作，具有更精細和更強大的數據控制能力。

在tbGuest表里創建了“update”觸發器，“update”觸發器用于當更改tbGuest表中strTitle時，其他視圖關于該strTitle也相應更改。

2.2 網站功能設計

網站功能設計主要是各個功能模塊的界面設計和程序代碼的實現。

點擊“管理個人信息”便可以進入該界面。該模塊有查詢個人信息、修改密碼、查看公告的功能，其中學生和教師用戶還有查看群發消息的功能，但是管理員不必要有此項功能，因為管理員群發消息時在當前的頁面就可以看到，管理員還具有公告的功能，師生可以在管理個人信息中點擊查看公告查看管理員的公告。還必須說明的是查詢個人信息項中學生和教師用戶沒有權限，只有管理員有添加、刪除和修改的權限。

上傳和下載文件模塊所有用戶都有，該功能主要是方便用戶的文件交流，點擊上傳文件可進入上傳界面，點擊下載可進入下載界面。

向指導老師提問模塊是集結學生的提問，教師的回復和管理員的提醒答疑（管理員還可以選擇公告的方式提醒教師答疑）為同一模塊，該模塊功能可以提供多方交流溝通，點擊選擇的方式可以進入相應的界面，學生可通過三種方式完成提問；教師通過相應的方式回復；管理員通過三種方式提醒教師答疑。

查詢問題模塊的實現，此模塊只有留言方式可以查詢，其他不必要。在學生和指導老師之間提供三種交流方式，查詢中學生和教師沒有權限，只有管理員有添加、刪除的權限。

首頁模塊和退出系統模塊，單擊首頁則返回首頁登錄界面，單擊退出系統則實現關閉網頁。

3 系統測試結果

本系統曾經移植到多臺計算機上對不同配置的計算機進行兼容性測試，測試結果表明，Web在不同的環境配置下運行正常。

4 結語

本設計是基于B/S架構，采用ASP動態網頁技術和SQL Server 2000，結合Dreamweaver軟件開發出來的。網站根據不同身份的用戶實現了不同的應用操作界面，各個界面的功能稍微不同但相差不大。整個系統界面友好，運行可靠，系統功能基本滿足用戶要求，從而加強了指導老師和學生之間的交流，提高了論文寫作的效率。本系統可作為一個單獨的畢業設計指導網站，也可以嵌入到高校網站系統中作為一個子系統。

參考文獻：

[1]李林，申時凱，王衛星.Visual Basic程序設計[M].北京：地質出版社，2006，2.

[2]尚俊杰.網絡程序設計 ―ASP（第三版）[M].北京：清華大學出版社，2009，6.

[3]王珊，薩師煊.數據庫系統概論（第四版）[M].北京：高等教育出版社，2005，3.

[4]趙文耘，牛軍鈺.軟件工程[M].北京：清華大學出版社，2007，1.

[5]張克非網絡程序設計及應用[M].北京：北京航空航天大學出版社，2007，6.

[6]何薇，舒后.網絡數據庫技術與應用[M].北京：清華大學出版社，2011，4.

[7]呂云翔，王洋，肖咚.軟件測試案例教程[M].北京：機械工業出版社，2011，1.

篇10

隨著學生對互聯網的依賴性越來越強，以及Googlescholar、百度學術等學術搜索引擎對圖書館學術資源主體地位的沖擊，使得圖書館網站的用戶體驗變得越來越重要。圖書館網站必須進行優化設計，使用戶可以方便地瀏覽網站的信息、使用網站的服務，讓用戶獲得愉快的體驗，才能吸引用戶使用圖書館的網站，使用圖書館的資源與服務。用戶體驗強調在網站構建的過程中以用戶為中心，充分考慮用戶體驗的內容及影響因素，通過設計滿足用戶需求，符合用戶審美體驗、認知特點、使用習慣的組織系統、導航系統等，從而讓用戶獲得良好的體驗效果。用戶體驗設計的目標可以歸納為：解決用戶需求，減少用戶理解和操作的成本，給用戶留下美好而深刻的印象。基于用戶體驗的網站設計主要包括：視覺設計、界面設計和導航設計等。

1視覺設計

視覺設計是在用戶審美文化的基礎上，通過色彩、字體、圖片、按鈕、隱喻等的使用，設計出富有美感和藝術感的網站，從而實現在很短的時間內吸引住用戶，并激發用戶進一步的信息行為[1]。圖書館網站在視覺設計上要符合用戶當前的視覺趨勢，體現圖書館的文化內涵，通過圖文、色彩、形狀的搭配以及信息塊的建立和整合，形成一個疏密有序、圖文并茂、條理清晰、氣氛和諧的網站視覺感受。

1.1符合視覺趨勢

不同時期用戶的審美取向與內心訴求是不同的，網站的設計一定要符合當前用戶的視覺趨勢。就目前而言，視覺趨勢大致如下：響應式的網頁設計讓網站頁面無論屏幕尺寸大小都能有最佳的顯示效果[2]，寬屏、大圖讓頁面更顯大氣；改變以往用線條來分割區域的方式，采用空隙和留白，讓頁面順暢自由的呼吸，給用戶留下廣闊的思考空間；減少漸變和視覺元素，采用規整的布局、扁平化的視覺風格，讓整體感覺更清爽。在網站構建之初，設計師一般會根據圖書館的需求結合當前的視覺趨勢設計出至少3版首頁設計圖，圖書館可以采用問卷調查的形式從中選出最受目標用戶歡迎的頁面。

1.2做好色彩搭配

色彩是網站最具表現力和感染力的視覺元素，好的色彩搭配可以吸引用戶的注意力，給用戶帶來過目不忘的效果。相反，太過單調乏味的頁面會使用戶視線游離；過于炫目多彩的頁面又會對用戶的實際需要造成干擾。網站的色彩搭配上要注意以下情況：（1）每種色彩都有自己特定的含義和象征，會給人帶來不同的情感反應[3]，網站設計要合理恰當的運用，設計符合網站自身特色的色彩搭配，把網站的思想正確的傳遞給用戶。例如，“紅色”可以給人熱情、喜慶、奔放的情感反應，也能給人危險的心理暗示；金燦燦的“黃色”給人富有、高貴之感，而混濁的暗黃給人凋謝、衰敗之感；“藍色”象征著智慧、理智、清爽，會讓人感覺平靜、深遠、穩定、可靠。（2）不同色彩對眼睛刺激不同，會造成視覺上先后順序和關注度的不同。在色彩的運用上，要考慮內容的先后順序和優先級，正確的運用色彩。例如，冷色類和暖色類色彩是有明顯的層次差別的，一般情況下，用戶會先注意到暖色調色彩，且對暖色調色彩的關注度和點擊量要高于冷色調色彩；色彩的反差更容易造成用戶的關注度的不同，通常高反差色彩更能引起用戶的關注[4]。（3）避免使用色盲不易區分的顏色對。網站的色彩設計要保證在辨識色彩方面存在缺陷的用戶（如紅綠色盲、藍黃色盲、全色弱等）也能正常使用網站，避免使用深紅和黑、深紅和深綠、藍色和紫色以及淺綠和白色這樣的顏色對[5]。網站色彩設計時可在專業的色盲所見效果檢測網站（如網站和）上檢測，確保需要辨識顏色的地方所用的顏色在色盲和正常人看來是一致的，不需要辨識顏色的地方，在色盲眼中是清晰的。

2界面設計

界面設計最基本的性能是功能性和使用性。通過界面設計，讓信息更加流暢的傳遞給用戶，讓功能和操作變得更加簡單。界面設計包括標識設置能否被用戶所理解[1]、頁面布局是否能夠凸顯頁面重點、符合用戶的習慣等。在標識設置方面重點是要避免使用用戶不熟悉的詞匯；頁面布局方面，首頁一定要將關注度高的欄目放在醒目的位置上；其它欄目的擺放位置要遵從網站形成的慣例，符合用戶的心智模型；以信息呈現為主的頁面要建立清晰的視覺層次。

2.1避免使用用戶不熟悉的詞匯

根據Krug的可用性第一規律，網頁必須是清晰且自明的[6]，也就是說網頁的內容對于用戶來說是不言而喻、一目了然的。要做到這一點，就要避免使用用戶不熟悉的詞匯，比如，OPAC、E讀、查收查引、題名、責任者、資源發現系統等。這些字用戶都認識，但不代表真的理解了意思，因為新信息只有和已有的知識結構緊密結合，才能被徹底的理解吸收，而用戶基本上是非圖書館專業的學生和老師，接受過的圖書館專業培訓比較少，對這些詞很難做到一看就懂。當用戶在網站上尋找信息或者某個功能時，他們并不會認真閱讀，只是快速而粗略地掃描屏幕上與目標相關的東西[4]，這些用戶不熟悉的詞匯往往被認為是與目標無關，直接被忽略掉。可以把“OPAC”換成“館藏書刊搜索”；“E讀”換成“全國高校館藏搜索”；“查收查引”換成“論文收錄引用”；“題名”換成“書名/篇名”；“責任者”換成“作者”；資源發現系統因為實現的是圖書館紙質和電子館藏的一站式搜索，所以一般采用學校特色名字加上搜索或學術搜索的形式，例如，清華大學圖書館的“水木搜索”、北京大學圖書館的“未名學術搜索”、南方科技大學圖書館的“南科學術搜索”、浙江大學圖書館的“求是學術搜索”等。

2.2關注度高的欄目放在醒目的位置上

關注度高的欄目放在首頁醒目的位置上可以有效提高網站的用戶體驗。網站欄目的關注度可通過網站分析工具來統計。目前，免費的網站分析工具有十余種，比如，GoogleAnalytics、CrazyEgg、Yahoo!WebAnalytics、百度統計和CNZZ的站長統計等。其主要采用當前較為流行的基于腳本（JavaScript等）的統計方式，這種方法需要在網站的Html代碼中嵌入一段腳本來統計網站的被訪問情況。館員可通過網站訪問情況統計分析，來確定網站中用戶關注度最高的欄目。以南方科技大學圖書館舊版網站為例，關注度最高的欄目是“數據庫導航”，關注度為11.32%；其次是“館藏資源搜索欄”，因該版網站中沒有資源發現系統，所以主要搜索館藏紙本資源，關注度為9.47%；關注度第三的欄目是“我的圖書館”，關注度為7.02%。在新網站的設計中就要把這3個欄目放在網站中最醒目的位置。一般情況下，網站的上半部分和中左部分的被關注度要高于右半部分和下半部分。網站中最醒目的位置的確定可以在新網站的測試過程中，通過眼動跟蹤技術記錄用戶在使用網站時所注視的網站的位置，從而找出網站的關注“熱點”———網站中最醒目的位置。

2.3遵從網站形成的慣例

當一個人訪問一個新網站的時候，他尋找信息的第一個位置就是在其它大多數網站找到它們的地方，所以遵從網站形成的慣例可以減少用戶的尋找成本，讓用戶找起來更方便。比如，語言切換、用戶登錄、站內搜索等獨立于網站結構的功能或內容一般設置在網頁頂端；重要的、需求大的欄目應該放在網頁上方主導航的位置；相對而言不那么重要、需求不那么大的欄目應該放在下方導航條的位置；網站的隱私政策、免責聲明、版權等一般放在底部。

2.4符合用戶的心智模型界面設計

符合用戶的心智模型主要為了讓用戶在使用網站的過程中思考降到最低、操作簡單到極致。心智模型是影響用戶與網站交互時內在的、可預測的認知模型[7]，是隱含在用戶內心深處的一種思維方式和思想觀念，直接或者間接的影響著用戶的行為[8]。也就是說，當用戶在網站上尋找某一元素時，并不是從上到下順序尋找，而是在用戶心中已經形成了關于這個元素應該放在哪個位置的預期[9]，然后根據預期去尋找該元素。了解用戶的心智模型，可以知道用戶心中欄目的位置，從而提升欄目位置與用戶預期的位置吻合度；了解用戶的心智模型，可以知道某一信息在用戶心中應該屬于哪個欄目，從而提高欄目的名稱與用戶心中名稱的吻合度。要提高網站界面與用戶心智模型的吻合度，可以在網站的建設過程中通過迭代的可用性測試[10]，不斷地發現網站中存在的問題，通過布局的不斷調整，讓用戶的操作變得簡單、再簡單；通過建立清晰的流程和界面，減少用戶的思考和尋找時間。最后用戶耗費時間最少的界面設計就是最趨近于用戶的心智模型的界面。調研用戶的心智模型可以通過如實觀察法、遠程測試法和眼動跟蹤技術等方法來實現。筆者采用了如實觀察法，無需遠程監測法的屏幕共享技術，也不用眼動跟蹤儀，只要有臺可供用戶瀏覽網站的電腦即可，而且不僅能清晰的觀察到用戶的操作，直接、及時地獲取用戶的反饋，還能夠捕捉用戶的細微反應，挖掘用戶內隱的體驗信息[11]。比如用戶發出“咦？”、“哦！”等聲音，或者皺眉、撓頭等動作，這些都能反映出存在的問題。如實觀察法主要是讓被試用戶在一個可控制的實驗室環境里完成指定任務，通過觀察用戶信息搜索過程，總結用戶的行為數據等[12]，在測試過程中，要減少語言對用戶的干擾，切忌引導性過強，要更多地去關注用戶的操作行為。可以鼓勵用戶采用“出聲思維法”，即要求用戶在操作時，將完成任務時所有的思考、行為、感受都描述出來，這樣測試員更容易發現用戶行為背后的原因。例如，在南方科技大學圖書館網站的調研中發現，用戶在完成“查看我的借閱信息”的任務時，偶爾使用圖書館網站的用戶，受其它網站的影響會在網站的頂端尋找“我的”相關欄目；經常使用圖書館網站的用戶，因知道該信息會在“我的圖書館”中找到，所以找尋的欄目會鎖定在“我的圖書館”，而找尋的位置會受到圖書館舊版網站的影響，在網站中間的直接導航部分找“我的圖書館”欄目。綜合這兩種情況，在新版網站的設計中將“我的”放置在網站上方全局導航的區域，“我的”這個欄目被設計為用戶的個人空間，里面的內容包含用戶的個人基本信息、借閱信息、薦購信息等“我的圖書館”中查詢和操作的信息以及網站的個性化定制內容。另外，在網站的直接導航區域設置“我的圖書館”的入口，方便讀者進入“我的圖書館”。

2.5建立清晰的視覺層次感

建立清晰的視覺層次感可以在用戶瀏覽網頁時形成良性引導，從而減少用戶的尋找時間。用戶在瀏覽頁面時會對網站頁面的視覺層次進行分解，篩選出需要的東西。好的視覺層次通過預先處理，用一種用戶能快速理解的方式對頁面進行組織并根據模塊的優先級進行排列，從而減少了用戶的尋找時間。大小、顏色、對比、對齊、親密性、緊密與留白都是制造視覺層次的好工具。大小往往與重要性結合起來，最大的元素大部分情況下都具有最大的重要性。顏色在組織和個性兩方面都起到作用，醒目、對比強烈的顏色在特殊的元素中會引起更大的關注（比如，按鈕、超鏈接或錯誤信息）；在個性方面，豪華、舒適的顏色會給頁面帶來感情上的吸引力。對比能夠體現出相對的重要性。對齊能夠體現出元素們之間的組織關系。親密性是將關系緊密的內容組織起來的最快方式。緊密與留白的和諧搭配，既能體現內容之間的相互關系，又能避免緊密給用戶帶來的信息過量之感。

3導航設計

導航是網站內用戶的指示路標，可以說是網站最為重要的設計環節，它引導著用戶進行瀏覽和查找信息，一個好的導航能夠讓用戶在離開網站時猶如享受了一次愉快的旅程。導航設計首先要將網站的信息進行組織分類，一個精心組織分類的鏈接體系能夠采用簡約的風格，將信息梳理到最符合邏輯、最易于用戶理解的類目，讓用戶不經遲疑、無需復雜操作就能訪問到他們想要的內容。

3.1信息的組織與分類

信息的組織與分類是導航設計的基礎[13]，好的導航能夠將繁復的頁面內容組織起來，梳理出其中的邏輯，按照層級關系，建立起簡潔易懂的欄目信息架構。卡片分類法是一種以用戶為導向的有效的組織信息的方法，可以設計出符合用戶心智模型的信息架構。卡片分類法分為開放式和封閉式兩種[14]。開放式卡片分類法給被試人員足夠的自由度來進行信息歸類，測試者不僅可能會得到豐富的分類結果，而且有力于發現欄目命名存在的問題，所以一般用于信息分類的前期，用于獲取用戶對圖書館服務及資源項目的理解情況。開放式卡片分類法由測試者將寫有圖書館的相關介紹、服務、資源等名稱的卡片完全打亂后分發給被試人員，被試人員可以完全自由地決定把卡片分成幾組，每組有多少張卡片，最后再由被試人員為分好組的卡片命名。在開放式卡片分類階段，能夠發現命名不合理的欄目，能夠獲得被試人員理想的分組命名。例如南方科技大學圖書館網站在開放式卡片分類調查過程中發現，“新館風貌”頁的名稱存在問題，因為對于館員而言，啟動校區的圖書館為舊館，當前使用的圖書館為新館。但是對于學生而言，他們并不知道啟動校區圖書館，所以當前使用的圖書館就稱不上新館，使用“館舍風貌”命名則更為合適；關于欄目的分組命名也有收獲，舊版網站中使用“關于圖書館”欄目，而用戶會更喜歡給它命名為“關于本館”；“資源查找”用戶更喜歡給它命名為“資源導航”等。封閉式卡片分類法可在開放式卡片分類法之后使用，由測試者先確定出欄目分組的個數和名稱，再將屬于這些分組的卡片分發給被試人員，讓被試人員根據自己的期望，把卡片歸類在不同的分組名稱下。如果有些卡片被測人員不知道該將它分到哪個分組名稱下，可以將它拿出來，不一定要把所有卡片分完。封閉式的分類更利于掌控，可以用于對信息架構設計結果的有效性進行驗證。

3.2導航功能模塊設計

虛擬的網絡世界不像現實世界中有明顯的方向感，若沒有清晰的導航和位置信息可能導致用戶迷失方向。成功的導航通過各種標識和路徑的顯示，讓用戶在導航系統中清楚地認識到網站信息結構和自己瀏覽到的位置[15]。導航按照在網站中所處的區域與功能的不同分為：全局導航、局部導航、直接導航、面包屑導航、網站地圖等。全局導航，也就是通常所說的主導航，是網站的一級菜單，通常以橫條的形式設置在網站全局區域較為顯著的位置，提供覆蓋整個網站的通路，能夠展現網站的全貌。用戶通過全局導航可以隨時從網站的最底層頁面到達任何其它頁面，實現各個頁面之間的跳轉。局部導航，也稱為副導航，是全局導航的補充和延伸，專門針對網站二級以下的欄目，在幫助用戶瀏覽網站頁面時起輔助作用，主要用于有序瀏覽目錄內的具體內容。直接導航，是在首頁中設置的直接將用戶引導到網站內任意指定位置的導航，直接導航可以跨越多個層級而直接指向鏈接目標，是為迎合用戶需求而設置的到達頁面的快捷途徑。面包屑導航，這個導航名稱來自于童話故事，面包屑是漢賽爾在進入森林的路上偷偷灑下的，是一種“歷史記錄”的應用方式。面包屑導航能夠呈現用戶當前在網站中所處位置，記錄用戶的瀏覽路徑，表達當前內容的歸屬關系，可以幫助用戶方便地通過路徑返回到上一級頁面。網站地圖，將網站的所有頁面名稱按照結構層次放置在一個頁面中，展現整個網站的信息架構，通過鏈接的方式，幫助用戶在一個頁面中快捷、準確地找到想要的頁面。網站的導航設計就是通過上述不同類型導航的合理設置與相互搭配，最終實現網站的便捷瀏覽、信息的有效獲取。

4結語

網站設計的重中之重不是界面設計的多么美觀，運用的技術多么炫酷，而是網站的設計是否符合用戶體驗，能否讓用戶輕松、快捷的完成操作。基于用戶體驗的網站設計強調以用戶為中心，設計出符合用戶審美體驗、認知特點和使用習慣等與用戶心智模型相契合的系統，但用戶的審美、認知特點、使用習慣以及心智模型都不是一成不變的，而且包含很多隱性的因素，需要經過一系列細致的調查、測試、優化等步驟，才能逐步提升用戶的體驗。

參考文獻：

[1]李小青.基于普遍心理分層理論的Web用戶體驗模型設計[J].情報資料工作,2010,(1):62-65.

[2]畢劍,劉曉艷,張禹.使用響應式網頁設計構建圖書館移動門戶網站———以云南大學圖書館為例[J].現代圖書情報技術,2015,255(2):97-101.

[3]張曉景.網站用戶體驗全程揭秘[M].北京:清華大學出版社,2014.

[4]如何運用視覺表現建立網頁的信息層級[EB/OL].[2015-03-19].

[6]SmashingMagazine.眾妙之門：用戶體驗設計的秘密[M].邱胤炎,林本杰,譯.北京:人民郵電出版社,2014.

[7]吳鵬,張佩佩,甘利人.網站用戶信息獲取中的心智模型研究[J].情報學報,2011,30(9):935-945.

[8]黃群,朱超.基于用戶心智模型的產品設計[J].包裝工程,2009,30(12):133-136.

[9]SusanWeinschenk.設計師要懂心理學[M].徐佳,馬迪,余盈億,譯.北京:人民郵電出版社.2014.

[10]林一,陳靖,劉越,王涌天.基于心智模型的虛擬現實與增強現實混合式移動導覽系統的用戶體驗設計[J].計算機學報.2015,38(2):408-421.

[11]李海濤,宋琳琳.用戶使用網站的心智模型測量方法的選擇及應用[J].情報理論與實踐,2015,38(2):11-16.

[12]孫麗,田才.基于用戶體驗的網站信息構建模型[J].情報科學,2010,28(6):907-910.

[13]劉津,李月.破繭成蝶：用戶體驗設計師的成長之路[M].北京:人民郵電出版社,2014.