山大人機(jī)交互技術(shù)課件07Web界面設(shè)計(jì)

1、第7章 Web界面設(shè)計(jì)山東大學(xué)計(jì)算機(jī)學(xué)院本章內(nèi)容簡介 Web界面及相關(guān)概念 Web界面設(shè)計(jì)原則Web界面要素設(shè)計(jì)Web界面基本設(shè)計(jì)技術(shù)Web3D界面設(shè)計(jì)技術(shù)山東大學(xué)計(jì)算機(jī)學(xué)院2課程目標(biāo)熟悉Web設(shè)計(jì)的原則及Web界面設(shè)計(jì)包含的元素。掌握Web界面設(shè)計(jì)語言和技術(shù)，并靈活應(yīng)用。Web界面及相關(guān)概念萬維網(wǎng)（World Wide Web，WWW）高能核理學(xué)家Tim Berners-Lee雛形，建立一個(gè)能夠整合各種資源、文件及多媒體的系統(tǒng)，讓使用者方便地取得不同媒體的資料。 建立在客戶/服務(wù)器模型之上超文本標(biāo)記語言（Hypertext Markup Language，HTML）超文本傳輸協(xié)議（Hyper

2、text Transport Protocols， HTTP）通過Internet把遍布世界各地的服務(wù)器連接起來，它能夠提供各種Internet服務(wù)，具有一致用戶界面的信息瀏覽功能。山東大學(xué)計(jì)算機(jī)學(xué)院4Web的發(fā)展趨勢圖形Web頁面的爆炸性發(fā)展。網(wǎng)上瀏覽中包括了大量使用的動(dòng)態(tài)圖形，使圖形Web遍布網(wǎng)絡(luò)的各個(gè)角落。 新一代Web信息描述標(biāo)準(zhǔn)XML能更詳盡地描述文檔的結(jié)構(gòu)信息，具有比HTML有更強(qiáng)大的功能，為Web的發(fā)展提供了強(qiáng)有力的支持。網(wǎng)格的概念云的概念山東大學(xué)計(jì)算機(jī)學(xué)院5超文本與超媒體 超文本 （Hypertext）是一種使用于文本、圖形或其他信息的組織形式，是一種非線性的信息組織形式。它使

3、得單一的信息元素之間可以相互交叉引用，這種引用并不是通過復(fù)制來實(shí)現(xiàn)的，而是通過指向?qū)Ψ降牡刂纷址畞碇敢脩臬@取相應(yīng)的信息。 超媒體 （Hypermedia）利用超文本形式組織起來的文件不僅僅是文本，也可以是圖、文、聲、像以及視頻等多媒體形式的文件。這些多媒體信息就構(gòu)成了所謂的超媒體 。山東大學(xué)計(jì)算機(jī)學(xué)院6Web界面設(shè)計(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)。山東大學(xué)計(jì)算機(jī)學(xué)院7Web界面設(shè)計(jì)基本原則 1以用戶為中心2

4、一致性3簡潔與明確4體現(xiàn)特色5兼顧不同的瀏覽器6明確的導(dǎo)航設(shè)計(jì)山東大學(xué)計(jì)算機(jī)學(xué)院8Web界面設(shè)計(jì)基本原則1以用戶為中心一方面，不同類別的Web網(wǎng)站，面向的訪問群體不同；同一類型的Web網(wǎng)站，用戶群體也有年齡、行業(yè)等差別。因此，Web界面的設(shè)計(jì)只有了解不同用戶的需求，才能在設(shè)計(jì)中體現(xiàn)用戶的核心地位，設(shè)計(jì)出更合理、能滿足用戶需求的界面，以吸引用戶。山東大學(xué)計(jì)算機(jī)學(xué)院9兼顧用戶習(xí)慣Mac OSX：新郵件 圖標(biāo)在正中間Iphone：新郵件 圖標(biāo)在右下角Ipad: 新郵件 圖標(biāo)在右上角用戶特點(diǎn)M myspace在中國區(qū)戰(zhàn)略是覆蓋18-35歲男女。通過的搜索頁面，大概能分析出用戶年齡 在18-26歲。所在

5、地區(qū)北京、喜歡上傳照片的居多。通過認(rèn)證的不多。Web界面設(shè)計(jì)基本原則2. 一致性內(nèi)容一致：Web網(wǎng)站顯示的信息、數(shù)據(jù)等形式一致：Web界面設(shè)計(jì)的版式、構(gòu)圖、布局、色彩以及它們所呈現(xiàn)出的風(fēng)格特點(diǎn)Web界面設(shè)計(jì)基本原則 Web界面自身的風(fēng)格也要一致性各頁面使用相同的頁邊距；文本、圖形間保持相同的間距；各頁面上都放上公司或網(wǎng)站的統(tǒng)一標(biāo)志；各頁面應(yīng)當(dāng)使用相同的導(dǎo)航圖標(biāo)；頁面中的每個(gè)元素與整個(gè)頁面以及站點(diǎn)的色彩和風(fēng)格上保持一致性；文字的顏色要同圖像的顏色保持一致并注意色彩搭配的和諧。山東大學(xué)計(jì)算機(jī)學(xué)院13Web界面設(shè)計(jì)基本原則3. 簡潔與明確使用一個(gè)醒目的標(biāo)題，這個(gè)標(biāo)題常常采用圖形來表示，但圖形同樣要求

6、簡潔。限制所用的字體和顏色的數(shù)目。界面上所有的元素都應(yīng)當(dāng)有明確的含義和用途，不要試圖用無關(guān)的圖片把界面裝點(diǎn)起來。盡量減少瀏覽層次山東大學(xué)計(jì)算機(jī)學(xué)院14圖7-5 Google首頁（，2009年9月）Web界面設(shè)計(jì)基本原則4體現(xiàn)特色清楚地了解Web網(wǎng)站背景、體現(xiàn)主題和服務(wù)對象的基本情況，選擇合適的表現(xiàn)手法，展示關(guān)鍵信息和特色內(nèi)容，并形成獨(dú)特、鮮明的風(fēng)格。圖7-6 清華大學(xué)首頁（/，2009年9月）Web界面設(shè)計(jì)基本原則5兼顧不同的瀏覽器不同瀏覽器類別和版本在功能支持上有所區(qū)別Web界面設(shè)計(jì)基本原則6明確的導(dǎo)航設(shè)計(jì)網(wǎng)站首頁導(dǎo)航應(yīng)盡量展現(xiàn)整個(gè)網(wǎng)站的架構(gòu)和內(nèi)容；另外導(dǎo)航要能讓瀏覽者確切地知道自己在整個(gè)網(wǎng)

7、站中的位置，可以確定下一步的瀏覽去向。實(shí)例災(zāi)難性目錄找苯甲酸芐酯視覺搜索眼動(dòng)模式Hornof和Halverson提出的兩種視覺搜索策略。圓圈表示用戶的注視點(diǎn)，圓圈的連線表示視線經(jīng)過的路徑。搜索整列由6個(gè)group組成，每個(gè)group包含五個(gè)搜索項(xiàng)。左圖為無標(biāo)簽（相當(dāng)于無一級類目）時(shí)的混合搜索策略（12個(gè)注視點(diǎn)），右圖為有標(biāo)簽時(shí)的層次搜索策略（7個(gè)注視點(diǎn)）。目錄設(shè)計(jì)的目錄設(shè)計(jì)google directory 的目錄設(shè)計(jì)Web界面要素設(shè)計(jì)1. Web界面規(guī)劃2. 文化與語言3. 內(nèi)容、風(fēng)格與布局、色彩設(shè)計(jì)4. 文本設(shè)計(jì)5. 多媒體元素設(shè)計(jì)1. Web界面規(guī)劃Web界面的布局、元素的設(shè)計(jì)都要以”網(wǎng)站

8、的目標(biāo)和用途”這個(gè)目標(biāo)為中心。將網(wǎng)站作為一種文化、一種藝術(shù)作品看待，確定Web界面的設(shè)計(jì)風(fēng)格，力求在設(shè)計(jì)Web界面時(shí)追求藝術(shù)效果與美感。2. 文化與語言全球服務(wù)型的網(wǎng)站還要考慮如何適應(yīng)不同國家的不同類型的文化與語言環(huán)境。在設(shè)計(jì)Web界面時(shí)，要將選擇語言版本的功能放在網(wǎng)站的主頁，并以不同版本的語言進(jìn)行標(biāo)注。圖7-9 google網(wǎng)站（，2009年農(nóng)歷七月初七）圖7-10 Nvidia網(wǎng)站（/，2009年9月）3. 內(nèi)容、風(fēng)格與布局、色彩設(shè)計(jì)Web界面的內(nèi)容不僅要遵循簡潔明確的原則，也要符合確定的設(shè)計(jì)目標(biāo)，面向不同的對象要使用不同的口吻和用詞。網(wǎng)站的標(biāo)志、色彩、字體、布局、交互方式、內(nèi)容價(jià)值、存在

9、意義等。Web界面布局就是指如何合理地在界面上分布內(nèi)容。1）“同”字形結(jié)構(gòu)布局2）“國”字形結(jié)構(gòu)布局3）左右對稱布局4）自由式布局4色彩中國紅山東大學(xué)計(jì)算機(jī)學(xué)院24實(shí)例UI花園 敗筆/forums/register.php?do=register4. 文本設(shè)計(jì)文本不要太多，以免轉(zhuǎn)移瀏覽者注意力。要選擇合適的顏色，以便使文本和其它界面元素一起產(chǎn)生一個(gè)和諧的視覺效果；文本的顏色應(yīng)該一致，讓用戶可以容易地確定不同文本和顏色所代表的內(nèi)容。選擇的字體應(yīng)和整個(gè)界面應(yīng)融為一體。網(wǎng)站中可能會(huì)使用多種字體，但是同一種字體應(yīng)該表示相同類型的數(shù)據(jù)或者信息。合理設(shè)置頁邊框、行間距等。應(yīng)該重視標(biāo)題的處理，把標(biāo)題排版作為

10、界面修飾的主要手段之一。標(biāo)題一般無分級要求，其字形一般較大，字體的選擇一般具有多樣性，字形的變化修飾則更為豐富。實(shí)例文字的可用性辨識(shí)度與可讀性實(shí)例過于強(qiáng)調(diào)等于沒強(qiáng)調(diào)實(shí)例文字大小/blog/?p=324實(shí)例下劃線主要區(qū)分是否有鏈接實(shí)例視覺顯著性5. 多媒體元素設(shè)計(jì)動(dòng)畫、音頻和視頻這樣的多媒體可以補(bǔ)充平淡的文本或者二維圖形，也補(bǔ)充網(wǎng)站的視覺設(shè)計(jì)、音調(diào)和消息等。 Web設(shè)計(jì)者可以使用很多當(dāng)前Web設(shè)計(jì)中的多媒體處理工具和技術(shù)；但是帶寬以及瀏覽器的支持能力限制了多媒體技術(shù)的迅速采用。為了充分享受新技術(shù)，通常需要大帶寬、瀏覽器插件或第三方應(yīng)用程序的支持。 山東大學(xué)計(jì)算機(jī)學(xué)院32WEB中的動(dòng)畫動(dòng)畫是區(qū)別W

11、eb和其它媒體的一個(gè)重要展示形式，動(dòng)畫賦予了用戶運(yùn)動(dòng)和投入的感受。動(dòng)畫可以分為不同的級別，從簡單的動(dòng)畫GIF圖像到三維以及虛擬環(huán)境。最常用的基本動(dòng)畫類型是GIF、Rollover和Macromedia Flash文件。動(dòng)畫GIF是靜止圖像的匯集，可以按照指定的序列號和速度重復(fù)運(yùn)動(dòng)。許多標(biāo)志廣告就是動(dòng)畫GIF。山東大學(xué)計(jì)算機(jī)學(xué)院33WEB中的動(dòng)畫JavaApplet是經(jīng)常被用來制作互聯(lián)網(wǎng)上動(dòng)畫效果的程序設(shè)計(jì)語言。Macromedia Flash文件在網(wǎng)站設(shè)計(jì)中被廣泛地接受。Flash引入了一種新的動(dòng)畫形式。它在帶寬有限的情況下提供了媒體豐富的內(nèi)容。Flash允許設(shè)計(jì)者創(chuàng)建吸引人的動(dòng)畫網(wǎng)站，為通常

12、的靜態(tài)站點(diǎn)提供了一種新的選擇。山東大學(xué)計(jì)算機(jī)學(xué)院34WEB中的動(dòng)畫全景圖作為虛擬實(shí)景的一種重要表現(xiàn)形式，會(huì)讓使用者有進(jìn)入照片中的場景的感覺：全方位；真實(shí)的場景；三維立體的效果。Web界面設(shè)計(jì)技術(shù)基礎(chǔ) 1. 超文本標(biāo)記語言HTML 2客戶端腳本語言JavaScript 3JavaApplet 4服務(wù)器端腳本語言 山東大學(xué)計(jì)算機(jī)學(xué)院361. 超文本標(biāo)記語言HTMLHTML已經(jīng)成為表示W(wǎng)eb文檔信息的標(biāo)準(zhǔn)方法，是構(gòu)成Web頁面的主要工具。HTML是用來表示網(wǎng)上信息的符號標(biāo)記語言，是一個(gè)跨平臺(tái)語言。HTML標(biāo)準(zhǔn)定義了構(gòu)成語言的每一個(gè)獨(dú)立元素，這些元素是說明如何在瀏覽器中顯示HTML文檔的指令或標(biāo)記符。

13、從結(jié)構(gòu)上講，HTML文件由各種標(biāo)記元素組成，用于組織文件的內(nèi)容和指導(dǎo)文件的輸出格式。山東大學(xué)計(jì)算機(jī)學(xué)院37（1）基本標(biāo)記元素（部分） 山東大學(xué)計(jì)算機(jī)學(xué)院38標(biāo)記元素功能含義創(chuàng)建一個(gè)HTML文檔，通知瀏覽器該文件含有HTML標(biāo)記碼設(shè)置文檔標(biāo)題以及其它不在Web網(wǎng)頁上顯示的信息網(wǎng)頁標(biāo)題，將顯示在瀏覽器的標(biāo)題欄中設(shè)置文檔的可見部分，它包含了文件的內(nèi)容設(shè)置背景顏色，使用顏色名或十六進(jìn)制值設(shè)置背景圖片設(shè)置文本文字顏色，使用顏色名或十六進(jìn)制值設(shè)置超級鏈接文字的顏色，使用顏色名或十六進(jìn)制值設(shè)置已訪問過的超級鏈接文字的顏色，使用顏色名或十六進(jìn)制值設(shè)置鼠標(biāo)懸停于超級鏈接文字的顏色，使用顏色名或十六進(jìn)制值創(chuàng)建最大

14、的標(biāo)題，在HTML中有六種標(biāo)題 （2）圖形標(biāo)記元素 目前能被Web瀏覽器直接解釋的常見圖像格式有：GIF格式(.GIF文件，支持256色)；X位圖格式(.XBM文件，黑白圖像)；JPEG格式(.JPG、.JPEG文件，支持RGB色)。山東大學(xué)計(jì)算機(jī)學(xué)院39標(biāo)記元素功能含義添加一個(gè)圖像。SRC給定圖片文件的定位，ALIGN屬性定義圖與文本行的對齊方式；BORDER屬性設(shè)置圍繞一個(gè)圖像的邊框的大??；WIDTH和HEIGHT分別重新定義圖像的寬度和高度 加入一條水平線，SIZE設(shè)置水平線的大小，WIDTH設(shè)置水平線的寬度，NOSHADE表示創(chuàng)建無陰影的水平線（3）表格標(biāo)記元素 （部分）山東大學(xué)計(jì)算機(jī)

15、學(xué)院40標(biāo)記元素功能含義定義表格，BORDER屬性表示表格邊框粗細(xì)程度，CELLSPACING屬性用于設(shè)置表格格子之間空間的大小，CELLPADDING用來設(shè)置表格格子邊框與其內(nèi)部內(nèi)容之間空間的大小, WIDTH屬性是用來定義表格寬度 定義表格標(biāo)題表示一個(gè)新的表格行的開始，屬性ALIGN表示橫向?qū)R方式在表格的當(dāng)前行里產(chǎn)生一個(gè)新的表項(xiàng)單元，表示一個(gè)表項(xiàng)標(biāo)題(TableHeader)單元， COLSPAN及ROWSPAN表示進(jìn)行橫向及縱向地?cái)U(kuò)展表項(xiàng)單元在表格的當(dāng)前行里產(chǎn)生一個(gè)新的表項(xiàng)單元，表示一個(gè)表項(xiàng)數(shù)據(jù)(TableData)單元，其它屬性的含義同上（4）表單標(biāo)記元素(部分) 山東大學(xué)計(jì)算機(jī)學(xué)院

16、41標(biāo)記元素功能含義 創(chuàng)建所有表單 創(chuàng)建一個(gè)單行文本輸入域，SIZE設(shè)置以字符計(jì)數(shù)的寬度文本 創(chuàng)建一個(gè)口令輸入域，輸入的字符全部顯示為“*” 創(chuàng)建一個(gè)文本框區(qū)域，列的數(shù)目設(shè)置寬度，行的數(shù)目設(shè)置高度創(chuàng)建一個(gè)單選按鈕，文字在標(biāo)簽后面創(chuàng)建一個(gè)復(fù)選框，文字在標(biāo)簽后面【例8-1】Demo.html山東大學(xué)計(jì)算機(jī)學(xué)院42【例8-1】用任一編輯器建立文本文件Demo.html。網(wǎng)頁標(biāo)題顯示于瀏覽器窗口的標(biāo)題欄 H1設(shè)定一級標(biāo)題黑體字斜體字 紅色5號字點(diǎn)擊這里將超鏈到山東大學(xué)主頁點(diǎn)擊這里將超鏈到下面的錨點(diǎn)有意見請告訴我 這里是一個(gè)文檔內(nèi)部錨點(diǎn)的起始處Demo.html的運(yùn)行效果山東大學(xué)計(jì)算機(jī)學(xué)院43【例8-2

17、】用HTML實(shí)現(xiàn)表單實(shí)例 山東大學(xué)計(jì)算機(jī)學(xué)院44HTML表單實(shí)例 用戶名： 口令： 選學(xué)內(nèi)容： Word Excel Internet 課程類別：必修選修 你的計(jì)算機(jī)是哪一種類型： PC UNIX MAC OTHER 備注：請?jiān)诖颂顚懷a(bǔ)充內(nèi)容 用HTML實(shí)現(xiàn)表單實(shí)例效果山東大學(xué)計(jì)算機(jī)學(xué)院452客戶端腳本語言JavaScript HTML無法獨(dú)自完成交互和客戶端動(dòng)態(tài)網(wǎng)頁的任務(wù),JavaScript，它彌補(bǔ)了HTML語言的缺陷。利用JavaScript，可以使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是實(shí)現(xiàn)了一種實(shí)時(shí)的、動(dòng)態(tài)的、可交互式的表達(dá)能力。JavaScript是一種內(nèi)嵌于HTML中的

18、腳本語言，它是一種基于對象和事件驅(qū)動(dòng)并具有安全性能的腳本語言。使用它的目的是與HTML、JavaApplet一起實(shí)現(xiàn)在一個(gè)Web頁面中鏈接多個(gè)對象，與Web客戶交互作用，可用于開發(fā)客戶端的應(yīng)用程序等。山東大學(xué)計(jì)算機(jī)學(xué)院46JavaScript 的 特點(diǎn)（1）一種腳本編寫語言 （2）基于對象的語言 （3）簡單性 （4）安全性 （5）動(dòng)態(tài)性 （6）跨平臺(tái)性 山東大學(xué)計(jì)算機(jī)學(xué)院47JavaScript與HTML結(jié)合實(shí)例山東大學(xué)計(jì)算機(jī)學(xué)院48/ JavaScript 在此出現(xiàn)alert(這是第一個(gè)JavaScript例子!);alert(歡迎你進(jìn)入JavaScript世界!); alert(今后我們將

19、共同學(xué)習(xí)JavaScript知識(shí)！); / JavaScript 在此結(jié)束 /JavaScript代碼由 .說明 /alert()是JavaScript的窗口對象方法，其功能是彈出一個(gè)具有OK對話框并顯示括號中的字符串 JavaScript與HTML結(jié)合實(shí)例運(yùn)行結(jié)果山東大學(xué)計(jì)算機(jī)學(xué)院493JavaApplet JavaAapplet是訪問Internet服務(wù)器，在Internet上傳播的，自動(dòng)安裝的，可作為部分Web文檔運(yùn)行的小應(yīng)用程序。當(dāng)JavaAapplet到達(dá)客戶端，它被限制訪問資源，以使它能夠在不受病毒威脅和破壞數(shù)據(jù)完整性的情況下生成一個(gè)二進(jìn)制的多媒體用戶界面以及完成復(fù)雜的計(jì)算。它還提

20、供了裝載和顯示圖像的方法，以及裝載和播放語音片斷的方法。 山東大學(xué)計(jì)算機(jī)學(xué)院50JavaApplet是一種基于窗口的程序JavaAapplet是由事件驅(qū)動(dòng)的。一個(gè)JavaAapplet類似于系列提供中斷服務(wù)的子程序的集合。在事件發(fā)生之前，JavaAapplet一直處于等待狀態(tài)中。一旦事件發(fā)生，JavaAapplet就會(huì)采取相應(yīng)措施并迅速將控制權(quán)交給AWT。針對特定的事件作出相應(yīng)的動(dòng)作并把控制交給AWT的運(yùn)行環(huán)境。用戶可以與JavaAapplet進(jìn)行交互，而不是通過其它方式。這些交互被送至JavaAapplet，JavaAapplet必須作出響應(yīng)的事件。 山東大學(xué)計(jì)算機(jī)學(xué)院51JavaApple

21、t在網(wǎng)頁中實(shí)現(xiàn)放大鏡例子 山東大學(xué)計(jì)算機(jī)學(xué)院52 AnLens.jar是JavaApplet的源文件。其效果如圖 山東大學(xué)計(jì)算機(jī)學(xué)院534服務(wù)器端腳本語言 目前流行的三大服務(wù)器端腳本語言是ASP、PHP、JSP。 ASP（ActiveServerPages），是一個(gè)Web服務(wù)器端的開發(fā)環(huán)境，利用它可以產(chǎn)生和運(yùn)行動(dòng)態(tài)的、交互的、高性能的Web服務(wù)應(yīng)用程序。 PHP（HyperText Preprocess）是一種跨平臺(tái)的服務(wù)器端的嵌入式腳本語言。它大量地借用C、Java和Perl語言的語法，并耦合PHP自己的特性，使Web開發(fā)者能夠快速地寫出動(dòng)態(tài)生成頁面。 JSP （JavaServerPage

22、）是Sun公司推出的新一代站點(diǎn)開發(fā)語言，它完全解決了目前ASP，PHP的一個(gè)通病腳本級執(zhí)行。JSP可以在Servlet和JavaBeans的支持下，編寫出功能強(qiáng)大的Web站點(diǎn)程序。 山東大學(xué)計(jì)算機(jī)學(xué)院54三大服務(wù)器端腳本語言三者都提供在HTML代碼中混合某種程序代碼、由語言引擎解釋執(zhí)行程序代碼的能力。在ASP、PHP、JSP環(huán)境下，HTML代碼主要負(fù)責(zé)描述信息的顯示樣式，而程序代碼則用來描述處理邏輯。普通的HTML頁面只依賴于Web服務(wù)器，而ASP、PHP、JSP頁面需要附加的語言引擎分析和執(zhí)行程序代碼。程序代碼的執(zhí)行結(jié)果被重新嵌入到HTML代碼中，然后一起發(fā)送給瀏覽器。 山東大學(xué)計(jì)算機(jī)學(xué)院5

23、5常用Web界面設(shè)計(jì)工具 1頁面編輯器 MicroSoft公司 的FrontpageMacromedia公司 的DreamweaverDreamweaver與Flash、Firework2輔助工具 AceHTML Pro 6.0全功能的 HTML & JavaScript 編輯器。Antenna Web Design Studio強(qiáng)大的可視化網(wǎng)頁設(shè)計(jì)軟件Easy HTML簡單的所見即所得的HTML 編輯器，有固定、類似瀏覽器的界面。Easy Web Editor是一個(gè) Web 發(fā)布工具，允許不了解HTML而在所見即所得環(huán)境中編輯Web網(wǎng)頁。 山東大學(xué)計(jì)算機(jī)學(xué)院568.8.3 Web界面設(shè)計(jì)新技

24、術(shù) Web 3D圖形技術(shù) 語音Web技術(shù) 山東大學(xué)計(jì)算機(jī)學(xué)院571.Web 3D圖形技術(shù)（1）Web3D虛擬現(xiàn)實(shí)建模語言VRML VRML是3D圖形和多媒體技術(shù)通用交換的文件格式，它描述交互式的3D對象和場景。它不僅應(yīng)用在互聯(lián)網(wǎng)上，也可以應(yīng)用在工程和科學(xué)可視化、多媒體、娛樂游戲、互聯(lián)網(wǎng)3D圖形、教育、虛擬社區(qū)等領(lǐng)域。由于網(wǎng)上傳輸?shù)氖悄Ｐ臀募?，故其傳輸量大大小于視頻圖像。 山東大學(xué)計(jì)算機(jī)學(xué)院58虛擬法國巴黎凱旋門的3D場景效果山東大學(xué)計(jì)算機(jī)學(xué)院591.Web 3D圖形技術(shù)（2）Web3D圖形實(shí)時(shí)渲染引擎實(shí)時(shí)渲染引擎的作用是解釋并翻譯實(shí)施場景模型文件的語法，實(shí)時(shí)渲染從服務(wù)器端傳來的場景模型文件，在

25、網(wǎng)頁訪問者的客戶端逐幀、實(shí)時(shí)地顯示3D圖形。 實(shí)時(shí)渲染引擎是實(shí)施互聯(lián)網(wǎng)3D圖形的關(guān)鍵技術(shù)，它的文件大小、圖形渲染質(zhì)量、渲染速度、以及它能提供的交互性都直接反映其解決方案的優(yōu)劣。 山東大學(xué)計(jì)算機(jī)學(xué)院601.Web 3D圖形技術(shù)（3）Web3D圖形新標(biāo)準(zhǔn) 可擴(kuò)展3D(Extensible 3D , X3D) 是一個(gè)軟件標(biāo)準(zhǔn)，定義了如何在多媒體中整合基于網(wǎng)絡(luò)傳播的交互三維內(nèi)容。X3D 是 VRML的繼承和改進(jìn)，提供了以下的新特性：更先進(jìn)的應(yīng)用程序界面，新添的數(shù)據(jù)編碼格式，嚴(yán)格的一致性，組件化結(jié)構(gòu)。 山東大學(xué)計(jì)算機(jī)學(xué)院611.Web 3D圖形技術(shù)（4）Web3D圖形建模與制作工具 3DS max可用于

26、建立場景模型，安裝相應(yīng)的輸出插件，再直接建立場景模型文件?，F(xiàn)在最有名的Web3D圖形軟件公司，如cult3D 和Viwepoint都可以在3DS max中直接輸出它們的專用文件格式的場景模型文件。 山東大學(xué)計(jì)算機(jī)學(xué)院621.Web 3D圖形技術(shù)（5）Java 3D Java 3D 的本質(zhì)是一個(gè)交互式三維圖形應(yīng)用編程接口（API），是Java 2 SDK的標(biāo)準(zhǔn)擴(kuò)展，它可以和普通的Java 2D 、Swing、AWT等很好地結(jié)合，其目標(biāo)是：1）用戶能夠在瀏覽器中觀看或操作三維動(dòng)態(tài)圖形2）一次編程，到處運(yùn)行3）適應(yīng)不同的軟件平臺(tái)4）適應(yīng)各種顯示環(huán)境和輸入設(shè)備 山東大學(xué)計(jì)算機(jī)學(xué)院631.Web 3D圖

27、形技術(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ū)。山東大學(xué)計(jì)算機(jī)學(xué)院64Web3D的核心技術(shù)實(shí)現(xiàn)原理技術(shù)特征應(yīng)用特點(diǎn)VRML技術(shù)服務(wù)器端提供的是VRML文件和支持資源，瀏覽器通過插件將描述性的文本解析為對應(yīng)的類屬，并在顯示器上呈現(xiàn)出來。通過編程、三維建模工具和VRML可視化軟件實(shí)現(xiàn)；在虛擬三維場景展示時(shí)，文件數(shù)據(jù)量很大。高版本瀏覽器預(yù)裝插件；文件傳輸慢，下載時(shí)間長；呈現(xiàn)的圖像質(zhì)量不高；與其他多技術(shù)集成能力及兼容性弱。適合于

28、三維對象和場景的展示。XML技術(shù)將用戶自定義的三維數(shù)據(jù)集成到XML文檔中，通過瀏覽器對其進(jìn)行解析后實(shí)時(shí)展現(xiàn)給用戶。通過三維建模工具和可視化軟件實(shí)現(xiàn)；在三維對象和三維場景展示時(shí)，文件數(shù)據(jù)量小。需要安裝插件；文件傳輸快，可被快速下載；呈現(xiàn)的圖象質(zhì)量較好；與其他多技術(shù)集成能力強(qiáng)；兼容性好。適合于三維對象和場景的展示。Java技術(shù)通過瀏覽器執(zhí)行程序，直接將三維模型渲染后實(shí)時(shí)展現(xiàn)三維實(shí)體。通過編程和三維建模工具來實(shí)現(xiàn)；在三維對象和三維場景展示時(shí)，文件數(shù)據(jù)量小。不需要安裝插件；文件傳輸快，可被快速下載；呈現(xiàn)的圖象質(zhì)量非常高；兼容性好。適合于三維對象和場景的展示。動(dòng)畫腳本語言在網(wǎng)絡(luò)動(dòng)畫中加入腳本描述，腳本通過控制各幅圖像來實(shí)現(xiàn)三維對象。通過腳本語言編程來實(shí)現(xiàn)；在三維對象和三維場景展示時(shí)，文件數(shù)據(jù)量較小。需要插件；文件傳輸快，可被快速下載；呈現(xiàn)的圖象質(zhì)量隨壓縮率可調(diào)；兼容性好。適合于三維對象和場景的展示。流式傳輸技術(shù)直接將交互的虛擬場景嵌入到視頻中去。通過實(shí)景照片和場景集成（縫合）軟件來實(shí)現(xiàn)；在場景模擬時(shí)，文件數(shù)據(jù)量較小。需要下載插件；用戶可快速瀏覽文件；三維場景的質(zhì)量高；兼容性好。實(shí)現(xiàn)360度全景虛擬環(huán)境。兩個(gè)Web3D的瀏覽