人機(jī)交互與界面設(shè)計(jì)-第1章

人機(jī)交互與界面設(shè)計(jì)交互設(shè)計(jì)計(jì)算機(jī)科學(xué)系范艷芳郵箱：fyfhappy@12023/9/27教學(xué)目標(biāo)掌握人機(jī)交互及界面設(shè)計(jì)的基礎(chǔ)知識(shí)具備初步進(jìn)行Web系統(tǒng)前端開發(fā)的能力能夠在Web系統(tǒng)開發(fā)過程中遵循界面設(shè)計(jì)相關(guān)原則2023/9/272學(xué)生作品12023/9/273學(xué)生作品22023/9/274學(xué)生作品32023/9/275課程安排課時(shí)安排：講課22學(xué)時(shí)，上機(jī)10學(xué)時(shí)課程性質(zhì)：專業(yè)任選課考核方式：總評(píng)成績(jī)=考試成績(jī)×70%+實(shí)驗(yàn)成績(jī)×20%+平時(shí)成績(jī)×10%考試方式：閉卷教材：《Web程序設(shè)計(jì)（第4版）》（吉根林等主編）參考資料：《人機(jī)交互基礎(chǔ)教程（第2版）》（孟祥旭等編著）、《軟件人機(jī)界面設(shè)計(jì)》（陳啟安主編）等課件郵箱：rjjh15@163.com2023/9/276課程內(nèi)容第1章人機(jī)交互基礎(chǔ)第2章Web應(yīng)用基礎(chǔ)第3章HTML第4章層疊樣式表CSS第5章Web客戶端程序設(shè)計(jì)72023/9/27第1章人機(jī)交互與界面設(shè)計(jì)學(xué)習(xí)要點(diǎn)：理解人機(jī)交互、人機(jī)界面的基本概念了解人機(jī)交互與其他學(xué)科的關(guān)系以及人機(jī)交互的研究?jī)?nèi)容掌握人機(jī)交互發(fā)展的三個(gè)階段掌握Web界面的設(shè)計(jì)原則理解Web界面要素的設(shè)計(jì)2023/9/278目錄1.1人機(jī)交互基礎(chǔ)知識(shí)

1.2界面設(shè)計(jì)2023/9/2791.1

人機(jī)交互基礎(chǔ)知識(shí)1.1.1人機(jī)交互的概念1.1.2人機(jī)交互與其他學(xué)科的關(guān)系1.1.3人機(jī)交互的研究?jī)?nèi)容1.1.4人機(jī)交互的發(fā)展歷史1.1.5人機(jī)交互的應(yīng)用2023/9/27101.1.1

人機(jī)交互的概念人機(jī)交互（Human-ComputerInteraction，HCI）是關(guān)于設(shè)計(jì)、評(píng)價(jià)和實(shí)現(xiàn)供人們使用的交互式系統(tǒng)，且圍繞這些方面的主要現(xiàn)象進(jìn)行研究的學(xué)科。狹義的人機(jī)交互技術(shù)主要研究人與計(jì)算機(jī)之間的信息交換，主要包括人到計(jì)算機(jī)和計(jì)算機(jī)到人的信息交換兩部分。2023/9/2711輸入信息輸出信息鍵盤、鼠標(biāo)、操縱桿、數(shù)據(jù)服裝、眼動(dòng)跟蹤器、數(shù)據(jù)手套、壓力筆，以及手、腳、聲音、姿勢(shì)或身體的動(dòng)作等。打印機(jī)、繪圖儀、顯示器、音箱等1.1.1人機(jī)交互的概念人機(jī)交互與人機(jī)界面人機(jī)交互是指人與計(jì)算機(jī)系統(tǒng)之間的信息交換，它是人與計(jì)算機(jī)之間各種符號(hào)和動(dòng)作的雙向信息交換；人機(jī)界面（又稱用戶界面或使用者界面）是指人與計(jì)算機(jī)系統(tǒng)之間的通信媒介或手段，它是人機(jī)雙向信息交換的支持軟件和硬件；人機(jī)交互致力于人與計(jì)算機(jī)的協(xié)調(diào)，旨在消融這兩個(gè)智能系統(tǒng)間的通訊和對(duì)話界線，使得人與機(jī)器的信息交流便捷而通暢。人機(jī)交互是通過人機(jī)界面實(shí)現(xiàn)的，在界面開發(fā)過程中，有時(shí)把它們作為同義詞使用。2023/9/27121.1.1人機(jī)交互的概念人機(jī)交互與人機(jī)界面從信息傳遞的角度來看，用戶界面的任務(wù)是為人類的感覺和效應(yīng)通道與計(jì)算機(jī)的感知和輸出機(jī)制提供通信接口。從信息轉(zhuǎn)換的角度來看，用戶界面的作用是實(shí)現(xiàn)“用戶認(rèn)知空間”與“計(jì)算機(jī)信息處理空間”間信息的雙向映射。2023/9/27131.1

人機(jī)交互基礎(chǔ)知識(shí)1.1.1人機(jī)交互的概念1.1.2人機(jī)交互與其他學(xué)科的關(guān)系1.1.3人機(jī)交互的研究?jī)?nèi)容1.1.4人機(jī)交互的發(fā)展歷史1.1.5人機(jī)交互的應(yīng)用2023/9/27141.1.2人機(jī)交互與其他學(xué)科的關(guān)系人機(jī)交互與認(rèn)知心理學(xué)、人機(jī)工程學(xué)、多媒體技術(shù)和虛擬現(xiàn)實(shí)與增強(qiáng)現(xiàn)實(shí)技術(shù)密切相關(guān)。認(rèn)知心理學(xué)與人機(jī)工程學(xué)是人機(jī)交互技術(shù)的理論基礎(chǔ)；多媒體技術(shù)和虛擬現(xiàn)實(shí)與增強(qiáng)現(xiàn)實(shí)技術(shù)與人機(jī)交互技術(shù)相互交叉和滲透。2023/9/2715多媒體技術(shù)虛擬和增強(qiáng)現(xiàn)實(shí)技術(shù)人機(jī)交互技術(shù)認(rèn)知心理學(xué)人機(jī)工程學(xué)1.1.2人機(jī)交互與其他學(xué)科的關(guān)系認(rèn)知心理學(xué)研究人們?nèi)绾潍@得外部世界信息，信息在人腦內(nèi)如何表示并轉(zhuǎn)化為知識(shí)，知識(shí)怎樣存儲(chǔ)又如何用來指導(dǎo)人們的注意和行為。將人看作是一個(gè)信息加工的系統(tǒng)，認(rèn)知就是信息加工，包括感覺輸入的編碼、貯存和提取的全過程。涉及心理活動(dòng)的全過程---從感覺到知覺、識(shí)別、注意、學(xué)習(xí)、記憶、概念的形成、思維、表象、回憶、語(yǔ)言、情緒發(fā)展和過程。了解認(rèn)知心理學(xué)原理可以指導(dǎo)人們進(jìn)行人機(jī)交互界面設(shè)計(jì)。2023/9/2716注意是認(rèn)知過程的一部分，通常是指選擇性注意，即有選擇的加工某些刺激而忽視其他刺激的傾向。如：側(cè)耳傾聽某人說話，忽略其他人的交談。1.1.2人機(jī)交互與其他學(xué)科的關(guān)系人機(jī)工程學(xué)把人—機(jī)—環(huán)境系統(tǒng)作為研究的基本對(duì)象，運(yùn)用生理學(xué)、心理學(xué)和其它有關(guān)學(xué)科知識(shí)，根據(jù)人和機(jī)器的條件和特點(diǎn)，合理分配人和機(jī)器承擔(dān)的操作職能，并使之相互適應(yīng)，從而為人創(chuàng)造出舒適和安全的工作環(huán)境，使工效達(dá)到最優(yōu)的一門綜合性學(xué)科。2023/9/27171.1.2人機(jī)交互與其他學(xué)科的關(guān)系多媒體技術(shù)是利用計(jì)算機(jī)對(duì)文本、圖形、圖像、聲音、動(dòng)畫、視頻等多種信息集成在一起的技術(shù)。動(dòng)畫、音頻、視頻等動(dòng)態(tài)媒體，大大豐富了計(jì)算機(jī)表現(xiàn)信息的形式，提高了用戶接受信息的效率。多媒體帶來的信息冗余性還可以消除人機(jī)通信過程中的歧義性。多通道人機(jī)交互研究的興起，將進(jìn)一步提高計(jì)算機(jī)的信息識(shí)別、理解能力，提高人機(jī)交互的效率和用戶友好性，將人機(jī)交互技術(shù)和用戶界面設(shè)計(jì)引向更高的境界。2023/9/2718視線、語(yǔ)音、表情、動(dòng)作、眼神等1.1.2人機(jī)交互與其他學(xué)科的關(guān)系虛擬現(xiàn)實(shí)技術(shù)虛擬現(xiàn)實(shí)技術(shù)是借助于計(jì)算機(jī)技術(shù)及硬件設(shè)備，建立具有高度真實(shí)感的虛擬環(huán)境，使人們通過視覺、聽覺、觸覺、味覺、嗅覺等感官在其中看、聽、觸、聞起來像真實(shí)的，以產(chǎn)生身臨其境的感覺的一種技術(shù)。自然和諧的交互方式是虛擬現(xiàn)實(shí)技術(shù)的一個(gè)重要研究?jī)?nèi)容，其目的是使人能以聲音、動(dòng)作、表情等自然方式與虛擬世界中的對(duì)象進(jìn)行交互。2023/9/27191.1.2人機(jī)交互與其他學(xué)科的關(guān)系增強(qiáng)現(xiàn)實(shí)技術(shù)把原本在現(xiàn)實(shí)世界的一定時(shí)間空間范圍內(nèi)很難體驗(yàn)到的實(shí)體信息(視覺信息,聲音,味道,觸覺等),通過科學(xué)技術(shù)模擬仿真后再疊加到現(xiàn)實(shí)世界被人類感官所感知,從而達(dá)到超越現(xiàn)實(shí)的感官體驗(yàn),這種技術(shù)叫做增強(qiáng)現(xiàn)實(shí)技術(shù),簡(jiǎn)稱AR技術(shù)。

2023/9/27201.1

人機(jī)交互基礎(chǔ)知識(shí)1.1.1人機(jī)交互的概念1.1.2人機(jī)交互與其他學(xué)科的關(guān)系1.1.3人機(jī)交互的研究?jī)?nèi)容1.1.4人機(jī)交互的發(fā)展歷史1.1.5人機(jī)交互的應(yīng)用2023/9/27211.1.3

人機(jī)交互研究?jī)?nèi)容人機(jī)交互界面表示模型與設(shè)計(jì)方法（ModelandMethodology）一個(gè)交互界面的好壞，直接影響到軟件開發(fā)的成敗。友好人機(jī)交互界面的開發(fā)離不開好的交互模型與設(shè)計(jì)方法。因此，研究人機(jī)交互界面的表示模型與設(shè)計(jì)方法，是人機(jī)交互的重要研究?jī)?nèi)容之一。可用性分析與評(píng)估（UsabilityandEvaluation）可用性是交互式IT產(chǎn)品/系統(tǒng)的重要質(zhì)量指標(biāo)，指的是產(chǎn)品對(duì)用戶來說有效、易學(xué)、高效、好記、少錯(cuò)和令人滿意的程度，即用戶能否用產(chǎn)品完成他的任務(wù)，效率如何，主觀感受怎樣，實(shí)際上是從用戶角度所看到的產(chǎn)品質(zhì)量，是產(chǎn)品競(jìng)爭(zhēng)力的核心。人機(jī)交互系統(tǒng)的可用性分析與評(píng)估的研究主要涉及到支持可用性的設(shè)計(jì)原則和可用性的評(píng)估方法等。2023/9/27221.1.3

人機(jī)交互研究?jī)?nèi)容多通道交互技術(shù)（Multi-Channel）在多通道交互中，用戶可以使用語(yǔ)音、手勢(shì)、眼神、表情等自然的交互方式與計(jì)算機(jī)系統(tǒng)進(jìn)行通信。多通道交互主要研究多通道交互界面的表示模型、多通道交互界面的評(píng)估方法以及多通道信息的融合等。其中，多通道信息整合是多通道用戶界面研究的重點(diǎn)和難點(diǎn)。認(rèn)知與智能用戶界面（IntelligentUserInterface，IUI）智能用戶界面的最終目標(biāo)是使人機(jī)交互和人－人交互一樣自然、方便。上下文感知、眼動(dòng)跟蹤、手勢(shì)識(shí)別、三維輸入、語(yǔ)音識(shí)別、表情識(shí)別、手寫識(shí)別、自然語(yǔ)言理解等都是認(rèn)知與智能用戶界面需要解決的重要問題。2023/9/27231.1.3

人機(jī)交互研究?jī)?nèi)容移動(dòng)界面設(shè)計(jì)（MobileandUbicomp）移動(dòng)計(jì)算（MobileComputing）、普適計(jì)算（UbiquitousComputing）等對(duì)人機(jī)交互技術(shù)提出了更高的要求，面向移動(dòng)應(yīng)用的界面設(shè)計(jì)問題已成為人機(jī)交互技術(shù)研究的一個(gè)重要應(yīng)用領(lǐng)域。針對(duì)移動(dòng)設(shè)備的便攜性、位置不固定性和計(jì)算能力有限性以及無線網(wǎng)絡(luò)的低帶寬高延遲等諸多的限制，研究移動(dòng)界面的設(shè)計(jì)方法，移動(dòng)界面可用性與評(píng)估原則，移動(dòng)界面導(dǎo)航技術(shù)，以及移動(dòng)界面的實(shí)現(xiàn)技術(shù)和開發(fā)工具，是當(dāng)前的人機(jī)交互技術(shù)的研究熱點(diǎn)之一。2023/9/27241.1.3

人機(jī)交互研究?jī)?nèi)容群件（Groupware）群件是指幫助群組協(xié)同工作的計(jì)算機(jī)支持的協(xié)作環(huán)境，主要涉及個(gè)人或群組間的信息傳遞、群組中的信息共享、業(yè)務(wù)過程自動(dòng)化與協(xié)調(diào)，以及人和過程之間的交互活動(dòng)等。目前與人機(jī)交互技術(shù)相關(guān)的研究主要包括：群件系統(tǒng)的體系結(jié)構(gòu)、計(jì)算機(jī)支持交流與共享信息的方式、交流中的決策支持工具、應(yīng)用程序共享以及同步實(shí)現(xiàn)方法等內(nèi)容。Web設(shè)計(jì)（Web-Interaction）重點(diǎn)研究Web界面的信息交互模型和結(jié)構(gòu)，Web界面設(shè)計(jì)的基本思想和原則，Web界面設(shè)計(jì)的工具和技術(shù)，以及Web界面設(shè)計(jì)的可用性分析與評(píng)估方法等內(nèi)容。2023/9/27251.1

人機(jī)交互基礎(chǔ)知識(shí)1.1.1人機(jī)交互的概念1.1.2人機(jī)交互與其他學(xué)科的關(guān)系1.1.3人機(jī)交互的研究?jī)?nèi)容1.1.4人機(jī)交互的發(fā)展歷史1.1.5人機(jī)交互的應(yīng)用2023/9/27261.1.4

人機(jī)交互的發(fā)展歷史人機(jī)交互的發(fā)展過程，是人適應(yīng)計(jì)算機(jī)到計(jì)算機(jī)不斷地適應(yīng)人的發(fā)展過程。它經(jīng)歷了幾個(gè)階段：圖形用戶界面自然和諧的交互命令行2023/9/27271.1.4

人機(jī)交互的發(fā)展歷史語(yǔ)言命令交互階段計(jì)算機(jī)語(yǔ)言經(jīng)歷了由最初的機(jī)器語(yǔ)言，而后是匯編語(yǔ)言，直至高級(jí)語(yǔ)言的發(fā)展過程。這個(gè)過程也可以看作早期的人機(jī)交互的一個(gè)發(fā)展過程。機(jī)器語(yǔ)言和匯編語(yǔ)言對(duì)使用者提出了較高的要求，且使用時(shí)效率低下，容易出錯(cuò)。高級(jí)語(yǔ)言使用人們比較習(xí)慣的符號(hào)形式描述計(jì)算過程，降低了對(duì)人的要求。命令行界面可以看作是第一代人機(jī)界面。輸入信息為數(shù)據(jù)和命令信息，輸出信息以字符為主。2023/9/27281.1.4

人機(jī)交互的發(fā)展歷史圖形用戶界面（GUI）交互階段圖形用戶界面（GraphicalUserInterface，GUI）的出現(xiàn)，使人機(jī)交互方式發(fā)生了巨大變化。GUI的主要特點(diǎn)是桌面隱喻、WIMP(Window,Icon,Menu,PointingDevice)技術(shù)、直接操縱和“所見即所得(WYSIWYG—WhatYouSeeIsWhatYouGet)”。與命令行界面相比，圖形用戶界面的人機(jī)交互自然性和效率都有較大的提高。2023/9/2729指用戶界面中用人們熟悉的桌面上的圖例清楚地表示計(jì)算機(jī)可以處理的能力。人機(jī)交互領(lǐng)域最普遍的電腦互動(dòng)界面：包括視窗、圖標(biāo)、菜單、定位設(shè)備。指可以把操作的對(duì)象、屬性、關(guān)系顯式地表示出來，用光筆、鼠標(biāo)、觸摸屏或數(shù)據(jù)手套等指點(diǎn)設(shè)備直接從屏幕上獲取形象化命令與數(shù)據(jù)的過程。在WYSIWYG交互界面中，其所顯示的用戶交互行為與應(yīng)用程序最終產(chǎn)生的結(jié)果是一致的。1.1.4

人機(jī)交互的發(fā)展歷史自然和諧的人機(jī)交互階段隨著虛擬現(xiàn)實(shí)、移動(dòng)計(jì)算、普適計(jì)算等技術(shù)的飛速發(fā)展，自然和諧的人機(jī)交互方式得到了一定的發(fā)展?；谡Z(yǔ)音、手寫體、姿勢(shì)、視線跟蹤、表情等輸入手段的多通道交互是其主要特點(diǎn)，其目的是使人能以聲音、動(dòng)作、表情等自然方式進(jìn)行交互操作。筆式交互設(shè)備語(yǔ)音交互設(shè)備視覺交互設(shè)備虛擬環(huán)境中的交互設(shè)備觸覺交互設(shè)備2023/9/27301.1

人機(jī)交互基礎(chǔ)知識(shí)1.1.1人機(jī)交互的概念1.1.2人機(jī)交互與其他學(xué)科的關(guān)系1.1.3人機(jī)交互的研究?jī)?nèi)容1.1.4人機(jī)交互的發(fā)展歷史1.1.5人機(jī)交互的應(yīng)用2023/9/27311.1.5人機(jī)交互的應(yīng)用制造業(yè)在制造業(yè)領(lǐng)域，人機(jī)交互技術(shù)已用于產(chǎn)品設(shè)計(jì)、裝配仿真等各個(gè)環(huán)節(jié)，利用立體投影系統(tǒng)等各種交互設(shè)備，構(gòu)建產(chǎn)品的虛擬仿真平臺(tái)。2023/9/2732法國(guó)標(biāo)志雪鐵龍公司的工業(yè)仿真系統(tǒng)平臺(tái)，可進(jìn)行汽車設(shè)計(jì)的檢視、虛擬裝配與協(xié)同項(xiàng)目的檢測(cè)等等。1.1.5人機(jī)交互的應(yīng)用教育科研已有一些科研機(jī)構(gòu)研發(fā)出沉浸式的虛擬世界，通過和諧自然的交互操作手段，讓學(xué)習(xí)者在虛擬世界自如地探索未知世界。2023/9/2733圖示為一個(gè)沉浸式協(xié)同環(huán)境，可以支持兒童建造一個(gè)虛擬花園，并通過佩戴立體眼鏡沉浸在一個(gè)虛擬場(chǎng)景中，進(jìn)行播種、澆水、調(diào)整光照以及觀察植物的生長(zhǎng)等。1.1.5人機(jī)交互的應(yīng)用軍事軍事戰(zhàn)略戰(zhàn)術(shù)演練和培訓(xùn)領(lǐng)域是刺激交互技術(shù)發(fā)展的源動(dòng)力。使用計(jì)算機(jī)仿真技術(shù)不僅降低成本而且可方便地改變環(huán)境和條件，適用于特殊，危險(xiǎn)等環(huán)境。2023/9/2734F-35戰(zhàn)斗機(jī)是第一種在座艙里取消了平視顯示器(HUD)的量產(chǎn)戰(zhàn)斗機(jī)，F(xiàn)-35的飛行員將在其頭盔綜合顯示器(HMD)面罩上的虛擬平板顯示器上讀取所有數(shù)據(jù)。F-35戰(zhàn)斗機(jī)F-35的頭盔顯示器1.1.5人機(jī)交互的應(yīng)用生活生物特征識(shí)別技術(shù)得到廣泛應(yīng)用。指紋識(shí)別和人臉表情識(shí)別技術(shù)廣泛應(yīng)用于人們?nèi)粘Ｉ畹耐ㄐ胚^程或者安全保護(hù)。2023/9/27351.1.5人機(jī)交互的應(yīng)用生活蘋果iPhone等智能機(jī)采用多種交互技術(shù)憑借電場(chǎng)感應(yīng)手指的觸碰內(nèi)置方向感應(yīng)器對(duì)動(dòng)作做出反應(yīng)，當(dāng)屏幕方向轉(zhuǎn)變時(shí)，方向感應(yīng)器會(huì)自動(dòng)做出反應(yīng)并改變顯示方式通過距離感應(yīng)器感應(yīng)距離，當(dāng)電話靠近耳邊時(shí)，自動(dòng)關(guān)閉屏幕以節(jié)省電力并防止意外觸碰通過環(huán)境光線感應(yīng)器自動(dòng)調(diào)節(jié)屏幕亮度根據(jù)輸入的拼音或筆畫建議并預(yù)測(cè)可能輸入的單詞或詞組通過語(yǔ)音控制功能直接撥打電話或播放音樂2023/9/27361.1.5人機(jī)交互的應(yīng)用生活蘋果iPhone等智能機(jī)采用多種交互技術(shù)多觸點(diǎn)式觸摸屏技術(shù)（Multi-Touch）豐富和人性化的視覺反饋2023/9/27371.1.5人機(jī)交互的應(yīng)用文化娛樂在影視制作領(lǐng)域，動(dòng)作捕捉設(shè)備已經(jīng)得到了廣泛應(yīng)用。如圖展示了“加勒比海盜3”制作過程中，運(yùn)動(dòng)捕捉實(shí)驗(yàn)室場(chǎng)景和最終合成的影片效果。2023/9/27381.1.5人機(jī)交互的應(yīng)用體育運(yùn)動(dòng)捕捉系統(tǒng)在體育訓(xùn)練中可以幫助教練員從不同的視角觀察和監(jiān)控運(yùn)動(dòng)員的技術(shù)動(dòng)作，并大量地獲取某類技術(shù)動(dòng)作的運(yùn)動(dòng)參數(shù)及生理生化指標(biāo)等數(shù)據(jù)，并統(tǒng)計(jì)出其運(yùn)動(dòng)規(guī)律，為科學(xué)訓(xùn)練提供標(biāo)準(zhǔn)規(guī)范的技術(shù)指導(dǎo)。2023/9/2739曲棍球訓(xùn)練系統(tǒng)小結(jié)人機(jī)交互是人與計(jì)算機(jī)系統(tǒng)之間的雙向信息交換；人機(jī)界面是人與計(jì)算機(jī)系統(tǒng)之間的通信媒介或手段。人機(jī)交互以認(rèn)知心理學(xué)、人機(jī)工程學(xué)為基礎(chǔ)，與多媒體技術(shù)和虛擬、增強(qiáng)現(xiàn)實(shí)技術(shù)密切相關(guān)。人機(jī)交互經(jīng)歷了語(yǔ)言命令交互階段、圖形用戶界面交互，目前正向著和諧自然的人機(jī)交互方向發(fā)展。2023/9/2740目錄1.1人機(jī)交互基礎(chǔ)知識(shí)

1.2界面設(shè)計(jì)2023/9/27412023/9/27421.2界面設(shè)計(jì)1.2.1界面設(shè)計(jì)原則1.2.2Web界面設(shè)計(jì)問題的提出1.2.3

Web界面設(shè)計(jì)原則1.2.4Web界面要素設(shè)計(jì)1.2.1

界面設(shè)計(jì)原則命令行界面可以看作是第一代人機(jī)界面，其中人被看成操作員，機(jī)器只做出被動(dòng)的反應(yīng)，人用手操作鍵盤，輸入數(shù)據(jù)和命令信息，通過視覺通道獲取信息，界面輸出只能為靜態(tài)的文本字符。圖形界面可看作是第二代人機(jī)界面，是基于圖形方式的人機(jī)界面。由于引入了圖標(biāo)、按鈕和滾動(dòng)條技術(shù)，大大減少了鍵盤輸入，提高了交互效率。多通道用戶界面則進(jìn)一步綜合采用視覺、語(yǔ)音、手勢(shì)等新的交互通道、設(shè)備和交互技術(shù)，使用戶利用多個(gè)通道以自然、并行、協(xié)作的方式進(jìn)行人機(jī)對(duì)話，通過整合來自多個(gè)通道的、精確的或不精確的輸入來捕捉用戶的交互意圖，提高人機(jī)交互的自然性和高效性。2023/9/27431.2.1

界面設(shè)計(jì)原則圖形用戶界面的主要思想桌面隱喻桌面隱喻是指在用戶界面中用人們熟悉的桌面上的圖例清楚地表示計(jì)算機(jī)可以處理的能力。所見即所得在WYSIWYG交互界面中，其所顯示的用戶交互行為與應(yīng)用程序最終產(chǎn)生的結(jié)果是一致的。2023/9/27441.2.1

界面設(shè)計(jì)原則圖形用戶界面的主要思想直接操縱直接操縱是指可以把操作的對(duì)象、屬性、關(guān)系顯式地表示出來，用光筆、鼠標(biāo)、觸摸屏或數(shù)據(jù)手套等指點(diǎn)設(shè)備直接從屏幕上獲取形象化命令與數(shù)據(jù)的過程。直接操縱用戶界面更多地借助物理的、空間的或形象的表示，而不是單純的文字或數(shù)字的表示。心理學(xué)研究證明物理的、空間的或形象的表示有利于解決問題和進(jìn)行學(xué)習(xí)。直接操縱用戶界面的操縱模式和命令界面相反，用戶只需關(guān)注其要控制和操作的對(duì)象的任務(wù)語(yǔ)義即可，無需為計(jì)算機(jī)語(yǔ)義和句法分心。打印圖標(biāo)，存盤圖標(biāo)2023/9/27451.2.1

界面設(shè)計(jì)原則圖形用戶界面設(shè)計(jì)的一般原則界面要具有一致性例如：在菜單和聯(lián)機(jī)幫助中必須使用相同的術(shù)語(yǔ)；對(duì)話框具有相同的風(fēng)格；在同一個(gè)用戶界面中，所有的菜單選擇、命令輸入、數(shù)據(jù)顯示和其他功能保持一致的風(fēng)格。常用操作要有快捷方式為常用操作設(shè)計(jì)快捷方式，可以提高用戶的工作效率。常用操作的使用頻度大，應(yīng)減少操作序列的長(zhǎng)度。定義的快捷鍵最好與流行軟件的快捷鍵一致。如：拷貝使用Ctrl+C，存盤用Ctrl+S。2023/9/27461.2.1

界面設(shè)計(jì)原則圖形用戶界面設(shè)計(jì)的一般原則提供必要的錯(cuò)誤處理功能在出現(xiàn)錯(cuò)誤時(shí)，系統(tǒng)應(yīng)該能檢測(cè)出錯(cuò)誤，并且提供簡(jiǎn)單和容易理解的錯(cuò)誤處理功能。比如：在進(jìn)行了內(nèi)容更改而未存盤時(shí)，選擇關(guān)閉應(yīng)用軟件會(huì)彈出一個(gè)對(duì)話框，讓用戶確認(rèn)是否執(zhí)行關(guān)閉操作，以避免用戶誤操作。提供信息反饋對(duì)操作人員的重要操作要有信息反饋。用戶界面應(yīng)能對(duì)用戶的決定做出及時(shí)的響應(yīng)，提高對(duì)話效率，盡量減少擊鍵次數(shù)，縮短鼠標(biāo)移動(dòng)距離。允許操作可逆2023/9/27471.2.1

界面設(shè)計(jì)原則圖形用戶界面設(shè)計(jì)的一般原則設(shè)計(jì)良好的聯(lián)機(jī)幫助人機(jī)界面應(yīng)提供上下文敏感的求助系統(tǒng)，讓用戶及時(shí)獲得幫助，盡量用簡(jiǎn)短的動(dòng)詞和動(dòng)詞短語(yǔ)提示命令。合理劃分并高效地使用顯示屏幕只顯示與上下文有關(guān)的信息；允許用戶對(duì)可視環(huán)境進(jìn)行維護(hù)，如放大、縮小窗口；只顯示有意義的出錯(cuò)信息；隱藏當(dāng)前狀態(tài)下不可用的命令。2023/9/27481.2.1

界面設(shè)計(jì)原則顏色的使用原則合理使用彩色顯示可以美化人機(jī)界面外觀，同時(shí)加快對(duì)有用信息的尋找速度，減少錯(cuò)誤。限制同時(shí)顯示的顏色數(shù)。使用過多顏色的屏幕反而不利于區(qū)分顏色及顏色的含義，在非必要情況下，顯示使用的顏色寧少勿多。

畫面中活動(dòng)對(duì)象的顏色應(yīng)鮮明，而非活動(dòng)對(duì)象應(yīng)暗淡；前景色應(yīng)鮮艷一些，背景則應(yīng)暗淡一些。盡量避免不相容的顏色放在一起，如黃與藍(lán)，紅與綠等，除非作對(duì)比時(shí)用。若用顏色表示某種信息或?qū)ο髮傩?，要使用戶理解這種表示，并盡量采用通用的表示規(guī)則。2023/9/2749圖標(biāo)的設(shè)計(jì)設(shè)計(jì)圖標(biāo)時(shí)應(yīng)該著重考慮視覺沖擊力，要使用簡(jiǎn)單的顏色，利用眼睛對(duì)色彩和網(wǎng)點(diǎn)的空間混合效果，做出精彩圖標(biāo)。設(shè)計(jì)圖標(biāo)時(shí)須遵守的原則和方法：圖標(biāo)的圖形應(yīng)該和目標(biāo)的外形相似，盡量避免過于抽象?？稍趫D標(biāo)中附加上簡(jiǎn)要的文本標(biāo)注，使用戶明確圖標(biāo)的含義。設(shè)計(jì)圖標(biāo)應(yīng)盡可能簡(jiǎn)單（三維的圖標(biāo)雖然醒目但也能使人分心），符合常規(guī)的表達(dá)習(xí)慣，保持圖標(biāo)含義的前后連貫。1.2.1

界面設(shè)計(jì)原則2023/9/27501.2.1

界面設(shè)計(jì)原則按鈕的設(shè)計(jì)原則：具有交互性，應(yīng)該有3到5種狀態(tài)效果：點(diǎn)擊時(shí)的狀態(tài)鼠標(biāo)放在上面但未點(diǎn)擊的狀態(tài)點(diǎn)擊前鼠標(biāo)未放在上面時(shí)的狀態(tài)點(diǎn)擊后鼠標(biāo)未放在上面時(shí)的狀態(tài)不能點(diǎn)擊時(shí)的狀態(tài)按鈕應(yīng)具備簡(jiǎn)潔的圖示效果，應(yīng)能夠讓使用者產(chǎn)生功能上的關(guān)聯(lián)反應(yīng)。屬于一個(gè)群組的按鈕應(yīng)該風(fēng)格統(tǒng)一，功能差異大的按鈕應(yīng)該有所區(qū)別。2023/9/2751屏幕布局的設(shè)計(jì)：屏幕布局顯示信息是由計(jì)算機(jī)系統(tǒng)向用戶提供的反饋信息，屏幕顯示界面的設(shè)計(jì)應(yīng)能展現(xiàn)這些信息。設(shè)計(jì)屏幕布局時(shí)應(yīng)該使各功能區(qū)重點(diǎn)突出，應(yīng)遵循如下幾條原則：平衡原則：屏幕上下左右平衡預(yù)期原則：屏幕上所有對(duì)象處理一致化，使對(duì)象的操作結(jié)果可預(yù)期經(jīng)濟(jì)原則：提供足夠信息量的同時(shí)要注意簡(jiǎn)明、清晰順序原則：按照需要排列順序規(guī)則化：畫面應(yīng)對(duì)稱，顯示應(yīng)盡量統(tǒng)一規(guī)范1.2.1

界面設(shè)計(jì)原則2023/9/27521.2.1

界面設(shè)計(jì)原則填表輸入界面的設(shè)計(jì)在處理大量相關(guān)數(shù)據(jù)的場(chǎng)合下，需要輸入一系列的數(shù)據(jù)，這時(shí)填表輸入界面是最理想的數(shù)據(jù)輸入界面。填表輸入界面的特點(diǎn)：有明確的提示，使用戶可以不需要學(xué)習(xí)、訓(xùn)練，也不必記憶有關(guān)的語(yǔ)義、語(yǔ)法規(guī)則。填表輸入界面充分地利用了屏幕空間。在填表輸入方式中，可以充分利用上下文信息，幫助用戶完成輸入。2023/9/27531.2.1界面設(shè)計(jì)原則舉例：觀察以下填表輸入界面，說出修改意見。統(tǒng)一了標(biāo)簽和按鈕的設(shè)計(jì)，使它們看起來更像控件；所有欄目的標(biāo)題文本靠左對(duì)齊；使用灰色背景代替原有白色背景。使用淺黃色作標(biāo)題行的底色，代替原有灰色；頂部的標(biāo)簽從右邊移動(dòng)到左邊；底部的按鈕被重新排列。顏色設(shè)計(jì)2023/9/27542023/9/27551.2界面設(shè)計(jì)1.2.1界面設(shè)計(jì)原則1.2.2Web界面設(shè)計(jì)問題的提出1.2.3

Web界面設(shè)計(jì)原則1.2.4Web界面要素設(shè)計(jì)2023/9/27561.2.2Web界面設(shè)計(jì)問題的提出Web界面設(shè)計(jì)是人機(jī)交互界面設(shè)計(jì)的一個(gè)延伸，是人與計(jì)算機(jī)交互的演變。Web界面設(shè)計(jì)與Web界面的外觀直接相關(guān)。Web界面外觀是否友好直接關(guān)系到能否吸引人的關(guān)注。人性化的設(shè)計(jì)是Web界面設(shè)計(jì)的核心。如何根據(jù)人的心理、生理特征，運(yùn)用技術(shù)手段，創(chuàng)造簡(jiǎn)單、友好的界面，是Web界面設(shè)計(jì)的重點(diǎn)。2023/9/27571.2界面設(shè)計(jì)1.2.1界面設(shè)計(jì)原則1.2.2Web界面設(shè)計(jì)問題的提出1.2.3

Web界面設(shè)計(jì)原則1.2.4Web界面要素設(shè)計(jì)2023/9/27581.2.3Web界面設(shè)計(jì)原則以用戶為中心一致性簡(jiǎn)潔與明確體現(xiàn)特色兼顧不同的瀏覽器良好的導(dǎo)航設(shè)計(jì)2023/9/27591以用戶為中心的設(shè)計(jì)原則把用戶放在第一位，重點(diǎn)考慮用戶的需求。既考慮用戶的共性，又考慮用戶之間的差異性；不同類型的Web網(wǎng)站，訪問群體不同；同一類型的Web網(wǎng)站，用戶群也存在年齡、行業(yè)差別。網(wǎng)站示例1針對(duì)女性的網(wǎng)站盡量選用柔和、明快的暖色作為主色調(diào)，給女性瀏覽者以熱情、柔美的感覺。在頁(yè)面構(gòu)成上，可選用大量清晰度高的圖片做視覺沖擊。網(wǎng)站示例2針對(duì)男性的網(wǎng)站常采用簡(jiǎn)潔明了的表現(xiàn)方式，色調(diào)多由冷色調(diào)構(gòu)成。網(wǎng)站示例3針對(duì)兒童的網(wǎng)站，設(shè)計(jì)界面兼具活潑有趣，多一些卡通形象。2023/9/27601以用戶為中心的設(shè)計(jì)原則把用戶放在第一位，重點(diǎn)考慮用戶的需求。網(wǎng)站示例4針對(duì)老年人的網(wǎng)站，應(yīng)考慮采用較大的字體，直截了當(dāng)?shù)男畔@示和簡(jiǎn)單的瀏覽方式?？紤]目標(biāo)用戶的行為方式。行為方式是人們由于年齡、性別、地區(qū)、種族、生活習(xí)俗、職業(yè)、受教育程度等形成的動(dòng)作習(xí)慣、辦事方法。行為方式直接影響人們對(duì)網(wǎng)站的操作使用，是設(shè)計(jì)者需要加以考慮和利用的因素。2023/9/27612023/9/27622023/9/27632023/9/27642023/9/27652023/9/27662023/9/2767682023/9/27692023/9/272023/9/27702023/9/27712一致性原則Web界面的內(nèi)容和形式應(yīng)一致。內(nèi)容包括：網(wǎng)站顯示的信息，如數(shù)據(jù)、文字內(nèi)容等。形式包括：Web界面設(shè)計(jì)的版式、構(gòu)圖、布局、色彩、風(fēng)格等。網(wǎng)頁(yè)的形式為內(nèi)容服務(wù)，不同內(nèi)容的網(wǎng)頁(yè)用不同的設(shè)計(jì)形式。2023/9/27722一致性原則Web界面自身的風(fēng)格應(yīng)一致。網(wǎng)站標(biāo)識(shí)及頁(yè)面設(shè)計(jì)標(biāo)準(zhǔn)確定后，應(yīng)運(yùn)用到每個(gè)頁(yè)面上。每個(gè)頁(yè)面都使用相同的頁(yè)邊距；文本、圖形之間保持相同的間距；主要圖形、標(biāo)題或符號(hào)旁邊留下相同的空白；若使用圖標(biāo)導(dǎo)航，則各個(gè)界面應(yīng)當(dāng)使用相同的圖標(biāo)；頁(yè)面上的每個(gè)元素要與整個(gè)頁(yè)面的設(shè)計(jì)風(fēng)格一致；文字的顏色應(yīng)和圖像的顏色保持一致，并注意色彩搭配的和諧。2023/9/27732023/9/27742023/9/27752023/9/27763簡(jiǎn)潔與明確原則保持簡(jiǎn)潔的常用做法是使用醒目的標(biāo)題，通常標(biāo)題采用圖形來表示；限制所用的字體和顏色的數(shù)目；界面上所有的元素都有明確的含義和用途；界面上每一個(gè)元素都能讓瀏覽者看到；3次點(diǎn)擊原則：通常情況下，訪問者應(yīng)該最多通過3次點(diǎn)擊就能在網(wǎng)站上找到想要的信息。主頁(yè)的訪問率為100人次的情況下，下一頁(yè)的訪問率會(huì)降到30-50人次。有時(shí)需要打破3次點(diǎn)擊原則。比如電子商務(wù)網(wǎng)站，用戶可能需3次以上點(diǎn)擊才能找到想要的商品。如果一定遵循3次點(diǎn)擊原則，可能造成一個(gè)頁(yè)面上必須面對(duì)大量的可選商品，這會(huì)使用戶感到困惑，甚至索性什么都不買。2023/9/27772023/9/27782023/9/27792023/9/27802023/9/27812023/9/27824體現(xiàn)特色的原則特色鮮明的網(wǎng)站更容易在一瞬間打動(dòng)它的瀏覽者，留下令人心動(dòng)的第一印象；應(yīng)清楚Web網(wǎng)站用戶的基本情況，從而在網(wǎng)站設(shè)計(jì)時(shí)做到有的放矢，呈現(xiàn)關(guān)鍵信息；利用邏輯結(jié)構(gòu)有序組織、開發(fā)頁(yè)面設(shè)計(jì)原型，通過測(cè)試和逐步精煉，形成網(wǎng)站的明確特點(diǎn)。2023/9/27832023/9/27842023/9/27852023/9/27862023/9/2787882023/9/27892023/9/272023/9/27905兼顧不同瀏覽器的原則網(wǎng)站的瀏覽者可能使用不同類型和版本的瀏覽器。IE瀏覽器，opera瀏覽器，火狐瀏覽器（Firefox），Google瀏覽器（GoogleChrome）等；IE瀏覽器的版本：IE6，IE7，IE8，IE9，IE10。以某一個(gè)瀏覽器的某一個(gè)版本為依據(jù)編寫的網(wǎng)頁(yè)程序，可能在其它的瀏覽器或其它版本上不能正常顯示。根據(jù)用戶瀏覽器分布情況來確定所面向的瀏覽器類別和版本，并在盡可能多的瀏覽器中測(cè)試網(wǎng)站。通過使用JavaScript等編程工具或功能，探測(cè)用戶瀏覽器的類型和版本等參數(shù)對(duì)于某特定功能的支持情況，然后根據(jù)探測(cè)結(jié)構(gòu)顯示適用于特定瀏覽器的網(wǎng)頁(yè)內(nèi)容。2023/9/27912023/9/27922023/9/27936明確的導(dǎo)航設(shè)計(jì)的原則導(dǎo)航系統(tǒng)是網(wǎng)站的路徑指示系統(tǒng)，用于指導(dǎo)瀏覽者有效地訪問網(wǎng)站。Web導(dǎo)航應(yīng)該幫助用戶理解他們?cè)谀睦?、他們能去哪里、他們?cè)鯓荧@得其他信息。好的導(dǎo)航系統(tǒng)可以使用戶以一種滿意的方式找到需要的信息。導(dǎo)航系統(tǒng)的設(shè)計(jì)應(yīng)從使用者的角度出發(fā)，力爭(zhēng)簡(jiǎn)便、清晰和完整一致。942023/9/27952023/9/27962023/9/272023/9/27971.2界面設(shè)計(jì)1.2.1界面設(shè)計(jì)原則1.2.2Web界面設(shè)計(jì)問題的提出1.2.3

Web界面設(shè)計(jì)原則1.2.4Web界面要素設(shè)計(jì)2023/9/27981.2.4

Web界面要素設(shè)計(jì)Web界面規(guī)劃文化與語(yǔ)言內(nèi)容設(shè)計(jì)Web界面布局Web界面色彩Web界面的文本設(shè)計(jì)Web界面的動(dòng)畫與多媒體Web界面上的導(dǎo)航2023/9/27991Web界面規(guī)劃明確網(wǎng)站的目標(biāo)和用途；網(wǎng)頁(yè)布局、元素設(shè)計(jì)應(yīng)以網(wǎng)站的目標(biāo)為中心，從各方面表現(xiàn)站點(diǎn)的目標(biāo)；在制定建立站點(diǎn)的目標(biāo)時(shí)，應(yīng)將站點(diǎn)作為一種文化、一種藝術(shù)來看，力求在設(shè)計(jì)Web頁(yè)面時(shí)追求藝術(shù)效果與美感；確定了Web頁(yè)面設(shè)計(jì)目標(biāo)后，需要確定Web網(wǎng)站的用戶群體，進(jìn)行以用戶為中心的設(shè)計(jì)，既考慮用戶的共性，又考慮用戶的差