人機交互基礎(chǔ)教程第7章

1、第七章 Web界面設(shè)計重點大學(xué)計算機專業(yè)系列教材Web界面及相關(guān)概念Web界面設(shè)計原則Web界面要素的設(shè)計Web界面基本設(shè)計技術(shù)Web3D界面設(shè)計技術(shù) Web是一個由許多互相鏈接的超文本（HyperText）文檔組成的系統(tǒng)。分布在世界各地的用戶能夠通過Internet對其訪問，進行彼此交流與共享信息。在這個系統(tǒng)中，每個有用的事物，被稱為一種“資源”，其由一個全局“統(tǒng)一資源標(biāo)識符”（URI）標(biāo)識；這些資源通過超文本傳輸協(xié)議（HyperText Transfer Protocol）傳送給用戶；而用戶通過點擊鏈接來獲得這些資源。Web應(yīng)用的成功與否，除了受其所采用的技術(shù)和所能夠提供的功能的限制，還受

2、Web網(wǎng)頁的外觀的影響。Web網(wǎng)頁的外觀經(jīng)常是最先被用戶注意到的。用戶對網(wǎng)站的第一印象與界面外觀是否友好、吸引人密切相關(guān)。所以對于設(shè)計人員來說，Web界面設(shè)計至關(guān)重要。Web界面設(shè)計的人性化、易用性是Web界面設(shè)計的核心。山東大學(xué)考古數(shù)字博物館視聽博覽界面以用戶為中心一致性簡潔與明確體現(xiàn)特色兼顧不同的瀏覽器良好的導(dǎo)航設(shè)計7.2 Web界面設(shè)計原則界面設(shè)計原則6人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程78人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程9人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程10人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程11人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程12

3、人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程13人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程14人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程15人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程16人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程Web界面的內(nèi)容和形式應(yīng)一致。內(nèi)容包括：網(wǎng)站顯示的信息，如數(shù)據(jù)、文字內(nèi)容等。形式包括：Web界面設(shè)計的版式、構(gòu)圖、布局、色彩、風(fēng)格等。網(wǎng)頁的形式為內(nèi)容服務(wù)，不同內(nèi)容的網(wǎng)頁用不同的設(shè)計形式。一致性原則一致性原則人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程17Web網(wǎng)站標(biāo)識及頁面設(shè)計標(biāo)準確定后，應(yīng)運用到每個頁面上。每個頁面都使用相同的頁邊距；文本、圖形之間保持相同的

4、間距；主要圖形、標(biāo)題或符號旁邊留下相同的空白；若使用圖標(biāo)導(dǎo)航，則各個界面應(yīng)當(dāng)使用相同的圖標(biāo)；頁面上的每個元素要與整個頁面的設(shè)計風(fēng)格一致；文字的顏色應(yīng)和圖像的顏色保持一致，并注意色彩搭配的和諧。一致性原則（續(xù)）一致性原則（續(xù)）人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程1819人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程20人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程21人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程保持簡潔的常用做法是使用醒目的標(biāo)題；限制所用的字體和顏色的數(shù)目；界面上所有的元素都有明確的含義和用途；三次點擊原則：通常情況下，訪問者應(yīng)該最多通過三次點擊就能在網(wǎng)站上找到想要的信息。主

5、頁的訪問率為100人次的情況下，下一頁的訪問率會降到30-50人次。簡潔與明確原則簡潔與明確原則人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程2223人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程24人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程25人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程特色鮮明的網(wǎng)站更容易在一瞬間打動它的瀏覽者，留下令人心動的第一印象；應(yīng)清楚Web網(wǎng)站用戶的基本情況，從而在網(wǎng)站設(shè)計時做到有的放矢，呈現(xiàn)關(guān)鍵信息；利用邏輯結(jié)構(gòu)有序組織、開發(fā)頁面設(shè)計原型，通過測試和逐步精煉，形成網(wǎng)站的明確特點。體現(xiàn)特色的原則體現(xiàn)特色的原則人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程2627人機交互

6、與界面設(shè)計課程人機交互與界面設(shè)計課程28人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程29人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程30人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程31人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程32人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程網(wǎng)站的瀏覽者可能使用不同類型和版本的瀏覽器。IE瀏覽器，opera瀏覽器，火狐瀏覽器（Firefox），Google瀏覽器（Google Chrome ），搜狗瀏覽器等；IE瀏覽器的版本：IE 6，IE 7，IE 8，IE 9，IE 10。以某一個瀏覽器的某一個版本為依據(jù)編寫的網(wǎng)頁程序，可能在其它的瀏覽器或其它版本上不能正

7、常顯示。根據(jù)用戶瀏覽器分布情況來確定所面向的瀏覽器類別和版本，并在盡可能多的瀏覽器中測試網(wǎng)站。通過使用JavaScript等編程工具或功能，探測用戶瀏覽器的類型和版本等參數(shù)對于某特定功能的支持情況，然后根據(jù)探測結(jié)果顯示適用于特定瀏覽器的網(wǎng)頁內(nèi)容。兼顧不同瀏覽器的原則兼顧不同瀏覽器的原則人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程3334人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程35人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程導(dǎo)航系統(tǒng)是網(wǎng)站的路徑指示系統(tǒng)，用于指導(dǎo)瀏覽者有效地訪問網(wǎng)站。Web導(dǎo)航應(yīng)該幫助用戶理解他們在哪里、他們能去哪里、他們怎樣獲得其他信息。好的導(dǎo)航系統(tǒng)可以使用戶以一種滿意的方

8、式找到需要的信息。導(dǎo)航系統(tǒng)的設(shè)計應(yīng)從使用者的角度出發(fā)，力爭簡便、清晰和完整一致。明確的導(dǎo)航設(shè)計的原則明確的導(dǎo)航設(shè)計的原則人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程3637人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程38人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程39人機交互與界面設(shè)計課程人機交互與界面設(shè)計課程Web界面規(guī)劃 無論那種類型的Web網(wǎng)站，想要把界面設(shè)計得豐富多彩，吸引更多的用戶前來訪問，Web界面規(guī)劃至關(guān)重要。個人網(wǎng)頁示例文化與語言 網(wǎng)站一經(jīng)發(fā)布，意味著全世界都可以看到其中的信息。所以，全球服務(wù)型的網(wǎng)站還要考慮如何適應(yīng)不同國家的不同類型的文化與語言環(huán)境。Google首頁圖標(biāo)（中國

9、七夕）內(nèi)容、風(fēng)格與布局、色彩設(shè)計l內(nèi)容：Web界面的內(nèi)容不僅要遵循簡潔明確的原則，也要符合確定的設(shè)計目標(biāo)，面向不同的對象要使用不同的口吻和用詞。l風(fēng)格：Web界面的風(fēng)格是指網(wǎng)站的整體形象給瀏覽者的綜合感受。這個整體形象包括網(wǎng)站的標(biāo)志、色彩、字體、布局、交互方式、內(nèi)容價值、存在意義等。一個優(yōu)秀的網(wǎng)站與實體公司一樣，也需要整體的形象包裝和設(shè)計。l布局：Web界面布局就是指如何合理地在界面上分布內(nèi)容。常用的Web界面布局形式有：“同”字形結(jié)構(gòu)、“國”字形結(jié)構(gòu)、左右對稱、自由式。l色彩：Web網(wǎng)站給人的第一印象來自視覺沖擊。顏色元素在網(wǎng)站的感知和展示上扮演重要的角色。某個企業(yè)或個人的風(fēng)格、文化和態(tài)度可

10、以通過Web界面中的色彩混合、調(diào)整或者對照的方式體現(xiàn)出來。一般地，Web界面中色彩選擇可考慮：鮮明性、獨特性、合適性、聯(lián)想性、和諧性。文本設(shè)計l文本不要太多，以免轉(zhuǎn)移瀏覽者注意力。l要選擇合適的顏色，以便使文本和其它界面元素一起產(chǎn)生一個和諧的視覺效果；文本的顏色應(yīng)該一致，讓用戶可以容易地確定不同文本和顏色所代表的內(nèi)容。l選擇的字體應(yīng)和整個界面應(yīng)融為一體；一旦已經(jīng)為某些元素選擇了字體，應(yīng)該保證其在整個網(wǎng)站中應(yīng)用的一致性。l網(wǎng)站中可能會使用多種字體，但是同一種字體應(yīng)該表示相同類型的數(shù)據(jù)或者信息。通過合理設(shè)置頁邊框、行間距等，使Web界面產(chǎn)生豐富變化的外觀和感覺。l應(yīng)該重視標(biāo)題的處理。標(biāo)題一般無分級

11、要求，其字形一般較大，字體的選擇一般具有多樣性，字形的變化修飾則更為豐富。多媒體元素設(shè)計 圖形、圖像、動畫、音頻和視頻等多媒體元素可以彌補平淡文本的不足，增強Web界面的藝術(shù)表現(xiàn)力。因此，在設(shè)計Web網(wǎng)頁時有必要考慮使用不同類型的多媒體元素，使得網(wǎng)站更生動，而且有吸引力。Rollover按鈕HTML HTML是用來表示網(wǎng)上信息的符號標(biāo)記語言，是一個跨平臺語言，能在Windows、Macintosh和Unix平臺上工作。HTML已經(jīng)成為了Web文檔信息的標(biāo)準方法，是構(gòu)成Web界面的主要工具。 HTML語言的標(biāo)記元素通常分為如下幾類：基本標(biāo)記元素、圖形標(biāo)記元素、表格標(biāo)記元素、表單標(biāo)記元素。l表單實

12、例：HTML表單實例用戶名： 口令： 選學(xué)內(nèi)容： Word Excel Internet 課程類別：必修選修 你的計算機是哪一種類型： PC UNIX MAC OTHER 備注：請在此填寫補充內(nèi)容 HTML建立表單的運行實例JavaScript JavaScript是一種內(nèi)嵌于HTML中的腳本語言(也可獨立出來)，它是一種基于對象和事件驅(qū)動并具有安全性能的腳本語言。 基本特點： JavaScript是一種腳本編寫語言；是基于對象的語言；簡單性；安全性；動態(tài)性；跨平臺性。腳本：alert(這是第一個JavaScript例子!“);alert(歡迎你進入JavaScript世界!“); alert

13、(今后我們將共同學(xué)習(xí)JavaScript知識！“); JavaScript例子CSS+DIVCSS+DIVDIV+CSS是網(wǎng)站標(biāo)準（或稱“WEB標(biāo)準”）中常用術(shù)語之一，div+css 是一種網(wǎng)頁的布局方法，這一種網(wǎng)頁布局方法有別于傳統(tǒng)的HTML網(wǎng)頁設(shè)計語言中的表格（table）定位方式，可實現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離。優(yōu)點 頁面載入更快、降低流量費用（特別是大型網(wǎng)站） 保持一致性、修改設(shè)計時更有效率JavaApplet JavaAapplet是訪問Internet服務(wù)器、在Internet上傳播的、自動安裝的、可作為部分Web文檔運行的小應(yīng)用程序。 放大鏡例子： JavaApplet實現(xiàn)放大鏡

14、效果ActiveX(COM組件) 微軟支持的Web運行插件。JavaApplet實現(xiàn)放大鏡效果服務(wù)器端腳本語言 目前流行的三大服務(wù)器端腳本語言是ASP、PHP、JSP。對于Web服務(wù)器來說，提供一個接口使其它應(yīng)用程序能夠與之相連成為一種常用的方法。通過這個接口，定制的可執(zhí)行程序能夠接收來自客戶端的信息，包括通過點擊超鏈接或在瀏覽器中鍵入統(tǒng)一資源定位符（URL）所提出的界面請求的細節(jié)。應(yīng)用程序?qū)蛻舳说恼埱竽軌蛏上鄳?yīng)的響應(yīng)，而不是從服務(wù)器磁盤上讀取文本或標(biāo)記文件。AJAX技術(shù) AJAX（Asynchronous JavaScript and XML）全稱為“異步JavaScript和XML”，

15、是一種創(chuàng)建交互式Web界面應(yīng)用的開發(fā)技術(shù)，是一種新的架構(gòu)模式。AJAX嘗試建立桌面應(yīng)用程序的功能和交互性與不斷更新的 Web 應(yīng)用程序之間的橋梁。在 Web 應(yīng)用程序中可以使用像桌面應(yīng)用程序中常見的動態(tài)用戶界面和漂亮的控件。 基本流程：創(chuàng)建XMLHttpRequest類，發(fā)送請求，響應(yīng)處理，用文本字符串的方式返回服務(wù)器的響應(yīng)，以XMLDocument對象方式返回服務(wù)器的響應(yīng)。Web3D可以簡單的看成是Web技術(shù)和3D技術(shù)相結(jié)合的產(chǎn)物，是互聯(lián)網(wǎng)上實現(xiàn)3D圖形技術(shù)的總稱。2004年被ISO審批通過的由Web3D協(xié)會發(fā)布的新一代國際標(biāo)準X3D，標(biāo)志著Web3D進入了一個新的發(fā)展階段。目前，Web3D

16、技術(shù)已經(jīng)發(fā)展成為一個技術(shù)群，成為網(wǎng)絡(luò)3D應(yīng)用的獨立研究領(lǐng)域。Web3D的核心技術(shù)及特征對比Web3D的瀏覽例子之一Web3D的瀏覽例子之二VRML VRML是一種建模語言，可用來描述三維物體及其行為，構(gòu)建虛擬場景。VRML的基本目標(biāo)是建立Internet上的交互式三維多媒體，其基本特征包括分布式、三維、交互性、多媒體集成、高度真實感等。VRML執(zhí)行模式Java3D Java3D是Java語言在三維圖形領(lǐng)域的擴展，是一組應(yīng)用編程接口（API）。利用Java3D提供的API，可以編寫出基于Web界面的三維動畫、三維游戲等等。 Java3D提出了一種基于視平臺的視模型和輸入設(shè)備模型的技術(shù)實現(xiàn)方案，即通過改變視平臺的位置、方向來瀏覽整個虛擬場景。l視模型視模型 由虛擬環(huán)境和物理環(huán)境兩部分組成。l視平臺視平臺 代表與視對象相關(guān)的一個點，并充當(dāng)確定繪制圖象的基礎(chǔ)。l輸入設(shè)備模型輸入設(shè)備模型