爱华网人机交互与界面设计 交互 设计
任课教师：范艳芳 邮箱：fyfhappy@bistu.edu.cn
《人机交互与界面设计》
教学目标
? 掌握人机交互及界面设计的基础知识
? 具备初步进行Web系统前端开发的能力
? 能够在Web系统开发过程中遵循界面设计相关原则
《人机交互与界面设计》
2014-3-4
2
学生作品1
《人机交互与界面设计》
2014-3-4
3
学生作品2
《人机交互与界面设计》
2014-3-4
4
学生作品3
《人机交互与界面设计》
2014-3-4
5
课程安排
? 课时安排：讲课22学时，上机10学时
? 课程性质：专业任选课 ? 考核方式：总评成绩=考试成绩×70%+ 实验成绩
×20%+平时成绩×10% ? 考试方式：开卷 ? 上机安排：12,13,15,16,17(周四8-9节，计算中心B 机房) ? 教材：《Web程序设计（第3版）》（吉根林等主编） ? 参考资料：《人机交互基础教程（第2版）》（孟祥 旭等编著）、《软件人机界面设计》（陈启安主编） 等
《人机交互与界面设计》
2014-3-4 6
课件邮箱
? Email: rjjh13@163.com
? 密码: 20132013
《人机交互与界面设计》
2014-3-4
7
课程内容
第 1 章 人机交互基础 第 2 章 Web应用基础 第 3 章 浏览器端交互程序设计 第 4 章 服务器端交互程序设计
《人机交互与界面设计》
2014-3-4
8
第1章 人机交互基础
学习要点：
?
理解人机交互、人机界面的基本概念
?
了解人机交互与其他学科的关系以及人机交互的研
究内容
?
?
掌握人机交互发展的三个阶段
掌握Web界面的设计原则
?
理解Web界面要素的设计
2014-3-4 9
《人机交互与界面设计》
目 录
1.1 人机交互基础知识 1.2 界面设计
《人机交互与界面设计》
2014-3-4
10
1.1 人机交互基础知识
1.1.1 人机交互的概念
1.1.2 人机交互与其他学科的关系 1.1.3 人机交互的研究内容 1.1.4 人机交互的发展历史 1.1.5 人机交互的应用
《人机交互与界面设计》
2014-3-4
11
1.1.1 人机交互的概念
?
人机交互（Human-Computer Interaction，HCI）是关于设计、
评价和实现供人们使用的交互式系统，且围绕这些方面的主要现 象进行研究的学科。
?
狭义的人机交互技术主要研究人与计算机之间的信息交换，主要 包括人到计算机和计算机到人的信息交换两部分。
打印机、绘图仪、显示器、音箱等 输出信息 输入信息
键盘、鼠标、操纵杆、数据服装、眼动跟踪 器、数据手套、压力笔，以及手、脚、声音、 姿势或身体的动作等。
《人机交互与界面设计》
2014-3-4
12
1.1.1 人机交互的概念
? 人机交互与人机界面
?
人机交互是指人与计算机系统之间的信息交换，它是人与计算 机之间各种符号和动作的双向信息交换；
?
人机界面（又称
用户界面或使用者界面）是指人与计算机系统 之间的通信媒介或手段，它是人机双向信息交换的支持软件和
硬件；
?
人机交互致力于人与计算机的协调，旨在消融这两个智能系统 间的通讯和对话界线，使得人与机器的信息交流便捷而通畅。
?
人机交互是通过人机界面实现的，在界面开发过程中，有时把 它们作为同义词使用。
《人机交互与界面设计》
2014-3-4
13
1.1.1 人机交互的概念
? 人机交互与人机界面
?
从信息传递的角度来看，用户界面的任务是为人类的感觉和效
应通道与计算机的感知和输出机制提供通信接口。
?
从信息转换的角度来看，用户界面的作用是实现“用户认知空 间”与“计算机信息处理空间”间信息的双向映射。
《人机交互与界面设计》
2014-3-4
14
1.1 人机交互基础知识
1.1.1 人机交互的概念
1.1.2 人机交互与其他学科的关系 1.1.3 人机交互的研究内容 1.1.4 人机交互的发展历史 1.1.5 人机交互的应用
《人机交互与界面设计》
2014-3-4
15
1.1.2 人机交互与其他学科的关系
? 人机交互与认知心理学、人机工程学、多媒体技术和
虚拟现实与增强现实技术密切相关。
?
?
认知心理学与人机工程学是人机交互技术的理论基础； 多媒体技术和虚拟现实与增强现实技术与人机交互技术相互交叉 和渗透。
多媒体技术 人机交互技术 虚拟和增强 现实技术
认知心理学
人机工程学
《人机交互与界面设计》
2014-3-4
16
1.1.2 人机交互与其他学科的关系
? 认知心理学
?
研究人们如何获得外部世界信息，信息在人脑内如何表 示并转化为知识，知识怎样存储又如何用来指导人们的 注意和行为。 将人看作是一个信息加工的系统，认知就是信息加工， 注意是认知过程的一部分，通常是指选择 包括感觉输入的编码、贮存和提取的全过程。 性注意，即有选择的加工某些刺激而忽视
其他刺激的倾向。如：侧耳倾听某人说话， 涉及心理活动的全过程 ---从感觉到知觉、识别、注意、 忽略其他人的交谈。 学习、记忆、概念的形成、思维、表象、回忆、语言、 情绪发展和过程。
?
?
?
了解认知心理学原理可以指导人们进行人机交互界面设 计。
2014-3-4 17
《人机交互与界面设计》
1.1.2 人机交互与其他学科的关系
? 人机工程学
?
把人—机—环境系统作为研究的基本对象，运用生理学、心理学和其它 有关学科知识，根据人和机器的条件和特点，合理分配人和机器承担的 操作职能，并使之相互适应，从而为人创造出舒适和安全的工作环境， 使工效达到最优的一门综合性学科。
《人机交互与界面设计》
2014-3-4
18
1.1.2 人机
交互与其他学科的关系
? 多媒体技术
?
是利用计算机对文本、图形、图像、声音、动画、视频等多种信息集成 在一起的技术。
?
动画、音频、视频等动态媒体，大大丰富了计算机表现信息的形式，提 高了用户接受信息的效率。
? ?
多媒体带来的信息冗余性还可以消除人机通信过程中的歧义性。 多通道人机交互研究的兴起，将进一步提高计算机的信息识别、理解能 力，提高人机交互的效率和用户友好性，将人机交互技术和用户界面设 视线、语音、表情、动作、眼神等 计引向更高的境界。
《人机交互与界面设计》
2014-3-4
19
1.1.2 人机交互与其他学科的关系
? 虚拟现实技术
?
虚拟现实技术是借助于计算机技术及硬件设备，建立具有高度 真实感的虚拟环境，使人们通过视觉、听觉、触觉、味觉、嗅 觉等感官在其中看、听、触、闻起来像真实的，以产生身临其 境的感觉的一种技术。
?
自然和谐的交互方式是虚拟现实技术的一个重要研究内容，其
目的是使人能以声音、动作、表情等自然方式与虚拟世界中的 对象进行交互。
《人机交互与界面设计》
2014-3-4
20
1.1.2 人机交互与其他学科的关系
? 增强现实技术
?
把原本在现实世界的一定时间空间范围内很难体验到的实体信息 (视觉信息,声音,味道,触觉等),通过科学技术模拟仿真后再叠加 到现实世界被人类感官所感知,从而达到超越现实的感官体验,这 种技术叫做增强现实技术,简称AR技术。
《人机交互与界面设计》
2014-3-4
21
1.1 人机交互基础知识
1.1.1 人机交互的概念
1.1.2 人机交互与其他学科的关系 1.1.3 人机交互的研究内容 1.1.4 人机交互的发展历史 1.1.5 人机交互的应用
《人机交互与界面设计》
2014-3-4
22
1.1.3 人机交互研究内容
?
人机交互界面表示模型与设计方法（Model and Methodology）
?
一个交互界面的好坏，直接影响到软件开发的成败。友好人机交互界面 的开发离不开好的交互模型与设计方法。因此，研究人机交互界面的表 示模型与设计方法，是人机交互的重要研究内容之一。
?
可用性分析与评估（Usability and Evaluation）
?
可用性是交互式IT产品/系统的重要质量指标，指的是产品对用户来说 有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品 完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到 的产品质量，是产品竞争力的核心。
?
人机交互系统的可用性分析与评估的研究主要涉及到支持可用性的设计 原则和可用性的评估方法等。
《人机交互与界面设计》
2014-3-4
23
1.1.3 人机交互研究内容
?
多通道交互技术（
Multi-Channel）
?
在多通道交互中，用户可以使用语音、手势、眼神、表情等自然的交 互方式与计算机系统进行通信。多通道交互主要研究多通道交互界面
的表示模型、多通道交互界面的评估方法以及多通道信息的融合等。
其中，多通道信息整合是多通道用户界面研究的重点和难点。
?
认知与智能用户界面（Intelligent User Interface，IUI）
?
智能用户界面的最终目标是使人机交互和人－人交互一样自然、方便。
上下文感知、眼动跟踪、手势识别、三维输入、语音识别、表情识别、 手写识别、自然语言理解等都是认知与智能用户界面需要解决的重要
问题。
《人机交互与界面设计》
2014-3-4
24
1.1.3 人机交互研究内容
?
移动界面设计（Mobile and Ubicomp）
?
移动计算（Mobile Computing）、普适计算（Ubiquitous Computing） 等对人机交互技术提出了更高的要求，面向移动应用的界面设计问题 已成为人机交互技术研究的一个重要应用领域。
?
针对移动设备的便携性、位置不固定性和计算能力有限性以及无线网
络的低带宽高延迟等诸多的限制，研究移动界面的设计方法，移动界
面可用性与评估原则，移动界面导航技术，以及移动界面的实现技术 和开发工具，是当前的人机交互技术的研究热点之一。
《人机交互与界面设计》
2014-3-4
25
1.1.3 人机交互研究内容
?
群件（Groupware）
?
群件是指帮助群组协同工作的计算机支持的协作环境，主要涉及个人 或群组间的信息传递、群组中的信息共享、业务过程自动化与协调，
以及人和过程之间的交互活动等。
?
目前与人机交互技术相关的研究主要包括：群件系统的体系结构、计 算机支持交流与共享信息的方式、交流中的决策支持工具、应用程序
共享以及同步实现方法等内容。
?
Web设计（Web-Interaction）
?
重点研究Web界面的信息交互模型和结构，Web界面设计的基本思想和
原则，Web界面设计的工具和技术，以及Web界面设计的可用性分析与
评估方法等内容。
《人机交互与界面设计》
2014-3-4
26
1.1 人机交互基础知识
1.1.1 人机交互的概念
1.1.2 人机交互与其他学科的关系 1.1.3 人机交互的研究内容 1.1.4 人机交互的发展历史 1.1.5 人机交互的应用
《人机交互与界面设计》
2014-3-4
27
1.1.4 人机交互的发展历史
? 人机交互的发展过程，是人适应计算机到计算机不断
地适应人的发展过程。它经历了几个阶段：
命令行 图形用户界面 自然和谐的交互
《人机交互与界面设计》
2014-3-4
28
1.1.4 人机交互的发展历史
? 语言命令交互阶段
? 计算机语言经历了由最初的机器语言，而后是汇编语言，直至
高
级语言的发展过程。这个过程也可以看作早期的人机交互的
一个发展过程。
? 机器语言和汇编语言对使用者提出了较高的要求，且使用时效
率低下，容易出错。高级语言使用人们比较习惯的符号形式描 述计算过程，降低了对人的要求。
? 命令行界面可以看作是第一代人机界面。输入信息为数据和命
令信息，输出信息以字符为主。
《人机交互与界面设计》
2014-3-4 29
指用户界面中用人们熟悉的桌 1.1.4 人机交互的发展历史 面上的图例清楚地表示计算机 可以处理的能力。
?
图形用户界面（GUI）交互阶段
?
图形用户界面（Graphical User Interface，GUI）的出现，使人机 交互方式发生了巨大变化。GUI 的主要特点是桌面隐喻、 WIMP(Window,Icon,Menu,Pointing Device)技术、直接操纵和“所见 即所得(WYSIWYG—What You See Is What You Get)”。
?
人机交互领域最普遍的电脑互 动界面：包括视窗、图标、菜 指可以把操作的对象、属性、 单、定位设备。 的提高。 关系显式地表示出来，用光笔、 在WYSIWYG交互界面中，其 鼠标、触摸屏或数据手套等指 所显示的用户交互行为与应用 点设备直接从屏幕上获取形象 程序最终产生的结果是一致的。 化命令与数据的过程。
2014-3-4
与命令行界面相比，图形用户界面的人机交互自然性和效率都有较大
30
《人机交互与界面设计》
1.1.4 人机交互的发展历史
?
自然和谐的人机交互阶段
?
随着虚拟现实、移动计算、普适计算等技术的飞速发展，自然和谐的 人机交互方式得到了一定的发展。基于语音、手写体、姿势、视线跟 踪、表情等输入手段的多通道交互是其主要特点，其目的是使人能以 声音、动作、表情等自然方式进行交互操作。
语音交互设备 视觉交互设备 触觉交互设备
虚拟环境中的交互 设备
笔式交互设备
《人机交互与界面设计》
2014-3-4
31
1.1 人机交互基础知识
1.1.1 人机交互的概念
1.1.2 人机交互与其他学科的关系 1.1.3 人机交互的研究内容 1.1.4 人机交互的发展历史 1.1.5 人机交互的应用
《人机交互与界面设计》
2014-3-4
32
1.1.5 人机交互的应用
? 制造业 ? 在制造业领域，人机交互技术已用于产品设计、装配仿真等各个 环节，利用立体投影系统等各种交互设备，构建产品的虚拟仿真 平台。
法国标志雪铁龙公司的工业仿真系统平台，可进行汽车设计的检视、虚拟装 配与协同项目的检测等等。
《人机交互与界面设计》
2014-3-4
33
1.1.5 人机交互的应用
? 教育科研 ? 已有一些科研机构研发出沉浸式的虚拟世界，通过和谐自然的交 互操作手段，让学习者在虚拟世界自如地探索未知世界。
图示为一个沉浸
式协同环境，可以支持儿童建造一个虚拟花园，并通过佩戴 立体眼镜沉浸在一个虚拟场景中，进行播种、浇水、调整光照以及观察植物 的生长等。
《人机交互与界面设计》
2014-3-4
34
1.1.5 人机交互的应用
? 军事 ? 军事战略战术演练和培训领域是刺激交互技术发展的源动力。 ? 使用计算机仿真技术不仅降低成本而且可方便地改变环境和条件， 适用于特殊，危险等环境。
F-35战斗机
F-35的头盔显示器
F-35战斗机是第一种在座舱里取消了平视显示器(HUD)的量产战斗机，F-35的飞 行员将在其头盔综合显示器(HMD)面罩上的虚拟平板显示器上读取所有数据。 《人机交互与界面设计》
2014-3-4 35
1.1.5 人机交互的应用
? 生活 ? 生物特征识别技术得到广泛应用。
?
指纹识别和人脸表情识别技术广泛应用于人们日常生活的通信过程或者安全 保护。
《人机交互与界面设计》
2014-3-4
36
1.1.5 人机交互的应用
? 生活 ? 苹果iPhone等智能机采用多种交互技术
?
Multi-Touch屏幕
?
?
凭借电场感应手指的触碰
内置方向感应器对动作做出反应，当屏幕方向转变时，方向感应器会 自动做出反应并改变显示方式
?
通过距离感应器感应距离，当电话靠近耳边时，自动关闭屏幕以节省 电力并防止意外触碰
通过环境光线感应器自动调节屏幕亮度 根据输入的拼音或笔画建议并预测可能输入的单词或词组 通过语音控制功能直接拨打电话或播放音乐
? ? ?
《人机交互与界面设计》
2014-3-4
37
1.1.5 人机交互的应用
? 文化娱乐 ? 在影视制作领域，动作捕捉设备已经得到了广泛应用。如图展示 了“加勒比海盗3”制作过程中，运动捕捉实验室场景和最终合 成的影片效果。
《人机交互与界面设计》
2014-3-4
38
1.1.5 人机交互的应用
? 体育 ? 运动捕捉系统在体育训练中可以帮助教练员从不同的视角观察和 监控运动员的技术动作，并大量地获取某类技术动作的运动参数 及生理生化指标等数据，并统计出其运动规律，为科学训练提供 标准规范的技术指导。
曲棍球训练系统
《人机交互与界面设计》
2014-3-4
39
小结
? 人机交互是人与计算机系统之间的双向信息交换；人机界
面是人与计算机系统之间的通信媒介或手段。
? 人机交互以认知心理学、人机工程学为基础，与多媒体技
术和虚拟、增强现实技术密切相关。
? 人机交互经历了语言命令交互阶段、图形用户界面交互，
目前正向着和谐自然的人机交互方向发展。
《人机交互与界面设计》
2014-3-4
40
目 录
1.1 人机交互基础知识 1.2 界面设计
《人机交互与界面设计》
2014-3-4
41
1.2 界面设计
1.2.1 界
面设计原则
1.2.2 Web界面设计问题的提出 1.2.3 Web界面设计原则 1.2.4 Web界面要素设计
《人机交互与界面设计》
2014-3-4
42
1.2.1 界面设计原则
? 命令行界面可以看作是第一代人机界面，其中人被看成操
作员，机器只做出被动的反应，人用手操作键盘，输入数 据和命令信息，通过视觉通道获取信息，界面输出只能为 静态的文本字符。 ? 图形界面可看作是第二代人机界面，是基于图形方式的人 机界面。由于引入了图标、按钮和滚动条技术，大大减少 了键盘输入，提高了交互效率。 ? 多通道用户界面则进一步综合采用视觉、语音、手势等新 的交互通道、设备和交互技术，使用户利用多个通道以自 然、并行、协作的方式进行人机对话，通过整合来自多个 通道的、精确的或不精确的输入来捕捉用户的交互意图， 提高人机交互的自然性和高效性。
《人机交互与界面设计》
2014-3-4
43
1.2.1 界面设计原则
? 图形用户界面的主要思想
?
桌面隐喻
? 桌面隐喻是指在用户界面中用人们熟悉的桌面上的图例清楚
地表示计算机可以处理的能力。
?
所见即所得
? 在WYSIWYG交互界面中，其所显示的用户交互行为与应用程
序最终产生的结果是一致的。
《人机交互与界面设计》
2014-3-4
44
1.2.1 界面设计原则
? 图形用户界面的主要思想
?
直接操纵
?
直接操纵是指可以把操作的对象、属性、关系显式地表示出来，用光
笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命
令与数据的过程。
?
直接操纵用户界面更多地借助物理的、空间的或形象的表示，而不是
单纯的文字或数字的表示。心理学研究证明物理的、空间的或形象的
表示有利于解决问题和进行学习。
?
直接操纵用户界面的操纵模式和命令界面相反，用户只需关注其要控
制和操作的对象的任务语义即可，无需为计算机语义和句法分心。
?
打印图标
，存盘图标
2014-3-4 45
《人机交互与界面设计》
1.2.1 界面设计原则
? 图形用户界面设计的一般原则
? 界面要具有一致性
? 例如：在菜单和联机帮助中必须使用相同的术语；对话框具有
相同的风格；在同一个用户界面中，所有的菜单选择、命令输 入、数据显示和其他功能保持一致的风格。
? 常用操作要有快捷方式
? 为常用操作设计快捷方式，可以提高用户的工作效率。 ? 常用操作的使用频度大，应减少操作序列的长度。 ? 定义的快捷键最好与流行软件的快捷键一致。如：拷贝使用
Ctrl+C，存盘用Ctrl+S。
《人机交互与界面设计》
2014-3-4 46
1.2.1 界面设计原则
? 图形用户界面设计的一般原则
? 提供必要的错
误处理功能
? 在出现错误时，系统应该能检测出错误，并且提供简单和容易
理解的错误处理功能。 ? 比如：在进行了内容更改而未存盘时，选择关闭应用软件会弹 出一个对话框，让用户确认是否执行关闭操作，以避免用户误 操作。
? 提供信息反馈
? 对操作人员的重要操作要有信息反馈。 ? 用户界面应能对用户的决定做出及时的响应，提高对话效率，
尽量减少击键次数，缩短鼠标移动距离。
? 允许操作可逆
《人机交互与界面设计》
2014-3-4
47
1.2.1 界面设计原则
? 图形用户界面设计的一般原则
? 设计良好的联机帮助
? 人机界面应提供上下文敏感的求助系统，让用户及时获得帮
助，尽量用简短的动词和动词短语提示命令。
? 合理划分并高效地使用显示屏幕
? 只显示与上下文有关的信息； ? 允许用户对可视环境进行维护，如放大、缩小窗口； ? 只显示有意义的出错信息；
? 隐藏当前状态下不可用的命令。
《人机交互与界面设计》
2014-3-4
48
1.2 界面设计
1.2.1 界面设计原则
1.2.2 Web界面设计问题的提出 1.2.3 Web界面设计原则 1.2.4 Web界面要素设计
《人机交互与界面设计》
2014-3-4
49
1.2.2 Web界面设计问题的提出
Web界面设计是人机交互界面设计的一个延伸，是人
与计算机交互的演变。
Web界面设计与Web界面的外观直接相关。
?
Web界面外观是否友好直接关系到能否吸引人的关注。
人性化的设计是Web界面设计的核心。
?
如何根据人的心理、生理特征，运用技术手段，创造简单、
友好的界面，是Web界面设计的重点。
《人机交互与界面设计》
2014-3-4
50
1.2 界面设计
1.2.1 界面设计原则
1.2.2 Web界面设计问题的提出 1.2.3 Web界面设计原则 1.2.4 Web界面要素设计
《人机交互与界面设计》
2014-3-4
51
1.2.3 Web界面设计原则
以用户为中心
一致性 简洁与明确 体现特色 兼顾不同的浏览器 良好的导航设计
《人机交互与界面设计》
2014-3-4
52
1 以用户为中心的设计原则
把用户放在第一位，重点考虑用户的需求。
? ? ? ?
既考虑用户的共性，又考虑用户之间的差异性； 不同类型的Web网站，访问群体不同； 同一类型的Web网站，用户群也存在年龄、行业差别。 网站示例1
针对女性的网站尽量选用柔和、明快的暖色作为主色调，给女性浏览 者以热情、柔美的感觉。 ? 在页面构成上，可选用大量清晰度高的图片做视觉冲击。
?
?
网站示例2
?
针对男性的网站常采用简洁明了的表现方式，色调多由冷色调构成。
针对儿童的网站，设计界面兼具活泼有趣，多一些卡通形象。
2014-3-4 53
?
网站示例3
?
《人机交互与界面设计》
1
以用户为中心的设计原则
把用户放在第一位，重点考虑用户的需求。
?
网站示例4
? 针对老年人的网站，应考虑采用较大的字体，直截了当的信
息显示和简单的浏览方式。
考虑目标用户的行为方式。
?
行为方式是人们由于年龄、性别、地区、种族、生活习 俗、职业、受教育程度等形成的动作习惯、办事方法。
行为方式直接影响人们对网站的操作使用，是设计者需 要加以考虑和利用的因素。
?
《人机交互与界面设计》
2014-3-4
54
《人机交互与界面设计》
2014-3-4
55
《人机交互与界面设计》
2014-3-4
56
《人机交互与界面设计》
2014-3-4
57
《人机交互与界面设计》
2014-3-4
58
《人机交互与界面设计》
2014-3-4
59
《人机交互与界面设计》
2014-3-4
60
《人机交互与界面设计》
2014-3-4
61
《人机交互与界面设计》
2014-3-4
62
《人机交互与界面设计》
2014-3-4
63
《人机交互与界面设计》
2014-3-4
64
2 一致性原则
Web界面的内容和形式应一致。
? ?
?
内容包括：网站显示的信息，如数据、文字内容等。 形式包括：Web界面设计的版式、构图、布局、色彩、风 格等。 网页的形式为内容服务，不同内容的网页用不同的设计形 式。
《人机交互与界面设计》
2014-3-4
65
2 一致性原则
Web界面自身的风格应一致。网站标识及页面设计标
准确定后，应运用到每个页面上。
?
? ? ? ? ?
每个页面都使用相同的页边距；
文本、图形之间保持相同的间距； 主要图形、标题或符号旁边留下相同的空白； 若使用图标导航，则各个界面应当使用相同的图标； 页面上的每个元素要与整个页面的设计风格一致； 文字的颜色应和图像的颜色保持一致，并注意色彩搭配的和 谐。
2014-3-4 66
《人机交互与界面设计》
《人机交互与界面设计》
2014-3-4
67
《人机交互与界面设计》
2014-3-4
68
《人机交互与界面设计》
2014-3-4
69
3 简洁与明确原则
保持简洁的常用做法是使用醒目的标题，通常标题采用图形 来表示； 限制所用的字体和颜色的数目； 界面上所有的元素都有明确的含义和用途；
界面上每一个元素都能让浏览者看到；
3次点击原则：通常情况下，访问者应该最多通过3次点击就 能在网站上找到想要的信息。
? ?
主页的访问率为100人次的情况下，下一页的访问率会降到30-50人次。 有时需要打破3次点击原则。比如电子商务网站，用户可能需3次以上点 击才能找到想要的商品。如果一定遵循3次点击原则，可能造成一个页 面上必须面对大量的可选商品，这会使用户感到困惑，甚至索性什么都 不买。
2014-3-4 70
《人机交互与界面设计》
《人机交互与界面设计》
2014-3-4
71
《人机交互与界面设计》
2014-3-4
72
《人机交互与界面设计》
2014-3-4
73
4 体现特色的原则
特色鲜明的网站更容易在一瞬间打动它的浏览者，留
下令人心动的第一印象；
应清楚Web网站用户的基本情况，从而在网站设计时做
到有的放矢，呈现关键信息；
利用逻辑结构有序组织、开发页面设计原型，通过测
试和逐步精炼，形成网站的明确特点。
《人机交互与界面设计》
2014-3-4
74
《人机交互与界面设计》
2014-3-4
75
《人机交互与界面设计》
2014-3-4
76
《人机交互与界面设计》
2014-3-4
77
《人机交互与界面设计》
2014-3-4
78
《人机交互与界面设计》
2014-3-4
79
《人机交互与界面设计》
2014-3-4
80
5 兼顾不同浏览器的原则
网站的浏览者可能使用不同类型和版本的浏览器。
?
IE浏览器，opera浏览器，火狐浏览器（Firefox），Google 浏览器（Google Chrome ）等；
?
IE浏览器的版本：IE 6，IE 7，IE 8，IE 9，IE 10。
以某一个浏览器的某一个版本为依据编写的网页程序，可 能在其它的浏览器或其它版本上不能正常显示。 根据用户浏览器分布情况来确定所面向的浏览器类别和版 本，并在尽可能多的浏览器中测试网站。 通过使用JavaScript等编程工具或功能，探测用户浏览器 的类型和版本等参数对于某特定功能的支持情况，然后根 据探测结构显示适用于特定浏览器的网页内容。
《人机交互与界面设计》
2014-3-4 81
《人机交互与界面设计》
2014-3-4
82
《人机交互与界面设计》
2014-3-4
83
6 明确的导航设计的原则
导航系统是网站的路径指示系统，用于指导浏览者有
效地访问网站。
Web导航应该帮助用户理解他们在哪里、他们能去哪
里、他们怎样获得其他信息。 好的导航系统可以使用户以一种满意的方式找到需要 的信息。 导航系统的设计应从使用者的角度出发，力争简便、
清晰和完整一致。
《人机交互与界面设计》
2014-3-4
84
《人机交互与界面设计》
2014-3-4
85
《人机交互与界面设计》
2014-3-4
86
《人机交互与界面设计》
2014-3-4
87
1.2 界面设计
1.2.1 界面设计原则
1.2.2 Web界面设计问题的提出 1.2.3 Web界面设计原则 1.2.4 Web界面要素设计
《人机交互与界面设计》
2014-3-4
88
1.2.4 Web界面要素设计
Web界面规划
文化与语言
内容设计
Web界面布局 Web界面色彩 Web界面的文本设计 Web界面的动画与多媒体 Web界面上的导航
《人机交互与界面设计》
2014-3-4 89
1 Web界面规划
明确网站的目标和用途；
网页布局、元素设计应以网站的目标为中心，从各方面表现站
点的目标；
在制定建立站点的目标时，应将站点
作为一种文化、一种艺术 来看，力求在设计Web页面时追求艺术效果与美感； 确定了Web页面设计目标后，需要确定Web网站的用户群体， 进行以用户为中心的设计，既考虑用户的共性，又考虑用户的 差异。
《人机交互与界面设计》
2014-3-4
90
2 文化与语言
全球服务型的网站应考虑不同国家的不同类型的文化 与语言环境。
?
?
Google的中文网站、百度网站通过图片体现中国的传统节日。 外交部网站、Nvidia（英伟达）网站提供多种语言。 阿拉伯语的书写方式为从右向左。 不同国家和地区适用的颜色可能不同，不同地区的网页内容应符 合该地区的货币单位、时间格式等习惯。
当网站有多种语言版本时，应考虑不同的文化背景。
? ?
不同语言文字的结构不同，在设计页面布局时需要分 别考虑。
?
表达同样含义的语句，通常德语语句的长度大于英语语句，英语 语句的长度大于汉语语句。
2014-3-4 91
《人机交互与界面设计》
《人机交互与界面设计》
2014-3-4
92
《人机交互与界面设计》
2014-3-4
93
《人机交互与界面设计》
2014-3-4
94
《人机交互与界面设计》
2014-3-4
95
《人机交互与界面设计》
2014-3-4
96
《人机交互与界面设计》
2014-3-4
97
《人机交互与界面设计》
2014-3-4
98
《人机交互与界面设计》
2014-3-4
99
《人机交互与界面设计》
2014-3-4
100
2 文化与语言
全球服务型的网站应考虑不同国家的不同类型的文化 与语言环境。
?
?
Google的中文网站、百度网站通过图片体现中国的传统节日。 外交部网站、Nvidia（英伟达）网站提供多种语言。 阿拉伯语的书写方式为从右向左。 不同国家和地区适用的颜色可能不同，不同地区的网页内容应符 合该地区的货币单位、时间格式等习惯。
当网站有多种语言版本时，应考虑不同的文化背景。
? ?
不同语言文字的结构不同，在设计页面布局时需要分 别考虑。
?
表达同样含义的语句，通常德语语句的长度大于英语语句，英语 语句的长度大于汉语语句。
2014-3-4 101
《人机交互与界面设计》
《人机交互与界面设计》
2014-3-4
102
3 内容设计
Web界面的内容要符合确定的设计目标，面向不同的
对象要使用不同的口吻和用词。
?
面向消费者的网站应使用通俗的词汇、引人注目的广告方
式、个性化并有趣味性的语言。
?
面向专业人员的网站应使用科学、严谨、准确的词语和表 达方式，避免可能造成的任何误解。
《人机交互与界面设计》
2014-3-4
103
4 Web界面布局
布局设计应做到布局合理、有序、整体化。
常用Web页面布局的形式：
?
? ? ? ?
“口”字形布局
左右结构布
局
上下结构布局
封面型布局 自由式布局
《人机交互与界面设计》
2014-3-4
104
4 Web界面布局
“口”字形布局
?
页面顶部为网站的标题、横幅广告条以及网站的导航等；
?
?
网页的左右分列两小条内容，中间是主要部分；
网页的最下面是一些基本信息，如：联系方式、版权声明
等；
?
这种布局是使用最多的一种布局。
《人机交互与界面设计》
2014-3-4
105
《人机交互与界面设计》
2014-3-4
106
《人机交互与界面设计》
2014-3-4
107
《人机交互与界面设计》
2014-3-4
108
4 Web界面布局
左右结构布局
? Web页面的顶部有标题或者无标题，页面的主要部分分
为左右两部分，一般左面是导航链接，右面是正文。
论坛多采用这种结构；
企业网站也常采用这种结构。
? 优点：结构清晰、一目了然。
《人机交互与界面设计》
2014-3-4
109
《人机交互与界面设计》
2014-3-4
110
《人机交互与界面设计》
2014-3-4
111
4 Web界面布局
上下结构布局
?
Web页面的最上面是标题，下面是正文。
?
新闻发布系统、内容介绍页面或注册页面等多用这种类型。
《人机交互与界面设计》
2014-3-4
112
《人机交互与界面设计》
2014-3-4
113
《人机交互与界面设计》
2014-3-4
114
4 Web界面布局
封面型布局
? 多出现在网站的首页； ? 通过精美的平面设计结合动画，给人带来赏心悦目
的感觉；
? 页面上通常仅包含简单的链接或没有任何提示； ? 常出现在企业网站和个人主页中。
《人机交互与界面设计》
2014-3-4
115
《人机交互与界面设计》
2014-3-4
116
《人机交互与界面设计》
2014-3-4
117
4 Web界面布局
自由式布局
? 是上述几种类型的结合和变化
《人机交互与界面设计》
2014-3-4
118
《人机交互与界面设计》
2014-3-4
119
《人机交互与界面设计》
2014-3-4
120
4 Web界面布局
使用什么样的布局没有固定的模式，需要具体情况具
体分析；
内容较多时，可以考虑“口”字形结构的布局；
如果介绍的主题较单一时，可以考虑上下结构布局；
如果想展示企业形象或个人主页想要展示个人风采，
可以考虑封面型布局。
《人机交互与界面设计》
2014-3-4
121
5 Web界面色彩
网站给人的第一印象来自视觉的冲击，颜色元素在网
站的感知和展示上扮演着重要的角色。
企业或个人的风格、文化和态度可以通过网页中的色
彩混合、调整或者对照的方式体现出来，因此确定网
站的标准色彩很重要。
不同的色彩搭配可以产生不同的效果，并可能影响到
访问者的情绪。
《人机交互与界面设计》
2014-3-4
122
5 Web界面色彩
色彩理论中红、绿、蓝为三原色；
?
?
其它的色彩可以通过三原色调和而成； HTML语言中的色彩表达使用三原色的数值（RGB）来 表示。
颜色分为彩色和非彩色；
? ?
非彩色指黑、白、灰； 彩色是指除了非彩色以外的所有色彩。
专业机构的研究表明：彩色的记忆效果是黑白的3.5
倍。
《人机交互与界面设计》
2014-3-4 123
5 Web界面色彩
网站的标准色彩一般不超过3种。
?
标准色彩主要用于网站的标志、标题、主菜单和主色块，给人以 整体统一的感觉； 其它色彩作为点缀和衬托，不能喧宾夺主。
?
应避免使用可能有文化禁忌的颜色，以及会给色盲用 户带来问题的颜色。
?
在新加坡红、绿、蓝色很受欢迎，视紫色、黑色为不吉利，黑、 白、黄为禁忌色； 捷克、斯洛伐克： 红、蓝、白是积极的，黑色视为带有消极的含 义。
?
《人机交互与界面设计》
2014-3-4
124
5 Web界面色彩
网站的色彩搭配应考虑如下原则：
? ? ? ?
色彩的鲜明性 网站的色彩要鲜明，容易引人注目
色彩的独特性 与众不同的色彩，使得用户对网页的印象深刻
色彩的适合性 色彩和网页要表达的内容气氛相适合 色彩的联想性 不同色彩会产生不同的联想，选择色彩要和网
页的内涵相关联
蓝色想到天空 黑色想到黑夜 红色想到喜事
《人机交互与界面设计》
2014-3-4
125
6 Web界面的文本设计
? 文本不要太多，以免转移浏览者注意力。
? 要选择合适的颜色，以便使文本和其它界面元素一起产生一
个和谐的视觉效果；文本的颜色应该一致，让用户可以容易
地确定不同文本和颜色所代表的内容。
? 选择的字体应和整个界面融为一体；一旦已经为某些元素选
择了字体，应该保证其在整个网站中应用的一致性。
? 网站中可能会使用多种字体，但是同一种字体应该表示相同
类型的数据或者信息。
《人机交互与界面设计》
2014-3-4
126
6 Web界面的文本设计
? 通过合理设置页边框、行间距等，使Web界面产生丰富变化
的外观和感觉。
? 应该重视标题的处理。标题一般无分级要求，其字形一般较
大，字体的选择一般具有多样性，字形的变化修饰则更为丰
富。
《人机交互与界面设计》
2014-3-4
127
《人机交互与界面设计》
2014-3-4
128
《人机交互与界面设计》
2014-3-4
129
7 Web界面动画与多媒体
图形、图像、动画、音频和视频等多媒体元素可以弥
补平淡文本的不足，增强Web界面的艺术表现力。因
此，在设计Web网页时有必要考虑使用不同类型的多
媒体元素，使得网站更生动，而且有吸引力。
在设计动画和多媒体元素时需要考虑带宽以及浏览器
的支持能力。丰富的多媒体展现形式可以增强
Web界
面的艺术性和趣味性，但是过多的使用多媒体元素会
降低浏览速度，影响访问效果和质量。
《人机交互与界面设计》
2014-3-4 130
8 Web界面上的导航
对于Web站点来说，需要包含导航条，用户利用导
航的提示在信息的空间中移动。
真实世界的导航观点在Web中常被采用。
Web导航应该帮助用户理解他们在哪里、可以去哪 里、怎样获得想要的东西。 导航的设计应充分考虑可见性、标记和导航元素的 布局。
《人机交互与界面设计》
2014-3-4 131
8 Web界面上的导航
Web页上仅有五个基本区域可放置导航元素：
顶部
底部
左侧
右侧
中央
《人机交互与界面设计》
2014-3-4
132
小结
图形用户界面的7个设计原则
Web界面设计的6个原则 Web界面的8种要素的设计
《人机交互与界面设计》
2014-3-4
133
作业
? 找两个自己熟悉的商业网站，总结其在设计上的5条优
点，根据自己的使用习惯，提出该网站可以进一步改
进的地方。
《人机交互与界面设计》
2014-3-4
134
