数字媒体学院教案人机交互技术—--学案教案.doc

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

教师教学教案

课程名称：______人机交互技术_____________________

课程类型：________专业选修_________________________

授课对象：_________2013级7班_____________________

授课时间：________2014.9-2015.1________________

授课课时：________32_________________________________

授课教师：___________刘云安_________________________

所 在 系：___________数字媒体技术__________________

二〇一三年五月

课程名称
人机交互技术
教学目标
培养独立思考、分析问题和解决问题的能力
人机交互的相关理论；NUI自然的人机交互 人机交互硬件的掌握
教学重点
人机交互与认知心理学计算机科学的关系；交互设计原则；图形用户界面；NUI；

教学难点
交互硬件；NUI实现原理；菲兹定律；移动设备交互设计
教学过程及主要内容

（包括教学内容、教师活动、学生活动、教学方法、课程作业 等）
第一周教学课题：绪论
课型： 理论讲授课
课时： 2课时
教学目标：1.使学生了解什么是人机交互．
2．使学生了解交互设备．
3. 使学生了解人机交互的发展趋势
教学重点：人交交互的发展趋势．
教学难点：HCI的实现机制．
教学过程：
导入：同学们使用智能手机的经验。。。
新授：
1 什么是人机交互
人机交互（Human-Computer Interaction，HCI）是关于设计、评价和实现供人们使用的交互式计算机系统，且围绕这些方面主要现象进行研究的科学。
人机交互技术主要是研究人与计算机之间的信息交换，它主要包括人到计算机和计算机到人的信息交换两部分。
它涉及到计算机科学、心理学、认知科学和社会学以及人类学等诸多学科，是信息技术的一个重要组成部分。
人机交互技术着重研究人机双向信息交换方式如何用软硬件实现。

2 HCI的研究内容
人机交互的研究涵盖了建模、设计、评估等理论和方法以及在Web、移动计算、虚拟现实等方面的应用研究与开发。
人机交互界面表示模型与设计方法
可用性分析与评估
多通道交互技术
认知与智能用户界面
虚拟环境中的人机交互
Web设计
移动界面设计
群件
3发展历史：
语言命令交互阶段
计算机语言经历了由最初的机器语言，而后是汇编语言，直至高级语言的发展过程。
采用手工操作输入机器语言指令（二进制机器代码）来控制计算机；
出现了FORTRAN、PASCAL、COBOL等语言，使人们可以用比较习惯的符号形式描述计算过程；
60年代中期，命令行界面开始出现，通过这种人机界面，人们可以通过问答式对话、文本菜单或命令语言等方式来进行人机交互。
图形用户界面（GUI）交互阶段
GUI 的主要特点是桌面隐喻、WIMP(Windows、Icon、Menu、Pointing Device)技术、直接操纵和“所见即所得（What You See Is What You Get）”。
自然和谐的人机交互阶段
主要特点是基于语音、手写体、姿势、视线跟踪、表情等输入手段的多通道交互。
目的是使人能以声音、动作、表情等自然方式进行交互操作。

4发展趋势：
集成化
卡耐基-梅隆大学 INTERACTIVE SYSTEM LABS的INTERACT项目包括如下子课题：
网络化
新一代的人机交互技术需要考虑在不同设备、不同网络、不同平台之间的无缝过渡和扩展
支持人们通过跨地域的网络在世界上任何地方用多种简单的自然方式进行人机交互
而且包括支持多个用户之间以协作的方式进行交互。
智能化
提高交互活动的自然性和高效性，使人－机之间的交互像人－人交互一样自然、方便。
标准化
在人机交互领域，ISO已正式发布了许多的国际标准，以指导产品设计、测试和可用性评估等。

5认知涉及到多个特定类型的过程，包括：
关注、感知和识别、记忆、学习、阅读、说话和聆听、解题、规划、推理和决策。
这些认知过程相互依赖，一个活动可以同时涉及多个不同的过程。
认知分为两个模式：
经验认知：指的是有效、轻松地观察、操作和响应周围的事件，它要求具备某些专门知识并达到一定的熟练程度。
如使用Word字处理系统编辑文档，操作机床加工零件，阅读，驾驶汽车等。
思维认知：涉及思考、比较和决策，是发明创造的来源。
如设计、学习、写作等。

6总结：
人机交互是关于设计、评价和实现供人们使用的交互式计算机系统，且围绕这些方面主要现象进行研究的科学。
人机交互的研究涵盖了建模、设计、评估等理论和方法以及在Web、移动计算、虚拟现实等方面。
人机交互的发展历史：语言命令交互→图形用户界面交互→自然和谐的人机交互。
人机交互的发展趋势：集成化、网络化、智能化、标准化。
人机交互主要通过人的感知来完成，人的感知是认知心理学的基础。
视觉、听觉、触觉的感知特点。

作业：
人机交互的发展趋势越来越强调“以人为本”、“自然和谐”的方式，请根据本次课知识，尽量细化地说出影响用户使用产品的因素有哪些？

第二周教学课题：人机交互相关技术（一）
课型： 理论讲授课
课时： 2课时
教学目标：1.命令行和文本菜单技术．
2．图形用户界面．
3. 多通道用户界面
教学重点：图形用户界面的原则．
教学难点：汉字信息处理技术．
教学过程：
复习：人机工程学（Ergonomics）是从人本身和系统的角度出发，研究人机关系，体现了 “人体科学”与“工程技术”的结合。
人机系统包括人、机、人机之间的界面以及人机系统所处的环境。
人机界面设计中，要注意显示界面设计、控制界面设计及显控协调性设计。
为了进一步理解各类交互技术，介绍了人机交互设备的工作原理、应用范围及评价指标。

新授：
1.命令行和文本菜单技术
命令行界面虽然没有图形用户界面那么方便用户操作，但目前大多数操作系统中仍然保留命令行方式。
bash/ sh / ksh / csh（Unix-like 系统）
COMMAND.COM（MS-DOS 系统）
cmd.exe / 命令提示字元（Windows NT 系统）
Windows PowerShell（支持.NET Framework 技术的 Windows NT 系统）
命令语言需要用户学习和记住这种语言的语法， 对于缺乏经验的用户，命令语言往往显得相当神秘和复杂，但其仍具有不可替代的优点：
速度快，节省屏幕空间
命令行工具都是基于字符模式的输入输出。它可以在用户和操作系统之间提供直接的通讯，在系统的运行上省去了图形界面的操作时间。
在熟记命令的前提下，使用命令行界面往往要较使用图形用户界面的操作速度要快。
如：利用命令rename 和通配符“*”或“？”，就可以方便地更改一组文件名或扩展名。
兼容性好，适合远程操作 使用批处理文件来执行操作，可比使用用户界面更有效率。

2.图形用户界面
图形用户界面又称为WIMP界面——是第二代人机界面，是基于图形方式的人机界面。
图形用户界面由窗口(windows)、图标(icons)、菜单(meum)、指点设备(pointing device)四位一体，形成桌面(desktop)，输出可以为静态或动态的二维图形或图像。
图形用户界面的共同特点是以窗口管理系统为核心，使用键盘和鼠标作为输入设备。
窗口管理系统除了基于可重叠多窗口管理技术外，广泛采用的另一核心技术是事件驱动技术。
这种方式能同时输出不同种类的信息，用户也可以在几个工作环境中切换而不丢失几个工作之间的联系，通过菜单可以执行控制型和对话型任务。
由于引入了图标、按钮和滚动条技术，大大减少键盘输入，提高了交互效率。
3.图形用户界面的主要思想
直接操纵：是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。
直接操纵的特性：
直接操纵的对象是动作或数据的形象隐喻
形象隐喻应该与其实际内容相近，使用户能通过屏幕上的隐喻直接想象或感知其内容。
用指点和选择代替键盘输入
有两个优点：一是操作简便，速度快捷；二是不用记忆复杂的命令。
4.设计图形用户界面的原则
一般性原则：
1. 界面要具有一致性
2. 常用操作要有快捷方式
为常用操作设计快捷方式，不仅会提高用户的工作效率，还使界面在功能实现上简洁而高效。
3. 提供简单的错误处理
在出现错误时，系统应该能检测出错误，并且提供简单和容易理解的错误处理功能。
4. 对操作人员的重要操作要有信息反馈
5. 操作可逆
对大多数动作应允许恢复(UNDO)，对用户出错采取比较宽容的态度
总结
文本菜单：为了减轻用户记忆的压力所提供的字符界面下的菜单方式
第二代人机界面：图形用户界面又称为WIMP界面，是基于图形方式的人机界面
作业：
通过使用多种人机界面，请描述人机交互界面设计中色彩设计应满足哪些方面的要求。

第三周教学课题：人机交互相关技术（二）
课型： 理论讲授课
课时： 2课时
教学目标：1.图形界面设计原则．
2．图形用户界面设计方法．
教学重点：图形用户界面的原则．
教学难点：输入设计．
教学过程：
1.一般性原则：
界面要具有一致性
常用操作要有快捷方式
为常用操作设计快捷方式，不仅会提高用户的工作效率，还使界面在功能实现上简洁而高效。
提供简单的错误处理
在出现错误时，系统应该能检测出错误，并且提供简单和容易理解的错误处理功能。
对操作人员的重要操作要有信息反馈
操作可逆
对大多数动作应允许恢复(UNDO)，对用户出错采取比较宽容的态度
设计良好的联机帮助
人机界面应该提供上下文敏感的求助系统，让用户及时获得帮助，尽量用简短的动词和动词短语提示命令。
合理划分并高效地使用显示屏
只显示与上下文有关的信息，允许用户对可视环境进行维护，如放大、缩小窗口；用窗口分隔不同种类的信息，只显示有意义的出错信息。
保证信息显示方式与数据输入方式的协调一致
尽量减少用户输入的动作，隐藏当前状态下不可用的命令，允许用户自选输入方式，能够删除错误的输入，允许用户控制交互过程。

图标的图形应该和目标的外形相似，尽量避免过于抽象。
可在图标中附加上简要的文本标注，使用户明确图标的含义。
设计图标应尽可能简单（三维的图标虽然醒目但也能使人分心），符合常规的表达习惯，保持图标含义的前后连贯。
2.按钮的设计原则：
具有交互性，应该有3到6种状态效果：
点击时的状态
鼠标放在上面但未点击的状态
点击前鼠标未放在上面时的状态
点击后鼠标未放在上面时的状态
不能点击时的状态
独立自动变化的状态
按钮应具备简洁的图示效果，应能够让使用者产生功能上的关联反应。属于一个群组的按钮应该风格统一，功能差异大的按钮应该有所区别

在处理大量相关数据的场合下，需要输入一系列的数据，这时填表输入界面是最理想的数据3.输入界面。
填表输入界面的特点：
有明确的提示，使用户可以不需要学习、训练，也不必记忆有关的语义、语法规则。
填表输入界面充分地利用了屏幕空间。
在填表输入方式中，可以充分利用上下文信息，帮助用户完成输入 。
在设计填表输入界面时应遵循的原则

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

第四周教学课题：人机交互相关技术（三）
课型： 理论讲授课
课时： 2课时
教学目标：1.掌握多通道用户界面．
2．了解虚拟显示技术．
教学重点：三维环境下的人机交互技术．
教学难点：手势识别．
教学过程：
导入：常见的游戏操纵杆的交互方式
新授:
1.多通道用户界面
多通道用户界面主要关注人机界面中用户向计算机输入信息以及计算机对用户意图的理解，所要达到的目标：
交互的自然性
使用户尽可能多地利用已有的日常技能与计算机交互，降低认识负荷。
交互的高效性
使人机通讯信息交换吞吐量更大、形式更丰富，发挥人机彼此不同的认知潜力。
与传统的用户界面特别是广泛流行的WIMP/GUI兼容。

多通道用户界面的基本特点：
使用多个感觉和效应通道
允许非精确的交互
三维和直接操纵
人生活在三维空间，习惯于看、听和操纵三维的客观对象，并希望及时看到这种控制的结果。多通道人机交互的自然性反应了这种本质特点。
交互的双向性
交互的隐含性
多通道用户界面并不需要用户显式地说明每个交互成分，反之是在自然的交互过程中隐含地说明。

2.虚拟现实技术
虚拟现实（Virtual Reality）又称虚拟环境。
在其中，人是主动参与者，复杂系统中可能有许多参与者共同在以计算机网络系统为基础的虚拟环境中协同工作。
虚拟现实系统具有三个重要特点：
沉浸感（immersion）、交互性（interaction）、构想性（imagination）
虚拟现实中的两个基本要素：
计算机生成的虚拟世界（环境）必须是一个能给人提供视觉、听觉、触觉、嗅觉以及味觉等多种感官刺激的世界。
虚拟现实系统实质上是一种对多通道信息进行交互操作的高级人机交互系统。
虚拟现实技术是一种以集成为主的技术，其人机界面可以分解为多媒体、多通道界面。
多媒体用户界面技术侧重解决计算机信息表现及输出的自然性和多样性问题。
多通道技术侧重解决计算机信息输入及理解的自然性和多样性问题。
虚拟现实造型语言VRML（Virtual Reality Modeling Language）是一种用于建立真实世界的场景模型或人们虚构的三维世界的场景建模语言。
它是目前Internet上基于 WWW的三维互动网站制作的主流语言。
3.三维输入
许多应用（如虚拟现实系统）需要三维空间定位技术。
三维空间控制器的共同特点是具有六个自由度，分别描述三维对象的宽度、深度、高度、俯仰角、转动角、偏转角。通过控制这六个参数，用户可以在屏幕上平移三维对象或光标，也可沿三个坐标轴转动三维对象。
三维空间的交互操作方式：
直接操纵
由六个自由度、三维输入装置控制的三维光标将使三维交互操作更自然和方便。
三维widgets——即三维交互界面中的一些小工具。
用户通过直接控制它们使界面或界面中的三维对象发生改变。如：在三维空间中漂浮的菜单、用于拾取物体的手的三维图标、平移和旋转指示器等。
4．语音识别
语音识别是计算机通过识别和理解把语音信号转变为相应的文本文件或命令的技术。
语音识别系统的处理流程
语音识别系统的组成：
语音特征提取：从语音信号中提取语音的特征 可以获得语音的本质特征，也起到数据压缩的作用。
声学模型：对应于语音到音节概率的计算
通常把获取的语音特征通过学习算法产生声学模型。
在识别时将输入的语音特征同声学模型 (模式) 进行匹配与比较，得到最佳的识别结果。
语言模型：计算音节到字的概率
包括由识别语音命令构成的语法网络或由统计方法构成的语言模型。

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

第五周教学课题：可用性分析与评估（一）
课型： 理论讲授课
课时： 2课时
教学目标：1.掌握支持可用性的设计原则．
2．了解可用性相关概念．
教学重点：可用性与可用性工程的概念．
教学难点：可替换性设计原则
教学过程：
导入：列举一些好用的互联网产品并分析为什么好用。
新授:
1.可用性与可用性工程
可用性是指特定的用户在特定的环境下使用产品并达到特定目标的效力、效率和满意的程度。
可用性包含五方面的内容：
有效性 (effective) ——怎样准确、完整地完成工作
效率 (efficient) —— 怎样快速地完成工作
吸引力 (engaging) —— 用户界面如何吸引用户进行交互并在使用中得到满意和满足
容错能力 (error tolerant) —— 产品避免错误的发生并帮助用户修正错误的能力
易于学习 (easy to learn) —— 支持用户对产品的入门使用和在以后使用过程中的持续学习
可用性工程：就是改善系统可用性的迭代过程。
改善系统可用性过程中存在两种不同的思想：
系统为中心的设计（System Centered Design）
在这一平台上更容易创建出什么
使用这个可利用的工具能创造出什么
当作为一个开发者时在这个平台上能发现什么有趣的事
用户为中心的设计（ User Centered Design ）
用户的能力和需要
用户所处的环境
用户操作
用户任务
可用性工程的生命周期
了解用户
要在工作环境中观察用户
了解用户的个体特征
任务分析：了解用户的目标任务及为达到目标通常使用的方法。
功能分析： 分析用户任务的功能性原因，弄清哪些是必做的。
竞争性分析：了解对手系统的优缺点
设定可用性目标：新旧版本对比或从竞争性分析中获得
用户参与的设计
迭代设计：设计、测试、再设计
产品发布后的工作：发布后继续收集可用性数据
2.支持可用性的设计原则
提高可用性的基本原则有三大类：可学习性、灵活性、鲁棒性。
可学习性：交互系统能否让新手学会如何使用系统，以及如何达到最佳实用效果。
可预见性——用户利用对以往交互过程的了解就足以确定当前交互的结果。
如：可预见到单击最大化按钮的结果
同步性——用户依据界面当前状态评估过去操作造成影响的能力，也就是说用户能不能同步地知道交互操作的结果。
如：移动文件、刷新显示

熟悉性——如果新系统跟过去使用过的类似系统有一定相关性，那使用起来就比较方便。
如：字处理器与打字机类比；图形用户界面中，一个按钮就暗示它可以被按下。
有效地利用内在的暗示可以增强用户对系统的熟悉性。
通用性：在交互中尽可能的提供一些通用的或能够从现有功能类推出来的功能。
如：剪切/粘贴/复制 操作
一致性：在相似的环境下或执行相似的任务时，一般会执行相似的行为。
熟悉性可以看作与过去现实世界经验的一致性。
通用性可以看作与同一平台、同一系统中软件交互体验的一致性。
如：在Windows中，按F1键总是得到帮助信息。
灵活性：用户与系统交流信息方式的多样性。
可定制性——用户或系统修改界面的能力。
用户主导：可定制性，一般局限于界面表面。
系统主导：自适应性，如隐藏暂时不用的菜单等。
对话主动性——用户主导交互可增加灵活性
注意某些情况需要系统主导交互。
多线程——人机交互系统同时支持多个交互任务，可以把线程看作是一个特定用户任务的相关对话部分。
在任何给定时间，对话实际上还是局限于单个任务。
可互换性——任务的执行可以在系统控制和用户控制间进行转移。
如：字处理程序中的拼写检查对人名的处理。
可替换性——要求等量的数值可以彼此交换，为用户提供多种选择。
鲁棒性：能否成功地达到目标和能否对到达的目标进行评估。
可观察性——允许用户通过观察交互界面的表现来了解系统的内部状态。
可浏览性、缺省值提供、可达性、持久性和操作可见性
可恢复性——用户意识到发生了错误并进行更正的能力。
可恢复性不仅利于鲁棒性，还可大大提高用户的冒险意识，提高系统的可学习性 。
响应性——反映了系统与用户之间交流的频率。
延迟较短或立即响应最好。即使需要较长的时间才有最终结果，也应该有所响应。
任务规范性——系统为完成交互任务所提供的功能是否规范。

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

第六周教学课题：可用性分析与评估（二）
课型： 理论讲授课
课时： 2课时
教学目标：1.掌握可用性评估应该遵循的原则．
2．掌握可用性评估的方法．
教学重点：可用性评估的方法．
教学难点：启发式评估法、调查问卷设定
教学过程：
导入：如何客观地评价一款文字处理软件是否“好用”?
新授:
1.可用性评估
可用性评估是检验软件系统的可用性是否达到了用户的要求。
可用性评估应遵循的原则：
最具有权威性的可用性测试和评估不应该针对专业技术人员，而应该针对产品的用户。
软件的可用性测试和评估是一个过程，这个过程在产品开发的初期阶段就应该开始。
软件的可用性测试必须是在用户的实际工作任务和操作环境下进行。
要选择有广泛代表性的用户。

2.用户模型评估方法
用户模型法：是用数学模型来模拟人机交互的过程。
它把人机交互的过程看做是解决问题的过程。
人使用软件系统时是有目的的，而每一个大的目的可以被细分为许多小的目的。
为了完成每个小的目的， 又有不同的动作和方法可供选择。
每一个细小的过程都可以计算完成的时间。
这个模型就可以用来预测用户完成任务的时间。
如著名的GOMS:通过目标 (Goal)、操作符 (Operator)、方法 (Method) 以及选择规则 (Selection rule) 四个方面进行描述。
3.启发式评估方法
系统与用户现实世界相互匹配
用户控制与自由
一致性与标准
错误预防
识别而不是回忆
使用的灵活性与效率
美观而精炼的设计
帮助用户认识、诊断和修正错误
帮助和文档
4.认知性遍历评估方法
认知性遍历是一种以认知理论为基础的评估技术，它把软件尝试和学习的认知模型结合起来。
利用这种方法，评测者用用户任务中典型的路线尝试走遍整个界面，然后把尝试中界面的活动和反馈与根据认知模型模拟的用户目标和过程相比较，并根据二者之间的差异，对界面进行评估。
认知性遍历认为用户完成一个任务的过程有三步：
评审人员可以对用户的每个交互过程模拟以上三个步骤去评价，并以回答下列三个问题为基础：
5.用户测试评估方法
用户测试是通过观察和测试用户在被控制的环境中，使用系统完成任务的过程来评估界面（软件）易用程度的一种技术。
用户测试分为：实验室测试和现场测试
测试过程包括：前期准备、测试阶段、测试评价
主要测试内容：易学、有效、容错、乐用
尽可能收集下面两类数据 ：
定量变量数据
定性指标
6.问卷调查评估方法
问卷调查法：是直接向广大用户或经过选择的样本用户进行询问，然后对收集到的反馈信息进行统计分析，产生有用的评估结论。
调查收集到的大多是主观数据，主要了解用户使用该界面的情况，对界面的态度和意见。
问卷调查的执行过程
用户需求分析
问卷设计
问卷实施及结果分析
7.以用户为中的界面设计
以用户为中心的最基本思想就是将用户时刻摆在所有过程的首位 。
一个好的人机交互界面从设计一开始就要考虑可用性问题，并在以后的实现过程中始终将可用性问题作为一个重要方面。
以用户为中心设计的四个重要原则：
及早以用户为中心
综合设计
及早并持续性地进行测试
反复式设计
IBM公司对象、视图和交互设计(OVID)方法
通过对用户、目标和任务的分析，系统地指导人机界面设计，以达到用户满意的设计要求。
应用过程：
对象建模分析：
将系统和用户任务分析的结果转化为用户界面设计。
建模是将系统任务的某些概念及其关系用图的方式直观综合地表达出来；
分析则是将系统的对象抽象为类，列出对象或类的属性、行为、以及对象间的关系。
视图抽象设计：
仔细研究系统的对象模型，列出其系统状态，对每个视图抽象出其中涉及的对象，以及对象的属性和行为。
概要设计
针对特定的操作系统或交互方式，对抽象的视图设计做进一步的具体设计，产生视图的概要设计。
视图的关联设计
任何一个人机交互系统的界面都可能包括若干状态，很多交互任务的完成需要从一个状态转化为另一个状态，这就要考虑用户完成任务所需的信息和所需的功能；并将不同交互视图之间的联系和状态转化关系整理清楚。
视图的全面设计
确定各个视图的具体内容和大致布局，并在每个视图上明确体现与其他视图的关系，保证系统的整体性和和谐性。
然后可以借助具体的开发工具进行界面的实际设计。
总 结
可用性评估是检验软件系统的可用性是否达到了用户的要求。
可用性评估方法：
用户模型法、启发式评估法、认知性遍历法、用户测试法、问卷调查法
以用户为中心的界面设计
以用户为中心的最基本思想就是将用户时刻摆在所有过程的首位 ，始终将可用性问题作为一个重要方面。
对象、视图和交互设计(OVID)方法：
对象建模分析
视图抽象设计
概要设计
视图的关联设计
视图的全面设计
作业：查找资料，分别收集不同类型的人机交互界面，并对其进行分析、评价。

第七周教学课题：Web界面设计（二）
课型： 理论讲授课
课时： 2课时
教学目标：1.掌握web基础知识．
2．掌握web信息架构的方法．
教学重点：web信息设计模型
教学难点：web信息设计模型
教学过程：
复习：可用性是指特定的用户在特定的环境下使用产品并达到特定目标的效力、效率和满意的程度。
包含五方面的内容：有效性 、效率 、 吸引力 、容错能力 、易于学习
改善系统可用性过程中两种思想：
系统为中心的设计
用户为中心的设计
新授:
1.Web基础
互联网是近年来对社会影响最大的技术进步。
它具有传播信息量大、形式多样、迅速方便、全球覆盖和交互性强的特点，已经发展成为新的传播媒体，所以全球各个企业、 机构纷纷建立自己的Web 站点。
从技术上讲，互联网带来了通信业的革命；
从经济上讲，网络技术带来了电子商务；
从文化上讲，网络技术把我们真正带入了信息社会；
从认知科学的角度来说，互联网是一种新的认知结构。
20世纪90年代初，人们开始开发各种在互联网上浏览信息的工具。
为了建立一个能够整合各种资源、文件及多媒体的系统，让使用者方便地取得不同媒体的资料，瑞士日内瓦的欧洲核能研究中心高能核理学家Tim Berners-Lee研究发展了万维网（World Wide Web，WWW）的雏形。
1993年，美国“国家超级计算机应用中心”发行了一个面向Unix系统的图形浏览器Mosaic，使原来只提供超文本文档服务的Web得到了发展。
2.Web页面的发展趋势
Web的发展趋势
图形Web页面的爆炸性发展。
网上浏览中包括了大量使用的动态图形，使图形Web遍布网络的各个角落。
新一代Web信息描述标准XML的出现。
它能更详尽地描述文档的结构信息，具有比HTML有更强大的功能，为Web的发展提供了强有力的支持。
关键技术：
超文本——是一种使用于文本、图形或计算机的信息的组织形式，是一种非线性的信息组织形式。
超媒体——利用超文本形式组织起来的文件不仅仅是文本，也可以是图、文、声、像以及视频等多媒体形式的文件。这些多媒体信息就构成了所谓的超媒体。
3.Web界面基本设计技术
JavaScript
JavaScript JavaScript是 种内嵌于 一 HTML中的脚本语言，它是一种基于对象和事件驱动并具有安全性能的脚本语言。
基本特点： JavaScript是一种脚本编写语言；是基于对象的语言；简单性；安全性；动态
性；跨平台性。Web界面基本设计技术
脚本：
<HTML>
<head>
<Script Language ="JavaScript">
al t er （"这是第 个一 J S it avaScript例子!"）;
alert（"欢迎你进入JavaScript世界!"）;
alert（"今后我们将共同学习 今后我们将共同学习JavaScript JavaScript知识！"）;
</Script>
</head>
</HTML>
4.Web界面设计问题的提出
Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。
Web界面设计与站点外观直接相关
站点的界面外观是否友好直接关系到是否能吸引人的关注。
人性化的设计是Web界面设计的核心
如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。
5.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界面设计中用户的地位。
作 业
上网查找 “土豆网 和 “天线网

第九周教学课题：Web界面设计（三）
课型： 理论讲授课
课时： 2课时
教学目标：1.掌握web界面的内容设计原则．
2．掌握各种web设计工具综合使用的技巧．
教学重点：web界面与数字内容
教学难点：导航设计
教学过程：
导入：形式与内容的关系？
新授:
1.Web界面的内容与风格
Web界面的内容要符合确定的设计目标，面向不同的对象要使用不同的口吻和用词。
为网站编写内容时要特别注意：
使用用户的语言；
使用平易的语言；
避免不必要的词句；
使用简单的句子；
避免夸夸其谈；
保证准确性，反映时间性。
2.网站内容设计的原则
HTML文档的效果由其自身的质量和浏览器解释的方法决定。不同浏览器的解释方法不同，所以应注意让所有的浏览器都能够正常浏览。
网站信息的组织的总体结构要层次分明，尽量避免形成复杂的网状结构。
要权衡图像和多媒体信息的数量，在不影响网站效果的前提下，尽量减少图像的数量和所占面积。
网站的首页要给用户带来好的第一印象，能够吸引用户再次光临这个网站。
网站内容应是动态进行修改和更新。
网页中应该提供联机帮助功能。
网页的文本内容应简明，通俗易懂。
所有的内容都要针对设计目标而写，不要节外生枝。
文字要正确，不能有语法错误和错别字。
3.Web界面的风格选择
Web界面的风格包括站点的标志、色彩、字体、布局、交互