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

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