← 返回目錄

Chapter 11Designing Interfaces and Dialogues
設計介面與對話

Learning Objectives 學習目標

  1. Design the system interfaces and dialogues for human-computer interaction — 設計人機互動的系統介面與對話
  2. Describe the different types of dialogues and their design guidelines — 描述不同類型的對話及其設計準則
  3. Explain the importance of help systems and error handling in interface design — 說明輔助系統與錯誤處理在介面設計中的重要性
  4. Discuss web-based interface design considerations — 討論網頁式介面設計的考量因素

Key Terms 關鍵術語

Interface Design
介面設計
定義人類與電腦之間交換資訊的方式,包含輸入與輸出的規劃
Dialogue Design
對話設計
介面畫面的順序安排,類似兩人之間的對話,決定使用者與系統互動的流程
Dialogue Diagram
對話圖
顯示系統中所有對話及其順序關係的結構圖,用於規劃介面流程
Human-Computer Interaction (HCI)
人機互動
研究人與電腦之間互動設計的學科,關注使用者經驗與可用性
Navigation Design
導航設計
規劃使用者在系統中移動的方式和路徑,確保操作直覺且高效
Breadcrumb Trail
麵包屑導航
顯示使用者目前在網站結構中位置的導航元素,幫助使用者了解所在層級
Menu Bar
選單列
水平排列於應用程式頂部的選單,提供主要功能分類的存取點
Pop-up Menu
彈出式選單
在使用者點擊(通常為右鍵)時出現的選單,提供情境相關的操作選項
Drop-down Menu
下拉式選單
從選單列向下展開的子選單,用於組織和呈現階層式的功能選項
Toolbar
工具列
包含常用功能圖示按鈕的快捷列,讓使用者快速存取常用操作
Help System
輔助系統
提供使用者操作引導和說明的機制,協助使用者理解並正確使用系統
Context-Sensitive Help
情境感知輔助
根據使用者當前操作或所在位置,自動提供相關的說明和指引
Error Handling
錯誤處理
偵測、處理和回報錯誤的機制,防止系統因錯誤輸入而產生不正確的結果
Error Message
錯誤訊息
當系統偵測到錯誤時顯示的提示訊息,應具體、有建設性且友善
Confirmation Message
確認訊息
在使用者執行重要或不可逆操作前,要求使用者確認的提示訊息
Status Bar
狀態列
顯示系統目前狀態資訊的區域,通常位於視窗底部
Template-based HTML
模板式 HTML
使用預先定義的模板產生一致性網頁的技術,確保網站的視覺統一
Wizard
精靈
透過一系列步驟逐步引導使用者完成複雜任務的介面元素
Accessibility
無障礙
確保所有人(包括殘障人士)都能使用系統的設計原則與實踐
Responsive Design
響應式設計
介面能自動適應不同裝置和螢幕尺寸的設計方法,提供一致的使用體驗
Usability
可用性
衡量系統是否容易學習、高效使用且令使用者滿意的品質指標

Interactive Quiz 互動練習(共 30 題)

Q1. Interface Design 的主要目的是什麼?
Interface Design 專注於定義人類與電腦之間交換資訊的方式,包含輸入與輸出的規劃。
Q2. Dialogue Design 將介面畫面的順序安排比喻為什麼?
Dialogue Design 將介面畫面的順序安排比喻為兩人之間的對話,系統與使用者輪流互動。
Q3. Dialogue Diagram 用於顯示系統中所有對話和順序的結構圖。
Dialogue Diagram 是一種結構圖,用來顯示系統中所有對話及其順序關係。
Q4. 以下哪個是 HCI 的全稱?
HCI 是 Human-Computer Interaction 的縮寫,意為人機互動。
Q5. Breadcrumb Trail 的主要功能是什麼?
Breadcrumb Trail(麵包屑導航)的功能是顯示使用者目前在網站結構中的位置。
Q6. Menu Bar 通常位於應用程式的底部。
Menu Bar(選單列)通常位於應用程式的頂部,而非底部。
Q7. Pop-up Menu 是在使用者點擊時出現的選單。
Pop-up Menu(彈出式選單)會在使用者點擊時出現,提供情境相關的操作選項。
Q8. 以下哪個元素是從 Menu Bar 向下展開的子選單?
Drop-down Menu(下拉式選單)是從 Menu Bar 向下展開的子選單。
Q9. Toolbar 包含哪些內容?
Toolbar(工具列)包含常用功能的圖示按鈕,讓使用者快速存取常用操作。
Q10. Context-Sensitive Help 會根據使用者當前的操作提供相關說明。
Context-Sensitive Help(情境感知輔助)會根據使用者當前的操作或所在位置,自動提供相關的說明。
Q11. Error Message 的設計原則不包括以下哪一項?
Error Message 應具體、有建設性且友善,不應使用過多技術術語讓一般使用者困惑。
Q12. Confirmation Message 用於在使用者執行重要操作前要求確認。
Confirmation Message(確認訊息)在使用者執行重要或不可逆的操作前,要求使用者確認。
Q13. Status Bar 通常顯示什麼資訊?
Status Bar(狀態列)用於顯示系統目前的狀態資訊。
Q14. Template-based HTML 的優點是什麼?
Template-based HTML 使用預先定義的模板,確保網頁的視覺呈現具有一致性。
Q15. Cookie Crumbs 與 Breadcrumb Trail 是相同的概念。
Cookie Crumbs(餅乾屑導航)和 Breadcrumb Trail(麵包屑導航)是同一個概念的不同名稱。
Q16. Wizard 的設計目的是什麼?
Wizard(精靈)透過一系列步驟逐步引導使用者完成複雜任務。
Q17. Accessibility 只考慮視覺障礙的使用者。
Accessibility(無障礙)確保所有人都能使用系統,包括各種不同類型殘障的人士,不僅限於視覺障礙。
Q18. Responsive Design 的核心理念是什麼?
Responsive Design(響應式設計)讓介面自動適應不同裝置和螢幕尺寸。
Q19. Navigation Design 關注使用者在系統中移動的方式和路徑。
Navigation Design(導航設計)規劃使用者在系統中移動的方式和路徑,確保操作直覺且高效。
Q20. 以下哪個不是常見的介面導航元素?
Compiler(編譯器)是程式開發工具,不是介面導航元素。Menu Bar、Breadcrumb Trail 和 Toolbar 都是常見的導航元素。
Q21. Help System 只能以文字形式提供說明。
Help System 可以透過多種形式提供說明,包括文字、圖片、影片教學等。
Q22. 在 Dialogue Design 中,設計師需要考慮哪些因素?
Dialogue Design 主要考慮畫面的順序安排和使用者的操作流程。
Q23. 良好的 Error Handling 可以防止系統因錯誤輸入而產生不正確的結果。
Error Handling(錯誤處理)的目的就是偵測、處理和回報錯誤,防止系統產生不正確的結果。
Q24. 以下哪項是網頁式介面設計需要考量的因素?
Responsive Design(響應式設計)是網頁式介面設計的重要考量因素。
Q25. Usability 衡量的是系統是否容易學習和高效使用。
Usability(可用性)衡量系統是否容易學習、高效使用,且令使用者感到滿意。
Q26. 以下關於 Drop-down Menu 的敘述何者正確?
Drop-down Menu(下拉式選單)是從 Menu Bar 向下展開的子選單。
Q27. Dialogue Diagram 與資料流程圖(DFD)是相同的圖表。
Dialogue Diagram 用於顯示對話和畫面的順序關係,而 DFD 用於描述資料流動,兩者目的不同。
Q28. 網頁介面設計中,以下哪項有助於使用者了解自己的位置?
Breadcrumb Trail(麵包屑導航)能顯示使用者目前在網站結構中的位置,幫助使用者了解所在層級。
Q29. 設計介面時,Accessibility 是可選的,不是必要的考量。
Accessibility(無障礙)是介面設計中的重要考量,應確保所有人都能使用系統,而非可選項。
Q30. 以下哪個是 Context-Sensitive Help 的最佳範例?
Context-Sensitive Help 會根據使用者當前操作提供相關說明,例如按 F1 後顯示與當前畫面相關的說明。
得分:0 / 30