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

1、四川师范大学数字媒体学院教师教学教案课程名称：人机交互技术课程类型：专业选修授课对象：2013级7班授课时间：2014.9-2015.1授课课时：32_授课教师：刘云安所在系：数字媒体技术二三年五月课程名称人机交互技术教学目标培养独立思考、分析问题和解决问题的能力人机交互的相关理论；NUI自然的人机交互人机交互硬件的掌握教学重点人机交互与认知心理学计算机科学的关系；交互设计原则；图形用户界面；NUI；教学难点交互硬件；NUI实现原理；菲兹定律；移动设备交互设计教学过程及主要内容(包括教学内容、教师活动、学生活动、教学方法、课程作业等)第一周教学课题：绪论课型：理论讲授课课时：2课时教学目标:1

2、.使学生了解什么是人机交互.使学生了解交互设备.使学生了解人机交互的发展趋势教学重点：人交交互的发展趋势.教学难点：HCI的实现机制.教学过程：导入：同学们使用智能手机的经验。新授：1什么是人机交互人机父互(HumanComputerInteraction,HCI)是关于设计、评价和实现供人们使用的父互式计算机系统，且围绕这些方面主要现象进行研究的科学。人机交互技术主要是研究人与计算机之间的信息交换，它主要包括人到计算机和计算机到人的信息交换两部分。它涉及到计算机科学、心理学、认知科学和社会学以及人类学等诸多学科，是信息技术的一个重要组成部分。人机交互技术着重研究人机双向信息交换方式如何用软硬

3、件实现。2HCI的研究内容人机交互的研究涵盖了建模、设计、评估等理论和方法以及在Web、移动计算、虚拟现实等方面的应用研究与开发。人机交互界面表示模型与设计方法可用性分析与评估多通道交互技术认知与智能用户界面虚拟环境中的人机交互Web设计移动界面设计群件3发展历史：语言命令交互阶段计算机语言经历了由最初的机器语言，而后是汇编语言，直至高级语言的发展过程。采用手工操作输入机器语言指令(二进制机器代码)来控制计算机；出现了FORTRAN、PASCAL、COBOL等语言，使人们可以用比较习惯的符号形式描述计算过程；60年代中期，命令行界面开始出现，通过这种人机界面，人们可以通过问答式对话、文本菜单或

4、命令语言等方式来进行人机交互。图形用户界面(GUI)交互阶段GUI的主要特点是桌面隐喻、WIMP(Windows、Icon、Menu、PointingDevice)技术、直接操纵和“所见即所得(WhatYouSeeIsWhatYouGet)。自然和谐的人机交互阶段主要特点是基于语音、手写体、姿势、视线跟踪、表情等输入手段的多通道交互。目的是使人能以声音、动作、表情等自然方式进行交互操作。4发展趋势：集成化卡耐基-梅隆大学INTERACTIVESYSTEMLABS的INTERACT项目包括如下子课题：网络化新一代的人机交互技术需要考虑在不同设备、不同网络、不同平台之间的无缝过渡和扩展支持人们通过

5、跨地域的网络在世界上任何地方用多种简单的自然方式进行人机交互而且包括支持多个用户之间以协作的方式进行交互。智能化提高交互活动的自然性和高效性，使人一机之间的交互像人一人交互一样自然、方便。标准化在人机交互领域，ISO已正式发布了许多的国际标准，以指导产品设计、测试和可用性评估等。5认知涉及到多个特定类型的过程，包括：关注、感知和识别、记忆、学习、阅读、说话和聆听、解题、规划、推理和决策。这些认知过程相互依赖，一个活动可以同时涉及多个不同的过程。认知分为两个模式：经验认知：指的是有效、轻松地观察、操作和响应周围的事件，它要求具备某些专门知识并达到一定的熟练程度。如使用Word字处理系统编辑文档，

6、操作机床加工零件，阅读，驾驶汽车等。思维认知：涉及思考、比较和决策，是发明创造的来源。如设计、学习、写作等。6总结：人机交互是关于设计、评价和实现供人们使用的交互式计算机系统，且围绕这些方面主要现象进行研究的科学。人机交互的研究涵盖了建模、设计、评估等理论和方法以及在Web、移动计算、虚拟现实等方面。人机交互的发展历史：语言命令交互T图形用户界面交互T自然和谐的人机交互。人机交互的发展趋势：集成化、网络化、智能化、标准化。人机交互主要通过人的感知来完成，人的感知是认知心理学的基础。视觉、听觉、触觉的感知特点。作业：人机交互的发展趋势越来越强调“以人为本”“自然和谐”的方式，请根据本次课知识，尽

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

8、虽然没有图形用户界面那么方便用户操作，但目前大多数操作系统中仍然保留命令行方式。bash/sh/ksh/csh（UnixTike系统）COMMAND.COM（MS-DOS系统）cmd.exe/命令提示字元（WindowsNT系统）WindowsPowerShell（支持.NETFramework技术的WindowsNT系统）命令语言需要用户学习和记住这种语言的语法，对于缺乏经验的用户，命令语言往往显得相当神秘和复杂，但其仍具有不可替代的优点：速度快，节省屏幕空间命令行工具都是基于字符模式的输入输出。它可以在用户和操作系统之间提供直接的通讯，在系统的运行上省去了图形界面的操作时间。在熟记命令的前

9、提下，使用命令行界面往往要较使用图形用户界面的操作速度要快。如：利用命令rename和通配符“*”或“？”，就可以方便地更改一组文件名或扩展名。兼容性好，适合远程操作使用批处理文件来执行操作，可比使用用户界面更有效率。GuxinsrSoftCMOSSETUPUTILITYAUARDSOFTWfiEE,INC.STANDARDCMOSSETUPBIOSFEATURESSETUPCHIPSETFEATURESSETUPPOWERNANAGENENTSETUPPNP/PCICONFIGURATIONLOADBIOSDEFAULTSLOADOPTIMUMSETTINGSINTEGRATEDPERIPH

10、ERALSSUFERUISORFASSUORDUSERFASSUORDIDEHDDAUTODETECTIONSAUE&EXITSETUPEXITWITHOUTSAUINGEsc:QuitFIB:Save&ExitSetupT4-*-:SelectItEmfta:Am.AHDEtEVP*HIApptTimTHECHILDRENSHEARTPROGRAMOFSOUTHCAROLINARTrralProviderDataOOjtdiR*fnirjtia/IacoD画ClttlffDelettfSliEWApp&Vt作业：设计一个用户登录界面，画出线框图。第四周教学课题：人机交互相关技术(三)课型：理

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

12、看、听和操纵三维的客观对象，并希望及时看到这种控制的结果。多通道人机交互的自然性反应了这种本质特点。交互的双向性交互的隐含性多通道用户界面并不需要用户显式地说明每个交互成分，反之是在自然的交互过程中隐含地说明。虚拟现实技术虚拟现实(VirtualReality)又称虚拟环境。在其中，人是主动参与者，复杂系统中可能有许多参与者共同在以计算机网络系统为基础的虚拟环境中协同工作。虚拟现实系统具有三个重要特点：沉浸感(immersion)、交互性(interaction)、构想性(imagination)虚拟现实中的两个基本要素：计算机生成的虚拟世界(环境)必须是一个能给人提供视觉、听觉、触觉、嗅觉以

13、及味觉等多种感官刺激的世界。虚拟现实系统实质上是一种对多通道信息进行交互操作的高级人机交互系统。虚拟现实技术是一种以集成为主的技术，其人机界面可以分解为多媒体、多通道界面。多媒体用户界面技术侧重解决计算机信息表现及输出的自然性和多样性问题。多通道技术侧重解决计算机信息输入及理解的自然性和多样性问题。虚拟现实造型语言VRML(VirtualRealityModelingLanguage)是一种用于建立真实世界的场景模型或人们虚构的三维世界的场景建模语言。它是目前Internet上基于WWW的三维互动网站制作的主流语言。3三维输入许多应用（如虚拟现实系统）需要三维空间定位技术。三维空间控制器的共同

14、特点是具有六个自由度，分别描述三维对象的宽度、深度、高度、俯仰角、转动角、偏转角。通过控制这六个参数，用户可以在屏幕上平移三维对象或光标，也可沿三个坐标轴转动三维对象。三维空间的交互操作方式：直接操纵由六个自由度、三维输入装置控制的三维光标将使三维交互操作更自然和方便。三维widgets即三维交互界面中的一些小工具。用户通过直接控制它们使界面或界面中的三维对象发生改变。如：在三维空间中漂浮的菜单、用于拾取物体的手的三维图标、平移和旋转指示器等。4语音识别语音识别是计算机通过识别和理解把语音信号转变为相应的文本文件或命令的技术。语音识别系统的处理流程语音识别系统的组成：语音特征提取：从语音信号中

15、提取语音的特征可以获得语音的本质特征，也起到数据压缩的作用。声学模型：对应于语音到音节概率的计算通常把获取的语音特征通过学习算法产生声学模型。在识别时将输入的语音特征同声学模型（模式）进行匹配与比较，得到最佳的识别结果。语言模型：计算音节到字的概率包括由识别语音命令构成的语法网络或由统计方法构成的语言模型。声学音iSWVMS離选分林后的谄昏汉确听写机的廉境蜡构作业：查找资料，简述什么是SUI，并说明它与GUI相比有何优势。第五周教学课题：可用性分析与评估(一)课型：理论讲授课课时：2课时教学目标：1掌握支持可用性的设计原则.2.了解可用性相关概念.教学重点：可用性与可用性工程的概念.教学难点：

16、可替换性设计原则教学过程：导入：列举一些好用的互联网产品并分析为什么好用。新授：可用性与可用性工程可用性是指特定的用户在特定的环境下使用产品并达到特定目标的效力、效率和满意的程度。可用性包含五方面的内容：有效性(effective)怎样准确、完整地完成工作效率(efficient)怎样快速地完成工作吸引力(engaging)用户界面如何吸引用户进行交互并在使用中得到满意和满足容错能力(errortolerant)产品避免错误的发生并帮助用户修正错误的能力易于学习(easytolearn)支持用户对产品的入门使用和在以后使用过程中的持续学习可用性工程：就是改善系统可用性的迭代过程。改善系统可用性

17、过程中存在两种不同的思想：系统为中心的设计(SystemCenteredDesign)在这一平台上更容易创建出什么使用这个可利用的工具能创造出什么当作为一个开发者时在这个平台上能发现什么有趣的事用户为中心的设计(UserCenteredDesign)用户的能力和需要用户所处的环境用户操作用户任务可用性工程的生命周期了解用户要在工作环境中观察用户了解用户的个体特征任务分析：了解用户的目标任务及为达到目标通常使用的方法。功能分析：分析用户任务的功能性原因，弄清哪些是必做的。竞争性分析：了解对手系统的优缺点设定可用性目标：新旧版本对比或从竞争性分析中获得用户参与的设计迭代设计：设计、测试、再设计产品

18、发布后的工作：发布后继续收集可用性数据2支持可用性的设计原则提高可用性的基本原则有三大类：可学习性、灵活性、鲁棒性。可学习性：交互系统能否让新手学会如何使用系统，以及如何达到最佳实用效果。可预见性一一用户利用对以往交互过程的了解就足以确定当前交互的结果。如：可预见到单击最大化按钮的结果同步性一一用户依据界面当前状态评估过去操作造成影响的能力，也就是说用户能不能同步地知道交互操作的结果。如：移动文件、刷新显示熟悉性一一如果新系统跟过去使用过的类似系统有一定相关性，那使用起来就比较方便。如：字处理器与打字机类比；图形用户界面中，一个按钮就暗示它可以被按下。有效地利用内在的暗示可以增强用户对系统的熟

19、悉性。通用性：在交互中尽可能的提供一些通用的或能够从现有功能类推出来的功能。如：剪切/粘贴/复制操作一致性：在相似的环境下或执行相似的任务时，一般会执行相似的行为。熟悉性可以看作与过去现实世界经验的一致性。通用性可以看作与同一平台、同一系统中软件交互体验的一致性。如：在Windows中，按F1键总是得到帮助信息。灵活性：用户与系统交流信息方式的多样性。可定制性一一用户或系统修改界面的能力。用户主导：可定制性，一般局限于界面表面。系统主导：自适应性，如隐藏暂时不用的菜单等。对话主动性用户主导交互可增加灵活性注意某些情况需要系统主导交互。多线程一一人机交互系统同时支持多个交互任务，可以把线程看作是

20、一个特定用户任务的相关对话部分。在任何给定时间，对话实际上还是局限于单个任务。可互换性一一任务的执行可以在系统控制和用户控制间进行转移。如：字处理程序中的拼写检查对人名的处理。可替换性一一要求等量的数值可以彼此交换，为用户提供多种选择。鲁棒性：能否成功地达到目标和能否对到达的目标进行评估。可观察性一一允许用户通过观察交互界面的表现来了解系统的内部状态。可浏览性、缺省值提供、可达性、持久性和操作可见性可恢复性一一用户意识到发生了错误并进行更正的能力。可恢复性不仅利于鲁棒性，还可大大提高用户的冒险意识,提高系统的可学习性。响应性一一反映了系统与用户之间交流的频率。延迟较短或立即响应最好。即使需要较

21、长的时间才有最终结果，也应该有所响应。任务规范性一一系统为完成交互任务所提供的功能是否规范。作业：从可用性的五个方面（有效性、效率、吸引力、容错性、易于学习）分析word软件。第六周教学课题：可用性分析与评估（二）课型：理论讲授课课时：2课时教学目标：1掌握可用性评估应该遵循的原则.2掌握可用性评估的方法.教学重点：可用性评估的方法.教学难点：启发式评估法、调查问卷设定教学过程：导入：如何客观地评价一款文字处理软件是否“好用”？新授：可用性评估可用性评估是检验软件系统的可用性是否达到了用户的要求。可用性评估应遵循的原则：最具有权威性的可用性测试和评估不应该针对专业技术人员，而应该针对产品的用户

22、。软件的可用性测试和评估是一个过程，这个过程在产品开发的初期阶段就应该开始。软件的可用性测试必须是在用户的实际工作任务和操作环境下进行。要选择有广泛代表性的用户。2用户模型评估方法用户模型法：是用数学模型来模拟人机交互的过程。它把人机交互的过程看做是解决问题的过程。人使用软件系统时是有目的的，而每一个大的目的可以被细分为许多小的目的。为了完成每个小的目的，又有不同的动作和方法可供选择。每一个细小的过程都可以计算完成的时间。这个模型就可以用来预测用户完成任务的时间。如著名的GOMS:通过目标（Goal）、操作符（Operator）、方法（Method）以及选择规则（Selectionrule）四

23、个方面进行描述。3启发式评估方法系统与用户现实世界相互匹配用户控制与自由一致性与标准错误预防识别而不是回忆使用的灵活性与效率美观而精炼的设计帮助用户认识、诊断和修正错误帮助和文档4认知性遍历评估方法认知性遍历是一种以认知理论为基础的评估技术，它把软件尝试和学习的认知模型结合起来。利用这种方法，评测者用用户任务中典型的路线尝试走遍整个界面，然后把尝试中界面的活动和反馈与根据认知模型模拟的用户目标和过程相比较，并根据二者之间的差异，对界面进行评估。认知性遍历认为用户完成一个任务的过程有三步：评审人员可以对用户的每个交互过程模拟以上三个步骤去评价，并以回答下列三个问题为基础：5.用户测试评估方法用户

24、测试是通过观察和测试用户在被控制的环境中，使用系统完成任务的过程来评估界面(软件)易用程度的一种技术。用户测试分为：实验室测试和现场测试测试过程包括：前期准备、测试阶段、测试评价主要测试内容：易学、有效、容错、乐用尽可能收集下面两类数据：定量变量数据定性指标6问卷调査评估方法问卷调查法：是直接向广大用户或经过选择的样本用户进行询问，然后对收集到的反馈信息进行统计分析，产生有用的评估结论。调查收集到的大多是主观数据，主要了解用户使用该界面的情况，对界面的态度和意见。问卷调查的执行过程用户需求分析问卷设计问卷实施及结果分析7以用户为中的界面设计以用户为中心的最基本思想就是将用户时刻摆在所有过程的首

25、位。一个好的人机交互界面从设计一开始就要考虑可用性问题，并在以后的实现过程中始终将可用性问题作为一个重要方面。以用户为中心设计的四个重要原则：及早以用户为中心综合设计及早并持续性地进行测试反复式设计IBM公司对象、视图和交互设计(OVID)方法通过对用户、目标和任务的分析，系统地指导人机界面设计，以达到用户满意的设计要求。应用过程：对象建模分析：将系统和用户任务分析的结果转化为用户界面设计。建模是将系统任务的某些概念及其关系用图的方式直观综合地表达出来；分析则是将系统的对象抽象为类，列出对象或类的属性、行为、以及对象间的关系。视图抽象设计：仔细研究系统的对象模型，列出其系统状态，对每个视图抽象

26、出其中涉及的对象,以及对象的属性和行为。概要设计针对特定的操作系统或交互方式，对抽象的视图设计做进一步的具体设计，产生视图的概要设计。视图的关联设计任何一个人机交互系统的界面都可能包括若干状态，很多交互任务的完成需要从一个状态转化为另一个状态，这就要考虑用户完成任务所需的信息和所需的功能;并将不同交互视图之间的联系和状态转化关系整理清楚。视图的全面设计确定各个视图的具体内容和大致布局，并在每个视图上明确体现与其他视图的关系，保证系统的整体性和和谐性。然后可以借助具体的开发工具进行界面的实际设计。总结可用性评估是检验软件系统的可用性是否达到了用户的要求。可用性评估方法：用户模型法、启发式评估法、

27、认知性遍历法、用户测试法、问卷调查法以用户为中心的界面设计以用户为中心的最基本思想就是将用户时刻摆在所有过程的首位，始终将可用性问题作为一个重要方面。对象、视图和交互设计(OVID)方法：对象建模分析视图抽象设计概要设计视图的关联设计视图的全面设计作业：查找资料，分别收集不同类型的人机交互界面，并对其进行分析、评价。第七周教学课题：Web界面设计(二)课型：理论讲授课课时：2课时教学目标：1.掌握web基础知识.掌握web信息架构的方法.教学重点：web信息设计模型教学难点：web信息设计模型教学过程：复习：可用性是指特定的用户在特定的环境下使用产品并达到特定目标的效力、效率和满意的程度。包含

28、五方面的内容：有效性、效率、吸引力、容错能力、易于学习改善系统可用性过程中两种思想：系统为中心的设计用户为中心的设计新授：Web基础互联网是近年来对社会影响最大的技术进步。它具有传播信息量大、形式多样、迅速方便、全球覆盖和交互性强的特点，已经发展成为新的传播媒体，所以全球各个企业、机构纷纷建立自己的Web站点。从技术上讲，互联网带来了通信业的革命；从经济上讲，网络技术带来了电子商务；从文化上讲，网络技术把我们真正带入了信息社会；从认知科学的角度来说，互联网是一种新的认知结构。20世纪90年代初，人们开始开发各种在互联网上浏览信息的工具。为了建立一个能够整合各种资源、文件及多媒体的系统，让使用者

29、方便地取得不同媒体的资料，瑞士日内瓦的欧洲核能研究中心高能核理学家TimBerners-Lee研究发展了万维网(WorldWideWeb，WWW)的雏形。1993年，美国国家超级计算机应用中心”发行了一个面向Unix系统的图形浏览器Mosaic，使原来只提供超文本文档服务的Web得到了发展。2Web页面的发展趋势Web的发展趋势图形Web页面的爆炸性发展。网上浏览中包括了大量使用的动态图形，使图形Web遍布网络的各个角落。新一代Web信息描述标准XML的出现。它能更详尽地描述文档的结构信息，具有比HTML有更强大的功能，为Web的发展提供了强有力的支持。关键技术：超文本一一是一种使用于文本、图

30、形或计算机的信息的组织形式，是一种非线性的信息组织形式。超媒体一一利用超文本形式组织起来的文件不仅仅是文本，也可以是图、文、声、像以及视频等多媒体形式的文件。这些多媒体信息就构成了所谓的超媒体。Web界面基本设计技术JavaScriptJavaScriptJavaScript是种内嵌于一HTML中的脚本语言，它是一种基于对象和事件驱动并具有安全性能的脚本语言。基本特点：JavaScript是一种脚本编写语言；是基于对象的语言；简单性；安全性；动态性；跨平台性。Web界面基本设计技术脚本：alter（这是第个一JSitavaScript例子！）；alert（欢迎你进入JavaScript世界！）

31、；alert（今后我们将共同学习今后我们将共同学习JavaScriptJavaScript知识！）;/ScriptWeb界面设计问题的提出Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。Web界面设计与站点外观直接相关站点的界面外观是否友好直接关系到是否能吸引人的关注。人性化的设计是Web界面设计的核心如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。5Web信息交互模型Web信息交互模型是用来解释Web的人机界面性质的一个模型，它提出网页是用户和知识之间的界面。信息標供者认如结构v曲信息交互模型Web界面设计原则体现特色只有丰富特色、

32、内容翔实的网页才能使浏览者驻足阅读。特色鲜明的Web网站是精心策划的结果，只有独特的创意和赏心悦目的网页设计才能在和赏心悦目的网页设计才能在瞬间打动浏览者一瞬间打动浏览者。兼顾不同的浏览器明确的导航设计网站首页导航应尽量展现整个网站的架构和内容，要能让浏览者确切地知道自己在整个网站中的位置，可以确定下一步的浏览去向。作业：通过w3cshool学习web表单技术第八周教学课题：Web界面设计（二）课型：理论讲授课课时：2课时教学目标：1掌握web概念设计结构图画表达方法.掌握web界面设计原则.教学重点：web界面规划教学难点：web界面规划之形式与内容教学过程：导入：web表单如何布局?在布局

33、过程中要考虑哪些问题？新授：Web网站的概念设计概念设计涉及的工作：分析、确定站点的目标和用途，准确定义所建立Web网站及站点的规范。事先建立好站点的架构和导航设计。兼顾不同的浏览器。网站的结构恰当地组织网站有利于达到网站的目标。站点的结构可分为：逻辑结构描述文档间的关系，定义文档间的链接。物理结构描述文档的实际位置及显示方式。Web界面设计所涉及的问题Web界面设计中要考虑的基本问题是Web界面设计基本原则和Web界面规划。由于计算机及其网络技术的特点和条件，对网页设计是有限制的。网页设计与传统平面设计的主要区别：介质的不同显示器的色彩比印刷品色彩丰富而分辨率比印刷品低。在网页设计时应扬长避

34、短,追求网页的色彩效果，避免过于在细节、细部做文章。页面大小的限制考虑当前电脑用户的显示环境，应尽量做到在多数的环境下，不用滚屏便可显示出完整的页面；需要滚屏时，上下与左右滚动条只选择其一。交互性设计多媒体功能Web界面设计基本原则Web界面设计基本原则：了解浏览者的心理状态必须迅速地把有趣和有吸引力的东西显示出来。内容与形式的统一网页设计的目的就是为了使网页更加形象、直观，更易被观众所接受。不同内容的网页要求用不同的设计形式。减少浏览层次应尽量把网页的层次简要化，力求以最少的点击次数链接到具体的内容。特点明确特色鲜明的网站使用具有独特创意和赏心悦目的网页能在一瞬间打动它的浏览者。统一整体的形

35、象Web网站标识以及网页设计标准确定后，应尽量地应用到每一页页面上，使浏览者可以确定当前所浏览的网站，并且给浏览者留下深刻而统一的印象。Web界面设计的3C原则concise（简洁）consistent（致性）contrast（对比度）SONY201004-00BDP-B3to201004-07BIOGAS20100J-012011024许t：E1.MUKL.2010-024VFCE1.r?!lMP.2010024许t：E1系洌：护.ASt见问週站石-2Q1Q-ovar去于期尼I申国脈劳与丈持冋站升議通如2010-03-24-ttZdEITAA-2010-01-14T.jEvori-c-si.

36、CS2.CSaS.-Jo-TA且飢coft!晶面捷延绘保修胡的.2010-03-2J在Wi-idcwrf：丁曲a2010-03-13关于涙尼中日硕客咨谊谢删麟1通知J-*索尼用户服务安心和便利阿如:VGNZ49D选择产品类矍VAlOTAmi也罚冏边处说-201d-q1g*【安心便利】.更廉化卜1S修虽.各再票尼中即扯齐战品电猱保快蚤2flll04-|j7BIQ51SW82010-03-四关于常尼中国）眼务与支特冋站下爺眼善觥护遇知TE0-AM1詫于WU0K習盘电池曲PPL?11i用机31的昱正逼知-2010-02-10关于WOWN-25；係对T人电腕1：供凶口创朋炽妥疟光醐櫃知2010-03-

37、1.0I0D-UM30DFAJW-a门mi!rzivi内凶hIbvtindm円hikw】n卡永弍：E專ri萼IiDLlMiTDuAtWeb界面基本规划确定Web界面设计的目标企业Web网站：企业建立这个Web网站的目的。这个网站的作用。该提供哪些吸引访问者的东西？用户访问这个Web网站后，能给他们带来什么？个人Web网站：主要是展现自我、演练技术。建立的Web网站要有个性和特色。界面布局的规划制定好目标后，网页布局、元素的设计都要以这个目标为中心，尽量从各方面综合表现Web站点的目标。Web界面设计中用户的地位确定Web站点的用户群体，从用户角度去思考。以用户为中心的设计，为用户的共性设计，同

38、时考虑差异。从目标用户群的构成进行分析：Web网站是以提供的信息内容来分类的。从目标用户的行为方式来分析：按人机工程学观点，行为方式受年龄、性别、地区、种族、职业、生活习俗、受教育程度等因素影响。行为方式直接影响人们对网站的操作使用，如用户上网的浏览习惯、上网特点。总结互联网是近年来对社会影响最大的技术进步，明确了Web的发展趋势。Web界面外观是否友好直接关系到是否能吸引人的关注。Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。Web信息交互模型是用来解释Web的人机界面性质的一个模型，它提出网页是用户和知识之间的界面。Web信息设计模型是研究网页的信息设计模型。主要研究

39、信息的选取和信息如何被表现。Web网站概念设计涉及的工作：建立好站点的架构和导航设计。兼顾不同的浏览器。Web界面设计所涉及的问题Web界面设计基本原则Web界面规划：确定Web界面设计的目标（布局）、Web界面设计中用户的地位。作业上网查找“土豆网 HYPERLINK /%e2%80%9d%e3%80%81%22%e4%bc%98%e9%85%b7%e7%bd%91 /”、优酷网 HYPERLINK /%e2%80%9d /”和天线网 HYPERLINK /%e2%80%9d%ef%bc%8c%e8%a7%82%e5%af%9f%e4%b8%89%e4%b8%aa%e7%bd%91%e7%a

40、b%99%e9%a6%96%e9%a1%b5%e6%a0%87%e5%a4%b4%e7%95%8c%e9%9d%a2%e8%bf%9b%e8%a1%8c%e5%af%b9%e6%af%94%ef%bc%8c%e5%88%86%e6%9e%90%e8%af%b4%e6%98%8e%e5%90%84%e7%bd%91%e7%ab%99%e7%9a%84%e7%9b%ae%e6%a0%87%ef%bc%88%e5%80%be /”，观察三个网站首页标头界面进行对比，分析说明各网站的目标（倾向性）是什么？第九周教学课题：Web界面设计（三）课型：理论讲授课课时：2课时教学目标：1掌握web界面的内容设

41、计原则.掌握各种web设计工具综合使用的技巧.教学重点：web界面与数字内容教学难点：导航设计教学过程：导入：形式与内容的关系？新授：Web界面的内容与风格Web界面的内容要符合确定的设计目标，面向不同的对象要使用不同的口吻和用词。为网站编写内容时要特别注意：使用用户的语言；使用平易的语言；避免不必要的词句；使用简单的句子；避免夸夸其谈；保证准确性，反映时间性。网站内容设计的原则HTML文档的效果由其自身的质量和浏览器解释的方法决定。不同浏览器的解释方法不同,所以应注意让所有的浏览器都能够正常浏览。网站信息的组织的总体结构要层次分明，尽量避免形成复杂的网状结构。要权衡图像和多媒体信息的数量，在

42、不影响网站效果的前提下，尽量减少图像的数量和所占面积。网站的首页要给用户带来好的第一印象，能够吸引用户再次光临这个网站。网站内容应是动态进行修改和更新。网页中应该提供联机帮助功能。网页的文本内容应简明，通俗易懂。所有的内容都要针对设计目标而写，不要节外生枝。文字要正确，不能有语法错误和错别字。Web界面的风格选择Web界面的风格包括站点的标志、色彩、字体、布局、交互方式、内容价值、存在意义等。一个杰出的网站需要整体的形象包装和设计。为儿童设计的网站应当使用比较丰富的色彩和图形，并且较多使用动画和声音等多媒体表现工具。为老年人设计的网站需要考虑采用较大的字体、直截了当的信息显示和简单的浏览方式,

43、以适用老年人可能逐渐减弱的视力和记忆力。Web界面设计的语言与文化网站应设置多语言选择网站面向的用户使用不同的语言，则在设计时要考虑包括不同语言的版本，将选择语言版本的功能放在网站的主页，并用不同版本的语言进行标注。音响设计等。Web设计者可以使用很多当前Web设计中的多媒体处理工具和技术，但是带宽以及浏览器的支持能力限制了多媒体技术的迅速采用。为了充分享受新技术，通常需要大带宽、浏览器插件或第三方应用程序的支持。Web界面中的动画动画是区别Web和其它媒体的一个重要展示形式，动画赋予了用户运动和投入的感受。动画可以分为不同的级别，从简单的动画GIF图像到三维以及虚拟环境。最常用的基本动画类型

44、是GIF、Rollover和MacromediaFlash文件。动画GIF是静止图像的汇集，可以按照指定的序列号和速度重复运动。Rollover是一种滚动方法，当用户鼠标穿过时触发。Flash在带宽有限的情况下提供了丰富的媒体内容。6Web界面的导航用户在使用网络系统时往往是根据自己的目的选择某种策略，到达希望浏览的网页。对于Web站点来说，需要包含导航条，用户利用导航的提示在信息的空间里移动。Web页上仅有五个基本区域可放置导航元素：顶部、底部、左侧、右侧、中央导航的位置必须保持一致性导航的布置应和页面的布局保持一致使导航项和退回按钮间的距离保持最小甲乙甲乙甲乙甲是乙的一种类型甲指向/搜索乙

45、类型甲是巴的元素网页之间链接方式的对象模型图作业：上网查找“土豆网 HYPERLINK /%e2%80%9d%e3%80%81%22%e4%bc%98%e9%85%b7%e7%bd%91 /”、优酷网 HYPERLINK /%e2%80%9d /”和天线网 HYPERLINK /%e2%80%9d%ef%bc%8c%e8%a7%82%e5%af%9f%e4%b8%89%e4%b8%aa%e7%bd%91%e7%ab%99%e9%a6%96%e9%a1%b5%e6%a0%87%e5%a4%b4%e7%95%8c%e9%9d%a2%e8%bf%9b%e8%a1%8c%e5%af%b9%e6%af%

46、94%ef%bc%8c%e5%88%86%e6%9e%90%e8%af%b4%e6%98%8e%e5%90%84%e7%bd%91%e7%ab%99%e7%9a%84%e7%9b%ae%e6%a0%87 /”，观察三个网站首页标头界面进行对比，分析说明各网站的目标（倾向性）是什么？土豆网给用户一种悠闲自我的状态，倾向于个性与娱乐性，界面中用户信息比较详细；优酷网则强调速度效率，倾向于视频数量的全面性和综合性；天线网倾向于电台节目及影视高清播放。憫，亚吐IttIMMU便粗豆尊+耳3+百Q3.*拒压I生总舷I换我的i丁圓捉的日壬土豆阿vdMj.coni?工且书人蹙活第MKTS叢的豆草创flf济淤|

47、盘世天线mpanm3i闻ft时肖间页蒼能如逵權蜡亟V客第十周教学课题：Web界面设计（四）课型：理论讲授课课时：2课时教学目标：1了解web界面设计新技术.掌握web界面评估的方法.教学重点：web界面评估的方法教学难点：商业网站、信息网站、娱乐网站、门户网站各自的特点教学过程：导入：常见的可用性评估方法有哪些？新授：Web界面设计新技术Web3D图形技术Web3D虚拟现实建模语言VRML它是3D图形和多媒体技术通用交换的文件格式，描述交互式的3D对象和场景。由于网上传输的是模型文件，故其传输量大大小于视频图像。Web3D图形实时渲染引擎它解释并翻译实施场景模型文件的语法，实时渲染从服务器端传

48、来的场景模型文件，在网页访问者的客户端逐帧、实时地显示3D图形。它是实施互联网3D图形的关键技术。Web中的语音交互技术语音浏览技术是互连网上的一种新的应用和技术。VoiceXML语音可扩展标记语言世界上第一个真正的语音通信标准，它定义了应用开发商向用户提供新型信息访问服务的方式。VoiceXML的应用与HTML的应用相同，唯一的差别在于前者使用语音浏览器。VoiceXML突破性地实现了互联网与电话网的融合，结合传统的电话语音操作控制、语音识别（ASR）、文语转换（TTS）、XML、Web数据库等技术，完成方便、完善的业务和信息控制操作。Web界面设计的评估Web界面设计的评估有其独特的特征。

49、Web站点的可用性是指对用户来说软件或Web站点是否易用、高效和使人感到满意。衡量Web站点可用性的5个方面：易学性：当用户第一次使用设计时完成基本任务的难易。有效性：一旦用户学习了这个设计，执行任务的快慢。易记性：当用户一段时间不用此设计后再来使用，再次熟练的难易。错误：用户会犯多少错误，这些错误有多大的影响，从错误中恢复的难易。满意程度：使用这个设计让人感到何种程度的愉快。常见Web设计错误：目的描述不清楚。存档内容换上新的地址。内容不标注日期。对大图片的缩小不能反映其真实内容。过分详细的ALT文本。不支持“如果-那么”。无法通过属性过滤的超长的列表。产品只能按照品牌进行排序。过分限制的表

50、单条目。页面上包括指向自己的链接。Web界面实例分析不同类型网站的设计风格与特点是不同的。商业网站任何商业网站的最主要的目的是，以公司直接或间接受益的方式服务于用户。商业网站的共同特点包括：基本信息的发布支持与帮助投资机会公共关系招聘信息电子商务信息网站政府、教育、新闻、无利润的组织、宗教组织，或变化多样的社会站点经常被认为是信息站点。不同的信息网站的目的变化很大：大学网站可能尽力帮助希望在某方面受教育的访问者新闻网站的主要意图是尽力告知人们一些事件以便人们获取足够的信息。娱乐网站娱乐站点的意图是给访问者带来欢乐。在某种程度上，他们是出售娱乐节目，尽力出售一项令人享受的经历。门户网站门户网站是

51、用户在网上冲浪的起始网站，该网站帮助人们查找信息。门户网站经常试图提供尽可能多的信息，为用户尽可能多地提供服务，鼓励他们留在该网站或继续浏览该网站。门户网站也包括搜索引擎或网站目录，这些是门户网站的关键。总结Web界面设计概要设计Web界面框架设计Web界面的内容与风格的设计Web界面设计的语言与文化Web界面设计要素Web界面布局、色彩、字体、动画与多媒体、导航简单介绍了Web界面设计技术与工具Web界面设计的评估衡量Web站点可用性的5个方面：易学性、有效性、易记性、错误、满意程度坚决避免常见的10个Web设计错误Web界面实例分析了解商业网站、信息网站、娱乐网站、门户网站各自的特点。作业

52、四个人一组，找到功能相似的四个网站，共同完成“互联网XX界面的比较研究”的论文，如上次作业中“土豆网”、“优酷网”和“天线网”，都属于视频浏览网站，可以按照以下思路撰写论文：论文题目“互联网视频浏览器界面的比较研究”论文章节至少包括以下内容：各网站简介网站界面图示分析首页界面对比分析播放界面对比分析用户信息交互界面对比分析视频下载网站界面对比分析网站整体交互性用户体验对比分析3，总结第十一周教学课题：Web设计实践（四）课型：阅读+实践课时：2课时教学目标：1、了解链接、路径与锚的使用2、掌握链接的设置方法3、学会使用特殊的链接4、学会使用常见的行为教学重点：通过互联网获取信息、自主学习教学难

53、点：自主学习效率的提升教学过程：导入：通过观察网页，思考问题：1、我们是如何实现在网页中自由穿梭的？2、在网页中，单击鼠标将会带我们去哪里？新授：阅读资料，自主掌握以下知识点：1、超级链接、路径2、文本链接3、邮件链接4、锚记链接5、脚本链接6、特殊链接：热点链接、导航条7、常用行为任务实施1、使用锚记链接，创建“学习”主页转到注释链接2、使用热点工具，设置图像映射的链接3、设置行为交互链接技能巩固1、为“花店”主页创建链接2、制作地图网页六、评价与知识总结如何创建文本链接、邮件链接？如何创建热点链接？如何创建导航条？作业教材61页习题第十二周、十三周教学课题：交互原型设计课型：理论讲授课时：

54、4课时教学目标：1、了解原型的作用2、掌握原型的制作方法教学重点：原型的制作方法教学难点：原型是对产品理解之沉淀教学过程：导入：什么是原型？新授：原型的概念说的简单直白些就是用户使用产品的界面模型，原型的设计主要包括三部分:需求内容的呈现导航和链接数据的交换需求内容的呈现1）文本，多媒体内容的呈现最基础的web页面就是文字和多媒体的载体，通过文字和媒体把需求内容呈现给访问者是Web设计最最基础的部分，设计师需要将信息分主次的传达给访问者，这是设计最基本的目的，之前我写过类似的文章视觉设计是为了表达信息。其实不管是交互还是视觉，都应该具备排版组织能力，分得清主次，明白目标，懂得用户群，才能谈的上

55、设计。了解栅格，有排版功底的交互设计师可以省去很多沟通成本：和传统的视觉排版不同的是，交互设计需要在有限的空间内组织信息，举几个最常用的手法：Banner崛123MoreAttributesv在设计布局的过程中，交互还必须要清楚前端实现的方法，基本的html,css和一些常用脚本效果都要有所了解。2）行为召唤除了基本的排版布局，交互在需求的呈现方面还需要花点心思。读点心理学，了解数据分析，熟悉用户的行为习惯，想好以何种方式呈现内容才能迎合用户。对待用户，设计师要有一颗奴才的心态去猜测主子的玻璃心。先介绍一种内容引导的方法，姑且给这样的设计方法称作为“行为召唤”。所谓的“行为召唤”就是呈现界面的

56、时候考虑到用户心理，能够激发起用户的参与度。一些比较生硬的做法比如：文字加粗加大变色，按钮变大，AD广告做成gif图或flash晃来晃去，增加new,hot等图片标签，或者干脆用性感美女做广告。这些做法虽然破坏了画面和体验，但还是要承认这些比较生硬的设计方法确实能够吸引一部分用户的注意力。如果将这些方法做一些思考用另一种方式呈现：3）示例引导如果给用户三个垃圾桶，分类分别是可回收，不可回收，有害垃圾。无论你怎么设计外观，用什么颜色，还是有很多用户不知道该如何分类。但如果垃圾桶内已存在一些垃圾，用户自然会根据上一个人的垃圾来选择分类。这样的引导方法同样可以运用到Web设计中。看一些例子：互联网的

57、一些爭 HYPERLINK http:/www.yixieshi.corri www.yixieshi.corri卜在线好友&4我的媒友40/156同事E7/26卜1/11卜陌生A/o/o卜幕单0/0默认提供分组，引导用户使用命组功能全詔锻博我的微群猜你盲欢全部拒互述主悄悄关主同事娱乐月月友寡人更参1.填写信息球为必填项导航和链接除了内容的呈现，网页中还存在着大量的导航和链接，也就是传说中的信息架构。信息架构主要目标就是以最短时间，最方便的形式让用户能够快速找到想要的内容。互联冋的一些箋www.yiashi.rri关联寧亢关联导航主要就是解决用户“下一步”应该做什么，这个分两种情况：1）产品经

58、理希望用户做什么产品经理会迫于一些指标压力将业务模式加到网站中，这些内容可能是和用户自己预想的内容毫无关系。那么这一类的链接都统称为业务式链接。互联网的=蛰事,全场特价，礼包免费窒免单机会等替你立即蠢与。今日活动感恵妈吗把爱鈿回家妈妈奘全场68折岀口优舗团3折包邮聚大牌品辰团平民价格上班。在家不愁吃什么午程/下卡荼/晩餐金摘走精焉舌动最热卖创意极品团购试用百元平板任你迪苹栗国产/圍阮寧板大PKSummer,手机换新!宝宝临喝玩乐应有尽肓卩折起丁适工口元送或体验红包，先到先得陽浙！瑰柏翠手精华限重礼宣裝这一类的业务链接内容，交互所需要考虑的就是怎么将这些链接融入到页面中，强调又不至于太生硬。常见

59、的方法基本上就是图文混排，动态播放滚动，AD广告插入。2）用户到底想做什么用户想做什么可能他自己都不是很清楚，如何帮助用户发现感兴趣的内容就需要通过元数据自动创建关联内容。元素据包括：时间，类型，主题，兴趣，搜索或购买记录等。这时候的链接是靠程序生成的，交互设计师要能够看的懂数据，给出合适的链接规则。例如最常见的“猜你喜欢”喜欢看“追击者怕勺人也喜歆真相孩子们不可饶恕匕天杀人E如果能够将业务导向和用户的心理模型保持在一个维度，比如google,baidu的个性化广告投放，那么这个产品的体验和转化率自然就会上升，不过要做到这一点，需要数据分析人员，产品人员和交互设计师的共同努力。数据的交换之前所

60、讲的内容都是我们呈现给用户的内容，但产品级的Web的还需要与用户之间有互动，也就是数据的交换。如何让用户参与的更容易，数据交换的更顺利，这就是我们平常所谈到的产品的易用性。那么原型阶段是怎么做到让产品更好用呢？融0单选1）熟悉并运用Web平台的各种标准组件text内駆辭日树形目录12Title3弹出层另外附一个jQuery组件的Demo预览网站 HYPERLINK /demos/ /demos/2）给出合适的即时的操作反馈该会员名已被使用。您可以江、重新输入或选昏2、使用该会员窑登录-些ii.cc事irn会员名:te-stte-sttest12个字符推荐您使用；OtE5tte5ttest77C