数字媒体学院教案人机交互技术-讲稿教案学案

四川师范大学数字媒体学院

教师教学教案

课程名称：__人机交互技术

课程类型：专业选修

授课对象：_2013级7班________________

授课时间：2014.9-2015.1

授课课时：___32_________________________

授课教师：_____刘云安___________________

所在系：_____数字媒体技术_____________

二。一三年五月

课程名称人机交互技术

培养独立思考、分析问题和解决问题的能力

教学目标

人机交互的相关理论；NUI自然的人机交互人机交互硬件的掌握

人机交互与认知心理学计算机科学的关系；交互设计原则；图形用户界面；NUI；

教学重点

教学难点交互硬件；NUI实现原理；菲兹定律；移动设备交互设计

教学过程及主要内容

(包括教学内容、教师活动、学生活动、教学方法、课程作业等)

第一周教学课题：绪论

课型：理论讲授课

课时：2课时

教学目标：1.使学生了解什么是人机交互.

2.使学生了解交互设备.

3.使学生了解人机交互的发展趋势

教学重点：人交交互的发展趋势.

教学难点：HCI的实现机制.

教学过程：

导入：同学们使用智能手机的经验。。。

新授：

1什么是人机交互

人机交互(Human-ComputerInteraction,HCI)是关于设计、评价和实现供人们使用的交互

式计算机系统，且围绕这些方面主要现象进行研究的科学。

人机交互技术主要是研究人与计算机之间的信息交换，它主要包括人到计算机和计算机到人

的信息交换两部分。

它涉及到计算机科学、心理学、认知科学和社会学以及人类学等诸多学科，是信息技术的一

个重要组成部分。

人机交互技术着重研究人机双向信息交换方式如何用软硬件实现。

2HCI的研究内容

人机交互的研究涵盖了建模、设计、评估等理论和方法以及在Web、移动计算、虚拟现实等

方面的应用研究与开发。

人机交互界面表示模型与设计方法

可用性分析与评估

多通道交互技术

认知与智能用户界面

虚拟环境中的人机交互

Web设计

移动界面设计

群件

3发展历史：

语言命令交互阶段

计算机语言经历了由最初的机器语言，而后是汇编语言，直至高级语言的发展过程。

采用手工操作输入机器语言指令(二进制机器代码)来控制计算机；

出现了FORTRAN.PASCAL.COBOL等语言，使人们可以用比较习惯的符号形式描述计算过程;

60年代中期，命令行界面开始出现，通过这种人机界面，人们可以通过问答式对话、文本菜

单或命令语言等方式来进行人机交互。

图形用户界面(GUI)交互阶段

GUI的主要特点是桌面隐喻、WIMP(Windows>[con、Menu、pointingDevice)技术、直接操纵

和''所见即所得(WhatYouSeeIsWhatYouGet),\

自然和谐的人机交互阶段

主要特点是基于语音、手写体、姿势、视线跟踪、表情等输入手段的多通道交互。

目的是使人能以声音、动作、表情等自然方式进行交互操作。

4发展趋势：

集成化

卡耐基-梅隆大学INTERACTIVESYSTEMLABS的INTERACT项目包括如下子课题：

网络化

新一代的人机交互技术需要考虑在不同设备、不同网络、不同平台之间的无缝过渡和

扩展

支持人们通过跨地域的网络在世界上任何地方用多种简单的自然方式进行人机交互

而且包括支持多个用户之间以协作的方式进行交互。

智能化

提高交互活动的自然性和高效性，使人一机之间的交互像人一人交互一样自然、方便。

标准化

在人机交互领域，ISO已正式发布了许多的国际标准，以指导产品设计、测试和可用

性评估等。

5认知涉及到多个特定类型的过程，包括：

关注、感知和识别、记忆、学习、阅读、说话和聆听、解题、规划、推理和决策。

这些认知过程相互依赖，一个活动可以同时涉及多个不同的过程。

认知分为两个模式：

经验认知：指的是有效、轻松地观察、操作和响应周围的事件，它要求具备某些专门知识并达到

一定的熟练程度。

如使用Word字处理系统编辑文档，操作机床加工零件，阅读，驾驶汽车等。

思维认知：涉及思考、比较和决策，是发明创造的来源。

如设计、学习、写作等。

6总结：

人机交互是关于设计、评价和实现供人们使用的交互式计算机系统，且围绕这些方面主要现象进行研究的

科学。

人机交互的研究涵盖了建模、设计、评估等理论和方法以及在Web、移动计算、虚拟现实等方面。

人机交互的发展历史：语言命令交互》图形用户界面交互玲自然和谐的人机交互。

人机交互的发展趋势：集成化、网络化、智能化、标准化。

人机交互主要通过人的感知来完成，人的感知是认知心理学的基础。

视觉、听觉、触觉的感知特点。

作业：

人机交互的发展趋势越来越强调“以人为本”、“自然和谐”的方式，请根据本次课知识，尽量细化地

说出影响用户使用产品的因素有哪些？

第二周教学课题：人机交互相关技术（一）

课型：理论讲授课

课时：2课时

教学目标：1.命令行和文本菜单技术.

2.图形用户界面.

3.多通道用户界面

教学重点：图形用户界面的原则.

教学难点：汉字信息处理技术.

教学过程：

复习：人机工程学（Ergonomics）是从人本身和系统的角度出发，研究人机关系，体现了“人体科学”

与“工程技术”的结合。

人机系统包括人、机、人机之间的界面以及人机系统所处的环境。

人机界面设计中，要注意显示界面设计、控制界面设计及显控协调性设计。

为了进一步理解各类交互技术，介绍了人机交互设备的工作原理、应用范围及评价指标。

新授：

1.命令行和文本菜单技术

命令行界面虽然没有图形用户界面那么方便用户操作,但目前大多数操作系统中仍然保留

命令行方式。

bash/sh/ksh/csh（Unix-like系统）

COMMAND.COM（MS-DOS系统）

cmd.exe/命令提示字元（WindowsNT系统）

WindowsPowerShell（支持.NETFramework技术的WindowsNT系统）

命令语言需要用户学习和记住这种语言的语法，对于缺乏经验的用户，命令语言往往显

得相当神秘和复杂，但其仍具有不可替代的优点：

速度快，节省屏幕空间

命令行）具都是基于字符模式的输入输出。它可以在用户和操作系统之间提供直接的通讯，

在系统的运行上省去了图形界面的操作时间。

在熟记命令的前提下，使用命令行界面往往要较使用图形用户界面的操作速度要快。

如：利用命令rename和通配符“*”或“？”，就可以方便地更改一组文件名或扩展名。

兼容性好，适合远程操作使用批处理文件来执行操作，可比使用用户界面更有效率。

(>GuxingSoft

CMOSSETUPUTILITV

AUARDSOFTWARE,INC.

STANDARDCMOSSETUPINTEGRATEDPERIPHERALS

BIOSFEATURESSETUPSUPERUISORPASSWORD

CHIPSETFEATURESSETUPUSERPASSWORD

POWERMANAGEMENTSETUPIDEHDDAUTODETECTION

PNP/PCICONFIGURATIONSAUE&EXITSETUP

LOADBIOSDEFAULTSEXITWITHOUTSAUING

LOADOPTIMUMSETTINGS

Esc：QuitT1：SelectItem

F10：Saue&ExitSetup(Shift>F2：ChangeColor

Time,Date,HardDisk,Type..

2.图形用户界面

图形用户界面又称为WIMP界面一一是第二代人机界面，是基于图形方式的人机界面。

图形用户界面由窗口(windows)、图标(icons)、菜单(meum)、指点设备(pointingdevice)四位

一体，形成桌面(desktop),输出可以为静态或动态的二维图形或图像。

图形用户界面的共同特点是以窗口管理系统为核心，使用键盘和鼠标作为输入设备。

窗口管理系统除了基于可重叠多窗口管理技术外，广泛采用的另一核心技术是事件驱

动技术。

这种方式能同时输出不同种类的信息，用户也可以在几个工作环境中切换而不丢失几个工

作之间的联系，通过菜单可以执行控制型和对话型任务。

由于引入了图标、按钮和滚动条技术，大大减少键盘输入，提高了交互效率。

3.图形用户界面的主要思想

直接操纵：是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或

数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。

直接操纵的特性：

直接操纵的对象是动作或数据的形象隐喻

形象隐喻应该与其实际内容相近，使用户能通过屏幕上的隐喻直接想象或感知其

内容。

用指点和选择代替键盘输入

有两个优点：一是操作简便，速度快捷；二是不用记忆复杂的命令。

4.设计图形用户界面的原则

一般性原则：

1.界面要具有一致性

2.常用操作要有快捷方式

为医用操作设计快捷方式，不仅会提高用户的工作效率，还使界面在功能实现上简洁

而局效。

3.提供简单的错误处理

在出现错误时，系统应该能检测出错误，并且提供简单和容易理解的错误处理功能。

4.对操作人员的重要操作要有信息反馈

5,操作可逆

对大多数动作应允许恢复(UNDO),对用户出错采取比较宽容的态度

总结

文本菜单：为了减轻用户记忆的压力所提供的字符界面下的菜单方式

第二代人机界面：图形用户界面又称为WIMP界面，是基于图形方式的人机界面

作业：

通过使用多种人机界面，请描述人机交互界面设计中色彩设计应满足哪些方面的要求。

第三周教学课题：人机交互相关技术(二)

课型：理论讲授课

课时：2课时

教学目标：1.图形界面设计原则.

2.图形用户界面设计方法.

教学重点：图形用户界面的原则.

教学难点：输入设计.

教学过程：

1.一般性原则：

界面要具有一致性

常用操作要有快捷方式

为医用操作设计快捷方式，不仅会提高用户的工作效率，还使界面在功能实现上简洁

而高效。

提供简单的错误处理

在出现错误时，系统应该能检测出错误，并且提供简单和容易理解的错误处理功能。

对操作人员的重要操作要有信息反馈

操作可逆

对大多数动作应允许恢复(UNDO),对用户出错采取比较宽容的态度

设计良好的联机帮助

人机界面应该提供上下文敏感的求助系统，让用户及时获得帮助，尽量用简短的动词

和动词短语提示命令。

合理划分并高效地使用显示屏

只显示与上下文有关的信息，允许用户对可视环境进行维护，如放大、缩小窗口；用

窗口分隔不同种类的信息，只显示有意义的出错信息。

保证信息显示方式与数据输入方式的协调一致

尽量减少用户输入的动作，隐藏当前状态下不可用的命令，允许用户自选输入方式，

能够删除错误的输入，允许用户控制交互过程。

16种常用颜色的应用

颜色心理效应和联想应用

白色爽快、轻松、突出爽快、轻松、突出，用于显示字符(尤其在加粗的白字黑底字符中)

黑色忧郁、沉重感可用于背景色及文本中使用的白底黑字

红色兴奋、提醒、突出用于警告，错误信息及让用户暂停信息

绿色安慰、爽快、安静绿色与放行相联系，用于继续信息，也可用于绿底白字或黑底绿字

蓝色爽快、轻松可用作背景色，但用作前景色不好

青色同蓝色同蓝色

橙色兴奋、温暖、突出兴奋、温暖、突出，但橙色字符难以阅读，尽可能不用

棕色棕色显示模糊难辨，少用

亮灰色爽快、轻松最好的背景颜色

暗灰色忧郁、沉重难以显示(会显为黑色)，一般不用

亮蓝色亮蓝色太亮难以阅读，做前景色时由紫色代替

亮绿色难以阅读

亮青色难以阅读，一般不用

亮红色难以显示，用于警告，可由红色代替

亮橙色难以阅读，避免使用

黄色较适于两个显示的对比中

国

(b)表示合作(C)表示邮件(d)表示电话

△国

(e)表示帮助(f)表示三角形(g)表示预算表(h)表示不许第制的行为

几个图标实例

图标的图形应该和目标的外形相似，尽量避免过于抽象。

可在图标中附加上简要的文本标注，使用户明确图标的含义。

设计图标应尽可能简单(三维的图标虽然醒目但也能使人分心)，符合常规的表达习

惯，保持图标含义的前后连贯。

2.按钮的设计原则：

具有交互性，应该有3到6种状态效果：

点击时的状态

鼠标放在上面但未点击的状态

点击前鼠标未放在上面时的状态

点击后鼠标未放在上面时的状态

不能点击时的状态

独立自动变化的状态

按钮应具备简洁的图示效果，应能够让使用者产生功能上的关联反应。属于一个群组的按钮

应该风格统一，功能差异大的按钮应该有所区别

在处理大量相关数据的场合下，需要输入一系列的数据，这时填表输入界面是最理想的数据

3.输入界面。

填表输入界面的特点：

有明确的提示，使用户可以不需要学习、训练，也不必记忆有关的语义、语法规则。

填表输入界面充分地利用了屏幕空间。

在填表输入方式中，可以充分利用上下文信息，帮助用户完成输入。

在设计填表输入界面时应遵循的原则

MUSCTHECHILDRENSHEARTPROGRAMCUNETIC

MEDICALUNIVERSITYOFSOUTHCAROLINA

OFSOUTHCAROLINA

Edit

r

ReferralPatientData'「Attachments'■lDelivervAddress

Home

SpecialistData

CreateR«fenal0SpeciakstPointofCare:[MUSC,|

QNamofSpecUfct:IjTZ.AMDREW

CreateCtnicjlReport

AppointmentDaft:1回ApptTMTK:厂厂.@

Sea心ReferralProviderData

ONim«OfPfowM«r:[9皿UUSnRICHARO:]

Help

OofR«f«rut110/13/2000目Cr««t«dByMARK

LoaoutRICHPatientData

0PatientNumb”|345345DOB:I国I

QLastName:|OLSENr

。First|BECKY

Address:1

HorntPhon♦:!W。*Phon■:

O«nd«r.[「z:]Ra。缸

FundedBy

Poficy

InsurantProvider:

1______11(■appbcibl*)：

Othtr

(ifjpplicjblt):r

ClearYDolotoSave■Approve

作业：设计一个用户登录界面，画出线框图。

第四周教学课题：人机交互相关技术(三)

课型：理论讲授课

课时：2课时

教学目标：1.掌握多通道用户界面.

2.了解虚拟显示技术.

教学重点：三维环境下的人机交互技术.

教学难点：手势识别.

教学过程：

导入：常见的游戏操纵杆的交互方式

新授：

1.多通道用户界面

多通道用户界面主要关注人机界面中用户向计算机输入信息以及计算机对用户意图的理

解，所要达到的目标：

交互的自然性

使用户尽可能多地利用已有的日常技能与计算机交互，降低认识负荷。

交互的高效性

使人机通讯信息交换吞吐量更大、形式更丰富，发挥人机彼此不同的认知潜力。

与传统的用户界面特别是广泛流行的WIMP/GUI兼容。

多通道用户界面的基本特点：

使用多个感觉和效应通道

允许非精确的交互

三维和直接操纵

人生活在三维空间，习惯于看、听和操纵三维的客观对象，并希望及时看到这种

控制的结果。多通道人机交互的自然性反应了这种本质特点。

交互的双向性

交互的隐含性

多通道用户界面并不需要用户显式地说明每个交互成分，反之是在自然的交互过程中隐含地

说明。

2.虚拟现实技术

虚拟现实(VirtualReality)又称虚拟环境。

在其中，人是主动参与者，复杂系统中可能有许多参与者共同在以计算机网络系统为基础

的虚拟环境中协同工作。

虚拟现实系统具有三个重要特点：

沉浸感(immersion)>交互性(interaction)、构想性(imagination)

虚拟现实中的两个基本要素：

计算机生成的虚拟世界(环境)必须是一个能给人提供视觉、听觉、触觉、嗅觉以及

味觉等多种感官刺激的世界。

虚拟现实系统实质上是一种对多通道信息进行交互操作的高级人机交互系统。

虚拟现实技术是一种以集成为主的技术，其人机界面可以分解为多媒体、多通道界面。

多媒体用户界面技术侧重解决计算机信息表现及输出的自然性和多样性问题。

多通道技术侧重解决计算机信息输入及理解的自然性和多样性问题。

虚拟现实造型语言VRML(VirtualRealityModelingLanguage)是——种用于建立真实世界的

场景模型或人们虚构的三维世界的场景建模语言。

它是目前Internet上基于WWW的三维互动网站制作的主流语言。

3.三维输入

许多应用（如虚拟现实系统）需要三维空间定位技术。

三维空间控制器的共同特点是具有六个自由度，分别描述三维对象的宽度、深度、高度、俯

仰角、转动角、偏转角。通过控制这六个参数，用户可以在屏幕上平移三维对象或光标，也

可沿三个坐标轴转动三维对象。

三维空间的交互操作方式：

直接操纵

由六个自由度、三维输入装置控制的三维光标将使三维交互操作更自然和方便。

三维widgets即三维交互界面中的一些小工具。

用户通过直接控制它们使界面或界面中的三维对象发生改变。如：在三维空间中漂浮的菜单、

用于拾取物体的手的三维图标、平移和旋转指示器等。

4.语音识别

语音识别是计算机通过识别和理解把语音信号转变为相应的文本文件或命令的技术。

语音识别系统的处理流程

语音识别系统的组成：

语音特征提取：从语音信号中提取语音的特征可以获得语音的本质特征，也起到数据压缩的

作用。

声学模型：对应于语音到音节概率的计算

通常把获取的语音特征通过学习算法产生声学模型。

在识别时将输入的语音特征同声学模型（模式）进行匹配与比较，得到最佳的识别结果。

语言模型：计算音节到字的概率

包括由识别语音命令构成的语法网络或由统计方法构成的语言模型。

尚学4元语言模型庠

境计信息与现剜

数据波形门愤处理与商学模P、ft!句汛别站累

果集动切分二特征参政提取时间M准分析整句・出

分”后的语杼都学音诙句

绮征矢情集合节候逸候选

汉语所写机的系铳结构

作业：

查找资料，简述什么是SUI,并说明它与GUI相比有何优势。

第五周教学课题：可用性分析与评估(一)

课型：理论讲授课

课时：2课时

教学目标：1.掌握支持可用性的设计原则.

2.了解可用性相关概念.

教学重点：可用性与可用性工程的概念.

教学难点：可替换性设计原则

教学过程：

导入：列举一些好用的互联网产品并分析为什么好用。

新授：

1.可用性与可用性工程

可用性是指特定的用户在特定的环境下使用产品并达到特定目标的效力、效率和满意的程度。

可用性包含五方面的内容：

有效性(effective)——怎样准确、完整地完成工作

效率(efficient)——怎样快速地完成工作

吸引力(engaging)——用户界面如何吸引用户进行交互并在使用中得到满意和满

足

容错能力(errortolerant)——产品避免错误的发生并帮助用户修正错误的能力

易于学习(easytolearn)一一支持用户对产品的入门使用和在以后使用过程中的

持续学习

可用性工程：就是改善系统可用性的迭代过程。

改善系统可用性过程中存在两种不同的思想：

系统为中心的设计(SystemCenteredDesign)

在这一平台上更容易创建出什么

使用这个可利用的工具能创造出什么

当作为一个开发者时在这个平台上能发现什么有趣的事

用户为中心的设计(UserCenteredDesign)

用户的能力和需要

用户所处的环境

用户操作

用户任务

可用性工程的生命周期

了解用户

要在工作环境中观察用户

了解用户的个体特征

任务分析：了解用户的目标任务及为达到目标通常使用的方法。

功能分析：分析用户任务的功能性原因，弄清哪些是必做的。

竞争性分析：了解对手系统的优缺点

设定可用性目标：新旧版本对比或从竞争性分析中获得

用户参与的设计

迭代设计：设计、测试、再设计

产品发布后的工作：发布后继续收集可用性数据

2.支持可用性的设计原则

提高可用性的基本原则有三大类：可学习性、灵活性、鲁棒性。

可学习性：交互系统能否让新手学会如何使用系统，以及如何达到最佳实用效果。

可预见性一一用户利用对以往交互过程的了解就足以确定当前交互的结果。

如：可预见到单击最大化按钮的结果

同步性一一用户依据界面当前状态评估过去操作造成影响的能力，也就是说用户能不

能同步地知道交互操作的结果。

如：移动文件、刷新显示

熟悉性一一如果新系统跟过去使用过的类似系统有一定相关性，那使用起来就比较方

便0

如：字处理器与打字机类比；图形用户界面中，一个按钮就暗示它可以被按下。

有效地利用内在的暗示可以增强用户对系统的熟悉性。

通用性：在交互中尽可能的提供一些通用的或能够从现有功能类推出来的功能。

如：剪切/粘贴/复制操作

一致性：在相似的环境下或执行相似的任务时，一般会执行相似的行为。

熟悉性可以看作与过去现实世界经验的一致性。

通用性可以看作与同一平台、同一系统中软件交互体验的一致性。

如：在Windows中，按F1键总是得到帮助信息。

灵活性：用户与系统交流信息方式的多样性。

可定制性一一用户或系统修改界面的能力。

用户主导：可定制性，一般局限于界面表面。

系统主导：自适应性，如隐藏暂时不用的菜单等。

对话主动性一一用户主导交互可增加灵活性

注音莫叱情市需耍率缔主导书万

多线程;二人机交互系至同时支持多不交互任务，可以把线程看作是一个特定用户任

务的相关对话部分。

在任何给定时间，对话实际上还是局限于单个任务。

可互换性一一任务的执行可以在系统控制和用户控制间进行转移。

如：字处理程序中的拼写检查对人名的处理。

可替换性一一要求等量的数值可以彼此交换，为用户提供多种选择。

鲁棒性：能否成功地达到目标和能否对到达的目标进行评估。

可观察性一一允许用户通过观察交互界面的表现来了解系统的内部状态。

可浏览性、缺省值提供、可达性、持久性和操作可见性

可恢复性一一用户意识到发生了错误并进行更正的能力。

可恢复性不仅利于鲁棒性，还可大大提高用户的冒险意识,提高系统的可学习性。

响应性一一反映了系统与用户之间交流的频率。

延迟较短或立即响应最好。即使需要较长的时间才有最终结果，也应该有所响应。

任务规范性一一系统为完成交互任务所提供的功能是否规范。

作业：从可用性的五个方面（有效性、效率、吸引力、容错性、易于学习）分析word软件。

第六周教学课题：可用性分析与评估（二）

课型：理论讲授课

课时：2课时

教学目标：1.掌握可用性评估应该遵循的原则.

2.掌握可用性评估的方法.

教学重点：可用性评估的方法.

教学难点：启发式评估法、调查问卷设定

教学过程：

导入：如何客观地评价一款文字处理软件是否“好用”？

新授：

1.可用性评估

可用性评估是检验软件系统的可用性是否达到了用户的要求。

可用性评估应遵循的原则：

最具有权威性的可用性测试和评估不应该针对专业技术人员，而应该针对产品的用

户。

软件的可用性测试和评估是一个过程，这个过程在产品开发的初期阶段就应该开始。

软件的可用性测试必须是在用户的实际工作任务和操作环境下进行。

要选择有广泛代表性的用户。

2.用户模型评估方法

用户模型法：是用数学模型来模拟人机交互的过程。

它把人机交互的过程看做是解决问题的过程。

人使用软件系统时是有目的的，而每一个大的目的可以被细分为许多小的目的。

为了完成每个小的目的，又有不同的动作和方法可供选择。

每一个细小的过程都可以计算完成的时间。

这个模型就可以用来预测用户完成任务的时间。

如著名的GOMS:通过目标（Goal）、操作符（Operator）、方法（Method）以及选择

规则（Selectionrule）四个方面进行描述。

3.启发式评估方法

系统与用户现实世界相互匹配

用户控制与自由

一致性与标准

错误预防

识别而不是回忆

使用的灵活性与效率

美观而精炼的设计

帮助用户认识、诊断和修正错误

帮助和文档

4.认知性遍历评估方法

认知性遍历是一种以认知理论为基础的评估技术，它把软件尝试和学习的认知模型结合起来。

利用这种方法，评测者用用户任务中典型的路线尝试走遍整个界面，然后把尝试中界面的

活动和反馈与根据认知模型模拟的用户目标和过程相比较，并根据二者之间的差异，对界

面进行评估。

认知性遍历认为用户完成一个任务的过程有三步：

评审人员可以对用户的每个交互过程模拟以上三个步骤去评价，并以回答下列三个问

题为基础：

5.用户测试评估方法

用户测试是通过观察和测试用户在被控制的环境中，使用系统完成任务的过程来评估界面(软

件)易用程度的一种技术。

用户测试分为：实验室测试和现场测试

测试过程包括：前期准备、测试阶段、测试评价

主要测试内容：易学、有效、容错、乐用

尽可能收集下面两类数据：

定量变量数据

定性指标

6.问卷调查评估方法

问卷调查法：是直接向广大用户或经过选择的样本用户进行询问，然后对收集到的反馈信息

进行统计分析，产生有用的评估结论。

调查收集到的大多是主观数据，主要了解用户使用该界面的情况，对界面的态度和意见。

问卷调查的执行过程

用户需求分析

问卷设计

问卷实施及结果分析

7.以用户为中的界面设计

以用户为中心的最基本思想就是将用户时刻摆在所有过程的首位。

一个好的人机交互界面从设计一开始就要考虑可用性问题，并在以后的实现过程中始终将

可用性问题作为一个重要方面。

以用户为中心设计的四个重要原则：

及早以用户为中心

综合设计

及早并持续性地进行测试

反复式设计

IBM公司对象、视图和交互设计(OVID)方法

通过对用户、目标和任务的分析，系统地指导人机界面设计，以达到用户满意的设计要求。

应用过程：

对象建模分析：

将系统和用户任务分析的结果转化为用户界面设计。

建模是将系统任务的某些概念及其关系用图的方式直观综合地表达出来；

分析则是将系统的对象抽象为类，列出对象或类的属性、行为、以及对象间

的关系。

视图抽象设计：

仔细研究系统的对象模型，列出其系统状态，对每个视图抽象出其中涉及的对象,

以及对象的属性和行为。

概要设计

针对特定的操作系统或交互方式，对抽象的视图设计做进一步的具体设计，产生

视图的概要设计。

视图的关联设计

任何一个人机交互系统的界面都可能包括若干状态，很多交互任务的完成需要从

一个状态转化为另一个状态，这就要考虑用户完成任务所需的信息和所需的功能;

并将不同交互视图之间的联系和状态转化关系整理清楚。

视图的全面设计

确定各个视图的具体内容和大致布局，并在每个视图上明确体现与其他视图的关

系，保证系统的整体性和和谐性。

然后可以借助具体的开发工具进行界面的实际设计。

总结

可用性评估是检验软件系统的可用性是否达到了用户的要求。

可用性评估方法：

用户模型法、启发式评估法、认知性遍历法、用户测试法、问卷调查法

以用户为中心的界面设计

以用户为中心的最基本思想就是将用户时刻摆在所有过程的首位，始终将可用性问

题作为一个重要方面。

对象、视图和交互设计(OVID)方法：

对象建模分析

视图抽象设计

概要设计

视图的关联设计

视图的全面设计

作业：查找资料，分别收集不同类型的人机交互界面，并对其进行分析、评价。

第七周教学课题：Web界面设计(二)

课型：理论讲授课

课时：2课时

教学目标：1.掌握web基础知识.

2.掌握web信息架构的方法.

教学重点：web信息设计模型

教学难点：web信息设计模型

教学过程：

复习：可用性是指特定的用户在特定的环境下使用产品并达到特定目标的效力、效率和满意

的程度。

包含五方面的内容：有效性、效率、吸引力、容错能力、易于学习

改善系统可用性过程中两种思想：

系统为中心的设计

用户为中心的设计

新授：

1.Web基础

互联网是近年来对社会影响最大的技术进步。

它具有传播信息量大、形式多样、迅速方便、全球覆盖和交互性强的特点，已经发展成为新

的传播媒体，所以全球各个企业、机构纷纷建立自己的Web站点。

从技术上讲，互联网带来了通信业的革命；

从经济上讲，网络技术带来了电子商务；

从文化上讲，网络技术把我们真正带入了信息社会；

从认知科学的角度来说，互联网是一种新的认知结构。

20世纪90年代初，人们开始开发各种在互联网上浏览信息的工具。

为了建立一个能够整合各种资源、文件及多媒体的系统，让使用者方便地取得不同媒体的

资料，瑞士日内瓦的欧洲核能研究中心高能核理学家TimBerners-Lee研究发展了万维网

(WorldWideWeb,WWW)的雏形。

1993年，美国“国家超级计算机应用中心”发行了一个面向Unix系统的图形浏览器Mosaic,

使原来只提供超文本文档服务的Web得到了发展。

2.Web页面的发展趋势

Web的发展趋势

图形Web页面的爆炸性发展。

网上浏览中包括了大量使用的动态图形，使图形Web遍布网络的各个角落。

新一代Web信息描述标准XML的出现。

它能更详尽地描述文档的结构信息，具有比HTML有更强大的功能，为Web的发展提

供了强有力的支持。

关键技术：

超文本一一是一种使用于文本、图形或计算机的信息的组织形式，是一种非线性的信

息组织形式。

超媒体一一利用超文本形式组织起来的文件不仅仅是文本，也可以是图、文、声、像

以及视频等多媒体形式的文件。这些多媒体信息就构成了所谓的超媒体。

3.Web界面基本设计技术

JavaScript

JavaScriptJavaScript是种内嵌于一HTML中的脚本语言，它是一种基于对象和事件驱动

并具有安全性能的脚本语言。

基本特点：JavaScript是一种脚本编写语言；是基于对象的语言；简单性；安全性；动态

性；跨平台性。Web界面基本设计技术

脚本：

<HTML>

<head>

<ScriptLanguageiJavaScript”〉

alter（"这是第4—JSitavaScript例子！"）;

alert（"欢迎你进入JavaScript世界！"）;

alert（"今后我们将共同学习今后我们将共同学习JavaScriptJavaScript知识！"）;

</Script>

</head>

</HTML>

4.Web界面设计问题的提出

Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。

Web界面设计与站点外观直接相关

站点的界面外观是否友好直接关系到是否能吸引人的关注。

人性化的设计是Web界面设计的核心

如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计

的重点。

5.Web信息交互模型

Web信息交互模型是用来解释Web的人机界面性质的一个模型，它提出网页是用户和知识之间

的界面。

信息提供者认数据网络空间

知

结

构过程信息

Web信息交互模型

Web界面设计原则

体现特色

只有丰富特色、内容翔实的网页才能使浏览者驻足阅读。

特色鲜明的Web网站是精心策划的结果，只有独特的创意

和赏心悦目的网页设计才能在和赏心悦目的网页设计才能在瞬间打动浏览者一瞬间打动

浏览者。

兼顾不同的浏览器

明确的导航设计

网站首页导航应尽量展现整个网站的架构和内容，要

能让浏览者确切地知道自己在整个网站中的位置，可以确

定下一步的浏览去向。

作业：通过w3cshool学习web表单技术

第八周教学课题：Web界面设计（二）

课型：理论讲授课

课时：2课时

教学目标：1.掌握web概念设计结构图画表达方法.

2.掌握web界面设计原则.

教学重点：web界面规划

教学难点：web界面规划之形式与内容

教学过程：

导入：web表单如何布局?在布局过程中要考虑哪些问题？

新授：

Web网站的概念设计

概念设计涉及的工作：

分析、确定站点的目标和用途，准确定义所建立Web网站及站点的规范。

事先建立好站点的架构和导航设计。

兼顾不同的浏览器。

网站的结构

恰当地组织网站有利于达到网站的目标。

站点的结构可分为：

逻辑结构

描述文档间的关系，定义文档间的链接。

物理结构

描述文档的实际位置及显示方式。

Web界面设计所涉及的问题

Web界面设计中要考虑的基本问题是Web界面设计基本原则和Web界面规划。

由于计算机及其网络技术的特点和条件，对网页设计是有限制的。

网页设计与传统平面设计的主要区别：

介质的不同

显示器的色彩比印刷品色彩丰富而分辨率比印刷品低。在网页设计时应扬长避短,

追求网页的色彩效果，避免过于在细节、细部做文章。

页面大小的限制

考虑当前电脑用户的显示环境，应尽量做到在多数的环境下，不用滚屏便可显示

出完整的页面；需要滚屏时，上下与左右滚动条只选择其一。

交互性设计

多媒体功能

Web界面设计基本原则

Web界面设计基本原则：

了解浏览者的心理状态

必须迅速地把有趣和有吸引力的东西显示出来。

内容与形式的统一

网页设计的目的就是为了使网页更加形象、直观，更易被观众所接受。

不同内容的网页要求用不同的设计形式。

减少浏览层次

应尽量把网页的层次简要化，力求以最少的点击次数链接到具体的内容。

特点明确

特色鲜明的网站使用具有独特创意和赏心悦目的网页能在一瞬间打动它的浏览者。

统一整体的形象

Web网站标识以及网页设计标准确定后，应尽量地应用到每一页页面上，使浏览者可

以确定当前所浏览的网站，并且给浏览者留下深刻而统一的印象。

Web界面设计的3C原则

concise（简洁）

consistent（-—致性）

contrast（对比度）

Web界面基本规划

确定Web界面设计的目标

企业Web网站：

企业建立这个Web网站的目的。

这个网站的作用。

该提供哪些吸引访问者的东西？

用户访问这个Web网站后，能给他们带来什么？

个人Web网站：

主要是展现自我、演练技术。

建立的Web网站要有个性和特色。

界面布局的规划

制定好目标后，网页布局、元素的设计都要以这个目标为中心，尽量从各方面综合表

现Web站点的目标。

Web界面设计中用户的地位

确定Web站点的用户群体，从用户角度去思考。

以用户为中心的设计，为用户的共性设计，同时考虑差异。

从目标用户群的构成进行分析：

Web网站是以提供的信息内容来分类的。

从目标用户的行为方式来分析：

按人机工程学观点，行为方式受年龄、性别、地区、种族、职业、生活习俗、受教育

程度等因素影响。

行为方式直接影响人们对网站的操作使用，如用户上网的浏览习惯、上网特点。

总结

总联网是近年来对社会影响最大的技术进步，明确了Web的发展趋势。

Web界面外观是否友好直接关系到是否能吸引人的关注。

Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。

Web信息交互模型是用来解释Web的人机界面性质的一个模型，它提出网页是用户和知识之

间的界面。

Web信息设计模型是研究网页的信息设计模型。

主要研究信息的选取和信息如何被表现。

Web网站概念设计涉及的工作：

建立好站点的架构和导航设计。

兼顾不同的浏览器。

Web界面设计所涉及的问题

Web界面设计基本原则

Web界面规划：确定Web界面设计的目标（布局）、Web界面设计中用户的地位。

作业

上网查找"土豆网八忖:〃\/\/\/7\/7上11€|011.8（1|/"、"优酷网http:〃/"和"天线网

http:〃/”,观察三个网站首页标头界面进行对比，分析说明各网站的目标（倾

向性）是什么？

第九周教学课题：Web界面设计（三）

课型：理论讲授课

课时：2课时

教学目标：1.掌握web界面的内容设计原则.

2.掌握各种web设计工具综合使用的技巧.

教学重点：web界面与数字内容

教学难点：导航设计

教学过程：

导入：形式与内容的关系？

新授：

l.Web界面的内容与风格

Web界面的内容要符合确定的设计目标，面向不同的对象要使用不同的口吻和用词。

为网站编写内容时要特别注意：

使用用户的语言；

使用平易的语言；

避免不必要的词句；

使用简单的句子；

避免夸夸其谈；

保证准确性，反映时间性。

2.网站内容设计的原则

HTML文档的效果由其自身的质量和浏览器解释的方法决定。不同浏览器的解释方法不同,

所以应注意让所有的浏览器都能够正常浏览。

网站信息的组织的总体结构要层次分明，尽量避免形成复杂的网状结构。

要权衡图像和多媒体信息的数量，在不影响网站效果的前提下，尽量减少图像的数量和所

占面积。

网站的首页要给用户带来好的第一印象，能够吸引用户再次光临这个网站。

网站内容应是动态进行修改和更新。

网页中应该提供联机帮助功能。

网页的文本内容应简明，通俗易懂。

所有的内容都要针对设计目标而写，不要节外生枝。

文字要正确，不能有语法错误和错别字。

3.Web界面的风格选择

Web界面的风格包括站点的标志、色彩、字体、布局、交互方式、内容价值、存在意义

等。

一个杰出的网站需要整体的形象包装和设计。

为儿童设计的网站应当使用比较丰富的色彩和图形，并且较多使用动画和声音等多媒体表

现工具。

为老年人设计的网站需要考虑采用较大的字体、直截了当的信息显示和简单的浏览方式,

以适用老年人可能逐渐减弱的视力和记忆力。

Web界面设计的语言与文化

网站应设置多语言选择

网站面向的用户使用不同的语言，则在设计时要考虑包括不同语言的版本，将选择语言版

本的功能放在网站的主页，并用不同版本的语言进行标注。

在网站设计和建设中进行跨文化研究

应当注意到不同地区的文化特点。

不同的语言表达可以产生不同的效果。

有些内容在一个地区是允许的或适用的，但是在另外一个地区使用却是不合适的。

应当避免显示对用户不适合的内容。

4.Web界面的色彩

依'TheBeautyofCSSDesign

和芟CSSZenGarden

Ademonstrationofwhatcanbeaccomplishedvisually

throughCSS-baseddesign.Selectanystylesheet

戌j六'加listtoloaditintothispage.

“VKDownloadthesamplehtmlfileandcssfile

TheRoadtoEnlightenment

Litteringadarkanddrearyroadlaythepastrelicsofbrowser-specifictags,incompatible

OOMs.andbrokenCSSsupport.

Make'emProud

thankstothetirelesseffortsoffolkliketheW3C,WaSPandthemajorbrowsercreators.byMichaelar.

ThecssZenGardeninvitesyoutorelaxandmeditateontheimportantlessonsoftheScotfyReifsnyc^er

masters.Begintoseewithcianty.Learntousethe(yettobe)time-honoredtechniquesinOrchidBeauty

newandinvigo同ngfashion.Becomeone痴ththeweb.byKevinA点•m

颜色搭配