《網(wǎng)站界面設計》PPT課件.ppt

1、,第四章 網(wǎng)站界面設計,網(wǎng)站的板式構成和特點,網(wǎng)站的客戶端開發(fā)技術,2,4,網(wǎng)站首頁的設計,3,網(wǎng)站二級頁面的設計要點和方法,網(wǎng)站界面藝術設計,2,網(wǎng)站的板式構成和特點,網(wǎng)頁界面的版式構成設計，是將文字、圖像、色彩、動畫、視頻等網(wǎng)頁界面的傳達要素，根據(jù)特定的內(nèi)容和主題，在網(wǎng)頁所限定的范圍中，運用造型元素和形式原理進行視覺的關聯(lián)與配置，從而將設計意圖以視覺形式表現(xiàn)出來。 1）分列式布局結構 2）區(qū)域式布局結構 3）自由式布局結構,1）分列式布局結構的特點 分列式布局結構是運用最為廣泛的商業(yè)網(wǎng)頁布局結構，因特網(wǎng)上的門戶網(wǎng)站和綜合類網(wǎng)站絕大部分是這一結構。分列式布局結構一般版面呈長方形，顯示效果橫窄

2、豎寬，有上下滾動條。 分列式布局結構可分為：整列式、二列式、三列式、四列式、五列式、混合列式。,2）區(qū)域式布局結構的特點 區(qū)域式布局結構在商業(yè)網(wǎng)頁布局中運用也很廣，它通常利用顏色、線條、文字的斷口或插圖的變換等手段把網(wǎng)頁平面劃分為幾個規(guī)則的或不規(guī)則的區(qū)域。區(qū)域式布局結構版面接近方形，一般沒有滾動條或滾動條很短。,3）自由式布局結構的特點 自由式布局結構有靜態(tài)和動態(tài)兩種形式。 靜態(tài)布局通常把網(wǎng)頁當作平面出版物創(chuàng)意設計，將信息與背景畫面融為一體，沒有清晰的界限區(qū)分，設計好的網(wǎng)頁圖片通常采取分割整張圖片生成網(wǎng)頁的形式去制作。此類頁面設計通常精美華麗，視覺效果較好，個性化強，但不適用于信息量大的站點。

3、 動態(tài)布局通常采用流行的Flash動畫作為表現(xiàn)形式。由于Flash強大的功能，這種排版形式變化多樣，視覺沖擊力強，整體效果好。,另外，也可以將網(wǎng)頁布局分為：“國”字形布局、“匡”字形布局 、“三”字形布局、“川”字形布局 、海報型布局、Flash布局、標題文本型布局 。,各類版式構成設計的開發(fā)工具：,網(wǎng)站的客戶端開發(fā)技術,1）Html語言 HTML它是一種文檔標記語言，支持超鏈接，可由瀏覽器呈現(xiàn)。 HTML的優(yōu)點有： HTML允許任何使用任何瀏覽器訪問（通用客戶）；HTML是一種小型語言，易于學習；瀏覽器容易獲得；HTML輸出相對簡單。,2）CSS語言 CSS（Cascading Style

4、Sheets）是一種風格語言，它允許為不同的顯示部分建立不同的字體，頁空白或行空白等。使用CSS可以使整個站點的所有頁面看起來具有統(tǒng)一的風格。 優(yōu)點： CSS提供HTML對象的X，Y，Z位置的放置。 因為只有文本被傳送，因此具有較快的下載速度，容易建立和維護網(wǎng)站范圍的風格。 缺點： 早期的瀏覽器可能不支持CSS。 瀏覽器可能不能正確實現(xiàn)標準。,3）JavaScript/JScript/VBScript 客戶端的腳本（script）是指可以伴隨文檔下載到用戶端或直接嵌入文檔中的，用腳本語言編寫的程序。腳本程序在文檔載入或文檔中某一事件被激活時執(zhí)行。它為開發(fā)者提供了制作動態(tài)交互的網(wǎng)頁的機會。 優(yōu)點

5、：允許域的預處理。如在客戶端檢查用戶輸入是否正確，使用腳本是最快的辦法；下載速度較快；提供頁面對象的訪問 。 缺點：有多種腳本語言的選擇和版本；早期瀏覽器可能不支持；用戶可以禁用腳本。,網(wǎng)站的首頁設計,首頁是網(wǎng)站的形象頁面，一個網(wǎng)站能否吸引瀏覽者留在該站中漫游，全憑首頁設計的效果。所以，首頁設計對于任何網(wǎng)站都是至關重要的。 要掌握網(wǎng)站首頁的設計方法，熟悉首頁的功能模塊，構造出主題鮮明、版面精彩、立意新穎的網(wǎng)站首頁。,1、首頁的功能模塊 首頁，從根本上說就是全站內(nèi)容的目錄，也是一個索引。但只是羅列目錄顯然是不夠的，設計好一個首頁首先需要確定首頁的功能模塊。一般的站點都需要頁頭、頁中和頁尾這三個模

6、塊。,(1)頁頭 頁頭包括網(wǎng)站名稱、Logo、廣告條(banner)、導航等板塊。頁頭用來標示網(wǎng)站，體現(xiàn)網(wǎng)站主題。它可以用企業(yè)的名稱、標語、徽號或圖像來集中、概括地反映企業(yè)的經(jīng)營理念和服務定位。導航提供了對關鍵頁面的簡捷鏈接，使用戶能夠迅速地到達他們所需信息的其他頁面上。,(2)頁中 頁中包括公告與新聞、產(chǎn)品推薦、廣告條、搜索、友情鏈接等板塊。為保持網(wǎng)站的新鮮感，應時刻確保主頁提供的是最新信息?？梢砸源笞謽祟}宣布新消息，也可以定期改變主頁上的圖像，或更改主頁的式樣。,(3)頁尾 頁尾包括版權與聯(lián)絡信息、計數(shù)器等板塊。在首頁上標示一句簡短的版權聲明，用鏈接方法帶出另一個載有詳細使用條款的頁面，這

7、樣可以避免首頁顯得雜亂。在頁面的底部可以放置簡單的聯(lián)系方式。,2、首頁設計的要點 (1)主題明確，重點突出。要能使用戶通過網(wǎng)站首頁明確企業(yè)的主要任務。要達到這個目的，最好在文本或圖像中設置闡明主題的句子視覺興趣點，這一點對于絕大多數(shù)的企業(yè)來說是很重要的。國內(nèi)許多企業(yè)的首頁設計平庸，既無特色又顯呆板，原因就是其缺乏讓人“神往其間”的視覺興趣點。,(2)頁面簡潔，重在創(chuàng)意。設計并不是再現(xiàn)具體的物象和特征，它要表達的是一定的意圖和要求，在適當?shù)沫h(huán)境里 為人們所理解和接受。它以滿足人們的實用和需求為目標，因而要求簡練，準確。頁面創(chuàng)意涉及諸多領域，獨特的創(chuàng)意會使首頁極具吸引力，令用戶深入瀏覽。,(3)技

8、術合理，瀏覽快捷。上網(wǎng)瀏覽需要的是快速、有價值的信息。在首頁設計中充斥許多純?yōu)榱遂乓夹g的東西，如多個風格迥異的動畫（缺乏美感甚至是與主體無關的動畫），還有大量的利用Javascript和動態(tài)HTML的技術，這樣的首頁會造成頁面的混亂，不管是從功能上還是從形式上都是不可取的。目前，商業(yè)網(wǎng)站首頁的簡潔化已經(jīng)成為設計趨勢。,3.首頁設計的方法 首頁設計需要經(jīng)過以下幾個基本步驟。 （1）構思布局 （2）繪制草圖 （3）方案細化 （4）修整定稿,某網(wǎng)站可視化設計分析,DIV結構如下：body /*這是一個HTML元素*/#Container /*頁面層容器*/#Header /*頁面頭部*/#Page

9、Body /*頁面主體*/#Sidebar /*側邊欄*/#MainBody /*主體內(nèi)容*/#Footer /*頁面底部*/,實訓：網(wǎng)站Logo和首頁設計 通過學習能夠掌握網(wǎng)站的設計要點，為杭州某數(shù)碼產(chǎn)品公司設計出合理、美觀、大方的首頁。 步驟一：分組，自由組合（最多2人一組） 步驟二：收集、查找資料（文字圖片） 步驟三：首頁的設計與修正 源代碼下載中心 ,要求： 1、版面設計結構新穎，布局合理、規(guī)范、有創(chuàng)意，層次分明。作品主題風格突出，具有商業(yè)氣息 2、Logo設計精美、獨特，與網(wǎng)站的整體風格相融。 3、Banner設計內(nèi)容醒目、美觀，視覺效果好。 4、導航設計層次清楚、合理，操作便捷。

10、5、頁面字體美觀大方、大小適宜，文字圖片等編排整齊。圖象設計精練筒潔、顏色協(xié)調(diào)、風格吻合、布局合理。造型元素的綜合運用，點、線、面合理搭配。 6、首頁體現(xiàn)搜索、商品顯示、用戶登錄等功能。,網(wǎng)站的二級頁面設計,通過本節(jié)的學習熟悉網(wǎng)站二級頁面的組成，掌握網(wǎng)站新聞、產(chǎn)品、客戶支持等二級頁面的設計方法，構造出站點整體、風格統(tǒng)一的網(wǎng)站頁面。,1.新聞頁面設計 網(wǎng)站都應有一個新聞頁面，既可以用來動態(tài)發(fā)布有關新產(chǎn)品或新開發(fā)項目或公司活動的情況，又可以作為公司的活動年表。 建立新聞頁面，首先可以在首頁上編寫并設置可點擊的新聞標題，然后再編寫完整的新聞頁面，這些頁面通過超鏈接與新聞標題相連。在設計新聞頁面時，應

11、保持清晰、簡單、快捷的特點以便于打印，不要使用那些不利于任何文本閱讀的背景圖片和顏色。,1) 頁面的新聞標題 (1)新聞標題的功能 提示新聞內(nèi)容。新聞標題是以最精練的文字將新聞中最重要、最新鮮的內(nèi)容提示給讀者。 評價新聞內(nèi)容。標題不但簡明扼要地介紹新聞內(nèi)容，而且能夠體現(xiàn)評價新聞內(nèi)容。一則好的新聞標題具有鮮明的思想性，不僅能向讀者提示新聞內(nèi)容，而且能幫助讀者理解新聞內(nèi)容的性質和意義。,(2)新聞標題組成的要素 用一個動詞來描述該新聞的目的，如說明產(chǎn)品或公司發(fā)生了什么。 涉及的產(chǎn)品或企業(yè)，著重表示該新聞直接涉及到的產(chǎn)品或企業(yè)。 用提示語來激發(fā)瀏覽者的興趣，用字樣表示新聞是最新的或加一個“new”圖

12、標。 將新聞日期置于標題的結尾。,(3)新聞標題的版面布置 主頁中新聞標題的版面布置要保持簡單、清晰、引人注目，通常可采用以下幾種方法： 新聞標題的排列應按降序進行排列，最近的新聞在開頭頂部，最舊的新聞在底部。 可在新聞標題前采用項目符號和編號或小圖標作點綴，增加頁面的可讀性。 可將新聞標題的列表放在一個上下滾動的窗口中以容納更多的新聞。,2)新聞頁面 新聞頁面要滿足易于導航的要求，首先要方便用戶從新聞頁面到網(wǎng)站中其他內(nèi)容頁面的跳轉，其次還要方便用戶迅速地到達其他的新聞頁面。通?？梢酝ㄟ^在新聞頁面建立以下幾種方式來實現(xiàn)。,(1)建立科學的菜單欄導航系統(tǒng)以便于用戶實現(xiàn)新聞頁面與網(wǎng)站中其他頁面間的

13、無縫跳轉。 (2)建立與前面或后面新聞的鏈接，便于用戶瀏覽。 (3)通過檢索和搜索引擎使用戶可根據(jù)時間或內(nèi)容查看其感興趣的新聞。 (4)在新聞頁面中包含與該新聞有關的圖片、聲音或其他多媒體文件。 (5)將新聞中出現(xiàn)的關鍵字或人名鏈接到其因特網(wǎng)頁面上或其E-mail地址。 (6)添加客戶、輿論對該新聞稿主題的見解，豐富新聞內(nèi)容。,2、產(chǎn)品頁面的設計 網(wǎng)站產(chǎn)品頁面通常采用信息分層、逐層細化的方法展示公司產(chǎn)品或服務。所謂信息分層就是按一定的分類方法將它放在不同的頁面上詳細介紹，從而允許用戶能按需要地找到最適合他們需要的信息層。比如，首先建立一個產(chǎn)品價格清單(第一層)，該清單允許用戶為每一項選擇一個產(chǎn)

14、品頁面(第二層)，這個頁面又能引出具有詳細信息的頁面(第三層)。,我們通常把產(chǎn)品目錄的主要分為三層。 第一層：首先建立一個產(chǎn)品價格列表，該表使用戶能夠全面瀏覽公司的產(chǎn)品。 第二層：對應每個產(chǎn)品的頁面，該頁面將對此項產(chǎn)品的有關信息進行全面的介紹。 第三層：產(chǎn)品更深層次的信息，如果瀏覽者還要深入了解該產(chǎn)品的技術細節(jié)、設計維護等，可以通過本頁面獲得這些信息。,3.客戶支持頁面設計 在設計客戶支持頁面時，盡可能地站在客戶的角度，預測每種潛在的需要，向客戶提供有用信息，使他們對企業(yè)和產(chǎn)品產(chǎn)生親切感。我們利用因特網(wǎng)這種服務工具，目前，因特網(wǎng)的最佳用途可能是與消費者通信并為其提供服務。許多用戶上網(wǎng)并不是要購

15、買，而是尋求幫助，因特網(wǎng)站點應盡其所能為客戶提供服務和技術支持。令人滿意的服務能更好地滿足客戶需求，這種投資必定會獲得回報。 支持頁面內(nèi)容不限制，既可以幫助用戶了解購買方法，也可以對產(chǎn)品的行業(yè)信息進行咨詢。,4.企業(yè)信息頁面設計 網(wǎng)上企業(yè)的特點之一是資信不易確定，這是網(wǎng)上購買者不輕易下訂單的主要原因之一。因此，企業(yè)應盡量提高企業(yè)資信的透明度，讓瀏覽者了解企業(yè)的狀況。企業(yè)信息頁面能達到這個目的，它主要包括公司狀況、發(fā)展規(guī)模、與投資者關系等頁面。,網(wǎng)站的界面藝術設計,網(wǎng)站在滿足網(wǎng)頁功能需要的前提下，需要有針對性的采用一些美的形式。把美的形式規(guī)律同現(xiàn)代的網(wǎng)頁設計的具體問題相結合起來，使網(wǎng)頁更加有生氣

16、，更吸引人。通過本節(jié)的學習熟悉網(wǎng)站界面藝術設計形式美的規(guī)律，掌握界面設計的創(chuàng)意方法，構造出視覺沖擊力清晰、張力巨大的商業(yè)網(wǎng)站。,1）統(tǒng)一和變化 統(tǒng)一是個部分之間的內(nèi)在關聯(lián)，變化是各個組成部分之間的區(qū)別。在網(wǎng)頁設計中運用統(tǒng)一與變化的規(guī)律，是處理形象和組織的對立統(tǒng)一過程，完美的網(wǎng)頁設計，形式上要豐富有條理；組織上要有秩序而不單調(diào)，不混亂。在網(wǎng)頁設計中恰當?shù)睦眠@種規(guī)律，在我們把大量的信息塞如到網(wǎng)頁上去的時候，考慮怎樣把它們合理的用統(tǒng)一的方式來布局編排，頁面豐富而更有生氣，使網(wǎng)站作品整體感強同時又有變化，看起來就不感到枯燥。,2）條理與反復 條理是“有條不紊”，對事物有規(guī)律、有秩序的組織和安排，是使

17、物象單純化、統(tǒng)一化。反復是“來回重復”，是有規(guī)律的連續(xù)與延伸，有組織的變化與擴展并加以歸納，概括而富于條理化。條理與反復即有規(guī)律的重復，條理與反復的原則是頁面整體的秩序美的基礎，是變化中的統(tǒng)一，也是運動發(fā)展中求得協(xié)調(diào)一致的表現(xiàn)方式，由它可以演化出多種多樣的圖形變化。,3）對比與調(diào)和 對比是指在質或量方面相互差異甚大的兩個要素同時配置在一起時，兩者之間有相互作用的性格，更加令人感到彼此強烈地相互襯托。對比是為了使主題畫面具有變化和生氣而運用的方法。而調(diào)和是構成美的對象在部分與部分之間的相互關系。它無論是在質的方面還是量的方面都沒有矛盾，各部分所傳達給人的感受和意念之間不是相互分離或排斥，而是一個

18、部分多樣性的整體統(tǒng)一來表現(xiàn)美的狀態(tài)。,4）對稱與均衡 對稱是指形態(tài)以某一點為中心，其左右或者上下因同等、同量、同形而形成的平衡。對稱的形式法則是自然法則在設計上的具體體現(xiàn)，對稱有以中軸線為軸的左右對稱，以水平線為軸的上下對稱和以中心點為基準的放射對稱。對稱的網(wǎng)頁設計穩(wěn)定、莊嚴、整齊、秩序、安寧、沉靜，如同中國古代宮殿一樣莊重、嚴肅，體現(xiàn)了一種古典主義的風格。當然在設計時片面的追求靜止的對稱，那時僵硬的、不生動的，同樣會失去美感。均衡是指版面以某一點為中心，左右或者上下等量不等形的配置。,5）節(jié)奏與韻律 運動中的事物都具有節(jié)奏和韻律的形式規(guī)律。節(jié)奏是指單體按照一定的條理、秩序、重復連續(xù)地排列，形成一種律動形式。節(jié)奏本身沒有形象特征，只是表明事物在運動中的快慢、強弱以及間歇的節(jié)拍，帶有機械的秩序美。韻律是一種規(guī)律性的變化，是比節(jié)奏更高一級的律動。韻律是每個節(jié)拍間運動所表現(xiàn)的軌跡，帶有形象特征。在具體的網(wǎng)頁設計的運用中，按鈕的編排就經(jīng)常會遇到這個問題，做得好的按鈕能夠使排在一起的諸多按鈕富有音樂般的美感，同時