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

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