人机交互技术
Web界面设计
学号:
姓名:
一、 Web界面设计的基本概况
Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。Web界面设计与站点外观直接相关，站点的界面外观是否友好直接关系到
是否能吸引人的关注。人性化的设计是Web界面设计的核心，如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。
用来解释Web的人机界面性质的一个模型，它提出网页是用户和知识之间的界面。对于信息提供者来说包括信息的表达，对于使用者来说则是信息的获取。信息的表达与获取分别受到两者认知结构的制约。
模型涉及到信息的三种类型
1)数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。
2)复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。
3)过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在线练习、在线测试等。
模型涉及到信息的两种特性：1)动态性：信息在不断的变化，具有动态性；2)一致性：信息元素的组织方式具有一致性
(2)Web信息设计模型
是解释Web人机界面性质的另一个模型，是一种研究网页的信息设计模型。
设计模型中要考虑到信息的两个方面：
1)第一是应该呈现或略去什么信息。
2)第二个方面指的是信息该如何被表现。
二、 Web界面设计要求及目的
Web应用的成功与否，除了受其所采用的技术和所能够提供的功能的限制还受Web网页的外观的影响。Web网页的外观经常是最先被用户注意到的。用户对网站的第一印象与界面外观是否友好、吸引人密切相关。所以对于设计人员来说，Web界面设计至关重要。Web界面设计的人性化、易用性是Web界面设计的核心。
Web界面设计要素
a) Web界面布局 Web界面的色彩
Web界面的字体
Web界面的动画与多媒体
Web界面的导航
⼈机交互知识点总结
第⼀章 绪论
1、什么是⼈机交互
所谓的⼈机交互是指关于如何设计、评价和实现供⼈们使⽤的交互式计算机系统，并围绕相关现象进⾏研究的⼀门学科。⼈机交互是⼀门综合性的学科，他
与认知⼼理学、⼈机⼯程学、多媒体技术、虚拟现实技术等密切相关，其中，认知⼼理学和⼈机⼯程学是⼈机交互的理论基础，多媒体技术和虚拟现实技术与⼈
机交互相互交叉、相互渗透。
2、⼈机交互的研究内容⼈机交互界⾯的表⽰模型与⽅法可⽤性分析与评价多通道交互技术认知与智能⽤户界⾯群件web设计
移动界⾯设计
3、⼈机交互的发展历史
命令⾏界⾯交互阶段、图形⽤户界⾯交互阶段、⾃然和谐的⼈机交互阶段（情感计算、多通道交互、虚拟现实、只能⽤户界⾯）
4、⼈机交互的发展趋势
智能化、集成化、⽹络化、标准化
第⼆章 感知和认知基础
1、⼈的感知
视觉、触觉、听觉，其中⼈类从周围世界获取的信息80%都来源于视觉。
2、颜⾊通常⽤三种属性表⽰：强度、饱和度、⾊度
颜⾊模型就是某个空间中的⼀个可见光⼦集，主要有RGB,CMYK,HSV,CIE四种颜⾊模型
3、认知过程与交互设计原则
（1）认知分为经验认知和思维认知，经验认知是指有效、轻松的观察、操作和响应周围的事件，他要求具备某些专业的知识并达到⼀定的熟练程度。思维
认知是它涉及思考、⽐较和决策，是发明创造的来源。
（2）常见的认知过程：感知和识别、注意、记忆、问题解决、语⾔处理。许多认知过程是相互依赖的，⼀个认知过程往往同时涉及多个不同的过程。
（3）影响认知的因素：1、情感 2、个体差异 3、动机和兴趣
4、概念模型
概念模型是指⼀种⽤户可以理解的关于系统的描述，他使⽤⼀组构思和概念，描述了系统做什么，如何运作，外观如何等
第三章 交互设备1、输⼊设备⽂本输⼊设备：键盘、⼿写输⼊设备图像输⼊设备：⼆维扫描仪、数字摄像头三维信息输⼊设备：三维扫描仪、动作捕捉设备、体感输⼊设备
指点输⼊设备：⿏标及控制杆、触摸屏
1 人机交互要点
人机交互（HCI）：是关于设计，评价和实现供人们使用的交互式计算机系统，且围绕这些方面的主要现象，进行研究的科学。狭义地讲，人机交互技术主要是研究人与计算机之间的信息交换，主要包括人到计算机和计算机到人信息交换两部分。
人机界面：作为计算机的重要组成部分，主要是指人与计算机之间的通信方式，包括人-机双向信息交换的支持软件和硬件。
交互设计：设计交互方式与人机界面。
人机交互与其他学科的关系：认知心理学与人机工程学是交互技术的理论基础，多媒体技术和虚拟现实技术与人机交互技术互相渗透。
人机研究的内容：人机表示模型与设计方法；可用性分析评估；多通道交互技术；认知与智能用户界面；虚拟环境中的人机交互；WEB设计；移动界面设计；群件。
发展趋势：集成化，网络化，智能化，标准化。
人的感知是认知心理学的基础，人机交互通过感知来完成。
视觉感知分为两个阶段：接受信息阶段与解释信息阶段
视锥细胞，视干细胞。黄色绿色
视敏度简称视力：是指人眼对细节的感知能力，是事物间距所对应视角的倒数表示。
音调与声波的频率有关，低频能产生低调的声音，高频能产生高调的声音。响度是指在频率一定的情况下声波的振幅。音色与发声的材料有关。
人类能辨别20HZ-20KHZ的声音。音强超过140分贝时，是痛觉。语音是260HZ到5600HZ。电话是300到3000HZ
皮肤感知触觉：温度感受器，伤害感受器，机械刺激感受器。
触觉感知的另一面是动觉:快速适应感受器，慢速适应感受器，位置感受器。
认知：经验认知，思维认知。
关注：关注是在某个时刻，对众多可能感知的事物中选择一个，并把精力集中在这个事物上。
关注与两个方面有关：目标与信息表示。 2 基于人们的关注特点，人机界面要做到下列几点：
信息的显示醒目：动画图形，彩色，下划线，对条目不同的使用排序
避免过多使用色彩声音和图像，如果太过混杂，会引起反感。
感知和识别：总体设计原则是应采用适当的形式来表示信息。
标题：产品定位 版本：0.9
编号：未定义 保密等级：未定义
第1页 共7页
人机交互界面设计规范
（讨论稿）
文档状态：
[√] 草稿
[ ] 正式发布
[ ] 正在修改 文档标识： Hygrand-LNSP-RD-REQ
当前版本： 1.0
作 者： 赵云飞
完成日期： 2007-10-23
Hygrand
上海华冠电子设备有限责任公司
Hygrand Electronic Equipment CO., LTD.Shanghai 标题：产品定位 版本：0.9
编号：未定义 保密等级：未定义
第2页 共7页 1. 必须在编码之前完成，否则就成花架子了。
2. GUI规范不是一蹴而就，它和设计相互迭代，彼此补充，相互完善。
3. GUI规范的内容70％是通用原则，涉及产品图形控件的基本属性和构建的基本参数和原则，30％是与项目或产品特点相适应的内容，这部分内容就是在设计过程中迭代产生。
1. 概述
2. 通用指导原则
2.1. 易用性
理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。如按钮名称应该易懂，用词准确，要与同一界面上的其他按钮易于区分。
➢ 完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。
➢ 复选框和选项框要有默认选项，并支持Tab选择。
➢ ……
2.2. 规范性
通常界面设计按Windows界面的规范，即包含“菜单条、工具栏、状态栏、滚动条、右键快捷菜单”等的标准格式，界面遵循规范化的程度越高，则易用性相应的就越好。
➢ 工具栏的图标能直观的代表要完成的操作。
➢ 标签提示：字体为加重、宋体、黑色、无边框。
➢ 对齐方式：左对齐、一般文字、单个数字、日期等。
➢ 等待过程：在需等待时间较短(0-10秒)的情况下应将鼠标显示成为沙漏；当需10秒以上时，要显示进度条等。
➢ 菜单深度一般要求最多控制在三层以内。
➢ …… 标题：产品定位 版本：0.9
