| 課程名稱 |
(中文) 使用者介面設計 (英文) User Interface Design |
開課單位 | 工業設計學系 | ||
| 課程代碼 | D3670 | ||||
| 授課教師 | 吳君婷 | ||||
| 學分數 | 2.0 | 必/選修 | 選修 | 開課年級 | 大三 |
| 先修科目或先備能力： | |||||
| 課程概述與目標：學習使用者介面設計原則與方法 | |||||
| 教科書 | McKay, Everett, 2013, UI is Communication, Morgan Kaufmann Jeff Johnson, 2014, Designing with the Mind in Mind (Second Edition), Morgan Kaufmann |
||||
| 參考教材 | Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt and Bill Buxton, 2012, Sketching User Experiences: The Workbook, Morgan Kaufmann 中村聡史, 2015, 失敗から学ぶユーザインタフェース 世界はBADUI（バッド・ユーアイ）であふれている, 技術評論社 |
||||
| 課程大綱 | 學生學習目標 | 單元學習活動 | 學習成效評量 | 備註 | ||
| 週 | 單元主題 | 內容綱要 | ||||
| 1 | Our Perception is Biased | Perception Biased by Experience; Perception Biased by Current Context; Perception Biased by Goals; |
知覺偏見 |
|
|
|
| 2 | Our Vision is Optimized to See Structure - Gestalt Principle | Proximity; Similarity; Continuity; Closure; Symmetry; Figure/Ground; Common Fate; Combined; |
完形理論的視覺法則 |
|
|
|
| 3 | We Seek and Use Visual Structure | Structure Enhances People’s Ability to Scan Long Numbers; Data-Specific Controls Provide Even More Structure; Visual Hierarchy Lets People Focus on the Relevant Information; |
視覺結構的搜尋與使用 |
|
|
|
| 4 | Our Color Vision is Limited | Vision is Optimized for Contrast, Not Brightness; The Ability to Discriminate Colors Depends on How Colors are Presented; External Factors that Influence the Ability to Distinguish Colors; Guidelines for Using Color; |
色覺限制 |
|
|
|
| 5 | Our Peripheral Vision is Poor | Common Methods of Making Messages Visible; Heavy Artillery for Making Users Notice Messages; Visual Search is Linear Unless Targets “Pop” in the Periphery; |
周邊視力限制 |
|
|
|
| 6 | Our Attention is Limited; Our Memory is Imperfect | Short- Versus Long-Term Memory; A Modern View of Memory; Implications of Working Memory Characteristics for User-Interface Design; Implications of Long-Term Memory Characteristics for User-Interface Design; |
注意力與記憶力的限制 |
|
|
|
| 7 | Recognition Versus Recall | Recognition is Easy; Recall is Hard; Recognition Versus Recall: Implications for User-Interface Design; |
再認與回憶 |
|
|
|
| 8 | Our Hand–Eye Coordination Follows Laws | Fitts’ Law: Pointing at Displayed Targets; Steering Law: Moving Pointers Along Constrained Paths; |
手眼協調遵循的法則 |
|
|
|
| 9 | Human Decision Making is Rarely Rational | People are Often Irrational; Exploiting Strengths and Weaknesses of Human Cognition; |
人類的非理性決策 |
|
|
|
| 10 | We Have Time Requirements | Responsiveness Defined; The Many Time Constants of the Human Brain; Designing to Meet Real-Time Human Interaction Deadlines; Additional Guidelines for Achieving Responsive Interactive Systems; |
時間上的需求 |
|
|
|
| 11 | Well-known User-Interface Design Rules | Norman (1983a); Shneiderman (1987); Shneiderman and Plaisant (2009); Nielsen and Molich (1990); Nielsen and Mack (1994); Stone et al. (2005); Johnson (2007); |
文獻中的使用者介面設計法則 |
|
|
|
| 12 | Case Studies and Design Principles | Clue; Feedback; Mapping; Grouping; Common law; Consistency; Constraint; Maintenance; |
案例與設計原則 |
|
|
|
| 13 | Ease of Use | Functional; Reponsive; Ergonomic; Convenient; Foolproof; |
易用性原則 |
|
|
|
| 14 | Elegance and Clarity | Visible; Understandable; Logical; Consistent; Predictable; |
清晰性原則 |
|
|
|
| 15 | Snapshots in Time: The Visual Narrative | Sequential Storyboards; The State Transition Diagram; The Branching Storyboard; The Narrative Storyboard; |
故事板分鏡圖 |
|
|
|
| 16 | Animating the User Experience | The Animated Sequence; Motion Paths; Branching Animations; Keyframes and Tweening; Linear Video; |
動態模擬 |
|
||
| 17 | Involving Others | Uncovering the Initial Mental Model; Wizard of Oz; Think Aloud; Sketch Boards; The Review; |
參與式設計與測試評估 |
|
|
|
| 18 | Team Project Presentation | Storyboard Animation |
分組專題發表 |
|
|
|
|
教學要點概述： |
| 核心能力 | 專題 | 報告 | 作業 | ||
| 核心能力二 | 實踐工業設計概念之能力 | 3/10 | 3 | 3 | 3 |
| 核心能力四 | 統合多元領域之能力 | 5/10 | 5 | 5 | 5 |
| 核心能力五 | 洞察工業設計價值之能力 | 2/10 | 2 | 2 | 2 |