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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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