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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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