第8章 Web界面設(shè)計(jì).ppt

1、第8章 Web界面設(shè)計(jì),2,本章內(nèi)容簡介,互聯(lián)網(wǎng)上Web站點(diǎn)和頁面的設(shè)計(jì)基礎(chǔ) Web站點(diǎn)的信息交互模型和結(jié)構(gòu) Web界面設(shè)計(jì)的基本思想和原則 Web界面設(shè)計(jì)的工具和技術(shù) Web界面設(shè)計(jì)的可用性評估 一些典型的Web站點(diǎn)實(shí)例,3,8.1 Web基礎(chǔ),互聯(lián)網(wǎng)是近年來對社會影響最大的技術(shù)進(jìn)步,影響到人類生活的很多方面。 互聯(lián)網(wǎng)已經(jīng)成為全面支持多媒體，能在多種平臺上運(yùn)行的龐大信息服務(wù)系統(tǒng)。 互聯(lián)網(wǎng)的應(yīng)用范圍也日趨擴(kuò)大，被廣泛用于商業(yè)辦公、業(yè)務(wù)管理、購物娛樂等人類生活的各個方面，業(yè)已成為一種全球化社會現(xiàn)象。,4,8.1.1 Web的出現(xiàn)與發(fā)展,90年代初，瑞士日內(nèi)瓦的歐洲核能研究中心分布在世界各地的科學(xué)

2、家需要高效率的通訊方式來進(jìn)行彼此交流與分享信息。 該中心高能核理學(xué)家Tim Berners-Lee研究發(fā)展了萬維網(wǎng)（World Wide Web，WWW）的雛形，目的是為了建立一個能夠整合各種資源、文件及多媒體的系統(tǒng)，讓使用者方便地取得不同媒體的資料。,5,WWW-環(huán)球信息網(wǎng)絡(luò)空間,簡單來說，WWW是建立在客戶/服務(wù)器模型之上，構(gòu)成的一個環(huán)球信息網(wǎng)絡(luò)空間，主要使用： 超文本標(biāo)記語言（Hypertext Markup Language，HTML） 超文本傳輸協(xié)議（Hypertext Transport Protocols， HTTP） 通過Internet把遍布世界各地的服務(wù)器連接起來，它能夠提

3、供各種Internet服務(wù)，具有一致用戶界面的信息瀏覽功能。,6,Web頁面的發(fā)展趨勢,Web的一個發(fā)展趨勢，是圖形Web頁面的爆炸性發(fā)展。網(wǎng)上瀏覽中包括了大量使用的動態(tài)圖形，使圖形Web遍布網(wǎng)絡(luò)的各個角落。 新一代Web信息描述標(biāo)準(zhǔn)XML，能更詳盡地描述文檔的結(jié)構(gòu)信息，具有比HTML有更強(qiáng)大的功能，為Web的發(fā)展提供了強(qiáng)有力的支持。,7,8.1.2超文本與超媒體,超文本 （Hypertext） 是一種使用于文本、圖形或計(jì)算機(jī)的信息的組織形式，是一種非線性的信息組織形式。它使得單一的信息元素之間相互交叉引用，這種引用并不是通過復(fù)制來實(shí)現(xiàn)的，而是通過指向?qū)Ψ降牡刂纷址畞碇敢脩臬@取相應(yīng)的信息。

4、,8,8.1.2 超文本與超媒體,超媒體 （Hypermedia） 利用超文本形式組織起來的文件不僅僅是文本，也可以是圖、文、聲、像以及視頻等多媒體形式的文件。這些多媒體信息就構(gòu)成了所謂的超媒體 。,9,8.1.3Web界面設(shè)計(jì)問題的提出,Web界面設(shè)計(jì)是人機(jī)交互界面設(shè)計(jì)的一個延伸，是人與計(jì)算機(jī)交互的演變。 Web界面設(shè)計(jì)與站點(diǎn)外觀直接相關(guān) 站點(diǎn)的界面外觀是否友好直接關(guān)系到是否能吸引人的關(guān)注。 人性化的設(shè)計(jì)是Web界面設(shè)計(jì)的核心 如何根據(jù)人的心理、生理特征，運(yùn)用技術(shù)手段，創(chuàng)造簡單、友好的界面，是Web界面設(shè)計(jì)的重點(diǎn)。,10,8.2 Web信息交互模型,用來解釋W(xué)eb的人機(jī)界面性質(zhì)的一個模型，它

5、提出網(wǎng)頁是用戶和知識之間的界面。 對于信息提供者來說包括信息的表達(dá)。 對于使用者來說則是信息的獲取。 信息的表達(dá)與獲取分別受到兩者認(rèn)知結(jié)構(gòu)的制約。,11,Web信息交互模型,12,Web信息交互模型,模型涉及到信息的三種類型 數(shù)據(jù)：當(dāng)一條信息被反復(fù)、簡單的提供時(shí)稱為數(shù)據(jù)，比如機(jī)票價(jià)格。 復(fù)雜信息：而用來敘述事件時(shí)稱為復(fù)雜信息，如多媒體信息。 過程性信息：在信息有明確目標(biāo)，并相互作用時(shí)稱為過程性信息，如在線練習(xí)、在線測試等。,13,Web信息交互模型,模型涉及到信息的兩種特性 動態(tài)性：信息在不斷的變化，具有動態(tài)性 比如股票價(jià)格、機(jī)票價(jià)格等是不斷變化的。 一致性：信息元素的組織方式具有一致性 信息

6、元素總是通過一定的方式結(jié)合在一起，如通過討論、說明，或根據(jù)電話號碼、名字、數(shù)字等方式組織陳列。,14,8.3 Web信息設(shè)計(jì)模型,Web信息設(shè)計(jì)模型 是解釋W(xué)eb人機(jī)界面性質(zhì)的另一個模型。 是一種研究網(wǎng)頁的信息設(shè)計(jì)模型。 設(shè)計(jì)模型中要考慮到信息的兩個方面 第一是應(yīng)該呈現(xiàn)或略去什么信息。 第二個方面指的是信息該如何被表現(xiàn) 。,15,Web信息設(shè)計(jì)模型,16,WEB的三種設(shè)計(jì)空間結(jié)構(gòu)模式,通路結(jié)構(gòu)模式 說明要展示的關(guān)鍵問題，使用戶更容易獲取有用的信息。 如出版物中的索引、標(biāo)題、摘要、概述等。 Web網(wǎng)站地圖和各欄目標(biāo)題等信息都屬于通路結(jié)構(gòu)。 興趣結(jié)構(gòu) 興趣結(jié)構(gòu)的目的在于捕捉用戶的注意力，并維持用戶

7、瀏覽網(wǎng)頁的注意力。 執(zhí)行結(jié)構(gòu) 指學(xué)習(xí)和教育材料之間的一系列交互，尤其是基于計(jì)算機(jī)的交互。 在WEB中指描述學(xué)習(xí)和網(wǎng)頁信息之間的交互。,17,8.4 Web站點(diǎn)的概念設(shè)計(jì),概念設(shè)計(jì)涉及的工作： 分析、確定站點(diǎn)的目標(biāo)和用途。 準(zhǔn)確定義所建立Web網(wǎng)站及站點(diǎn)的規(guī)范。 事先建立好站點(diǎn)的架構(gòu)和導(dǎo)航設(shè)計(jì)。 兼顧不同的瀏覽器。,18,8.4.1 站點(diǎn)架構(gòu)和導(dǎo)航設(shè)計(jì),站點(diǎn)結(jié)構(gòu) 站點(diǎn)的結(jié)構(gòu)可分為邏輯結(jié)構(gòu)和物理結(jié)構(gòu): 邏輯結(jié)構(gòu)描述文檔間的關(guān)系，定義文檔間的鏈接。 物理結(jié)構(gòu)描述文檔的實(shí)際位置及顯示方式 。 超文本結(jié)構(gòu)中最常用層次結(jié)構(gòu) 層次型結(jié)構(gòu)按信息的必要性來改變信息的顯示方式。 根網(wǎng)頁是站點(diǎn)的主頁，層次以根網(wǎng)頁開

8、始。 用戶深入站點(diǎn)時(shí)，選擇趨向于越來越具體，直到找到目標(biāo)或葉子網(wǎng)頁。 層次結(jié)構(gòu)通過深度和廣度來描述。,19,8.4.1站點(diǎn)架構(gòu)和導(dǎo)航設(shè)計(jì),站點(diǎn)的導(dǎo)航設(shè)計(jì) 導(dǎo)航系統(tǒng)對訪問者來說是路徑指示系統(tǒng)。 站點(diǎn)訪問者通過導(dǎo)航系統(tǒng)尋找需要的信息。 用戶感覺到能以滿意的方式找到所需信息時(shí)，導(dǎo)航系統(tǒng)才是合適的。 由于用戶的差異，不可能實(shí)現(xiàn)完美的導(dǎo)航系統(tǒng)。,20,兼顧不同瀏覽器的設(shè)計(jì),原因 站點(diǎn)瀏覽者可能使用不同類型和版本的瀏覽器。 以某一個瀏覽器的某一個版本為依據(jù)編寫的網(wǎng)頁程序，可能在其它的瀏覽器或其它版本上不能正常顯示或運(yùn)行。 方法 通過使用JavaScript等編程工具或功能，探測用戶瀏覽器的類型和版本等參數(shù)

9、及對于某特定功能的支持情況，然后根據(jù)探測結(jié)果顯示適用于特定瀏覽器的網(wǎng)頁內(nèi)容。 根據(jù)用戶瀏覽器分布情況決定設(shè)計(jì)所面向的瀏覽器類別和版本。,21,8.5 Web界面設(shè)計(jì)所涉及的問題,Web界面設(shè)計(jì)中要考慮的基本問題包括： Web界面設(shè)計(jì)基本原則 Web界面規(guī)劃,22,8.5.1 Web界面設(shè)計(jì)基本原則,了解瀏覽者的心理狀態(tài) 內(nèi)容與形式的統(tǒng)一 減少瀏覽層次 特點(diǎn)明確 統(tǒng)一整體的形象 Web界面設(shè)計(jì)的3C原則,23,8.5.1 Web界面設(shè)計(jì)基本原則,1了解瀏覽者的心理狀態(tài) 從心理學(xué)的角度分析瀏覽者的心理狀態(tài)，有助于網(wǎng)頁頁面的設(shè)計(jì)。 在單擊“退回”按鈕之前有三秒鐘而且只有三秒的等待。 必須迅速地把有趣

10、和有吸引力的東西顯示出來。,24,8.5.1 Web界面設(shè)計(jì)基本原則,2內(nèi)容與形式的統(tǒng)一 內(nèi)容指的是Web網(wǎng)站的信息、數(shù)據(jù)及文字內(nèi)容等. 形式指的是網(wǎng)頁設(shè)計(jì)的版式、構(gòu)圖、布局、色彩以及它們所呈現(xiàn)出的風(fēng)格特點(diǎn)等。 網(wǎng)頁的形式是為內(nèi)容服務(wù)的，但本身又有自己的獨(dú)立性和藝術(shù)規(guī)律。 網(wǎng)頁設(shè)計(jì)的目的就是為了使網(wǎng)頁更加形象、直觀，更易被觀眾所接受。 不同內(nèi)容的網(wǎng)頁要求用不同的設(shè)計(jì)形式。,25,8.5.1 Web界面設(shè)計(jì)基本原則,3減少瀏覽層次 應(yīng)盡量把網(wǎng)頁的層次簡要化，力求以最少的點(diǎn)擊次數(shù)鏈接到具體的內(nèi)容。 在主頁的訪問率為100人次的情況下，下一頁的訪問率降到30到50人次。 網(wǎng)頁的層次越復(fù)雜，實(shí)際內(nèi)容的

11、訪問率也將越低，信息也就越難傳達(dá)到讀者的手里。,26,8.5.1 Web界面設(shè)計(jì)基本原則,4特點(diǎn)明確 利用相應(yīng)邏輯結(jié)構(gòu)來有序組織、開發(fā)出一個頁面設(shè)計(jì)原型，進(jìn)行測試，逐步精煉此原型，形成明確的特點(diǎn) 特色鮮明的Web網(wǎng)站是精心策劃的結(jié)果，只有獨(dú)特的創(chuàng)意和賞心悅目的網(wǎng)頁設(shè)計(jì)才能在一瞬間打動它的瀏覽者 應(yīng)清楚地了解Web網(wǎng)站用戶的基本情況，從而能有的放矢，挑選關(guān)鍵信息,27,8.5.1 Web界面設(shè)計(jì)基本原則,5統(tǒng)一整體的形象 Web網(wǎng)站標(biāo)識以及網(wǎng)頁設(shè)計(jì)標(biāo)準(zhǔn)確定后，應(yīng)盡量地應(yīng)用到每一頁頁面上，使瀏覽者可以確定當(dāng)前所瀏覽的網(wǎng)站，并且給瀏覽者留下深刻而統(tǒng)一的印象。,28,SONY公司的首頁特點(diǎn),SONY公

12、司的首頁設(shè)計(jì)充分體現(xiàn)了引領(lǐng)消費(fèi)電子產(chǎn)品的潮流這一特點(diǎn)，設(shè)計(jì)者很好地傳遞了該Web網(wǎng)站的特點(diǎn)： 頁面上富有動感的線條和畫面 鮮亮的用色 Flash畫面和字樣 鼠標(biāo)落在上面就會以彩色顯示的多個畫面等,29,SONY公司的首頁,30,8.5.1 Web界面設(shè)計(jì)基本原則,6Web網(wǎng)站設(shè)計(jì)的3C原則 concise （簡潔 ） 使用醒目的標(biāo)題，這個標(biāo)題常常采用圖形來表示，但圖形同樣要求簡潔。 限制所用的字體和顏色的數(shù)目。 頁面上所有的元素都應(yīng)當(dāng)有明確的含義和用途，不要用無關(guān)的圖片把頁面裝點(diǎn)起來。,31,8.5.1 Web界面設(shè)計(jì)基本原則,Consistent（一致性） 各頁面使用相同的頁邊距；文本、圖形

13、間保持相同的間距。 各頁面上都放上公司或網(wǎng)站的統(tǒng)一標(biāo)志。 各頁面應(yīng)當(dāng)使用相同的導(dǎo)航圖標(biāo)。 頁面中的每個元素與整個頁面以及站點(diǎn)的色彩和風(fēng)格上保持一致性。 文字的顏色要同圖像的顏色保持一致并注意色彩搭配的和諧。,32,8.5.1 Web界面設(shè)計(jì)基本原則,contrast (對比度) 對比是強(qiáng)調(diào)某些內(nèi)容的最有效的辦法之一，好的對比度使內(nèi)容更易于辨認(rèn)和接受。 常用的對比方法是使用顏色進(jìn)行對比。 另一種實(shí)現(xiàn)對比的方法是使用字體變化。 可以在文字排版中使用斜體和黑體寫出關(guān)鍵內(nèi)容，但不要濫用，以免不能達(dá)到強(qiáng)調(diào)效果。,33,8.5.2 Web界面規(guī)劃,確定Web界面設(shè)計(jì)的目標(biāo) 企業(yè)Web網(wǎng)站： 企業(yè)建立這個W

14、eb網(wǎng)站的目的 這個網(wǎng)站的作用 該提供哪些吸引訪問者的東西 用戶訪問這個Web網(wǎng)站后，能給他們帶來什么？ 個人Web網(wǎng)站 ： 主要是展現(xiàn)自我、演練技術(shù) 。 建立的Web網(wǎng)站要有個性和特色 。,34,8.5.2 Web界面規(guī)劃,界面布局的規(guī)劃 制定好目標(biāo)后，網(wǎng)頁布局、元素的設(shè)計(jì)都要以這個目標(biāo)為中心，盡量從各方面綜合表現(xiàn)Web站點(diǎn)的目標(biāo)。 在制定建立站點(diǎn)目標(biāo)的同時(shí)，應(yīng)該將站點(diǎn)作為一種文化、一種藝術(shù)來看。,35,8.5.2 Web界面規(guī)劃,Web界面設(shè)計(jì)中用戶的地位 確定Web站點(diǎn)的用戶群體 ，從用戶的角度去思考。 以用戶為中心的設(shè)計(jì)，為用戶的共性設(shè)計(jì)，同時(shí)考慮差異。 對目標(biāo)用戶群的構(gòu)成進(jìn)行分析：W

15、eb網(wǎng)站是以提供的信息內(nèi)容來分類的。 對目標(biāo)用戶的行為方式來分析：按照人機(jī)工程學(xué)的觀點(diǎn)，行為方式受年齡、性別、地區(qū)、種族、職業(yè)、生活習(xí)俗、受教育程度等因素影響。,36,8.6 Web界面概要設(shè)計(jì),Web界面概要設(shè)計(jì)包括 Web界面框架設(shè)計(jì) Web界面的內(nèi)容與風(fēng)格的設(shè)計(jì) Web界面設(shè)計(jì)的語言與文化,37,8.6.1 Web界面框架設(shè)計(jì),Web網(wǎng)站規(guī)劃 對市場進(jìn)行分析，確定站點(diǎn)的目的和功能，并根據(jù)需要對站點(diǎn)建設(shè)中的技術(shù)、內(nèi)容、費(fèi)用、測試、維護(hù)等做出規(guī)劃。 建立原型系統(tǒng) 嘗試采用不同的方法修改目標(biāo)、更新形象。 解決Web網(wǎng)站建設(shè)中的一些基本問題 ： Web網(wǎng)站的結(jié)構(gòu) 信息的組織與管理 新增文件與原有

16、系統(tǒng)保持一致的措施。 存儲信息的物理方法（采用數(shù)據(jù)庫還是文件系統(tǒng)） 文檔版本控制 結(jié)構(gòu)的完整性以及維護(hù)方法等,38,8.6.1 Web界面框架設(shè)計(jì),詳細(xì)設(shè)計(jì)包括 Web頁面的布局 系統(tǒng)的內(nèi)部結(jié)構(gòu) 實(shí)現(xiàn)方法和維護(hù)方法等 確定Web網(wǎng)站的運(yùn)行模式 制造企業(yè)網(wǎng)站 商業(yè)企業(yè)網(wǎng)站 門戶網(wǎng)站 新聞網(wǎng)站 個人網(wǎng)站 通過廣告、銷售等方式進(jìn)行運(yùn)作的網(wǎng)站 正式實(shí)施,39,8.6.2 Web界面的內(nèi)容與風(fēng)格,網(wǎng)站內(nèi)容設(shè)計(jì)的原則 : HTML文檔的效果由其自身的質(zhì)量和瀏覽器解釋的方法決定。應(yīng)讓所有的瀏覽器都能夠正常瀏覽。 網(wǎng)站信息的組織的總體結(jié)構(gòu)要層次分明，盡量避免形成復(fù)雜的網(wǎng)狀結(jié)構(gòu)。 要權(quán)衡圖像和多媒體信息的數(shù)量，

17、在不影響網(wǎng)站效果的前提下，盡量減少圖像的數(shù)量和所占面積。,40,8.6.2 Web界面的內(nèi)容與風(fēng)格,網(wǎng)站內(nèi)容設(shè)計(jì)的原則 網(wǎng)站的首頁要給用戶帶來好的第一印象，能夠吸引用戶再次光臨這個網(wǎng)站。 網(wǎng)站內(nèi)容應(yīng)是動態(tài)進(jìn)行修改和更新；。 網(wǎng)頁中應(yīng)該提供聯(lián)機(jī)幫助功能。 網(wǎng)頁的文本內(nèi)容應(yīng)簡明，通俗易懂。 所有的內(nèi)容都要針對設(shè)計(jì)目標(biāo)而寫，不要節(jié)外生枝。 文字要正確，不能有語法錯誤和錯別字。,41,8.6.2 Web界面的內(nèi)容與風(fēng)格,Web界面的風(fēng)格 Web界面的風(fēng)格包括站點(diǎn)的標(biāo)志、色彩、字體、布局、交互方式、內(nèi)容價(jià)值、存在意義等。 一個杰出的網(wǎng)站需要整體的形象包裝和設(shè)計(jì)。 為兒童設(shè)計(jì)的網(wǎng)站應(yīng)當(dāng)使用比較豐富的色彩和

18、圖形，并且較多使用動畫和聲音等多媒體表現(xiàn)工具。 為老年人設(shè)計(jì)的網(wǎng)站需要考慮采用較大的字體、直截了當(dāng)?shù)男畔@示和簡單的瀏覽方式，以適用老年人可能逐漸減弱的視力和記憶力,42,體現(xiàn)兒童特點(diǎn)的迪斯尼網(wǎng)站,43,8.6.3 Web界面設(shè)計(jì)的語言與文化,網(wǎng)站應(yīng)設(shè)置多語言選擇 網(wǎng)站面向的用戶使用不同的語言，則在設(shè)計(jì)時(shí)要考慮包括不同語言的版本，將選擇語言版本的功能放在網(wǎng)站的主頁，并用不同版本的語言進(jìn)行標(biāo)注 。 在網(wǎng)站設(shè)計(jì)和建設(shè)中進(jìn)行跨文化研究 應(yīng)當(dāng)注意到不同地區(qū)的文化特點(diǎn)。 不同的語言表達(dá)可以產(chǎn)生不同的效果。 有些內(nèi)容在一個地區(qū)是允許的或適用的，但是在另外一個地區(qū)使用卻是不合適的。 應(yīng)當(dāng)避免顯示對用戶不適合

19、的內(nèi)容。,44,8.7 Web界面設(shè)計(jì)要素,Web界面設(shè)計(jì)要素包括： Web界面布局 Web界面的色彩 Web界面的字體 Web界面的動畫與多媒體 Web界面的導(dǎo)航,45,8.7.1 Web界面布局,布局設(shè)計(jì)應(yīng)做到整體布局合理、有序、整體化。 常用Web頁面布局的形式： “同”字形結(jié)構(gòu)布局 “國”字形結(jié)構(gòu)布局 左右對稱布局 自由式布局,46,8.7.1 Web界面布局,“同”字形結(jié)構(gòu)布局 頁面頂部為主菜單，下方左側(cè)為二級欄目條，右側(cè)為鏈接欄目條，屏幕中間顯示具體的內(nèi)容。 優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰、左右對稱、主次分明，因而得到廣泛的應(yīng)用。 缺點(diǎn)是太過于規(guī)矩呆板，需要善于運(yùn)用細(xì)節(jié)色彩的變化來調(diào)劑。,47

20、,8.7.1 Web界面布局,2“國”字形結(jié)構(gòu)布局 “國”字形結(jié)構(gòu)布局在“同”字形結(jié)構(gòu)布局的基礎(chǔ)上，在頁面下方增加一橫條菜單或廣告 其優(yōu)點(diǎn)是充分利用版面、信息量大、切換方便。 有的網(wǎng)站將頁面設(shè)計(jì)成鏡框的樣式，顯示出網(wǎng)站設(shè)計(jì)師的品味。,48,8.7.1 Web界面布局,3左右對稱布局 采取左右分割屏幕的方法形成對稱布局。 優(yōu)點(diǎn)是自由活潑，可顯示較多文字和圖像。 缺點(diǎn)是兩者有機(jī)結(jié)合較為困難。,49,8.7.1 Web界面布局,4自由式布局 自由式布局打破上述兩種布局的框架結(jié)構(gòu)，常用于文字信息量少的時(shí)尚類和設(shè)計(jì)類網(wǎng)站。 其優(yōu)點(diǎn)是布局隨意，外觀漂亮，吸引人。 缺點(diǎn)是顯示速度慢。,50,8.7.2 We

21、b界面的色彩,確定網(wǎng)站的標(biāo)準(zhǔn)色彩 不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪問者的情緒。 以紅、綠、藍(lán)三色稱為三基色 其它的色彩都可以用這三種色彩調(diào)和而成。 底色應(yīng)應(yīng)柔和、素雅 柔和的底色配上深色文字，讀起來自然，流暢。,51,8.7.2 Web界面的色彩,網(wǎng)頁色彩搭配的原則： 色彩的鮮明性 網(wǎng)頁的色彩要鮮艷，容易引人注目。 色彩的獨(dú)特性 要有與眾不同的色彩，使得大家對網(wǎng)頁的印象強(qiáng)烈。 色彩的合適性 色彩和網(wǎng)頁要表達(dá)的內(nèi)容氣氛相適合。 色彩的聯(lián)想性 不同色彩會產(chǎn)生不同的聯(lián)想，選擇色彩要和網(wǎng)頁的內(nèi)涵相關(guān)聯(lián)。,52,8.7.3 Web界面的字體,字體是每一個網(wǎng)站的必要組件，選擇字體和顏色，和其它

22、頁面元素一起產(chǎn)生一個視覺效果。,53,常用的英文字體,（1）Serif字體 （2）Sans-Serif字體 （3）TrueType字體,54,常用的英文字體,Serif字體 Serif是在字母主要筆畫的結(jié)束處加上的小裝飾筆畫。Times New Roman是一個Serif字體的例子。 Serif引導(dǎo)眼睛隨著打字線移動，提高了可讀性。Serif字體最適合于正文文本。,55,常用的英文字體,Sans-Serif字體 Sans-Serif字體沒有小裝飾筆畫，Arial是一個Sans-Serif的例子。 字符的外觀被減少到只含有必要的筆畫。 Sans-Serif文本必須逐個字母的閱讀。 建議在小尺寸文

23、本和非常大的文本中使用。 通常，Serif字體和一個Sans-Serif字體就可以在網(wǎng)頁上提供一個較好的文本組合。,56,常用的英文字體,TrueType字體 許多字體都是TrueType，即可以產(chǎn)生任意尺寸而不降低字母質(zhì)量。 TrueType是蘋果公司開發(fā)的一項(xiàng)數(shù)字技術(shù)，現(xiàn)在被Apple和Microsoft操作系統(tǒng)使用。 Times New Roman和Arial都是TrueType字體。,57,運(yùn)用不同英文字體的網(wǎng)頁,58,常用的中文字體,Web界面中常用的中文字體有宋體、仿宋體、楷體和黑體。除這四種基本字體外，還有多種可選用的字體如書宋體、報(bào)宋體、隸書體、美黑體、廣告體、行草體等。 漢字

24、大小定為九個等級，按初、一、二、三、四、五、六、七、八排列，在字號等級之間又增加一些字號，并取名為小幾號字，如小四號、小五號等。,59,常用的中文字體,正文中的中文字體 可以采用傳統(tǒng)媒體中的各種字體作為Web界面正文中的字體。 根據(jù)Web網(wǎng)頁中的不同要求，選擇相應(yīng)的字體和字號。 常見正文中文字體用法如表8-1所示。,60,常用的中文字體,標(biāo)題中的中文字體 網(wǎng)頁應(yīng)該重視標(biāo)題的處理，把標(biāo)題排版作為版面修飾的主要手段。 標(biāo)題的字體變化更為講究，用于網(wǎng)頁排版系統(tǒng)一般要配十幾到幾十種字體，才能滿足標(biāo)題用字的需要。 網(wǎng)頁標(biāo)題一般無分級要求，字形普遍要比圖書標(biāo)題大，字體的選擇多樣，字形的變化修飾更為豐富。,

25、61,常見正文中文字體用法,62,使用字體的原則,整個網(wǎng)站上的字體應(yīng)該保持使用的一致 網(wǎng)站中可能會使用多種字體，但是同一種字體應(yīng)該表示相同類型的數(shù)據(jù)或者信息。 文字的顏色應(yīng)該一致，讓用戶可以容易的確定不同文本和顏色所代表的內(nèi)容。 為了讓字體匹配網(wǎng)站的總體概念，必須要意識到每一個字體變化和可以使用的范圍。,63,使用字體的原則,考慮字體如何適應(yīng)網(wǎng)頁，以及字體與整個設(shè)計(jì)的關(guān)系。 選擇的字體和整個頁面及網(wǎng)站應(yīng)融為一體。 設(shè)計(jì)元素例如頁邊框，行間距，背景顏色和前景顏色等都可以影響最終的結(jié)果。 通過字體不同的安排，可以讓網(wǎng)站產(chǎn)生豐富變化的外觀和感覺。,64,8.7.4 Web界面的動畫與多媒體,動畫、音

26、頻和視頻這樣的多媒體可以補(bǔ)充平淡的文本或者二維圖形，也補(bǔ)充網(wǎng)站的視覺設(shè)計(jì)、音調(diào)和消息等。 Web設(shè)計(jì)者可以使用很多當(dāng)前Web設(shè)計(jì)中的多媒體處理工具和技術(shù)；但是帶寬以及瀏覽器的支持能力限制了多媒體技術(shù)的迅速采用。 為了充分享受新技術(shù)，通常需要大帶寬、瀏覽器插件或第三方應(yīng)用程序的支持。,65,WEB中的動畫,動畫是區(qū)別Web和其它媒體的一個重要展示形式，動畫賦予了用戶運(yùn)動和投入的感受。 動畫可以分為不同的級別，從簡單的動畫GIF圖像到三維以及虛擬環(huán)境。 最常用的基本動畫類型是GIF、Rollover和Macromedia Flash文件。 動畫GIF是靜止圖像的匯集，可以按照指定的序列號和速度重復(fù)

27、運(yùn)動。許多標(biāo)志廣告就是動畫GIF。,66,WEB中的動畫,JavaApplet是經(jīng)常被用來制作互聯(lián)網(wǎng)上動畫效果的程序設(shè)計(jì)語言。 Macromedia Flash文件在網(wǎng)站設(shè)計(jì)中被廣泛地接受。 Flash引入了一種新的動畫形式。它在帶寬有限的情況下提供了媒體豐富的內(nèi)容。 Flash允許設(shè)計(jì)者創(chuàng)建吸引人的動畫網(wǎng)站，為通常的靜態(tài)站點(diǎn)提供了一種新的選擇。,67,8.7.5 Web界面上的導(dǎo)航,對于Web站點(diǎn)來說，需要包含導(dǎo)航條，用戶利用導(dǎo)航的提示在信息的空間里移動。 真實(shí)世界的導(dǎo)航觀點(diǎn)在Web中常被采用。 應(yīng)該注意，Web不是真實(shí)的世界，Web導(dǎo)航應(yīng)該幫助用戶理解他們在哪里、可以去哪里、怎樣獲得想要的

28、東西。,68,Web界面上的導(dǎo)航,為使用戶得到真實(shí)的感覺，必須充分考慮可見性、標(biāo)記和導(dǎo)航元素的布局。 Web頁上僅有五個基本區(qū)域可放置導(dǎo)航元素： 頂部 底部 左側(cè) 右側(cè) 中央,69,8.8 Web界面設(shè)計(jì)技術(shù)與工具,要設(shè)計(jì)好的Web界面，需要有良好的設(shè)計(jì)工具，隨著Internet網(wǎng)絡(luò)的發(fā)展，國際組織和許多互聯(lián)網(wǎng)軟件開發(fā)商制訂了若干標(biāo)準(zhǔn)，開發(fā)了不同的Web界面設(shè)計(jì)工具。本節(jié)對一些常見的技術(shù)和工具進(jìn)行簡單介紹。,70,8.8.1 Web界面設(shè)計(jì)技術(shù)基礎(chǔ),超文本標(biāo)記語言HTML 客戶端腳本語言JavaScript JavaApplet 服務(wù)器端腳本語言,71,1. 超文本標(biāo)記語言HTML,HTML已

29、經(jīng)成為表示W(wǎng)eb文檔信息的標(biāo)準(zhǔn)方法，是構(gòu)成Web頁面的主要工具。 HTML是用來表示網(wǎng)上信息的符號標(biāo)記語言，是一個跨平臺語言。 HTML標(biāo)準(zhǔn)定義了構(gòu)成語言的每一個獨(dú)立元素，這些元素是說明如何在瀏覽器中顯示HTML文檔的指令或標(biāo)記符。 從結(jié)構(gòu)上講，HTML文件由各種標(biāo)記元素組成，用于組織文件的內(nèi)容和指導(dǎo)文件的輸出格式。,72,（1）基本標(biāo)記元素（部分）,73,（2）圖形標(biāo)記元素,目前能被Web瀏覽器直接解釋的常見圖像格式有：GIF格式(.GIF文件，支持256色)；X位圖格式(.XBM文件，黑白圖像)；JPEG格式(.JPG、.JPEG文件，支持RGB色)。,74,（3）表格標(biāo)記元素 （部分）,

30、75,（4）表單標(biāo)記元素(部分),76,【例8-1】Demo.html,【例8-1】用任一編輯器建立文本文件Demo.html。 網(wǎng)頁標(biāo)題顯示于瀏覽器窗口的標(biāo)題欄 H1設(shè)定一級標(biāo)題 黑體字 斜體字 紅色5號字 點(diǎn)擊這里將超鏈到山東大學(xué)主頁 點(diǎn)擊這里將超鏈到下面的錨點(diǎn) 有意見請告訴我 這里是一個文檔內(nèi)部錨點(diǎn)的起始處 ,77,Demo.html的運(yùn)行效果,78,【例8-2】用HTML實(shí)現(xiàn)表單實(shí)例, HTML表單實(shí)例 用戶名： 口令： 選學(xué)內(nèi)容： Word Excel Internet 課程類別： 必修 選修 你的計(jì)算機(jī)是哪一種類型： PC UNIX MAC OTHER 備注： 請?jiān)诖颂顚懷a(bǔ)充內(nèi)容

31、,79,用HTML實(shí)現(xiàn)表單實(shí)例效果,80,2客戶端腳本語言JavaScript,HTML無法獨(dú)自完成交互和客戶端動態(tài)網(wǎng)頁的任務(wù),JavaScript，它彌補(bǔ)了HTML語言的缺陷。利用JavaScript，可以使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是實(shí)現(xiàn)了一種實(shí)時(shí)的、動態(tài)的、可交互式的表達(dá)能力。 JavaScript是一種內(nèi)嵌于HTML中的腳本語言，它是一種基于對象和事件驅(qū)動并具有安全性能的腳本語言。使用它的目的是與HTML、JavaApplet一起實(shí)現(xiàn)在一個Web頁面中鏈接多個對象，與Web客戶交互作用，可用于開發(fā)客戶端的應(yīng)用程序等。,81,JavaScript 的 特點(diǎn),（1）一

32、種腳本編寫語言 （2）基于對象的語言 （3）簡單性 （4）安全性 （5）動態(tài)性 （6）跨平臺性,82,JavaScript與HTML結(jié)合實(shí)例, / JavaScript 在此出現(xiàn) alert(這是第一個JavaScript例子!); alert(歡迎你進(jìn)入JavaScript世界!); alert(今后我們將共同學(xué)習(xí)JavaScript知識！); / JavaScript 在此結(jié)束 /JavaScript代碼由 .說明 /alert()是JavaScript的窗口對象方法，其功能是彈出一個具有OK對話框并顯示括號中的字符串,83,JavaScript與HTML結(jié)合實(shí)例運(yùn)行結(jié)果,84,3Java

33、Applet,JavaAapplet是訪問Internet服務(wù)器，在Internet上傳播的，自動安裝的，可作為部分Web文檔運(yùn)行的小應(yīng)用程序。 當(dāng)JavaAapplet到達(dá)客戶端，它被限制訪問資源，以使它能夠在不受病毒威脅和破壞數(shù)據(jù)完整性的情況下生成一個二進(jìn)制的多媒體用戶界面以及完成復(fù)雜的計(jì)算。它還提供了裝載和顯示圖像的方法，以及裝載和播放語音片斷的方法。,85,JavaAapplet是一種基于窗口的程序,JavaAapplet是由事件驅(qū)動的。一個JavaAapplet類似于系列提供中斷服務(wù)的子程序的集合。 在事件發(fā)生之前，JavaAapplet一直處于等待狀態(tài)中。 一旦事件發(fā)生，JavaA

34、applet就會采取相應(yīng)措施并迅速將控制權(quán)交給AWT。針對特定的事件作出相應(yīng)的動作并把控制交給AWT的運(yùn)行環(huán)境。 用戶可以與JavaAapplet進(jìn)行交互，而不是通過其它方式。這些交互被送至JavaAapplet，JavaAapplet必須作出響應(yīng)的事件。,86,JavaApplet在網(wǎng)頁中實(shí)現(xiàn)放大鏡的例子, AnLens.jar是JavaApplet的源文件。其效果如下圖。,87,88,4服務(wù)器端腳本語言,目前流行的三大服務(wù)器端腳本語言是ASP、PHP、JSP。 ASP（ActiveServerPages），是一個Web服務(wù)器端的開發(fā)環(huán)境，利用它可以產(chǎn)生和運(yùn)行動態(tài)的、交互的、高性能的Web服

35、務(wù)應(yīng)用程序。 PHP（HyperText Preprocess）是一種跨平臺的服務(wù)器端的嵌入式腳本語言。它大量地借用C、Java和Perl語言的語法，并耦合PHP自己的特性，使Web開發(fā)者能夠快速地寫出動態(tài)生成頁面。 JSP （JavaServerPage）是Sun公司推出的新一代站點(diǎn)開發(fā)語言，它完全解決了目前ASP，PHP的一個通病腳本級執(zhí)行。JSP可以在Servlet和JavaBeans的支持下，編寫出功能強(qiáng)大的Web站點(diǎn)程序。,89,三大服務(wù)器端腳本語言,三者都提供在HTML代碼中混合某種程序代碼、由語言引擎解釋執(zhí)行程序代碼的能力。在ASP、PHP、JSP環(huán)境下，HTML代碼主要負(fù)責(zé)描述

36、信息的顯示樣式，而程序代碼則用來描述處理邏輯。普通的HTML頁面只依賴于Web服務(wù)器，而ASP、PHP、JSP頁面需要附加的語言引擎分析和執(zhí)行程序代碼。程序代碼的執(zhí)行結(jié)果被重新嵌入到HTML代碼中，然后一起發(fā)送給瀏覽器。,90,8.8.2常用Web界面設(shè)計(jì)工具,頁面編輯器 MicroSoft公司 的Frontpage Macromedia公司 的Dreamweaver Dreamweaver對于動態(tài)網(wǎng)頁的支持特別好，可以輕而易舉地做出很多眩目的互動頁面特效。 Dreamweaver與Flash、Firework并稱為Macromedia的網(wǎng)頁制作三劍客。 輔助工具 AceHTML Pro 6.

37、0全功能的 HTML & JavaScript 編輯器。 Antenna Web Design Studio強(qiáng)大的可視化網(wǎng)頁設(shè)計(jì)軟件。 Easy HTML簡單的所見即所得的HTML 編輯器，有固定、類似瀏覽器的界面。 Easy Web Editor是一個 Web 發(fā)布工具，允許不了解HTML而在所見即所得環(huán)境中編輯Web網(wǎng)頁。,91,8.8.3 Web界面設(shè)計(jì)新技術(shù),Web 3D圖形技術(shù) 語音Web技術(shù),92,1.Web 3D圖形技術(shù),（1）Web3D虛擬現(xiàn)實(shí)建模語言VRML VRML是3D圖形和多媒體技術(shù)通用交換的文件格式，它描述交互式的3D對象和場景。它不僅應(yīng)用在互聯(lián)網(wǎng)上，也可以應(yīng)用在工程

38、和科學(xué)可視化、多媒體、娛樂游戲、互聯(lián)網(wǎng)3D圖形、教育、虛擬社區(qū)等領(lǐng)域。由于網(wǎng)上傳輸?shù)氖悄Ｐ臀募?，故其傳輸量大大小于視頻圖像。,93,虛擬法國巴黎凱旋門及周圍的3D場景效果,94,1.Web 3D圖形技術(shù),（2）Web3D圖形實(shí)時(shí)渲染引擎 實(shí)時(shí)渲染引擎的作用是解釋并翻譯實(shí)施場景模型文件的語法，實(shí)時(shí)渲染從服務(wù)器端傳來的場景模型文件，在網(wǎng)頁訪問者的客戶端逐幀、實(shí)時(shí)地顯示3D圖形。 實(shí)時(shí)渲染引擎是實(shí)施互聯(lián)網(wǎng)3D圖形的關(guān)鍵技術(shù)，它的文件大小、圖形渲染質(zhì)量、渲染速度、以及它能提供的交互性都直接反映其解決方案的優(yōu)劣。,95,1.Web 3D圖形技術(shù),（3）Web3D圖形新標(biāo)準(zhǔn) 可擴(kuò)展3D(Extensibl

39、e 3D , X3D) 是一個軟件標(biāo)準(zhǔn)，定義了如何在多媒體中整合基于網(wǎng)絡(luò)傳播的交互三維內(nèi)容。X3D 是 VRML的繼承和改進(jìn)，提供了以下的新特性：更先進(jìn)的應(yīng)用程序界面，新添的數(shù)據(jù)編碼格式，嚴(yán)格的一致性，組件化結(jié)構(gòu)。,96,1.Web 3D圖形技術(shù),（4）Web3D圖形建模與制作工具 3DS max可用于建立場景模型，安裝相應(yīng)的輸出插件，再直接建立場景模型文件。現(xiàn)在最有名的Web3D圖形軟件公司，如cult3D 和Viwepoint都可以在3DS max中直接輸出它們的專用文件格式的場景模型文件。,97,1.Web 3D圖形技術(shù),（5）Java 3D Java 3D 的本質(zhì)是一個交互式三維圖形應(yīng)

40、用編程接口（API），是Java 2 SDK的標(biāo)準(zhǔn)擴(kuò)展，它可以和普通的Java 2D 、Swing、AWT等很好地結(jié)合，其目標(biāo)是： 1）用戶能夠在瀏覽器中觀看或操作三維動態(tài)圖形。 2）一次編程，到處運(yùn)行。 3）適應(yīng)不同的軟件平臺。 4）適應(yīng)各種顯示環(huán)境和輸入設(shè)備。,98,1.Web 3D圖形技術(shù),（6）Web3D圖形技術(shù)應(yīng)用 互聯(lián)網(wǎng)上的交互式3D圖形技術(shù)Wed3D正在取得新的進(jìn)展，最具魅力的Wed3D圖形將在互聯(lián)網(wǎng)上有廣泛應(yīng)用，如電子商務(wù)、聯(lián)機(jī)娛樂休閑與游戲、科技與工程的可視化、教育、醫(yī)學(xué)、地理信息、虛擬社區(qū)。,99,兩個Web3D的瀏覽的例子,100,2Web中的語音交互技術(shù),語音瀏覽技術(shù)是正在互連網(wǎng)上的一種新的應(yīng)用和技術(shù)。 VoiceXML 語音可擴(kuò)展標(biāo)記語言 世界上第一個真正的語音通信標(biāo)準(zhǔn)，它定義了應(yīng)用開發(fā)商向用戶提供新型信息訪問服務(wù)的方式。 VoiceXML的應(yīng)用與HTML的應(yīng)用相同，唯一的差別在于前者使用語音瀏覽器,101,VoiceXML 語音可擴(kuò)展標(biāo)記語言,通過VoiceXML，互聯(lián)網(wǎng)語音應(yīng)用運(yùn)營商能向電話用戶發(fā)布他們感興趣的信息 VoiceXML 突破性地實(shí)現(xiàn)了互聯(lián)網(wǎng)