1、網(wǎng) 頁 設(shè) 計(jì)主講 : 秦旭劍一、網(wǎng)絡(luò)概述 1、網(wǎng)頁設(shè)計(jì)的載體網(wǎng)絡(luò)媒體的誕生與發(fā)展 連接世界不同國家、領(lǐng)域、行業(yè)的INTERNET國際計(jì)算機(jī)分組交換網(wǎng)絡(luò)是迄今為止世界最為成功和覆蓋面最大的國際網(wǎng)絡(luò)。它始于1980年的美國，采用了TCP/IP協(xié)議。目前，網(wǎng)絡(luò)已把世界上150個國家和地區(qū)、數(shù)萬個區(qū)域網(wǎng)連接在一起，網(wǎng)絡(luò)用戶達(dá)數(shù)億。 網(wǎng)頁設(shè)計(jì) 2、網(wǎng)絡(luò)的表現(xiàn)形式網(wǎng)站之設(shè)計(jì)（二維設(shè)計(jì)的新舞臺） 隨著網(wǎng)絡(luò)工具的迅速普及和入網(wǎng)用戶的不斷增多，上網(wǎng)已成為一種時(shí)尚。 二、網(wǎng)頁藝術(shù)設(shè)計(jì)的特性 1.交互性與持續(xù)性 網(wǎng)頁不同于傳統(tǒng)媒體之處，就在于信息的動態(tài)更新和即時(shí)交互性。 2.多維性 多維性源于超級鏈接，主要體現(xiàn)在

2、網(wǎng)頁設(shè)計(jì)中對導(dǎo)航的設(shè)計(jì)上。 3.多種媒體的綜合性 隨著網(wǎng)絡(luò)帶寬的增加、芯片處理速度的提高以及跨平臺的多媒體文件格式的推廣，必將促使設(shè)計(jì)者綜合運(yùn)用多種媒體元素來設(shè)計(jì)網(wǎng)頁，以滿足和豐富瀏覽者對網(wǎng)絡(luò)信息傳輸質(zhì)量提出的更高要求。 典型的有在線音樂、在線廣播、網(wǎng)上電影、網(wǎng)上直播等。 4.版式的不可控性 網(wǎng)頁版式設(shè)計(jì)與傳統(tǒng)印刷版式設(shè)計(jì)有著極大的差異： (1) 印刷品設(shè)計(jì)者可以指定使用的紙張和油墨，而網(wǎng)頁設(shè)計(jì)者卻不能要求瀏覽者使用什么樣的電腦或?yàn)g覽器； (2)網(wǎng)絡(luò)正處于不斷發(fā)展之中，不象印刷那樣基本具備了成熟的印刷標(biāo)準(zhǔn)； (3) 網(wǎng)頁設(shè)計(jì)過程中有關(guān)Web的每一件事都可能隨時(shí)發(fā)生變化。 這一切說明，網(wǎng)絡(luò)應(yīng)用尚

3、處在發(fā)展之中，關(guān)于網(wǎng)絡(luò)應(yīng)用也很難在各個方面都制訂出統(tǒng)一的標(biāo)準(zhǔn)，這必然導(dǎo)致網(wǎng)頁版式設(shè)計(jì)的不可控制性。其具體表現(xiàn)為： (1) 網(wǎng)頁頁面會根據(jù)當(dāng)前瀏覽器窗口大小自動格式化輸出； (2) 網(wǎng)頁的瀏覽者可以控制網(wǎng)頁頁面在瀏覽器中的顯示方式； (3) 不同種類、版本的瀏覽器觀察同一個網(wǎng)頁頁面，效果會有所不同； (4) 用戶的瀏覽器工作環(huán)境不同，顯示效果也會有所不同。 把所有這些問題歸結(jié)為一點(diǎn)，即網(wǎng)頁設(shè)計(jì)者無法控制頁面在用戶端的最終顯示效果，但這也正是網(wǎng)頁設(shè)計(jì)的吸引人之處。 5.技術(shù)與藝術(shù)結(jié)合的緊密性 網(wǎng)絡(luò)技術(shù)主要表現(xiàn)為客觀因素，藝術(shù)創(chuàng)意主要表現(xiàn)為主觀因素，網(wǎng)頁設(shè)計(jì)者應(yīng)該積極主動地掌握現(xiàn)有的各種網(wǎng)絡(luò)技術(shù)規(guī)律

4、，注重技術(shù)和藝術(shù)緊密結(jié)合，這樣才能窮盡技術(shù)之長，實(shí)現(xiàn)藝術(shù)想象，滿足瀏覽者對網(wǎng)頁信息的高質(zhì)量需求。 三、建立網(wǎng)站 1、認(rèn)識網(wǎng)頁和網(wǎng)站 網(wǎng)站是由網(wǎng)頁集合而成，而大家通過瀏覽器看到的畫面就是網(wǎng)頁，網(wǎng)頁說具體了是一個html文件，瀏覽器是用來解讀這份文件的。 2、建立一個網(wǎng)站就像建造一幢高樓大廈，有一個詳細(xì)的程式和諸多細(xì)節(jié)。網(wǎng)站設(shè)計(jì)策劃是把具體的要求和設(shè)計(jì)的表現(xiàn)從意念到具體的過程。 21網(wǎng)站總策劃 22. 網(wǎng)站的基本功能描述 23. 用戶界面與設(shè)計(jì)風(fēng)格意念的綱要 3、網(wǎng)頁設(shè)計(jì) 31定位網(wǎng)站的主題 題材的選擇 美國個人電腦雜志（PC Magazine評出的2001年度排名前100位的全美知名網(wǎng)站的十類題

5、材，這對于讀者進(jìn)行網(wǎng)站設(shè)計(jì)，提供了一些參考價(jià)值。 第一類：網(wǎng)上求職 第二類：網(wǎng)上聊天/即時(shí)信息/ICQ 第三類：網(wǎng)站社區(qū)/討論郵件列表 第四類：計(jì)算機(jī)技術(shù) 第五類：網(wǎng)頁/網(wǎng)站開發(fā) 第六類：娛樂網(wǎng)站 第七類：旅行 第八類：參考/資訊 第九類：家庭/教育 第十類：生活/時(shí)尚 走迷宮只是在做游戲時(shí)才會首生樂趣，但如果在日常生活中我們陷入迷宮，那則是最煩惱的事情。如果受眾在點(diǎn)擊WEB的具體內(nèi)容和深層頁面時(shí)不易找到順暢的路徑和導(dǎo)航標(biāo)識，不明確或不易懂就如同步入迷宮，其結(jié)果是受眾只有放棄進(jìn)入。因此，在網(wǎng)絡(luò)廣告中創(chuàng)建大家公認(rèn)且熟知、清晰、簡潔、易懂的網(wǎng)站導(dǎo)航系統(tǒng)是十分重要的。32. 網(wǎng)頁結(jié)構(gòu)層次上的設(shè)計(jì)藝術(shù)

6、進(jìn)入圖書館是否詢問否是找人詢問回答是否可靠是找書室再問人找書架瀏覽找個更好的服務(wù)員還有信心嗎還有沒有找出口找示意圖找書架區(qū)域?qū)ふ視軜?biāo)識找架層瀏覽是否找到是否自已在正確的位置嗎否是還有還有信心嗎幾乎沒有找服務(wù)員是是否找到否徹底沒信心了1、在圖書館查找圖書的情景進(jìn)入網(wǎng)站是否習(xí)慣搜索否是找搜索框輸入詞匯結(jié)果是否可靠是從中找出你的目標(biāo)逐項(xiàng)查找改進(jìn)提問的方式是否還有信心還有沒有離去點(diǎn)擊某個欄目點(diǎn)擊某個子欄目尋找所需要的信息是否找到是否認(rèn)為自已在正確的欄目嗎否是還有還有信心嗎幾乎沒有購買是是否找到否徹底沒信心了否2、在網(wǎng)上購書的情景3、“別讓我動腦”的概念 美國著名的網(wǎng)頁優(yōu)化設(shè)計(jì)大師斯蒂夫.克魯格說過，

7、他推崇的第一原則就是“別讓我動腦”。 電子商務(wù)網(wǎng)站這個概念很明確，就是要體現(xiàn)商務(wù)，可以是網(wǎng)上購物的、可以是在線票務(wù)的、可以是網(wǎng)上的交易平臺，總之就是讓用戶在網(wǎng)絡(luò)上實(shí)現(xiàn)商務(wù)目的。現(xiàn)在電子商務(wù)網(wǎng)站大體會有兩個部分B2B（商家對商家）、B2C（商家對普通零散用戶），B2C是電子商務(wù)網(wǎng)站設(shè)計(jì)的最高境界，如果能夠做出成功的B2C網(wǎng)站那么別的什么企業(yè)展示網(wǎng)站或者B2B的商務(wù)網(wǎng)站等等就都不算什么了，原因也很簡單，就是因?yàn)樯线吽徇^的人和人的差異。 下面是一個用戶瀏覽一個網(wǎng)站的過程圖，這張圖有助于我們了解用戶瀏覽網(wǎng)站的整個過程。我們可以根據(jù)這張圖列出的步驟細(xì)心觀察測試時(shí)候用戶在網(wǎng)站上完成一個工作時(shí)候在每一個步

8、驟里所用的時(shí)間、都做了些什么，并記錄下來認(rèn)真分析這些數(shù)據(jù)，這些數(shù)據(jù)也是我們優(yōu)化動作的依據(jù)。4、確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu) # 網(wǎng)站的目錄結(jié)構(gòu) 建立目錄結(jié)構(gòu)的一些建議： 1不要將所有文件都存放在根目錄下 2按欄目內(nèi)容建立子目錄 在設(shè)置網(wǎng)站的目錄結(jié)構(gòu)時(shí)，需要注意的問題有： （1）不要使用中文名字的目錄名。 （2）不要使用過長的目錄名。 （3）盡量使用意義明確的目錄名，盡量做到“見名知意”。 （4）目錄的層次不要太多，建議不要超過3層。 3、網(wǎng)頁制作的基本步驟 # 網(wǎng)站的鏈接結(jié)構(gòu) 一般情況下，建立網(wǎng)站的鏈接結(jié)構(gòu)有以下三種基本方式： 樹狀鏈接結(jié)構(gòu) 層狀結(jié)構(gòu)（如圖2-1所示）類似于目錄系統(tǒng)的樹型結(jié)構(gòu)，

9、由網(wǎng)站文件的主頁開始，依次劃分為一級標(biāo)題、二級標(biāo)題等等，逐級細(xì)化，直至提供給瀏覽者具體信息。 主主 頁頁頁面頁面1頁面頁面2頁面頁面3頁面頁面4頁面頁面5頁面頁面6頁面頁面7一級標(biāo)題一級標(biāo)題二級標(biāo)題二級標(biāo)題圖2-1樹狀鏈接結(jié)構(gòu)線性鏈接結(jié)構(gòu) 線性結(jié)構(gòu)（如圖2-2所示）類似于數(shù)據(jù)結(jié)構(gòu)中的線性表，用于組織本身的線性順序形式存在的信息，可以引導(dǎo)瀏覽者按部就班地瀏覽整個網(wǎng)站文件。這種結(jié)構(gòu)一般都用在意義是平行的頁面上。 主主 頁頁頁頁面面1頁頁面面2頁頁面面3 圖圖2-2 線性結(jié)構(gòu)線性結(jié)構(gòu) 鏈接結(jié)構(gòu)的設(shè)計(jì)，在實(shí)際的網(wǎng)頁制作中是非常重要的一環(huán)，采用什么樣的鏈接結(jié)構(gòu)將直接影響到版面的布局。通常情況下，網(wǎng)站文件

10、的結(jié)構(gòu)是層狀結(jié)構(gòu)和線性結(jié)構(gòu)相結(jié)合的。也就產(chǎn)生了第三種情況。 Web結(jié)構(gòu) Web結(jié)構(gòu)（如圖2-3所示）類似于Internet的組成結(jié)構(gòu)，各網(wǎng)頁之間形成網(wǎng)狀連接，允許用戶隨意瀏覽。主主 頁頁頁面頁面1頁面頁面2頁面頁面3頁面頁面4頁面頁面5頁面頁面7頁面頁面8一級標(biāo)題一級標(biāo)題二級標(biāo)題二級標(biāo)題圖圖2-3 Web結(jié)構(gòu)結(jié)構(gòu)頁面頁面65、網(wǎng)絡(luò)導(dǎo)航的慣例 導(dǎo)航的設(shè)計(jì)是否遵循人們的日常習(xí)慣是網(wǎng)絡(luò)廣告作用大小的關(guān)鍵所在，任何事物都有它的慣例；樓宇空間的示意圖總是在進(jìn)樓的入口的兩側(cè)；街道的路牌總是在路的拐角處；書的目錄總是在書的前面，而頁碼總是在上角或下角。人們知道找什么東西到哪兒去找，如果找不到也很少到別處亂找

11、。因而，我們要懂得和遵守慣例，如果打破某一事項(xiàng)的慣例就會出現(xiàn)許多煩心事，在網(wǎng)絡(luò)廣告中就會使信息的傳播中斷。 固定導(dǎo)航 固定導(dǎo)航在網(wǎng)站的主頁上戰(zhàn)有顯著的位置，一般在設(shè)計(jì)上會采用比較規(guī)正的形式，且在這一網(wǎng)站中的每個頁面上占據(jù)同樣的位置。固定導(dǎo)航應(yīng)包含最常見的五種元素：網(wǎng)站標(biāo)識、欄目、公共服務(wù)、返回主頁和搜索功能。 做好導(dǎo)航 每個頁面都要有導(dǎo)航按鈕，應(yīng)當(dāng)避免強(qiáng)迫用戶使用工具欄中的向前和向后按鈕。你的設(shè)計(jì)應(yīng)當(dāng)使用戶能夠很快地找到他們所要的東西。絕大多數(shù)好的站點(diǎn)在每一頁同樣的位置上都有相同的導(dǎo)航條，使瀏覽者能夠從每一頁上訪問網(wǎng)站的任何部分。 固定導(dǎo)航如應(yīng)如同業(yè)務(wù)熟練且服務(wù)周到的導(dǎo)游，隨時(shí)告知你現(xiàn)在在哪，

12、你可以到何處去，并應(yīng)該怎樣走和東南西北各有什么精彩的景點(diǎn)。以下分別介紹這五種元素的常規(guī)設(shè)計(jì)和注意事項(xiàng)。 （1） 網(wǎng)絡(luò)標(biāo)識設(shè)計(jì) 網(wǎng)絡(luò)標(biāo)識無論是圖形、文字或文字縮寫，它都代表著一個區(qū)域或一個大空間的名稱。在網(wǎng)絡(luò)這個虛擬的空間中人往往沒有位置感。在邏輯上網(wǎng)站的標(biāo)識應(yīng)處于整個網(wǎng)站設(shè)計(jì)的最高層面。（網(wǎng)站的層次依此排序示意如下）： 某網(wǎng)站網(wǎng)站欄目子欄目子子欄某頁面頁面某個區(qū)區(qū)域內(nèi)不同內(nèi)容 在設(shè)計(jì)形式上使網(wǎng)站標(biāo)識居于可視層次結(jié)構(gòu)的最高層面有多種方法：將標(biāo)識設(shè)計(jì)在頁面最顯著、最上端的構(gòu)圖區(qū)域；使其居于明度反差最高的層面；在色彩上使用最高的統(tǒng)一計(jì)劃；標(biāo)識的字號最大或陰影面積較大；把其他內(nèi)容框在網(wǎng)站標(biāo)識之內(nèi)。 另

13、外，網(wǎng)站標(biāo)識的外觀造型設(shè)計(jì)和平面設(shè)計(jì)的標(biāo)志標(biāo)識的規(guī)律相同，標(biāo)志可以是中文，英文字母，可以是符號，圖案等等要求醒目、簡潔、易讀、易記憶。比如：YAHOO是用YAHOO的英文作為標(biāo)志，新浪用SINA加眼睛作為標(biāo)志。標(biāo)志的設(shè)計(jì)創(chuàng)意來自你的網(wǎng)站的名稱和內(nèi)容。 （2）網(wǎng)絡(luò)欄目設(shè)計(jì) 欄目一詞借用于報(bào)紙，本是一欄或多欄內(nèi)固定內(nèi)容的歸納與界定。隨著報(bào)紙內(nèi)容的增多又出現(xiàn)了不同的版塊。而在空間無限的網(wǎng)絡(luò)中欄目的標(biāo)題可以具體頒在主頁當(dāng)中，而更需在首頁的開始、標(biāo)識的次一級層次上出現(xiàn)，通過它可以連接不同頁面。 內(nèi)容多的廣告或大型集團(tuán)公司、社會服務(wù)機(jī)構(gòu)、大型市場的WEB廣告還可設(shè)計(jì)出在每一欄目下的子欄目，這樣層次分明，使

14、用方便。需注意的是，欄目標(biāo)題下的背景需有顏色塊，以示可以點(diǎn)擊，這一層次的底色不宜與整體版面底色的明度反差過大。 （3）公共服務(wù)設(shè)計(jì) 公共服務(wù)同樣是網(wǎng)絡(luò)的重要鏈接，它并不具備目錄的功能，而是連接網(wǎng)絡(luò)的一些必不可少的重要元素尤其是商業(yè)性網(wǎng)站、商業(yè)廣告、電子商務(wù)等網(wǎng)站這一公共服務(wù)的設(shè)置更是不可缺少。 返回主頁 在主頁的不同層次的頁面上必須存在的固定導(dǎo)航是“返回主頁”的鏈接，它可使用戶隨時(shí)重新快捷地返回到原來的地方。給用戶一種歸屬感和安全感，不至于迷失方向。目前有許多網(wǎng)站在各頁面的層面上將網(wǎng)站標(biāo)識與返回主頁合二為一，這時(shí)一個有效的方法，既明確又節(jié)省空間，值得借鑒。（4）搜索設(shè)計(jì) 由于一些網(wǎng)站或主頁的信

15、息量會很大，因此，WEB上每一個頁面上都應(yīng)設(shè)有搜索框或是一個搜索頁面的鏈接。這樣可以極大地提高用戶的使用效率，為那些慣于使用搜索的上網(wǎng)者提供方便。（5）檢索凸舌設(shè)計(jì) 檢索凸舌是網(wǎng)絡(luò)中的又一種鏈接方式，它是從現(xiàn)實(shí)生活中提煉出來的一種有效的檢索方法，它能把眾多的內(nèi)容分區(qū)管理并作出明顯標(biāo)識，使人容易方便地找到和打開相應(yīng)的欄目。在網(wǎng)站不同層次的頁面中，“凸舌”可以提出供給予我們需要查找的目錄，并通過點(diǎn)擊迅速地打開相應(yīng)的頁面找到所需的信息。檢索凸舌的優(yōu)勢如下： 1、一目了然 2、凸舌既整 齊又生動 3、生動地表 現(xiàn)受眾的 選擇6、網(wǎng)站的色彩 色彩是藝術(shù)表現(xiàn)的重要要素之一,它是光刺激眼睛傳導(dǎo)到大腦中樞而產(chǎn)

16、生的一種感覺。色調(diào)及黑、白、灰的三色空間關(guān)系不論在設(shè)計(jì)還是在繪畫方面都起著重要的作用。網(wǎng)站給人的第一印象來自其視覺效果，確定網(wǎng)站的標(biāo)準(zhǔn)色彩是相當(dāng)重要的一步。不同的色彩搭配產(chǎn)生不同的效果，并能影響到瀏覽者的情緒?！皹?biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩。如IBM的深藍(lán)色，肯德基的紅色，windows視窗標(biāo)志上的紅藍(lán)黃綠色塊，都是我們覺得很貼切，很和諧。如果將IBM改用綠色或者黃金色，我們會有什么感覺？ 一般來說，一個網(wǎng)站的標(biāo)準(zhǔn)色彩不超過三種，太多則令人眼花繚亂。標(biāo)準(zhǔn)色彩要用于網(wǎng)站的標(biāo)志，標(biāo)題，主菜單和主色塊。給人以整體統(tǒng)一的感覺。至于其他色彩也可以使用，只是作為點(diǎn)綴和襯托，絕不能喧賓奪主。

17、色彩總的應(yīng)用原則應(yīng)該是“總體協(xié)調(diào)，局部對比”，也就是：主頁的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對比。在色彩的運(yùn)用上，可以根據(jù)主頁內(nèi)容的需要，分別采用不同的主色調(diào)。7、網(wǎng)站的標(biāo)準(zhǔn)字體和圖片 和標(biāo)準(zhǔn)色彩一樣，標(biāo)準(zhǔn)字體是指用于標(biāo)志，標(biāo)題，菜單的特有字體。一般我們網(wǎng)頁默認(rèn)的字體是宋體和12px。 圖片問題主要存在size過大的問題，網(wǎng)頁中一般應(yīng)用兩種格式的圖片jpeg和gif， 動畫不要用太多大家都喜歡用GIF動畫來裝飾網(wǎng)頁，但是太多太亂的動畫會使瀏覽者注意力分散，視覺疲勞。 有很多網(wǎng)站都在使用記數(shù)器，最好不用記數(shù)器。8、網(wǎng)站的版式設(shè)計(jì) 網(wǎng)站的最終表現(xiàn)集中在他的視覺

18、界面上，網(wǎng)頁作為一種視覺語言，其非常講究視覺元素編排和布局，雖然網(wǎng)頁的設(shè)計(jì)不同于平面設(shè)計(jì)，但它們有許多相近之處，版式設(shè)計(jì)通過諸多視覺要素的視覺空間組合，表達(dá)和諧統(tǒng)一視覺體驗(yàn)。1.主次分明，中心突出。在一個頁面上，必然考慮視覺的中心，這個中心一般在屏幕的中央，或者在中間偏上的部位。因此，一些重要的文章和圖片一般可以安排在這個部位，在視覺中心以外的地方就可以安排那些稍微次要的內(nèi)容，這樣在頁面上就突出了重點(diǎn)，做到了主次有別。 2.大小搭配，相互呼應(yīng)。較長的文章或標(biāo)題，不要編排在一起，要有一定的距離，同樣，較短的文章，也不能編排在一起。對待圖片的安排也是這樣，要互相錯開，造成大小之間有一定的間隔，這樣

19、可以使頁面錯落有致，避免重心的偏離。 3.圖文并茂，相得益彰。文字和圖片具有一種相互補(bǔ)充的視覺關(guān)系，頁面上文字太多，就顯得沉悶，缺乏生氣。頁面上圖片太多，缺少文字，必然就會減少頁面的信息容量。因此，最理想的效果是文字與圖片的密切配合，互為襯托，既能活躍頁面，又使主頁有豐富的內(nèi)容。 4. 表格是網(wǎng)頁頁面中最重要的排版方式 網(wǎng)頁的適應(yīng)性就是在不同系統(tǒng)、不同瀏覽器和不同分辨率的適應(yīng)能力。要注意的是分辨率，應(yīng)該最低照顧到800600的用 戶 （ 分 辨 率800600的顯示尺寸780428、分辨率1024768的顯示尺寸1007600），所以頁面最寬不要超過780，一定不要讓用戶橫向拖頁面。9、使用著名的插件 如果網(wǎng)站上有聲音或視頻，要保證使用者通過使用某個知名的插件，能夠聽到或看到。如果訪問者沒有所要求的插件，將不得不到其它站點(diǎn)去下載，這樣訪問者有可能就不會返回了。許多站點(diǎn)使QuickTime、RealPlay和 Shockwave插件。因?yàn)?，許多訪問者并不愿意