《Web界面設計》PPT課件.ppt

《《Web界面設計》PPT課件.ppt》由會員分享，可在線閱讀，更多相關《《Web界面設計》PPT課件.ppt（115頁珍藏版）》請在裝配圖網上搜索。

第8章Web界面設計 2 本章內容簡介 互聯(lián)網上Web站點和頁面的設計基礎Web站點的信息交互模型和結構Web界面設計的基本思想和原則Web界面設計的工具和技術Web界面設計的可用性評估一些典型的Web站點實例 3 8 1Web基礎 互聯(lián)網是近年來對社會影響最大的技術進步 影響到人類生活的很多方面 互聯(lián)網已經成為全面支持多媒體 能在多種平臺上運行的龐大信息服務系統(tǒng) 互聯(lián)網的應用范圍也日趨擴大 被廣泛用于商業(yè)辦公 業(yè)務管理 購物娛樂等人類生活的各個方面 業(yè)已成為一種全球化社會現(xiàn)象 4 8 1 1Web的出現(xiàn)與發(fā)展 90年代初 瑞士日內瓦的歐洲核能研究中心分布在世界各地的科學家需要高效率的通訊方式來進行彼此交流與分享信息 該中心高能核理學家TimBerners Lee研究發(fā)展了萬維網 WorldWideWeb WWW 的雛形 目的是為了建立一個能夠整合各種資源 文件及多媒體的系統(tǒng) 讓使用者方便地取得不同媒體的資料 5 WWW 環(huán)球信息網絡空間 簡單來說 WWW是建立在客戶 服務器模型之上 構成的一個環(huán)球信息網絡空間 主要使用 超文本標記語言 HypertextMarkupLanguage HTML 超文本傳輸協(xié)議 HypertextTransportProtocols HTTP 通過Internet把遍布世界各地的服務器連接起來 它能夠提供各種Internet服務 具有一致用戶界面的信息瀏覽功能 6 Web頁面的發(fā)展趨勢 Web的一個發(fā)展趨勢 是圖形Web頁面的爆炸性發(fā)展 網上瀏覽中包括了大量使用的動態(tài)圖形 使圖形Web遍布網絡的各個角落 新一代Web信息描述標準XML 能更詳盡地描述文檔的結構信息 具有比HTML有更強大的功能 為Web的發(fā)展提供了強有力的支持 7 8 1 2超文本與超媒體 超文本 Hypertext 是一種使用于文本 圖形或計算機的信息的組織形式 是一種非線性的信息組織形式 它使得單一的信息元素之間相互交叉引用 這種引用并不是通過復制來實現(xiàn)的 而是通過指向對方的地址字符串來指引用戶獲取相應的信息 8 8 1 2超文本與超媒體 超媒體 Hypermedia 利用超文本形式組織起來的文件不僅僅是文本 也可以是圖 文 聲 像以及視頻等多媒體形式的文件 這些多媒體信息就構成了所謂的超媒體 9 8 1 3Web界面設計問題的提出 Web界面設計是人機交互界面設計的一個延伸 是人與計算機交互的演變 Web界面設計與站點外觀直接相關站點的界面外觀是否友好直接關系到是否能吸引人的關注 人性化的設計是Web界面設計的核心如何根據(jù)人的心理 生理特征 運用技術手段 創(chuàng)造簡單 友好的界面 是Web界面設計的重點 10 8 2Web信息交互模型 用來解釋Web的人機界面性質的一個模型 它提出網頁是用戶和知識之間的界面 對于信息提供者來說包括信息的表達 對于使用者來說則是信息的獲取 信息的表達與獲取分別受到兩者認知結構的制約 11 Web信息交互模型 12 Web信息交互模型 模型涉及到信息的三種類型數(shù)據(jù) 當一條信息被反復 簡單的提供時稱為數(shù)據(jù) 比如機票價格 復雜信息 而用來敘述事件時稱為復雜信息 如多媒體信息 過程性信息 在信息有明確目標 并相互作用時稱為過程性信息 如在線練習 在線測試等 13 Web信息交互模型 模型涉及到信息的兩種特性動態(tài)性 信息在不斷的變化 具有動態(tài)性比如股票價格 機票價格等是不斷變化的 一致性 信息元素的組織方式具有一致性信息元素總是通過一定的方式結合在一起 如通過討論 說明 或根據(jù)電話號碼 名字 數(shù)字等方式組織陳列 14 8 3Web信息設計模型 Web信息設計模型是解釋Web人機界面性質的另一個模型 是一種研究網頁的信息設計模型 設計模型中要考慮到信息的兩個方面第一是應該呈現(xiàn)或略去什么信息 第二個方面指的是信息該如何被表現(xiàn) 15 Web信息設計模型 16 WEB的三種設計空間結構模式 通路結構模式說明要展示的關鍵問題 使用戶更容易獲取有用的信息 如出版物中的索引 標題 摘要 概述等 Web網站地圖和各欄目標題等信息都屬于通路結構 興趣結構興趣結構的目的在于捕捉用戶的注意力 并維持用戶瀏覽網頁的注意力 執(zhí)行結構指學習和教育材料之間的一系列交互 尤其是基于計算機的交互 在WEB中指描述學習和網頁信息之間的交互 17 8 4Web站點的概念設計 概念設計涉及的工作 分析 確定站點的目標和用途 準確定義所建立Web網站及站點的規(guī)范 事先建立好站點的架構和導航設計 兼顧不同的瀏覽器 18 8 4 1站點架構和導航設計 站點結構站點的結構可分為邏輯結構和物理結構 邏輯結構描述文檔間的關系 定義文檔間的鏈接 物理結構描述文檔的實際位置及顯示方式 超文本結構中最常用層次結構層次型結構按信息的必要性來改變信息的顯示方式 根網頁是站點的主頁 層次以根網頁開始 用戶深入站點時 選擇趨向于越來越具體 直到找到目標或葉子網頁 層次結構通過深度和廣度來描述 19 8 4 1站點架構和導航設計 站點的導航設計導航系統(tǒng)對訪問者來說是路徑指示系統(tǒng) 站點訪問者通過導航系統(tǒng)尋找需要的信息 用戶感覺到能以滿意的方式找到所需信息時 導航系統(tǒng)才是合適的 由于用戶的差異 不可能實現(xiàn)完美的導航系統(tǒng) 20 兼顧不同瀏覽器的設計 原因站點瀏覽者可能使用不同類型和版本的瀏覽器 以某一個瀏覽器的某一個版本為依據(jù)編寫的網頁程序 可能在其它的瀏覽器或其它版本上不能正常顯示或運行 方法通過使用JavaScript等編程工具或功能 探測用戶瀏覽器的類型和版本等參數(shù)及對于某特定功能的支持情況 然后根據(jù)探測結果顯示適用于特定瀏覽器的網頁內容 根據(jù)用戶瀏覽器分布情況決定設計所面向的瀏覽器類別和版本 21 8 5Web界面設計所涉及的問題 Web界面設計中要考慮的基本問題包括 Web界面設計基本原則Web界面規(guī)劃 22 8 5 1Web界面設計基本原則 了解瀏覽者的心理狀態(tài)內容與形式的統(tǒng)一減少瀏覽層次特點明確統(tǒng)一整體的形象Web界面設計的3C原則 23 8 5 1Web界面設計基本原則 1 了解瀏覽者的心理狀態(tài)從心理學的角度分析瀏覽者的心理狀態(tài) 有助于網頁頁面的設計 在單擊 退回 按鈕之前有三秒鐘而且只有三秒的等待 必須迅速地把有趣和有吸引力的東西顯示出來 24 8 5 1Web界面設計基本原則 2 內容與形式的統(tǒng)一內容指的是Web網站的信息 數(shù)據(jù)及文字內容等 形式指的是網頁設計的版式 構圖 布局 色彩以及它們所呈現(xiàn)出的風格特點等 網頁的形式是為內容服務的 但本身又有自己的獨立性和藝術規(guī)律 網頁設計的目的就是為了使網頁更加形象 直觀 更易被觀眾所接受 不同內容的網頁要求用不同的設計形式 25 8 5 1Web界面設計基本原則 3 減少瀏覽層次應盡量把網頁的層次簡要化 力求以最少的點擊次數(shù)鏈接到具體的內容 在主頁的訪問率為100人次的情況下 下一頁的訪問率降到30到50人次 網頁的層次越復雜 實際內容的訪問率也將越低 信息也就越難傳達到讀者的手里 26 8 5 1Web界面設計基本原則 4 特點明確利用相應邏輯結構來有序組織 開發(fā)出一個頁面設計原型 進行測試 逐步精煉此原型 形成明確的特點特色鮮明的Web網站是精心策劃的結果 只有獨特的創(chuàng)意和賞心悅目的網頁設計才能在一瞬間打動它的瀏覽者應清楚地了解Web網站用戶的基本情況 從而能有的放矢 挑選關鍵信息 27 8 5 1Web界面設計基本原則 5 統(tǒng)一整體的形象Web網站標識以及網頁設計標準確定后 應盡量地應用到每一頁頁面上 使瀏覽者可以確定當前所瀏覽的網站 并且給瀏覽者留下深刻而統(tǒng)一的印象 28 SONY公司的首頁特點 SONY公司的首頁設計充分體現(xiàn)了引領消費電子產品的潮流這一特點 設計者很好地傳遞了該Web網站的特點 頁面上富有動感的線條和畫面鮮亮的用色Flash畫面和字樣鼠標落在上面就會以彩色顯示的多個畫面等 29 SONY公司的首頁 30 8 5 1Web界面設計基本原則 6 Web網站設計的3C原則concise 簡潔 使用醒目的標題 這個標題常常采用圖形來表示 但圖形同樣要求簡潔 限制所用的字體和顏色的數(shù)目 頁面上所有的元素都應當有明確的含義和用途 不要用無關的圖片把頁面裝點起來 31 8 5 1Web界面設計基本原則 Consistent 一致性 各頁面使用相同的頁邊距 文本 圖形間保持相同的間距 各頁面上都放上公司或網站的統(tǒng)一標志 各頁面應當使用相同的導航圖標 頁面中的每個元素與整個頁面以及站點的色彩和風格上保持一致性 文字的顏色要同圖像的顏色保持一致并注意色彩搭配的和諧 32 8 5 1Web界面設計基本原則 contrast 對比度 對比是強調某些內容的最有效的辦法之一 好的對比度使內容更易于辨認和接受 常用的對比方法是使用顏色進行對比 另一種實現(xiàn)對比的方法是使用字體變化 可以在文字排版中使用斜體和黑體寫出關鍵內容 但不要濫用 以免不能達到強調效果 33 8 5 2Web界面規(guī)劃 確定Web界面設計的目標企業(yè)Web網站 企業(yè)建立這個Web網站的目的這個網站的作用該提供哪些吸引訪問者的東西用戶訪問這個Web網站后 能給他們帶來什么 個人Web網站 主要是展現(xiàn)自我 演練技術 建立的Web網站要有個性和特色 34 8 5 2Web界面規(guī)劃 界面布局的規(guī)劃制定好目標后 網頁布局 元素的設計都要以這個目標為中心 盡量從各方面綜合表現(xiàn)Web站點的目標 在制定建立站點目標的同時 應該將站點作為一種文化 一種藝術來看 35 8 5 2Web界面規(guī)劃 Web界面設計中用戶的地位確定Web站點的用戶群體 從用戶的角度去思考 以用戶為中心的設計 為用戶的共性設計 同時考慮差異 對目標用戶群的構成進行分析 Web網站是以提供的信息內容來分類的 對目標用戶的行為方式來分析 按照人機工程學的觀點 行為方式受年齡 性別 地區(qū) 種族 職業(yè) 生活習俗 受教育程度等因素影響 36 8 6Web界面概要設計 Web界面概要設計包括Web界面框架設計Web界面的內容與風格的設計Web界面設計的語言與文化 37 8 6 1Web界面框架設計 Web網站規(guī)劃對市場進行分析 確定站點的目的和功能 并根據(jù)需要對站點建設中的技術 內容 費用 測試 維護等做出規(guī)劃 建立原型系統(tǒng)嘗試采用不同的方法修改目標 更新形象 解決Web網站建設中的一些基本問題 Web網站的結構信息的組織與管理新增文件與原有系統(tǒng)保持一致的措施 存儲信息的物理方法 采用數(shù)據(jù)庫還是文件系統(tǒng) 文檔版本控制結構的完整性以及維護方法等 38 8 6 1Web界面框架設計 詳細設計包括Web頁面的布局系統(tǒng)的內部結構實現(xiàn)方法和維護方法等確定Web網站的運行模式制造企業(yè)網站商業(yè)企業(yè)網站門戶網站新聞網站個人網站通過廣告 銷售等方式進行運作的網站正式實施 39 8 6 2Web界面的內容與風格 網站內容設計的原則 HTML文檔的效果由其自身的質量和瀏覽器解釋的方法決定 應讓所有的瀏覽器都能夠正常瀏覽 網站信息的組織的總體結構要層次分明 盡量避免形成復雜的網狀結構 要權衡圖像和多媒體信息的數(shù)量 在不影響網站效果的前提下 盡量減少圖像的數(shù)量和所占面積 40 8 6 2Web界面的內容與風格 網站內容設計的原則網站的首頁要給用戶帶來好的第一印象 能夠吸引用戶再次光臨這個網站 網站內容應是動態(tài)進行修改和更新 網頁中應該提供聯(lián)機幫助功能 網頁的文本內容應簡明 通俗易懂 所有的內容都要針對設計目標而寫 不要節(jié)外生枝 文字要正確 不能有語法錯誤和錯別字 41 8 6 2Web界面的內容與風格 Web界面的風格Web界面的風格包括站點的標志 色彩 字體 布局 交互方式 內容價值 存在意義等 一個杰出的網站需要整體的形象包裝和設計 為兒童設計的網站應當使用比較豐富的色彩和圖形 并且較多使用動畫和聲音等多媒體表現(xiàn)工具 為老年人設計的網站需要考慮采用較大的字體 直截了當?shù)男畔@示和簡單的瀏覽方式 以適用老年人可能逐漸減弱的視力和記憶力 42 體現(xiàn)兒童特點的迪斯尼網站 43 8 6 3Web界面設計的語言與文化 網站應設置多語言選擇網站面向的用戶使用不同的語言 則在設計時要考慮包括不同語言的版本 將選擇語言版本的功能放在網站的主頁 并用不同版本的語言進行標注 在網站設計和建設中進行跨文化研究應當注意到不同地區(qū)的文化特點 不同的語言表達可以產生不同的效果 有些內容在一個地區(qū)是允許的或適用的 但是在另外一個地區(qū)使用卻是不合適的 應當避免顯示對用戶不適合的內容 44 8 7Web界面設計要素 Web界面設計要素包括 Web界面布局Web界面的色彩Web界面的字體Web界面的動畫與多媒體Web界面的導航 45 8 7 1Web界面布局 布局設計應做到整體布局合理 有序 整體化 常用Web頁面布局的形式 同 字形結構布局 國 字形結構布局左右對稱布局自由式布局 46 8 7 1Web界面布局 同 字形結構布局頁面頂部為主菜單 下方左側為二級欄目條 右側為鏈接欄目條 屏幕中間顯示具體的內容 優(yōu)點是頁面結構清晰 左右對稱 主次分明 因而得到廣泛的應用 缺點是太過于規(guī)矩呆板 需要善于運用細節(jié)色彩的變化來調劑 47 8 7 1Web界面布局 2 國 字形結構布局 國 字形結構布局在 同 字形結構布局的基礎上 在頁面下方增加一橫條菜單或廣告其優(yōu)點是充分利用版面 信息量大 切換方便 有的網站將頁面設計成鏡框的樣式 顯示出網站設計師的品味 48 8 7 1Web界面布局 3 左右對稱布局采取左右分割屏幕的方法形成對稱布局 優(yōu)點是自由活潑 可顯示較多文字和圖像 缺點是兩者有機結合較為困難 49 8 7 1Web界面布局 4 自由式布局自由式布局打破上述兩種布局的框架結構 常用于文字信息量少的時尚類和設計類網站 其優(yōu)點是布局隨意 外觀漂亮 吸引人 缺點是顯示速度慢 50 8 7 2Web界面的色彩 確定網站的標準色彩不同的色彩搭配產生不同的效果 并可能影響到訪問者的情緒 以紅 綠 藍三色稱為三基色其它的色彩都可以用這三種色彩調和而成 底色應應柔和 素雅柔和的底色配上深色文字 讀起來自然 流暢 51 8 7 2Web界面的色彩 網頁色彩搭配的原則 色彩的鮮明性網頁的色彩要鮮艷 容易引人注目 色彩的獨特性要有與眾不同的色彩 使得大家對網頁的印象強烈 色彩的合適性色彩和網頁要表達的內容氣氛相適合 色彩的聯(lián)想性不同色彩會產生不同的聯(lián)想 選擇色彩要和網頁的內涵相關聯(lián) 52 8 7 3Web界面的字體 字體是每一個網站的必要組件 選擇字體和顏色 和其它頁面元素一起產生一個視覺效果 53 常用的英文字體 1 Serif字體 2 Sans Serif字體 3 TrueType字體 54 常用的英文字體 Serif字體Serif是在字母主要筆畫的結束處加上的小裝飾筆畫 TimesNewRoman是一個Serif字體的例子 Serif引導眼睛隨著打字線移動 提高了可讀性 Serif字體最適合于正文文本 55 常用的英文字體 Sans Serif字體Sans Serif字體沒有小裝飾筆畫 Arial是一個Sans Serif的例子 字符的外觀被減少到只含有必要的筆畫 Sans Serif文本必須逐個字母的閱讀 建議在小尺寸文本和非常大的文本中使用 通常 Serif字體和一個Sans Serif字體就可以在網頁上提供一個較好的文本組合 56 常用的英文字體 TrueType字體許多字體都是TrueType 即可以產生任意尺寸而不降低字母質量 TrueType是蘋果公司開發(fā)的一項數(shù)字技術 現(xiàn)在被Apple和Microsoft操作系統(tǒng)使用 TimesNewRoman和Arial都是TrueType字體 57 運用不同英文字體的網頁 58 常用的中文字體 Web界面中常用的中文字體有宋體 仿宋體 楷體和黑體 除這四種基本字體外 還有多種可選用的字體如書宋體 報宋體 隸書體 美黑體 廣告體 行草體等 漢字大小定為九個等級 按初 一 二 三 四 五 六 七 八排列 在字號等級之間又增加一些字號 并取名為小幾號字 如小四號 小五號等 59 常用的中文字體 正文中的中文字體可以采用傳統(tǒng)媒體中的各種字體作為Web界面正文中的字體 根據(jù)Web網頁中的不同要求 選擇相應的字體和字號 常見正文中文字體用法如表8 1所示 60 常用的中文字體 標題中的中文字體網頁應該重視標題的處理 把標題排版作為版面修飾的主要手段 標題的字體變化更為講究 用于網頁排版系統(tǒng)一般要配十幾到幾十種字體 才能滿足標題用字的需要 網頁標題一般無分級要求 字形普遍要比圖書標題大 字體的選擇多樣 字形的變化修飾更為豐富 61 常見正文中文字體用法 62 使用字體的原則 整個網站上的字體應該保持使用的一致網站中可能會使用多種字體 但是同一種字體應該表示相同類型的數(shù)據(jù)或者信息 文字的顏色應該一致 讓用戶可以容易的確定不同文本和顏色所代表的內容 為了讓字體匹配網站的總體概念 必須要意識到每一個字體變化和可以使用的范圍 63 使用字體的原則 考慮字體如何適應網頁 以及字體與整個設計的關系 選擇的字體和整個頁面及網站應融為一體 設計元素例如頁邊框 行間距 背景顏色和前景顏色等都可以影響最終的結果 通過字體不同的安排 可以讓網站產生豐富變化的外觀和感覺 64 8 7 4Web界面的動畫與多媒體 動畫 音頻和視頻這樣的多媒體可以補充平淡的文本或者二維圖形 也補充網站的視覺設計 音調和消息等 Web設計者可以使用很多當前Web設計中的多媒體處理工具和技術 但是帶寬以及瀏覽器的支持能力限制了多媒體技術的迅速采用 為了充分享受新技術 通常需要大帶寬 瀏覽器插件或第三方應用程序的支持 65 WEB中的動畫 動畫是區(qū)別Web和其它媒體的一個重要展示形式 動畫賦予了用戶運動和投入的感受 動畫可以分為不同的級別 從簡單的動畫GIF圖像到三維以及虛擬環(huán)境 最常用的基本動畫類型是GIF Rollover和MacromediaFlash文件 動畫GIF是靜止圖像的匯集 可以按照指定的序列號和速度重復運動 許多標志廣告就是動畫GIF 66 WEB中的動畫 JavaApplet是經常被用來制作互聯(lián)網上動畫效果的程序設計語言 MacromediaFlash文件在網站設計中被廣泛地接受 Flash引入了一種新的動畫形式 它在帶寬有限的情況下提供了媒體豐富的內容 Flash允許設計者創(chuàng)建吸引人的動畫網站 為通常的靜態(tài)站點提供了一種新的選擇 67 8 7 5Web界面上的導航 對于Web站點來說 需要包含導航條 用戶利用導航的提示在信息的空間里移動 真實世界的導航觀點在Web中常被采用 應該注意 Web不是真實的世界 Web導航應該幫助用戶理解他們在哪里 可以去哪里 怎樣獲得想要的東西 68 Web界面上的導航 為使用戶得到真實的感覺 必須充分考慮可見性 標記和導航元素的布局 Web頁上僅有五個基本區(qū)域可放置導航元素 頂部底部左側右側中央 69 8 8Web界面設計技術與工具 要設計好的Web界面 需要有良好的設計工具 隨著Internet網絡的發(fā)展 國際組織和許多互聯(lián)網軟件開發(fā)商制訂了若干標準 開發(fā)了不同的Web界面設計工具 本節(jié)對一些常見的技術和工具進行簡單介紹 70 8 8 1Web界面設計技術基礎 超文本標記語言HTML客戶端腳本語言JavaScriptJavaApplet服務器端腳本語言 71 1 超文本標記語言HTML HTML已經成為表示Web文檔信息的標準方法 是構成Web頁面的主要工具 HTML是用來表示網上信息的符號標記語言 是一個跨平臺語言 HTML標準定義了構成語言的每一個獨立元素 這些元素是說明如何在瀏覽器中顯示HTML文檔的指令或標記符 從結構上講 HTML文件由各種標記元素組成 用于組織文件的內容和指導文件的輸出格式 72 1 基本標記元素 部分 73 2 圖形標記元素 目前能被Web瀏覽器直接解釋的常見圖像格式有 GIF格式 GIF文件 支持256色 X位圖格式 XBM文件 黑白圖像 JPEG格式 JPG JPEG文件 支持RGB色 74 3 表格標記元素 部分 75 4 表單標記元素 部分 76 例8 1 Demo html 例8 1 用任一編輯器建立文本文件Demo html 網頁標題顯示于瀏覽器窗口的標題欄H1設定一級標題黑體字斜體字紅色5號字點擊這里將超鏈到山東大學主頁點擊這里將超鏈到下面的錨點有意見請告訴我這里是一個文檔內部錨點的起始處 77 Demo html的運行效果 78 例8 2 用HTML實現(xiàn)表單實例 HTML表單實例用戶名 口令 選學內容 WordExcelInternet課程類別 必修選修你的計算機是哪一種類型 PCUNIXMACOTHER備注 請在此填寫補充內容 79 用HTML實現(xiàn)表單實例效果 80 2 客戶端腳本語言JavaScript HTML無法獨自完成交互和客戶端動態(tài)網頁的任務 JavaScript 它彌補了HTML語言的缺陷 利用JavaScript 可以使得信息和用戶之間不僅只是一種顯示和瀏覽的關系 而是實現(xiàn)了一種實時的 動態(tài)的 可交互式的表達能力 JavaScript是一種內嵌于HTML中的腳本語言 它是一種基于對象和事件驅動并具有安全性能的腳本語言 使用它的目的是與HTML JavaApplet一起實現(xiàn)在一個Web頁面中鏈接多個對象 與Web客戶交互作用 可用于開發(fā)客戶端的應用程序等 81 JavaScript的特點 1 一種腳本編寫語言 2 基于對象的語言 3 簡單性 4 安全性 5 動態(tài)性 6 跨平臺性 82 JavaScript與HTML結合實例 JavaScript在此出現(xiàn)alert 這是第一個JavaScript例子 alert 歡迎你進入JavaScript世界 alert 今后我們將共同學習JavaScript知識 JavaScript在此結束 JavaScript代碼由 說明 alert 是JavaScript的窗口對象方法 其功能是彈出一個具有OK對話框并顯示括號中的字符串 83 JavaScript與HTML結合實例運行結果 84 3 JavaApplet JavaAapplet是訪問Internet服務器 在Internet上傳播的 自動安裝的 可作為部分Web文檔運行的小應用程序 當JavaAapplet到達客戶端 它被限制訪問資源 以使它能夠在不受病毒威脅和破壞數(shù)據(jù)完整性的情況下生成一個二進制的多媒體用戶界面以及完成復雜的計算 它還提供了裝載和顯示圖像的方法 以及裝載和播放語音片斷的方法 85 JavaAapplet是一種基于窗口的程序 JavaAapplet是由事件驅動的 一個JavaAapplet類似于系列提供中斷服務的子程序的集合 在事件發(fā)生之前 JavaAapplet一直處于等待狀態(tài)中 一旦事件發(fā)生 JavaAapplet就會采取相應措施并迅速將控制權交給AWT 針對特定的事件作出相應的動作并把控制交給AWT的運行環(huán)境 用戶可以與JavaAapplet進行交互 而不是通過其它方式 這些交互被送至JavaAapplet JavaAapplet必須作出響應的事件 86 JavaApplet在網頁中實現(xiàn)放大鏡的例子 AnLens jar是JavaApplet的源文件 其效果如下圖 87 88 4 服務器端腳本語言 目前流行的三大服務器端腳本語言是ASP PHP JSP ASP ActiveServerPages 是一個Web服務器端的開發(fā)環(huán)境 利用它可以產生和運行動態(tài)的 交互的 高性能的Web服務應用程序 PHP HyperTextPreprocess 是一種跨平臺的服務器端的嵌入式腳本語言 它大量地借用C Java和Perl語言的語法 并耦合PHP自己的特性 使Web開發(fā)者能夠快速地寫出動態(tài)生成頁面 JSP JavaServerPage 是Sun公司推出的新一代站點開發(fā)語言 它完全解決了目前ASP PHP的一個通病 腳本級執(zhí)行 JSP可以在Servlet和JavaBeans的支持下 編寫出功能強大的Web站點程序 89 三大服務器端腳本語言 三者都提供在HTML代碼中混合某種程序代碼 由語言引擎解釋執(zhí)行程序代碼的能力 在ASP PHP JSP環(huán)境下 HTML代碼主要負責描述信息的顯示樣式 而程序代碼則用來描述處理邏輯 普通的HTML頁面只依賴于Web服務器 而ASP PHP JSP頁面需要附加的語言引擎分析和執(zhí)行程序代碼 程序代碼的執(zhí)行結果被重新嵌入到HTML代碼中 然后一起發(fā)送給瀏覽器 90 8 8 2常用Web界面設計工具 頁面編輯器MicroSoft公司的FrontpageMacromedia公司的DreamweaverDreamweaver對于動態(tài)網頁的支持特別好 可以輕而易舉地做出很多眩目的互動頁面特效 Dreamweaver與Flash Firework并稱為Macromedia的網頁制作三劍客 輔助工具AceHTMLPro6 0 全功能的HTML JavaScript編輯器 AntennaWebDesignStudio 強大的可視化網頁設計軟件 EasyHTML 簡單的所見即所得的HTML編輯器 有固定 類似瀏覽器的界面 EasyWebEditor 是一個Web發(fā)布工具 允許不了解HTML而在所見即所得環(huán)境中編輯Web網頁 91 8 8 3Web界面設計新技術 Web3D圖形技術語音Web技術 92 1 Web3D圖形技術 1 Web3D虛擬現(xiàn)實建模語言VRMLVRML是3D圖形和多媒體技術通用交換的文件格式 它描述交互式的3D對象和場景 它不僅應用在互聯(lián)網上 也可以應用在工程和科學可視化 多媒體 娛樂游戲 互聯(lián)網3D圖形 教育 虛擬社區(qū)等領域 由于網上傳輸?shù)氖悄Ｐ臀募?故其傳輸量大大小于視頻圖像 93 虛擬法國巴黎凱旋門及周圍的3D場景效果 94 1 Web3D圖形技術 2 Web3D圖形實時渲染引擎實時渲染引擎的作用是解釋并翻譯實施場景模型文件的語法 實時渲染從服務器端傳來的場景模型文件 在網頁訪問者的客戶端逐幀 實時地顯示3D圖形 實時渲染引擎是實施互聯(lián)網3D圖形的關鍵技術 它的文件大小 圖形渲染質量 渲染速度 以及它能提供的交互性都直接反映其解決方案的優(yōu)劣 95 1 Web3D圖形技術 3 Web3D圖形新標準可擴展3D Extensible3D X3D 是一個軟件標準 定義了如何在多媒體中整合基于網絡傳播的交互三維內容 X3D是VRML的繼承和改進 提供了以下的新特性 更先進的應用程序界面 新添的數(shù)據(jù)編碼格式 嚴格的一致性 組件化結構 96 1 Web3D圖形技術 4 Web3D圖形建模與制作工具3DSmax可用于建立場景模型 安裝相應的輸出插件 再直接建立場景模型文件 現(xiàn)在最有名的Web3D圖形軟件公司 如cult3D和Viwepoint都可以在3DSmax中直接輸出它們的專用文件格式的場景模型文件 97 1 Web3D圖形技術 5 Java3DJava3D的本質是一個交互式三維圖形應用編程接口 API 是Java2SDK的標準擴展 它可以和普通的Java2D Swing AWT等很好地結合 其目標是 1 用戶能夠在瀏覽器中觀看或操作三維動態(tài)圖形 2 一次編程 到處運行 3 適應不同的軟件平臺 4 適應各種顯示環(huán)境和輸入設備 98 1 Web3D圖形技術 6 Web3D圖形技術應用互聯(lián)網上的交互式3D圖形技術Wed3D正在取得新的進展 最具魅力的Wed3D圖形將在互聯(lián)網上有廣泛應用 如電子商務 聯(lián)機娛樂休閑與游戲 科技與工程的可視化 教育 醫(yī)學 地理信息 虛擬社區(qū) 99 兩個Web3D的瀏覽的例子 100 2 Web中的語音交互技術 語音瀏覽技術是正在互連網上的一種新的應用和技術 VoiceXML 語音可擴展標記語言世界上第一個真正的語音通信標準 它定義了應用開發(fā)商向用戶提供新型信息訪問服務的方式 VoiceXML的應用與HTML的應用相同 唯一的差別在于前者使用語音瀏覽器 101 VoiceXML 語音可擴展標記語言 通過VoiceXML 互聯(lián)網語音應用運營商能向電話用戶發(fā)布他們感興趣的信息VoiceXML突破性地實現(xiàn)了互聯(lián)網與電話網的融合 結合傳統(tǒng)的電話語音操作控制 語音識別 ASR 文語轉換 TTS XML Web數(shù)據(jù)庫等技術 完成方便 完善的業(yè)務和信息控制操作 基于VoiceXML標準的語音數(shù)據(jù)互聯(lián)將為聲訊網 移動網 互聯(lián)網的統(tǒng)一提供技術保障 102 8 9Web界面設計的評估 Web界面設計的評估有其獨特的特征 為什么要對Web進行可用性測試如果某個站點不好用 用戶就不會再去用它 103 8 9 1Web站點的可用性 可用性是指對用戶來說軟件或Web站點是否易用 高效和使人感到滿意 衡量可用性的5個方面易學性 當用戶第一次使用設計時完成基本任務的難易 有效性 一旦用戶學習了這個設計 執(zhí)行任務的快慢 易記性 當用戶一段時間不用此設計后再來使用 再次熟練的難易 錯誤 用戶會犯多少錯誤 這些錯誤有多大的影響 從錯誤中恢復的難易 滿意程度 使用這個設計讓人感到何種程度的愉快 104 8 9 2常見Web設計錯誤 目的描述不清楚 存檔內容換上新的地址 內容不標注日期 對大圖片的縮小不能反映其真實內容 過分詳細的ALT文本 不支持 如果 那么 what ifs 無法通過屬性過濾的長長的列表 產品只能按照品牌進行排序 過分限制的表單條目 頁面上包括指向自己的鏈接 105 8 10Web界面實例分析 簡要介紹幾種典型的網站的實例 以便了解門不同類型的網站的設計風格與特點 1 商業(yè)站點2 信息站點3 娛樂站點4 門戶站點 106 1 商業(yè)站點 一般的 商業(yè)站點的主要觀眾是潛在的和正常的客戶組織 第二種觀眾包括潛在的和正常的投資者 潛在的雇員 令人感興趣的第三種觀眾 是新聞媒體或競爭者 任何商業(yè)站點的最主要的目的是 以公司直接或間接受益的方式服務于用戶 107 1 商業(yè)站點 商業(yè)站點的共同特點包括 基本信息的發(fā)布支持與幫助投資機會公共關系招聘信息電子商務 108 商業(yè)網站例 沃爾瑪中國網站的首頁 109 2 信息站點 政府 教育 新聞 無利潤的組織 宗教組織 或變化多樣的社會站點經常被認為是信息站點 信息站點的訪問者 是他們對站點提供的信息有興趣或需要 信息站點的建立滿足某些設計條件 但不需要考慮財政方面的因素 信息站點的目的變化很大 在大學的站點可能盡力以某個題目如某個國家的歷史等幫助受教育的訪問者 110 信息網站例 新浪網的首頁 111 3 娛樂站點 娛樂站點一般是商業(yè)性質的 但還有特殊的考慮 娛樂站點的意圖僅僅是使參觀者歡樂 在某種程度上 他們是出售娛樂節(jié)目 建立娛樂站點時要求打破常規(guī)而取得成功 就娛樂站點來說 目的是出售體驗本身 112 娛樂網站例 聯(lián)眾世界的主頁 113 4 門戶站點 門戶站點是用戶在網上沖浪的起始站點 該站點幫助人們查找信息 門戶站點經常試圖提供盡可能多的信息 為用戶盡可能多地提供服務 鼓勵他們留在該站點或繼續(xù)瀏覽該站點 門戶站點也包括搜索引擎或站點目錄 這些是門戶站點的關鍵 114 門戶網站例 雅虎中文網 115 習題 簡述Web設計的原則 用JavaScript或JavaApplet寫程序 并嵌入HTML網頁 試舉幾個網頁例子 并進行可用性評估