上海交通大学硕士学位论文基于图形界而的多媒体交互设计研究The Research on Multimedia-interaction Design Based on Graphical Interface 专业名称: 设计艺术学作者姓名：王超指导老师：陈贤浩 申请上海交通大学硕士学位论文基于图形界面的多媒体交互设计研究培养单位： 媒体与设计学院研究牛：王超学科：设计艺术学导师：陈贤浩（副教授） 2010 年 12 月 A Dissertation Submitted to Shanghai Jiao Tong University for Master Degree THE RESEARCH ONMULTIMEDIA-INTERACTION DESIGN BASED ON GRAPHICAL INTERFACE Author： Wang Chao Specialty: Design Science of Arts Supervisor: Prof. Chen Xianhao School of Media and Design Shanghai Jiao Tong University Shanghai P.R.China December 2010上海交通大学硕士学位论文摘要 慕于图形界而的多媒体交互设计研究摘要本研究针对多媒体设计、交互设计和界面设计三个领域交叉的部分，以用户界面设 计、设计心理学、人机工程学、可用性工程等相关理论为基础，结合多媒体设计实 践经验，总结归纳出基于图形界而的多媒体交互设计的设计原则，并提出设计实施 中的要点。
木文第二、三两章定义了媒体和多媒体的概念与区别特 概括了交互的概念、征,并对交互实初的基础和机制进行了探讨分析了基于图形界面的多媒体交互 设计要素第四章列出相关学科的理论基础第五章首先对多媒体交互设计的类型 进行了分类，分析各设计类型的设计流程然后在前而的理论基础上，结合以往多 媒体设计的实践经验，提出了基于图形界面的多媒体交互一般设计原则，并指出了 一些多媒体交互设计实施中的设计要点第六章，在提出的设计原则的基础上，对 两个设计案例进行了分析在第七章，对这两个设计案例进行了可用性测试，先后 采用了观察、记录、定量测试和问卷调查的方法，总结各设计案例存在的问题与优 点，分析出产生这些问题和优点的设计原因之后将这些分析的结果与提出的设计 原则进行对比，以验证设计原则是否准确、合理最终本文归纳提出了基于图形界而的多媒体交互一般设计原则包括：以用户体验为 中心，结构简易性，信息量适度和交互连续性四个原则还提出了一些关于交互环 境、交互方式和交互元素的设计要点关键词：多媒体设计，交互设计，界面设计 ,可用性测试第I页上海交通大学硕士学位论文ABSTRACT The Research on Multimedia-Interaction Design Based on Graphical Interface ABSTRACT The research puts focus on a cross field of multimedia design interactiondesign and interface design. In combination with practical experience ofmultimedia design the thesis generalizes the basic rules and design essentialsof multimedia-interaction design on the base of theory of user interface designdesign psychology ergonomics usability engineering and other relativesubjects. Chapter 2 and 3 defines media multimedia and the differences betweenthem. Besides these two chapters analysis on the concept basicpsychological mechanism and several characteristics of interaction. These twochapter also generalize design elements of multimedia-interaction design.Chapter 4 lists some theories of relative subjects. Chapter 5 classifiesmultimedia-interaction design and analysis on the process of every type. Bystudying the theories and combining the practical experience of multimediadesign the author puts forwards on the basic rules and design essentials ofmultimedia-interaction design which based on graphical interface. Chapter 6researches into two design cases on the basic of that design rules. In Chapter 7the author tests the usability of the two cases. By observing testing andquestionnaire the research finds the problems and advantages of these cases.Based on the contrast of the reason of these problems and design rules thethesis confirms that those design rules are correct andfeasible. In the end of this thesis the author makes the conclusion that the basicrules of multimedia-design based on graphical interface includes userexperience-centered easy structure appropriate information quantity andcontinuous interaction. Besides the thesis generalizes some design essentials第II贡上海交通大学硕士学位论文 ABSTRACTabout interaction environment interaction way and interaction elements.Key words: multimedia design interaction design interface design usabilitytest 第III页上海交通大学硕士学位论文日录目录摘要 IABSTRACT II第一章绪论 研究背景 1 1.2研究冃的 2 1.3祈究意文 2 1.4研究范围 2 1.5研究方法和流程 3弟一早多媒体与多媒体交互设计 5 2.1多媒体设计概述 5 2.1.1媒体的概念和媒体的分类 5 2.1.2多媒体与传统媒体 62」.3多媒体设计 7 2.2基于图形界面的多媒体交互设计要素 8 2.2.1环境 8 2.2.2脚本 9 2.2.3界面 ]3第三章多破体设亓中的交互 15 3.1多媒体设计中的交互概念 153」・1交互的定义 153」.2交互的特征 15 3.1.3交互的意义 17 3.2交互行为的主体与客体 17 321交互所依赖的感官系统 17 3.2.2聶领域的交互技术 20 3.2.3交互实现的内在机制 …••…25第四章基于图形界而的多媒体交互设计的基础理论 27 4」用户界而设计基本原则 27 4.1」以用户为中心 …..…27第IV页上海交通大学硕士学位论文冃录4.1.2界面设计一致性 27 4」.3良诊的信息反馈 28 4.2设计心理学和人机工程理论 29 4.2」格式塔心理学 29 4.2.2拓扑心理学 32 4.2.3认知心理学 33 4.2.4人机工程学 33 4.3设计艺术学原理 34 4.3.1色彩设计 •……34 4.3.2形式美法则 36 4.4设计可用性 38 4.4」可用性定义 38 4.4.2可用性测试 39第五章菽骥体交互设计原则和实施 42 5」多媒体交互设计的过程 42 5」」设计日标的确立 42 5.1.2设计的流程 43 5.2基于图形界面的多媒体交互一般设计原则 44 5.2.1以用户体验为中心的设计原则 44 5.2.2结毎简易程原则 47 5.2.3信息量适度原则 50 5.2.4交互连续性原则 52 5.3多媒体交互设计的实施 54 5.3.1多媒体交互环境的建构 54 5.3.2多媒体交互方式的选择 56 5.3.3多媒体交互元素的设计 57第六章菽骥体交互设计实施分析 60 6.1 “ALL INONE，设计实施分析 ….60 6.1」设计简介 .......60 6.1.2设计思路 …•…60 6.1.3交互环境设计 61 6.1.4脚本设计 •……62第V页上海交通大学硕士学位论文目录6.1.5设计实施 …•…64 6」.6问题总结和扩展 67 6.2“网上世博会网站交互设计分析 67 621网站框架结构 67 6.2.2交互新方式的应用 69 6.2.3图形界面设计 70 6.2.4问题总结 71第七童巫醯分析及论证 73 7.1可用性测试实验设计 73 7.1.1可用性测试冃的 。