《Web界面設(shè)計》PPT課件.ppt

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

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