第四單元人機介面行動技術第一章人機介面與互動設計

(1)

南臺科技大學 資訊工程系李育強助理教授 1

第四單元人機介面行動技術

(2)

第一章人機介面與互動設計

2

(3)

outline

 １-１初探人機介面與互動設計

 １-２軟硬體設備與介面

3

(4)

１-１初探人機介面與互動設計



人機介面（Human–Computer Interaction 或 Human–Machine Interaction，簡稱HCI或HMI）：指的是系統與用戶之間的互動關係。



人因工程（Ergonomics）：指的是人與環境或所使用的工具之間的適合程度。早期致力於改善人機互動的實體及操作環境。計算機的出現，使得人與機器在心理面上的適合度問題逐漸受到重視。



人機互動自1980年代開始，逐漸成為一門研究領域，包含：互動系統的評估、設計與建置。



互動設計（Interaction Design）：設計可供互動的產品，以支援日常生活的應用以及工作上的需求。

4

(5)

１-１初探人機介面與互動設計

 人機介面：

 使用者與機器之間的使用介面，使用者可透過該介面來控制機器。目的在於使用者能夠方便有效率地去操作機器以達成雙向之互動，以借助機器完成所希望之工作。

 人機介面或人機互動介面大量運用在工業與商業上，可簡單的區分為「輸入」與「輸出」兩種。

 使用者可透過輸入裝置來輸入指令，並由輸出裝置來回應使用者以達到人機互動的效果，而使用者與機器之間的互動媒介則稱為人機介面。

5

(6)

１-１初探人機介面與互動設計

 現有的人機介面涵蓋範圍非常廣泛，舉例來說：

 鍵盤、滑鼠、數位版等等資料輸入的裝置。

 顯示螢幕、聲音等等輸出裝置。

 參考文件、線上說明、教學課程等等輔助使用之材料。

 收音機的播放按鍵。各種數位儀錶板。

 發電廠的控制室。

 人機互動的模式，系統反應之型態…等等。

6

使用者輸入裝置輸出裝置

(7)

１-１初探人機介面與互動設計

7



鍵盤、滑鼠、數位版等等資料輸入的裝置

(8)

１-１初探人機介面與互動設計

8



顯示螢幕、喇叭等等輸出裝置

(9)

１-１初探人機介面與互動設計

9

(10)

１-１初探人機介面與互動設計

10



參考文件、線上說明、教學課程等等輔助使用之材料

(11)

１-１初探人機介面與互動設計

11



各種的播放按鍵

(12)

１-１初探人機介面與互動設計

12



各種儀錶板

 電源供應器

(13)

１-１初探人機介面與互動設計

13

 訊號產生器

(14)

１-１初探人機介面與互動設計

 以使用者為中心來考量：

 人機介面互動系統，是為創造互動體驗。因此，應以人為中心來思考及設計。

 必須以無生命的機器設備來適應各種不同背景、不同程度、不同年齡、不同操作經驗的使用者。

 在各種不同操作環境之下與使用者產生適當良好的互動關係。

輔助使用者讓使用者簡單、迅速、直覺的操作以順利並且有效率地完成所需要的工作。

 以較人性化的操作方式來達成使用者的要求。

14

(15)

１-１初探人機介面與互動設計

 好的人機介面互動系統：

 易學、易用。

 提供有趣的使用經驗。

 可以使系統配合使用者操作習慣。

 不管是任何背景的使用者都可以很清楚地知道系統可以幫他完成什麼事情。

 使用者可以清楚地知道系統如何一步一步地幫他達成他的需求。

 使用者可以清楚地預測系統會如何回應他的操作。

 使用者可以很簡潔地勾勒出與系統之間應該要有的互動方式。

 使用者不會覺得系統無法溝通、不會產生焦慮、恐懼、與不安等等恐懼症候群。

15

(16)

１-１初探人機介面與互動設計

16

 使用者對於好用與難用的人機介面的反應

好用時的反應難用時的反應

(17)

１-１初探人機介面與互動設計

 下列的人性因素都和人機介面互動系統有著密切的關係，直接或間接地影響人機介面互動系統的效能

 人類處理資訊的模式（Human Information Process Model）

 感覺(Sensory)

 視覺(Vision）

 認知(Cognition)

 記憶(Memory)

 反應(Reaction)

 個別差異(Individual Differences)

 社會文化差異(Social and Cultural Difference)

17

(18)

１-１初探人機介面與互動設計

18

 人類處理資訊的模式 (Human Information Process Model)

 人體接收訊息過程

感受到環境刺激大腦組織分析身體行為反應

(19)

１-１初探人機介面與互動設計

19



感覺(Sensory)：



視覺(Vision）：



一種視覺誤差的圖。

(20)

１-１初探人機介面與互動設計

20

 人類視覺的可見度波長

紫外光紅外光

380 430 480 490 500 560 580 595 650 780 可見光

不可不可見光

見光

(21)

１-１初探人機介面與互動設計

21

 認知 (Cognition)：

 記憶 (Memory)：

 下圖為人類記憶圖 [4]

刺激

感覺記憶過濾辨識選擇短期記憶長期記憶

注意

(22)

１-１初探人機介面與互動設計

22

 反應 (Reaction)：

(23)

１-１初探人機介面與互動設計

23

 個別差異 (Individual Differences)：

 社會文化差異 (Social and Cultural Difference)：

(24)

１-２軟硬體設備與介面

24

 硬體設備：



硬體指的就是互動機器中電子以及機械的部份，也就是所說實體元件；簡單來說，硬體是人類肉眼看得見的實物，

與軟體大為不同，常見的有計算機主機和其他週邊配備。

 使用者在操作電腦系統時可以直接地或是間接地感覺到中央處理單元、記憶體、大量儲存裝置、網路存取介面、螢幕顯示畫面、音效產生裝置等等硬體裝置的效能，快速的硬體裝置可以使得人機介面更為順暢，避免一些等候帶來的誤解。

 在輸出裝置上影像彩度精度的品質、聲音雜訊的多寡、視訊的也都直接影響資訊呈現的品質，造成使用者對於介面的第一個印象。

 底下介紹一些常見的計算機硬體設備。

(25)

１-２軟硬體設備與介面

25

 鍵盤：使用者可透過鍵盤輸入指令。

 滑鼠：使用滑鼠選擇所要執行的操作。

(26)

１-２軟硬體設備與介面

26

 印表機：

 螢幕：使用者所輸入的指令或動作，其結果可透過螢

幕顯示出來。

(27)

１-２軟硬體設備與介面

27

 掃描器：使用者可透過掃瞄器將文件掃瞄成圖檔，以

便透過螢幕顯示出來。

(28)

１-２軟硬體設備與介面

28

 顯示卡：

(29)

１-２軟硬體設備與介面

29

 記憶體：

(30)

１-２軟硬體設備與介面

 軟體介面：



軟體就是一系列按照特定順序組織的指令與資料的集合。



使用者在運用電腦系統來完成他想達到的工作時，受到電腦軟體所採取互動模型限制，例如：軟體介面設計成採用文字命令的方式來運作、也可以設計成採用問答式的方式來運作、或是設計成採取選單選擇的方式來運作、或是設計成直接操作的方式。



軟體可分為「程式語言」、「系統軟體」、「應用程式軟體」…等。

30

(31)

１-２軟硬體設備與介面

31

 程式語言可用來開發各種不同功能的軟體。

 低階語言、高階語言、 Script語言

 低階語言：組合語言

 高階語言： C、C++、C#、Basic……等語言，作為設計作業系統或者其他應用軟體的開發程式語言。

 Script語言：Javascript、VBScript、PHP，可作為

開發相關網頁應用程式

(32)

１-２軟硬體設備與介面

32

 系統軟體為電腦使用提供最基本的功能，負責管理電腦系統中各個獨立的硬體，並協調工作。提供各種應用軟體與硬體系統溝通的管道。

 系統軟體使得電腦使用者和其他軟體將電腦當作一個整體而不需要顧及到底層每個硬體是如何運作的。

 系統軟體包括作業系統和一系列基本的工具（例如：編譯器、資料庫的管理，記憶體的格式化，檔案系統的管理，使用者的身份驗證，驅動的管理，網路連線等方面的工具）。

 較知名的系統軟體如下：

 BeOS

 BSD

 DOS

 Linux

 Mac OS

 OS/2

 Unix

 Windows

 iOS

 Android

 Windows Phone

(33)

１-２軟硬體設備與介面

33

 應用程式軟體則根據使用者和所服務的項目提供不同的功能。

 是為了某些特定用途而開發出來的軟體。

 也可以是一組功能聯繫緊密，互相協力運作的程式的集合，

例如：微軟公司的 Office軟體。

 常見的應用程式軟體：

 文書處理軟體：Microsoft Office

 資料庫管理軟體：Access資料庫

 輔助設計軟體：AutoCAD

 影像處理軟體：Photoshop

 網頁瀏覽軟體：Internet Explorer 瀏覽器、火狐瀏覽器(Firefox)

 網路聊天軟體：MSN、Skype、Yahoo！奇摩即時通

 音樂播放軟體：千千靜聽

 下載管理軟體：迅雷、FlashGet

 防毒軟體：卡巴斯基、小紅傘

 …

(34)

１-２軟硬體設備與介面

34

 一些軟體介面

(35)

１-２軟硬體設備與介面

 輔助與說明：

 適當的說明文件，不管是線上的或是傳統的文件都是當使用者無法明瞭電腦系統究竟可以做什麼? 應該如何來達成工作? 之時輔助使用者建立正確的心智模型，解答疑惑非常有用的工具。

 一些以多媒體(聲音、影像、視訊)和線上展示的教學系統更是直接地帶給使用者實際的操作經驗，超媒體文件讓使用者掌控自己學習的進度。

 一些工具軟體中的範本及精靈以及適合情境之輔助說明，則以工作應用為導向，直接示範給使用者相關近似的操作程序，希望使用者能夠花最少的時間在介面的熟悉上，而將時間投注於完成其預定之工作項目。

35

(36)

１-２軟硬體設備與介面

36

 一些相關說明文件

(37)

１-２軟硬體設備與介面

37

 人機介面的類型可分為以下幾種

 直接操控式介面（direct manipulation）

 功能表選單介面（menu selection）

 填表介面（form filling）

 指令語言介面（command language）

 自然語言介面（natural language）

 …

 上述的人機介面類型都各有其優缺點，其優缺點如下

表所示

(38)

１-２軟硬體設備與介面

38

 各類型人機介面的優缺點如下

介面類型優點缺點

直接操控式介面

（direct manipulation） 1. 視覺化將呈現工作概念 2. 易學、易記

3. 避免錯誤

4. 鼓勵使用者探索

5. 使用者有較高的滿意度

1. 對程式設計會較為困難 2. 需要圖形呈現與點選裝置

功能表選單介面

（menu selection） 1. 學習時間少 2. 減少按鍵次數 3. 功能結構化

4. 使用對話管理工具 5. 容易支援錯誤處理

1. 太多選單會造成認知的危險

2. 可能減慢熟悉使用者的介面認知

3. 浪費螢幕空間 4. 需要快速呈現率

(39)

１-２軟硬體設備與介面

39

介面類型優點缺點

填表介面

（form filling） 1. 簡化資料輸入 2. 需要適度的訓練 3. 對輸入較有幫助 4. 使用表單管理工具

1. 浪費螢幕空間

指令語言介面

（command language） 1. 彈性

2. 適合專家型使用者

3. 使用者較有程式主動權 4. 方便創造使用者定義的 5. 指令

1. 較差的錯誤處理

2. 要有相當的訓練與記憶

自然語言介面

（natural language） 1. 減輕學習語法的負擔

1. 需要清楚說明對話

2. 可能要較多的按鍵次數 3. 無法展現出文章脈

絡

4. 不可預料的

(40)

１-２軟硬體設備與介面

40

 直接操控式介面

(41)

１-２軟硬體設備與介面

41

 功能表選單介面

(42)

１-２軟硬體設備與介面

42

 填表介面

填表功能介面填表功能的表單管理

(43)

１-２軟硬體設備與介面

43

 指令語言介面

 例如C#，可透過指令來控制軟體

private void buttonGen(int count, int numSplit, string sAttrName, Node parNode) {

try {

g = this.CreateGraphics();

ArrayList arrNodeHorList = new ArrayList();

int nVer = this.VerticalScroll.Value; // 若有垂直捲動則要相對移動的數值 int nHor = this.HorizontalScroll.Value; // 若有水平捲動則要相對移動的數值 int level = node.level + 1;

if (arrNodeVerlist.Count - 1 == node.level) arrNodeVerlist.Add(arrNodeHorList);

else if (arrNodeVerlist.Count - 1 < node.level) MessageBox.Show("Error");

(44)

１-２軟硬體設備與介面

44

 命令提示字元

(45)

１-２軟硬體設備與介面

45

 自然語言介面

(46)

參考資料

 【１】D. Benyon, P. Turner, and S. Turner, “Designing Interactive System: People, Activities, Contexts, Technologies,” Addison Wesley , 2005.

 【２】Ｊ. Preece, Y. Rogers, and H. Sharp, “Interaction Design: Beyond Human-Computer Interaction,” John Wiley & Sons, 3rd ed., 2011.

 【３】T. Winograd, “From Computing Machinert to Interaction

Design,” in P. Denning and R. Metcalfe (eds.), Beyond Calculation: The Next Fifty Years of Computing, New York: Springer-Verlag, pp. 149- 162, 1997.

 【４】陳智宣，應用美度與感性工學於畫面型使用者介面評價之研究，

成功大學碩士論文，２００４.０７。

 【５】唐國豪，人與機器的對話：人機互動，科學發展，368期，頁18- 23，２００３。

 【６】維基百科，人機互動，

http://zh.wikipedia.org/wiki/%E4%BA%BA%E6%9C%BA%E4%BA%A 4%E4%BA%92

，２０１２.０９.０１讀取。

46

第四單元 人機介面行動技術 第一章 人機介面與互動設計