第 8章 Web界面设计
人机交互技术编写组 2
本章 内容简介
互联网上 Web站点和页面的设计基础
Web站点的信息交互模型和结构
Web界面设计的基本思想和原则
Web界面设计的工具和技术
Web界面设计的可用性评估
一些典型的 Web站点实例
人机交互技术编写组 3
8.1 Web基础
互联网是近年来对社会影响最大的技术进步,影
响到人类生活的很多方面。
互联网已经成为全面支持多媒体，能在多种平
台上运行的庞大信息服务系统。
互联网的应用范围也日趋扩大，被广泛用于商
业办公、业务管理、购物娱乐等人类生活的各
个方面，业已成为一种全球化社会现象。
人机交互技术编写组 4
8.1.1 Web的出现与发展
90年代初，瑞士日内瓦的欧洲核能研究中心分
布在世界各地的科学家需要高效率的通讯方式
来进行彼此交流与分享信息。
该中心高能核理学家 Tim Berners-Lee研究发展
了万维网（ World Wide Web,WWW）的雏形，
目的是为了建立一个能够整合各种资源、文件
及多媒体的系统，让使用者方便地取得不同媒
体的资料。
人机交互技术编写组 5
WWW-环球信息网络空间
简单来说,WWW是建立在客户 /服务器模型之
上，构成的一个环球信息网络空间，主要使用,
? 超文本标记语言（ Hypertext Markup Language，
HTML）
? 超文本传输协议（ Hypertext Transport Protocols,
HTTP）
通过 Internet把遍布世界各地的服务器连接起来，
它能够提供各种 Internet服务，具有一致用户界面
的信息浏览功能。
人机交互技术编写组 6
Web页面的发展趋势
Web的一个发展趋势, 是图形 Web页面
的爆炸性发展 。 网上浏览中包括了大量
使用的动态图形, 使图形 Web遍布网络
的各个角落 。
新一代 Web信息描述标准 XML,能更详
尽地描述文档的结构信息, 具有比 HTML
有更强大的功能, 为 Web的发展提供了
强有力的支持 。
人机交互技术编写组 7
8.1.2超文本与超媒体
超文本 （ Hypertext）
? 是一种使用于文本, 图形或计算机的信息的
组织形式, 是一种非线性的信息组织形式 。
它使得单一的信息元素之间相互交叉引用,
这种引用并不是通过复制来实现的, 而是通
过指向对方的地址字符串来指引用户获取相
应的信息 。
人机交互技术编写组 8
8.1.2 超文本与超媒体
超媒体 （ Hypermedia）
? 利用超文本形式组织起来的文件不仅仅是文
本，也可以是图、文、声、像以及视频等多
媒体形式的文件。这些多媒体信息就构成了
所谓的超媒体 。
人机交互技术编写组 9
8.1.3 Web界面设计问题的提出
Web界面设计是人机交互界面设计的一
个延伸，是人与计算机交互的演变。
Web界面设计与站点外观直接相关
? 站点的界面外观是否友好直接关系到是否能
吸引人的关注。
人性化的设计是 Web界面设计的核心
? 如何根据人的心理、生理特征，运用技术手
段，创造简单、友好的界面，是 Web界面设
计的重点。
人机交互技术编写组 10
8.2 Web信息交互模型
用来解释 Web的人机界面性质的一个模型，
它提出网页是用户和知识之间的界面。
对于信息提供者来说包括信息的表达。
对于使用者来说则是信息的获取。
信息的表达与获取分别受到两者认知结构
的制约。
人机交互技术编写组 11
Web信息交互模型
图 8-1 Web信息交互模型
知 识
信息提供者
信息
一致性 动态性
认知结
构
知 识
数 据
复杂信息
过程信息
网络空间
用 户
认
知
结
构
人机交互技术编写组 12
Web信息交互模型
模型涉及到信息的三种类型
? 数据：当一条信息被反复、简单的提供时称
为数据，比如机票价格。
? 复杂信息：而用来叙述事件时称为复杂信息，
如多媒体信息。
? 过程性信息：在信息有明确目标，并相互作
用时称为过程性信息，如在线练习、在线测
试等。
人机交互技术编写组 13
Web信息交互模型
模型涉及到信息的两种特性
? 动态性：信息在不断的变化，具有动态性
?比如股票价格、机票价格等是不断变化的。
? 一致性：信息元素的组织方式具有一致性
?信息元素总是通过一定的方式结合在一起，如通
过讨论、说明，或根据电话号码、名字、数字等
方式组织陈列。
人机交互技术编写组 14
8.3 Web信息设计模型
Web信息设计模型
? 是解释 Web人机界面性质的另一个模型。
? 是一种研究网页的信息设计模型。
设计模型中要考虑到信息的两个方面
? 第一是应该呈现或略去什么信息。
? 第二个方面指的是信息该如何被表现 。
人机交互技术编写组 15
Web信息设计模型
用户工具设计
信息设计过程
信 息 内容选取
通路结构 兴趣结构 执行结构
图 8-2 Web信息设计模型
提
供
者
工
具
设
计
人机交互技术编写组 16
WEB的三种设计空间结构模式
通路结构模式
? 说明要展示的关键问题，使用户更容易获取有用的
信息。
? 如出版物中的索引、标题、摘要、概述等。
? Web网站地图和各栏目标题等信息都属于通路结构。
兴趣结构
? 兴趣结构的目的在于捕捉用户的注意力，并维持用
户浏览网页的注意力。
执行结构
? 指学习和教育材料之间的一系列交互，尤其是基于
计算机的交互。
? 在 WEB中指描述学习和网页信息之间的交互。
人机交互技术编写组 17
8.4 Web站点的概念设计
概念设计涉及的工作,
? 分析、确定站点的目标和用途。
? 准确定义所建立 Web网站及站点的规范。
? 事先建立好站点的架构和导航设计。
? 兼顾不同的浏览器。
人机交互技术编写组 18
8.4.1 站点架构和导航设计
站点结构
? 站点的结构可分为逻辑结构和物理结构,
?逻辑结构描述文档间的关系，定义文档间的链接。
?物理结构描述文档的实际位置及显示方式 。
? 超文本结构中最常用层次结构
?层次型结构按信息的必要性来改变信息的显示方式。
?根网页是站点的主页，层次以根网页开始。
?用户深入站点时，选择趋向于越来越具体，直到找
到目标或叶子网页。
?层次结构通过深度和广度来描述。
人机交互技术编写组 19
8.4.1站点架构和导航设计
站点的导航设计
? 导航系统对访问者来说是路径指示系统。
? 站点访问者通过导航系统寻找需要的信息。
? 用户感觉到能以满意的方式找到所需信息时，
导航系统才是合适的。
? 由于用户的差异，不可能实现完美的导航系
统。
人机交互技术编写组 20
兼顾不同浏览器的设计
原因
? 站点浏览者可能使用不同类型和版本的浏览器。
? 以某一个浏览器的某一个版本为依据编写的网页程
序，可能在其它的浏览器或其它版本上不能正常显
示或运行。
方法
? 通过使用 JavaScript等编程工具或功能，探测用户浏览器的类型
和版本等参数及对于某特定功能的支持情况，然后根据探测结
果显示适用于特定浏览器的网页内容。
? 根据用户浏览器分布情况决定设计所面向的浏览器类别和版本。
人机交互技术编写组 21
8.5 Web界面设计所涉及的问题
Web界面设计中要考虑的基本问题包括,
? Web界面设计基本原则
? Web界面规划
人机交互技术编写组 22
8.5.1 Web界面设计基本原则
了解浏览者的心理状态
内容与形式的统一
减少浏览层次
特点明确
统一整体的形象
Web界面设计的 3C原则
人机交互技术编写组 23
8.5.1 Web界面设计基本原则
1,了解浏览者的心理状态
? 从心理学的角度分析浏览者的心理状态，有
助于网页页面的设计。
? 在单击“退回”按钮之前有三秒钟而且只有
三秒的等待。
? 必须迅速地把有趣和有吸引力的东西显示出
来。
人机交互技术编写组 24
8.5.1 Web界面设计基本原则
2,内容与形式的统一
? 内容指的是 Web网站的信息、数据及文字内容等,
? 形式指的是网页设计的版式、构图、布局、色彩以
及它们所呈现出的风格特点等。
? 网页的形式是为内容服务的，但本身又有自己的独
立性和艺术规律。
? 网页设计的目的就是为了使网页更加形象、直观，
更易被观众所接受。
? 不同内容的网页要求用不同的设计形式。
人机交互技术编写组 25
8.5.1 Web界面设计基本原则
3,减少浏览层次
? 应尽量把网页的层次简要化，力求以最少的
点击次数链接到具体的内容。
? 在主页的访问率为 100人次的情况下，下一
页的访问率降到 30到 50人次。
? 网页的层次越复杂，实际内容的访问率也将
越低，信息也就越难传达到读者的手里。
人机交互技术编写组 26
8.5.1 Web界面设计基本原则
4,特点明确
? 利用相应逻辑结构来有序组织、开发出一个页
面设计原型，进行测试，逐步精炼此原型，形
成明确的特点
? 特色鲜明的 Web网站是精心策划的结果，只有
独特的创意和赏心悦目的网页设计才能在一瞬
间打动它的浏览者
? 应清楚地了解 Web网站用户的基本情况，从而
能有的放矢，挑选关键信息
人机交互技术编写组 27
8.5.1 Web界面设计基本原则
5．统一整体的形象
? Web网站标识以及网页设计标准确定后，
应尽量地应用到每一页页面上，使浏览者
可以确定当前所浏览的网站，并且给浏览
者留下深刻而统一的印象。
人机交互技术编写组 28
SONY公司的首页特点
SONY公司的首页设计充分体现了引领消
费电子产品的潮流这一特点，设计者很
好地传递了该 Web网站的特点,
? 页面上富有动感的线条和画面
? 鲜亮的用色
? Flash画面和字样
? 鼠标落在上面就会以彩色显示的多个画面等
人机交互技术编写组 29
SONY公司的首页
人机交互技术编写组 30
8.5.1 Web界面设计基本原则
6,Web网站设计的 3C原则
? concise （简洁 ）
?使用醒目的标题，这个标题常常采用图形
来表示，但图形同样要求简洁。
?限制所用的字体和颜色的数目。
?页面上所有的元素都应当有明确的含义和
用途，不要用无关的图片把页面装点起来。
人机交互技术编写组 31
8.5.1 Web界面设计基本原则
? Consistent（一致性）
?各页面使用相同的页边距；文本, 图形间保
持相同的间距 。
?各页面上都放上公司或网站的统一标志 。
?各页面应当使用相同的导航图标 。
?页面中的每个元素与整个页面以及站点的色
彩和风格上保持一致性 。
?文字的颜色要同图像的颜色保持一致并注意
色彩搭配的和谐。
人机交互技术编写组 32
8.5.1 Web界面设计基本原则
? contrast (对比度 )
?对比是强调某些内容的最有效的办法之一，
好的对比度使内容更易于辨认和接受。
?常用的对比方法是使用颜色进行对比。
?另一种实现对比的方法是使用字体变化。
?可以在文字排版中使用斜体和黑体写出关
键内容，但不要滥用，以免不能达到强调
效果。
人机交互技术编写组 33
8.5.2 Web界面规划
确定 Web界面设计的目标
? 企业 Web网站,
?企业建立这个 Web网站的目的
?这个网站的作用
?该提供哪些吸引访问者的东西
?用户访问这个 Web网站后，能给他们带来什么？
? 个人 Web网站,
?主要是展现自我、演练技术 。
?建立的 Web网站要有个性和特色 。
人机交互技术编写组 34
8.5.2 Web界面规划
? 界面布局的规划
?制定好目标后，网页布局、元素的设计都要以这
个目标为中心，尽量从各方面综合表现 Web站点
的目标。
?在制定建立站点目标的同时，应该将站点作为一
种文化、一种艺术来看。
人机交互技术编写组 35
8.5.2 Web界面规划
Web界面设计中用户的地位
? 确定 Web站点的用户群体, 从用户的角度去思考。
? 以用户为中心的设计，为用户的共性设计，同时考
虑差异。
? 对目标用户群的构成进行分析,Web网站是以提供
的信息内容来分类的 。
? 对目标用户的行为方式来分析：按照人机工程学的
观点，行为方式受年龄、性别、地区、种族、职业、
生活习俗、受教育程度等因素影响。
人机交互技术编写组 36
8.6 Web界面概要设计
Web界面概要设计包括
? Web界面框架设计
? Web界面的内容与风格 的设计
? Web界面设计的语言与文化
人机交互技术编写组 37
8.6.1 Web界面框架设计
Web网站规划
? 对市场进行分析，确定站点的目的和功能，并根据
需要对站点建设中的技术、内容、费用、测试、维
护等做出规划。
建立原型系统
? 尝试采用不同的方法修改目标、更新形象。
? 解决 Web网站建设中的一些基本问题,
? Web网站的结构
? 信息的组织与管理
? 新增文件与原有系统保持一致的措施。
? 存储信息的物理方法（采用数据库还是文件系统）
? 文档版本控制
? 结构的完整性以及维护方法等
人机交互技术编写组 38
8.6.1 Web界面框架设计
详细设计包括
? Web页面的布局
? 系统的内部结构
? 实现方法和维护方法等
? 确定 Web网站的运行模式
? 制造企业网站
? 商业企业网站
? 门户网站
? 新闻网站
? 个人网站
? 通过广告, 销售等方式进行运作的网站
正式实施
人机交互技术编写组 39
8.6.2 Web界面的内容与风格
网站内容设计的原则,
? HTML文档的效果由其自身的质量和浏览器
解释的方法决定。应让所有的浏览器都能够
正常浏览。
? 网站信息的组织的总体结构要层次分明，尽
量避免形成复杂的网状结构。
? 要权衡图像和多媒体信息的数量，在不影响
网站效果的前提下，尽量减少图像的数量和
所占面积。
人机交互技术编写组 40
8.6.2 Web界面的内容与风格
网站内容设计的原则
? 网站的首页要给用户带来好的第一印象，能够吸引
用户再次光临这个网站。
? 网站内容应是动态进行修改和更新；。
? 网页中应该提供联机帮助功能。
? 网页的文本内容应简明，通俗易懂。
? 所有的内容都要针对设计目标而写，不要节外生枝。
? 文字要正确，不能有语法错误和错别字。
人机交互技术编写组 41
8.6.2 Web界面的内容与风格
Web界面的风格
? Web界面的风格包括站点的标志、色彩、字体、布
局、交互方式、内容价值、存在意义等。
? 一个杰出的网站需要整体的形象包装和设计。
? 为儿童设计的网站应当使用比较丰富的色彩和图形，
并且较多使用动画和声音等多媒体表现工具。
? 为老年人设计的网站需要考虑采用较大的字体、直
截了当的信息显示和简单的浏览方式，以适用老年
人可能逐渐减弱的视力和记忆力
人机交互技术编写组 42
体现儿童特点的迪斯尼网站
人机交互技术编写组 43
8.6.3 Web界面设计的语言与文化
网站应设置多语言选择
? 网站面向的用户使用不同的语言，则在设计时要考
虑包括不同语言的版本，将选择语言版本的功能放
在网站的主页，并用不同版本的语言进行标注 。
在网站设计和建设中进行跨文化研究
? 应当注意到不同地区的文化特点。
? 不同的语言表达可以产生不同的效果。
? 有些内容在一个地区是允许的或适用的，但是在另
外一个地区使用却是不合适的。
? 应当避免显示对用户不适合的内容。
人机交互技术编写组 44
8.7 Web界面设计要素
Web界面设计要素 包括,
? Web界面布局
? Web界面的色彩
? Web界面的字体
? Web界面的动画与多媒体
? Web界面的导航
人机交互技术编写组 45
8.7.1 Web界面布局
布局设计应做到整体布局合理、有序、
整体化。
常用 Web页面布局的形式,
?,同”字形结构布局
?,国”字形结构布局
? 左右对称布局
? 自由式布局
人机交互技术编写组 46
8.7.1 Web界面布局
“同”字形结构布局
? 页面顶部为主菜单，下方左侧为二级栏目条，
右侧为链接栏目条，屏幕中间显示具体的内
容。
? 优点是页面结构清晰、左右对称、主次分明，
因而得到广泛的应用。
? 缺点是太过于规矩呆板，需要善于运用细节
色彩的变化来调剂。
人机交互技术编写组 47
8.7.1 Web界面布局
2．“国”字形结构布局
?, 国, 字形结构布局在, 同, 字形结
构布局的基础上, 在页面下方增加一
横条菜单或广告
? 其优点是充分利用版面, 信息量大,
切换方便 。
? 有的网站将页面设计成镜框的样式,
显示出网站设计师的品味 。
人机交互技术编写组 48
8.7.1 Web界面布局
3．左右对称布局
? 采取左右分割屏幕的方法形成对称布
局。
? 优点是自由活泼，可显示较多文字和
图像。
? 缺点是两者有机结合较为困难。
人机交互技术编写组 49
8.7.1 Web界面布局
4．自由式布局
?自由式布局打破上述两种布局的框
架结构，常用于文字信息量少的时
尚类和设计类网站。
?其优点是布局随意，外观漂亮，吸
引人。
?缺点是显示速度慢。
人机交互技术编写组 50
8.7.2 Web界面的色彩
确定网站的标准色彩
? 不同的色彩搭配产生不同的效果，并可能影
响到访问者的情绪。
以红、绿、蓝三色称为三基色
? 其它的色彩都可以用这三种色彩调和而成。
底色应应柔和、素雅
? 柔和的底色配上深色文字，读起来自然，流
畅。
人机交互技术编写组 51
8.7.2 Web界面的色彩
网页色彩搭配的原则,
? 色彩的鲜明性
? 网页的色彩要鲜艳，容易引人注目。
? 色彩的独特性
? 要有与众不同的色彩，使得大家对网页的印象强烈。
? 色彩的合适性
? 色彩和网页要表达的内容气氛相适合。
? 色彩的联想性
? 不同色彩会产生不同的联想，选择色彩要和网页的内涵相
关联。
人机交互技术编写组 52
8.7.3 Web界面的字体
字体是每一个网站的必要组件，选择字
体和颜色，和其它页面元素一起产生一
个视觉效果。
人机交互技术编写组 53
常用的英文字体
（ 1） Serif字体
（ 2） Sans-Serif字体
（ 3） TrueType字体
人机交互技术编写组 54
常用的英文字体
Serif字体
? Serif是在字母主要笔画的结束处加上的小装
饰笔画。 Times New Roman是一个 Serif字
体的例子。
? Serif引导眼睛随着打字线移动，提高了可读
性。 Serif字体最适合于正文文本。
人机交互技术编写组 55
常用的英文字体
Sans-Serif字体
? Sans-Serif字体没有小装饰笔画,Arial是一
个 Sans-Serif的例子。
? 字符的外观被减少到只含有必要的笔画。
? Sans-Serif文本必须逐个字母的阅读。
? 建议在小尺寸文本和非常大的文本中使用。
? 通常,Serif字体和一个 Sans-Serif字体就可
以在网页上提供一个较好的文本组合。
人机交互技术编写组 56
常用的英文字体
TrueType字体
? 许多字体都是 TrueType，即可以产生任意尺
寸而不降低字母质量。
? TrueType是苹果公司开发的一项数字技术，
现在被 Apple和 Microsoft操作系统使用。
? Times New Roman和 Arial都是 TrueType字
体。
人机交互技术编写组 57
运用不同英文字体的网页
人机交互技术编写组 58
常用的中文字体
Web界面中常用的中文字体有宋体, 仿宋体,
楷体和黑体 。 除这四种基本字体外, 还有多种
可选用的字体如书宋体, 报宋体, 隶书体, 美
黑体, 广告体, 行草体等 。
汉字大小定为九个等级，按初、一、二、三、
四、五、六、七、八排列，在字号等级之间又
增加一些字号，并取名为小几号字，如小四号、
小五号等。
人机交互技术编写组 59
常用的中文字体
正文中的中文字体
? 可以采用传统媒体中的各种字体作为 Web界
面正文中的字体 。
? 根据 Web网页中的不同要求, 选择相应的字
体和字号 。
? 常见正文中文字体用法如表 8-1所示 。
人机交互技术编写组 60
常用的中文字体
标题中的中文字体
? 网页应该重视标题的处理, 把标题排版作为
版面修饰的主要手段 。
? 标题的字体变化更为讲究, 用于网页排版系
统一般要配十几到几十种字体, 才能满足标
题用字的需要 。
? 网页标题一般无分级要求，字形普遍要比图
书标题大，字体的选择多样，字形的变化修
饰更为丰富。
人机交互技术编写组 61
常见正文中文字体用法
名称
正文字体
正文字号
图书
书宋 (宋体 )
五号, 小五号
工具书
书宋 (宋体 )
小五号, 六号
报纸
报宋
小五号, 六号
公文
仿宋
三号, 四号
期刊杂志
书宋, 细等体
五号, 小五号, 六号
人机交互技术编写组 62
使用字体的原则
整个网站上的字体应该保持使用的一致
? 网站中可能会使用多种字体，但是同一种字
体应该表示相同类型的数据或者信息。
? 文字的颜色应该一致，让用户可以容易的确
定不同文本和颜色所代表的内容。
? 为了让字体匹配网站的总体概念，必须要意
识到每一个字体变化和可以使用的范围。
人机交互技术编写组 63
使用字体的原则
考虑字体如何适应网页, 以及字体与整个
设计的关系 。
选择的字体和整个页面及网站应融为一体 。
设计元素例如页边框，行间距，背景颜色
和前景颜色等都可以影响最终的结果。
通过字体不同的安排，可以让网站产生丰
富变化的外观和感觉。
人机交互技术编写组 64
8.7.4 Web界面的动画与多媒体
动画、音频和视频这样的多媒体可以补充平淡
的文本或者二维图形，也补充网站的视觉设计、
音调和消息等。
Web设计者可以使用很多当前 Web设计中的多
媒体处理工具和技术；但是带宽以及浏览器的
支持能力限制了多媒体技术的迅速采用。
为了充分享受新技术，通常需要大带宽、浏览
器插件或第三方应用程序的支持。
人机交互技术编写组 65
WEB中的动画
动画是区别 Web和其它媒体的一个重要展示形
式，动画赋予了用户运动和投入的感受。
动画可以分为不同的级别，从简单的动画 GIF
图像到三维以及虚拟环境。
最常用的基本动画类型是 GIF,Rollover和
Macromedia Flash文件。
动画 GIF是静止图像的汇集，可以按照指定的
序列号和速度重复运动。许多标志广告就是动
画 GIF。
人机交互技术编写组 66
WEB中的动画
JavaApplet是经常被用来制作互联网上动
画效果的程序设计语言。
Macromedia Flash文件在网站设计中被
广泛地接受。
Flash引入了一种新的动画形式。它在带
宽有限的情况下提供了媒体丰富的内容。
? Flash允许设计者创建吸引人的动画网站，
为通常的静态站点提供了一种新的选择。
人机交互技术编写组 67
8.7.5 Web界面上的导航
对于 Web站点来说, 需要包含导航条, 用户利
用导航的提示在信息的空间里移动 。
真实世界的导航观点在 Web中常被采用 。
应该注意, Web不是真实的世界, Web导航应
该帮助用户理解他们在哪里, 可以去哪里, 怎
样获得想要的东西 。
人机交互技术编写组 68
Web界面上的导航
为使用户得到真实的感觉, 必须充分考虑可见
性, 标记和导航元素的布局 。
Web页上仅有五个基本区域可放置导航元素,
? 顶部
? 底部
? 左侧
? 右侧
? 中央
人机交互技术编写组 69
8.8 Web界面设计技术与工具
要设计好的 Web界面，需要有良好的设
计工具，随着 Internet网络的发展，国际
组织和许多互联网软件开发商制订了若
干标准，开发了不同的 Web界面设计工
具。本节对一些常见的技术和工具进行
简单介绍。
人机交互技术编写组 70
8.8.1 Web界面设计技术基础
超文本标记语言 HTML
客户端脚本语言 JavaScript
JavaApplet
服务器端脚本语言
人机交互技术编写组 71
1,超文本标记语言 HTML
HTML已经成为表示 Web文档信息的标准方法,
是构成 Web页面的主要工具 。
HTML是用来表示网上信息的符号标记语言，
是一个跨平台语言。
HTML标准定义了构成语言的每一个独立元素,
这些元素是说明如何在浏览器中显示 HTML文
档的指令或标记符 。
从结构上讲,HTML文件由各种标记元素组成，
用于组织文件的内容和指导文件的输出格式。
人机交互技术编写组 72
（ 1）基本标记元素（部分）
标记元素
功能含义
<HTML></HTML>
创建一个 HTML文档，通知浏览器该文件含有 HTML标记码
<HEAD></HEAD>
设置文档标题以及其它不在 Web网页上显示的信息
<TITLE></TITLE>
网页标题，将显示在浏览器的标题栏中
<BODY></BODY>
设置文档的可见部分，它包含了文件的内容
<BODY BGCOLOR=？ >
设置背景颜色，使用颜色名或十六进制值
<BODY BACKGROUND=？ >
设置背景图片
<BODY TEXT=？ >
设置文本文字颜色，使用颜色名或十六进制值
<BODY LINK=？ >
设置超级链接文字的颜色，使用颜色名或十六进制值
<BODY VLINK=？ >
设置已访问过的超级链接文字的颜色，使用颜色名或十六进制值
<BODY ALINK=？ >
设置鼠标悬停于超级链接文字的颜色，使用颜色名或十六进制值
<H1></H1>
创建最大的标题，在 HTML中有六种标题
人机交互技术编写组 73
（ 2）图形标记元素
目前能被 Web浏览器直接解释的常见图像格式有,GIF
格式 (.GIF文件，支持 256色 )； X位图格式 (.XBM文件，
黑白图像 )； JPEG格式 (.JPG,.JPEG文件，支持 RGB色 )。
标记元素
功能含义
<IMG SRC="name" ALIGN=?
BORDER=? WIDTH=?
HEIGHT=?>
添加一个图像。 SRC给定图片文件的定位,ALIGN属
性定义图与文本行的对齐方式； BORDER属性设置围
绕一个图像的边框的大小； WIDTH和 HEIGHT分别重
新定义图像的宽度和高度 。
<HR SIZE=? WIDTH=?
NOSHADE>
加入一条水平线,SIZE设置水平线的大小,WIDTH
设置水平线的宽度,NOSHADE表示创建无阴影的水
平线
人机交互技术编写组 74
（ 3）表格标记元素 （部分）
标记元素
功能含义
<TABLE BORDER=#
CELLSPACING=# CELLPADDING=#
WIDTH=# or %>
定义表格,BORDER属性表示表格边框粗细程度，
CELLSPACING属性用于设置表格格子之间空间的大小，
CELLPADDING用来设置表格格子边框与其内部内容之间空间
的大小,WIDTH属性是用来定义表格宽度
<CAPTION></CAPTION>
定义表格标题
<TR ALIGN=? VALIGN=?>
表示一个新的表格行的开始，属性 ALIGN表示横向对齐方式
<TH ALIGN=? VALIGN=?
COLSPAN=? ROWSPAN=?>
在表格的当前行里产生一个新的表项单元,<TH>表示一个表
项标题 (TableHeader)单元,COLSPAN及 ROWSPAN表示进行
横向及纵向地扩展表项单元
<TD ALIGN=? VALIGN=?
COLSPAN=? ROWSPAN=?>
在表格的当前行里产生一个新的表项单元,<TD>表示一个表
项数据 (TableData)单元，其它属性的含义同上
人机交互技术编写组 75
（ 4）表单标记元素 (部分 )
标记元素
功能含义
<FORM></FORM>
创建所有表单
<INPUT TYPE="TEXT"
NAME="name" SIZE=#>
创建一个单行文本输入域,SIZE设置以字符计数的
宽度文本
<INPUT TYPE="PASSWORD"
NAME="name" VALUE="*"
SIZE=#>
创建一个口令输入域，输入的字符全部显示为, *”
<TEXTAREA NAME="name"
COLS=#
ROWS=#></TEXTAREA>
创建一个文本框区域, 列的数目设置宽度, 行的数
目设置高度
<INPUT TYPE="RADIO"
NAME="name" VALUE="x">
创建一个单选按钮, 文字在标签后面
<INPUT TYPE="CHECKBOX"
NAME="name">
创建一个复选框, 文字在标签后面
人机交互技术编写组 76
【 例 8-1】 Demo.html
【 例 8-1】 用任一编辑器建立文本文件 Demo.html。
<HTML>
<HEAD>
<TITLE>网页标题显示于浏览器窗口的标题栏 </TITLE>
</HEAD>
<BODY BGCOLOR="#E7F9F3">
<H1>H1设定一级标题 </H1><BR>
<B>黑体字 </B><BR>
<I>斜体字 </I>
<P ALIGN="right">
<FONT SIZE=5 COLOR="red">红色 5号字 </FONT><BR><BR><BR><BR><BR>
<P ALIGN="center"><A HREF="http://www.sdu.edu.cn">点击这里将超链到山东大学主页
</A><P><BR><BR>
<A HREF="#next">点击这里将超链到下面的锚点 </A>
<P ALIGN="center"><A HREF="mailto:xueqingli@sdu.edu.cn">有意见请告诉我 </A> <P>
<A NAME="next">这里是一个文档内部锚点的起始处 </A>
</BODY>
</HTML>
人机交互技术编写组 77
Demo.html的运行效果
人机交互技术编写组 78
【 例 8-2】 用 HTML实现表单实例
<HTML>
<HEAD>
<TITLE>HTML表单实例 </TITLE>
</HEAD>
<BODY BGCOLOR="#E7F9F3">
<FORM>用户名,
<INPUT TYPE="TEXT" NAME="username" SIZE=10> 口令,
<INPUT TYPE="PASSWORD" NAME="password" SIZE=8><HR> 选学内容,
<INPUT TYPE="CHECKBOX" NAME="ck1" VALUE="W"> Word
<INPUT TYPE="CHECKBOX" NAME="ck2" VALUE="E"> Excel
<INPUT TYPE="CHECKBOX" NAME="ck3" VALUE="I"> Internet <P>课程类别,
<INPUT TYPE="RADIO" NAME="class" VALUE="must">必修
<INPUT TYPE="RADIO" NAME="class" VALUE="option">选修 <HR>你的计算机是哪一种类型,
<SELECT NAME="computer">
<OPTION>PC
<OPTION>UNIX
<OPTION>MAC
<OPTION>OTHER
</SELECT><P> 备注,<BR>
<TEXTAREA NAME="comment" ROWS=5 COLS=25> 请在此填写补充内容 </TEXTAREA> <P
ALIGN="center"> <INPUT TYPE="SUBMIT" VALUE="确定 "> <INPUT TYPE="RESET" VALUE="重填
">
</FORM>
</BODY>
</HTML>
人机交互技术编写组 79
用 HTML实现表单实例效果
人机交互技术编写组 80
2．客户端脚本语言 JavaScript
HTML无法独自完成交互和客户端动态网页的
任务,JavaScript，它弥补了 HTML语言的缺陷。
利用 JavaScript，可以使得信息和用户之间不
仅只是一种显示和浏览的关系，而是实现了一
种实时的、动态的、可交互式的表达能力。
JavaScript是一种内嵌于 HTML中的脚本语言，
它是一种基于对象和事件驱动并具有安全性能
的脚本语言。使用它的目的是与 HTML、
JavaApplet一起实现在一个 Web页面中链接多
个对象，与 Web客户交互作用，可用于开发客
户端的应用程序等。
人机交互技术编写组 81
JavaScript 的 特点
（ 1）一种脚本编写语言
（ 2）基于对象的语言
（ 3）简单性
（ 4）安全性
（ 5）动态性
（ 6）跨平台性
人机交互技术编写组 82
JavaScript与 HTML结合实例
<html>
<head>
<Script Language ="JavaScript">
// JavaScript 在此出现
alert("这是第一个 JavaScript例子 !");
alert("欢迎你进入 JavaScript世界 !");
alert("今后我们将共同学习 JavaScript知识 ！ ");
</Script>
// JavaScript 在此结束
</Head>
</Html>
//JavaScript代码由 <Script Language =“JavaScript”>...</Script>说明
//alert()是 JavaScript的窗口对象方法，其功能是弹出一个具有 OK对话框
并显示括号中的字符串
人机交互技术编写组 83
JavaScript与 HTML结合实例运行结果
人机交互技术编写组 84
3,JavaApplet
JavaAapplet是访问 Internet服务器，在
Internet上传播的，自动安装的，可作为部分
Web文档运行的小应用程序。
当 JavaAapplet到达客户端，它被限制访问资源，
以使它能够在不受病毒威胁和破坏数据完整性
的情况下生成一个二进制的多媒体用户界面以
及完成复杂的计算。它还提供了装载和显示图
像的方法，以及装载和播放语音片断的方法。
人机交互技术编写组 85
JavaAapplet是一种基于窗口的程序
JavaAapplet是由事件驱动的。一个 JavaAapplet类似于
系列提供中断服务的子程序的集合。
在事件发生之前,JavaAapplet一直处于等待状态中。
一旦事件发生,JavaAapplet就会采取相应措施并迅速
将控制权交给 AWT。针对特定的事件作出相应的动作
并把控制交给 AWT的运行环境。
用户可以与 JavaAapplet进行交互，而不是通过其它方
式。这些交互被送至 JavaAapplet,JavaAapplet必须作
出响应的事件。
人机交互技术编写组 86
JavaApplet在网页中实现放大镜的例子
<applet archive="AnLens.jar"
code="AnLens.class" width="320" height="256">
<param name="credits" value="Applet by Fabio
Ciucci ">
<param name="distdval" value="10">
…
</applet>
AnLens.jar是 JavaApplet的源文件。其效果如下
图。
人机交互技术编写组 87
人机交互技术编写组 88
4．服务器端脚本语言
目前流行的三大服务器端脚本语言是 ASP、
PHP,JSP。
? ASP（ Active Server Pages），是一个 Web服务器端的开发环
境,利用它可以产生和运行动态的、交互的、高性能的 Web
服务应用程序。
? PHP（ HyperText Preprocess）是一种跨平台的服务器端的嵌
入式脚本语言。它大量地借用 C,Java和 Perl语言的语法，并
耦合 PHP自己的特性，使 Web开发者能够快速地写出动态生
成页面。
? JSP （ Java Server Page） 是 Sun公司推出的新一代站点开发
语言，它完全解决了目前 ASP,PHP的一个通病 —脚本级执行。
JSP可以在 Servlet和 JavaBeans的支持下，编写出功能强大的
Web站点程序。
人机交互技术编写组 89
三大服务器端脚本语言
三者都提供在 HTML代码中混合某种程序代码、
由语言引擎解释执行程序代码的能力。 在 ASP、
PHP,JSP环境下,HTML代码主要负责描述信
息的显示样式，而程序代码则用来描述处理逻
辑。普通的 HTML页面只依赖于 Web服务器，
而 ASP,PHP,JSP页面需要附加的语言引擎分
析和执行程序代码。程序代码的执行结果被重
新嵌入到 HTML代码中，然后一起发送给浏览
器。
人机交互技术编写组 90
8.8.2常用 Web界面设计工具
页面编辑器
? MicroSoft公司 的 Frontpage
? Macromedia公司 的 Dreamweaver
? Dreamweaver对于动态网页的支持特别好, 可以轻而易举地
做出很多眩目的互动页面特效 。
? Dreamweaver与 Flash,Firework并称为 Macromedia的网页制
作三剑客 。
辅助工具
? AceHTML Pro 6.0—全功能的 HTML & JavaScript 编辑器 。
? Antenna Web Design Studio—强大的可视化网页设计软件 。
? Easy HTML—简单的所见即所得的 HTML 编辑器, 有固定,
类似浏览器的界面 。
? Easy Web Editor—是一个 Web 发布工具，允许不了解 HTML
而在所见即所得环境中编辑 Web网页。
人机交互技术编写组 91
8.8.3 Web界面设计新技术
Web 3D图形技术
语音 Web技术
人机交互技术编写组 92
1.Web 3D图形技术
（ 1） Web3D虚拟现实建模语言 VRML
? VRML是 3D图形和多媒体技术通用交换的文
件格式，它描述交互式的 3D对象和场景。
它不仅应用在互联网上，也可以应用在工程
和科学可视化、多媒体、娱乐游戏、互联网
3D图形、教育、虚拟社区等领域。 由于网
上传输的是模型文件，故其传输量大大小于
视频图像。
人机交互技术编写组 93
虚拟法国巴黎凯旋门及周围的 3D场景效果
人机交互技术编写组 94
1.Web 3D图形技术
（ 2） Web3D图形实时渲染引擎
? 实时渲染引擎的作用是解释并翻译实施场景
模型文件的语法，实时渲染从服务器端传来
的场景模型文件，在网页访问者的客户端逐
帧、实时地显示 3D图形。
? 实时渲染引擎是实施互联网 3D图形的关键技
术，它的文件大小、图形渲染质量、渲染速
度、以及它能提供的交互性都直接反映其解
决方案的优劣。
人机交互技术编写组 95
1.Web 3D图形技术
（ 3） Web3D图形新标准
? 可扩展 3D((Extensible 3D,X3D) 是一个软
件标准, 定义了如何在多媒体中整合基于网
络传播的交互三维内容。 X3D 是 VRML的继
承 和 改进，提供了以下的新特性：更先进的
应用程序界面，新添的数据编码格式，严格
的一致性，组件化结构。
人机交互技术编写组 96
1.Web 3D图形技术
（ 4） Web3D图形建模与制作工具
? 3DS max可用于 建立场景模型，安装相应的
输出插件，再直接建立场景模型文件。现在
最有名的 Web3D图形软件公司，如 cult3D
和 Viwepoint都可以在 3DS max中直接输出
它们的专用文件格式的场景模型文件。
人机交互技术编写组 97
1.Web 3D图形技术
（ 5） Java 3D
? Java 3D 的本质是一个交互式三维图形应用编
程接口 （ API）, 是 Java 2 SDK的标准扩展,
它可以和普通的 Java 2D, Swing,AWT等很
好地结合, 其目标是,
1） 用户能够在浏览器中观看或操作三维动态图形 。
2） 一次编程, 到处运行 。
3） 适应不同的软件平台 。
4） 适应各种显示环境和输入设备 。
人机交互技术编写组 98
1.Web 3D图形技术
（ 6） Web3D图形技术应用
? 互联网上的交互式 3D图形技术 Wed3D正在
取得新的进展，最具魅力的 Wed3D图形将在
互联网上有广泛应用，如电子商务、联机娱
乐休闲与游戏、科技与工程的可视化、教育、
医学、地理信息、虚拟社区。
人机交互技术编写组 99
两个 Web3D的浏览的例子
人机交互技术编写组 100
2,Web中的语音交互技术
语音浏览技术是正在互连网上的一种新
的应用和技术。
VoiceXML — 语音可扩展标记语言
? 世界上第一个真正的语音通信标准，它定义
了应用开发商向用户提供新型信息访问服务
的方式。
? VoiceXML的应用与 HTML的应用相同，唯
一的差别在于前者使用语音浏览器
人机交互技术编写组 101
VoiceXML — 语音可扩展标记语言
? 通过 VoiceXML，互联网语音应用运营商能
向电话用户发布他们感兴趣的信息
? VoiceXML 突破性地实现了互联网与电话
网的融合，结合传统的电话语音操作控制、
语音识别（ ASR）、文语转换（ TTS）、
XML,Web数据库等技术，完成方便、完
善的业务和信息控制操作。
? 基于 VoiceXML标准的语音数据互联将为声
讯网、移动网、互联网的统一提供技术保
障。
人机交互技术编写组 102
8.9 Web界面设计的评估
Web 界面设计的评估有其独特的特征。
为什么要对 Web进行可用性测试
? 如果某个站点不好用，用户就不会再去用它。
人机交互技术编写组 103
8.9.1 Web站点的可用性
可用性是指对用户来说软件或 Web站点是否易
用、高效和使人感到满意。
衡量可用性的 5个方面
? 易学性：当用户第一次使用设计时完成基本任务的难易 。
? 有效性：一旦用户学习了这个设计, 执行任务的快慢 。
? 易记性：当用户一段时间不用此设计后再来使用, 再次熟练
的难易 。
? 错误：用户会犯多少错误, 这些错误有多大的影响, 从错误
中恢复的难易 。
? 满意程度：使用这个设计让人感到何种程度的愉快。
人机交互技术编写组 104
8.9.2 常见 Web设计错误
目的描述不清楚。
存档内容换上新的地址。
内容不标注日期。
对大图片的缩小不能反映其真实内容。
过分详细的 ALT文本 。
不支持“如果 -那么”（ what-ifs）。
无法通过属性过滤的长长的列表。
产品只能按照品牌进行排序。
过分限制的表单条目。
页面上包括指向自己的链接 。
人机交互技术编写组 105
8.10 Web界面实例分析
简要介绍几种典型的网站的实例，以便
了解门不同类型的网站的设计风格与特
点。
1,商业站点
2.信息站点
3.娱乐站点
4.门户站点
人机交互技术编写组 106
1．商业站点
一般的，商业站点的主要观众是潜在的
和正常的客户组织。第二种观众包括潜
在的和正常的投资者，潜在的雇员，令
人感兴趣的第三种观众，是新闻媒体或
竞争者。
任何商业站点的最主要的目的是，以公
司直接或间接受益的方式服务于用户 。
人机交互技术编写组 107
1．商业站点
商业站点的共同特点包括,
? 基本信息的发布
? 支持与帮助
? 投资机会
? 公共关系
? 招聘信息
? 电子商务
人机交互技术编写组 108
商业网站例 -沃尔玛中国网站的首页
人机交互技术编写组 109
2．信息站点
政府, 教育, 新闻, 无利润的组织, 宗教组织,
或变化多样的社会站点经常被认为是信息站点 。
信息站点的访问者, 是他们对站点提供的信息
有兴趣或需要 。
信息站点的建立满足某些设计条件, 但不需要
考虑财政方面的因素 。
信息站点的目的变化很大 。 在大学的站点可能
尽力以某个题目如某个国家的历史等帮助受教
育的访问者 。
人机交互技术编写组 110
信息网站例 -新浪网的首页
人机交互技术编写组 111
3．娱乐站点
娱乐站点一般是商业性质的，但还有特
殊的考虑。娱乐站点的意图仅仅是使参
观者欢乐。在某种程度上，他们是出售
娱乐节目 。
建立娱乐站点时要求打破常规而取得成
功 。
就娱乐站点来说，目的是出售体验本身。
人机交互技术编写组 112
娱乐网站例 -联众世界的主页
人机交互技术编写组 113
4．门户站点
门户站点是用户在网上冲浪的起始站点，
该站点帮助人们查找信息。
门户站点经常试图提供尽可能多的信息，
为用户尽可能多地提供服务，鼓励他们
留在该站点或继续浏览该站点。
门户站点也包括搜索引擎或站点目录，
这些是门户站点的关键。
人机交互技术编写组 114
门户网站例 -雅虎中文网
人机交互技术编写组 115
习 题
简述 Web设计的原则 。
用 JavaScript或 JavaApplet写程序, 并嵌入 HTML网页 。
试举几个网页例子, 并进行可用性评估 。
人机交互技术编写组 2
本章 内容简介
互联网上 Web站点和页面的设计基础
Web站点的信息交互模型和结构
Web界面设计的基本思想和原则
Web界面设计的工具和技术
Web界面设计的可用性评估
一些典型的 Web站点实例
人机交互技术编写组 3
8.1 Web基础
互联网是近年来对社会影响最大的技术进步,影
响到人类生活的很多方面。
互联网已经成为全面支持多媒体，能在多种平
台上运行的庞大信息服务系统。
互联网的应用范围也日趋扩大，被广泛用于商
业办公、业务管理、购物娱乐等人类生活的各
个方面，业已成为一种全球化社会现象。
人机交互技术编写组 4
8.1.1 Web的出现与发展
90年代初，瑞士日内瓦的欧洲核能研究中心分
布在世界各地的科学家需要高效率的通讯方式
来进行彼此交流与分享信息。
该中心高能核理学家 Tim Berners-Lee研究发展
了万维网（ World Wide Web,WWW）的雏形，
目的是为了建立一个能够整合各种资源、文件
及多媒体的系统，让使用者方便地取得不同媒
体的资料。
人机交互技术编写组 5
WWW-环球信息网络空间
简单来说,WWW是建立在客户 /服务器模型之
上，构成的一个环球信息网络空间，主要使用,
? 超文本标记语言（ Hypertext Markup Language，
HTML）
? 超文本传输协议（ Hypertext Transport Protocols,
HTTP）
通过 Internet把遍布世界各地的服务器连接起来，
它能够提供各种 Internet服务，具有一致用户界面
的信息浏览功能。
人机交互技术编写组 6
Web页面的发展趋势
Web的一个发展趋势, 是图形 Web页面
的爆炸性发展 。 网上浏览中包括了大量
使用的动态图形, 使图形 Web遍布网络
的各个角落 。
新一代 Web信息描述标准 XML,能更详
尽地描述文档的结构信息, 具有比 HTML
有更强大的功能, 为 Web的发展提供了
强有力的支持 。
人机交互技术编写组 7
8.1.2超文本与超媒体
超文本 （ Hypertext）
? 是一种使用于文本, 图形或计算机的信息的
组织形式, 是一种非线性的信息组织形式 。
它使得单一的信息元素之间相互交叉引用,
这种引用并不是通过复制来实现的, 而是通
过指向对方的地址字符串来指引用户获取相
应的信息 。
人机交互技术编写组 8
8.1.2 超文本与超媒体
超媒体 （ Hypermedia）
? 利用超文本形式组织起来的文件不仅仅是文
本，也可以是图、文、声、像以及视频等多
媒体形式的文件。这些多媒体信息就构成了
所谓的超媒体 。
人机交互技术编写组 9
8.1.3 Web界面设计问题的提出
Web界面设计是人机交互界面设计的一
个延伸，是人与计算机交互的演变。
Web界面设计与站点外观直接相关
? 站点的界面外观是否友好直接关系到是否能
吸引人的关注。
人性化的设计是 Web界面设计的核心
? 如何根据人的心理、生理特征，运用技术手
段，创造简单、友好的界面，是 Web界面设
计的重点。
人机交互技术编写组 10
8.2 Web信息交互模型
用来解释 Web的人机界面性质的一个模型，
它提出网页是用户和知识之间的界面。
对于信息提供者来说包括信息的表达。
对于使用者来说则是信息的获取。
信息的表达与获取分别受到两者认知结构
的制约。
人机交互技术编写组 11
Web信息交互模型
图 8-1 Web信息交互模型
知 识
信息提供者
信息
一致性 动态性
认知结
构
知 识
数 据
复杂信息
过程信息
网络空间
用 户
认
知
结
构
人机交互技术编写组 12
Web信息交互模型
模型涉及到信息的三种类型
? 数据：当一条信息被反复、简单的提供时称
为数据，比如机票价格。
? 复杂信息：而用来叙述事件时称为复杂信息，
如多媒体信息。
? 过程性信息：在信息有明确目标，并相互作
用时称为过程性信息，如在线练习、在线测
试等。
人机交互技术编写组 13
Web信息交互模型
模型涉及到信息的两种特性
? 动态性：信息在不断的变化，具有动态性
?比如股票价格、机票价格等是不断变化的。
? 一致性：信息元素的组织方式具有一致性
?信息元素总是通过一定的方式结合在一起，如通
过讨论、说明，或根据电话号码、名字、数字等
方式组织陈列。
人机交互技术编写组 14
8.3 Web信息设计模型
Web信息设计模型
? 是解释 Web人机界面性质的另一个模型。
? 是一种研究网页的信息设计模型。
设计模型中要考虑到信息的两个方面
? 第一是应该呈现或略去什么信息。
? 第二个方面指的是信息该如何被表现 。
人机交互技术编写组 15
Web信息设计模型
用户工具设计
信息设计过程
信 息 内容选取
通路结构 兴趣结构 执行结构
图 8-2 Web信息设计模型
提
供
者
工
具
设
计
人机交互技术编写组 16
WEB的三种设计空间结构模式
通路结构模式
? 说明要展示的关键问题，使用户更容易获取有用的
信息。
? 如出版物中的索引、标题、摘要、概述等。
? Web网站地图和各栏目标题等信息都属于通路结构。
兴趣结构
? 兴趣结构的目的在于捕捉用户的注意力，并维持用
户浏览网页的注意力。
执行结构
? 指学习和教育材料之间的一系列交互，尤其是基于
计算机的交互。
? 在 WEB中指描述学习和网页信息之间的交互。
人机交互技术编写组 17
8.4 Web站点的概念设计
概念设计涉及的工作,
? 分析、确定站点的目标和用途。
? 准确定义所建立 Web网站及站点的规范。
? 事先建立好站点的架构和导航设计。
? 兼顾不同的浏览器。
人机交互技术编写组 18
8.4.1 站点架构和导航设计
站点结构
? 站点的结构可分为逻辑结构和物理结构,
?逻辑结构描述文档间的关系，定义文档间的链接。
?物理结构描述文档的实际位置及显示方式 。
? 超文本结构中最常用层次结构
?层次型结构按信息的必要性来改变信息的显示方式。
?根网页是站点的主页，层次以根网页开始。
?用户深入站点时，选择趋向于越来越具体，直到找
到目标或叶子网页。
?层次结构通过深度和广度来描述。
人机交互技术编写组 19
8.4.1站点架构和导航设计
站点的导航设计
? 导航系统对访问者来说是路径指示系统。
? 站点访问者通过导航系统寻找需要的信息。
? 用户感觉到能以满意的方式找到所需信息时，
导航系统才是合适的。
? 由于用户的差异，不可能实现完美的导航系
统。
人机交互技术编写组 20
兼顾不同浏览器的设计
原因
? 站点浏览者可能使用不同类型和版本的浏览器。
? 以某一个浏览器的某一个版本为依据编写的网页程
序，可能在其它的浏览器或其它版本上不能正常显
示或运行。
方法
? 通过使用 JavaScript等编程工具或功能，探测用户浏览器的类型
和版本等参数及对于某特定功能的支持情况，然后根据探测结
果显示适用于特定浏览器的网页内容。
? 根据用户浏览器分布情况决定设计所面向的浏览器类别和版本。
人机交互技术编写组 21
8.5 Web界面设计所涉及的问题
Web界面设计中要考虑的基本问题包括,
? Web界面设计基本原则
? Web界面规划
人机交互技术编写组 22
8.5.1 Web界面设计基本原则
了解浏览者的心理状态
内容与形式的统一
减少浏览层次
特点明确
统一整体的形象
Web界面设计的 3C原则
人机交互技术编写组 23
8.5.1 Web界面设计基本原则
1,了解浏览者的心理状态
? 从心理学的角度分析浏览者的心理状态，有
助于网页页面的设计。
? 在单击“退回”按钮之前有三秒钟而且只有
三秒的等待。
? 必须迅速地把有趣和有吸引力的东西显示出
来。
人机交互技术编写组 24
8.5.1 Web界面设计基本原则
2,内容与形式的统一
? 内容指的是 Web网站的信息、数据及文字内容等,
? 形式指的是网页设计的版式、构图、布局、色彩以
及它们所呈现出的风格特点等。
? 网页的形式是为内容服务的，但本身又有自己的独
立性和艺术规律。
? 网页设计的目的就是为了使网页更加形象、直观，
更易被观众所接受。
? 不同内容的网页要求用不同的设计形式。
人机交互技术编写组 25
8.5.1 Web界面设计基本原则
3,减少浏览层次
? 应尽量把网页的层次简要化，力求以最少的
点击次数链接到具体的内容。
? 在主页的访问率为 100人次的情况下，下一
页的访问率降到 30到 50人次。
? 网页的层次越复杂，实际内容的访问率也将
越低，信息也就越难传达到读者的手里。
人机交互技术编写组 26
8.5.1 Web界面设计基本原则
4,特点明确
? 利用相应逻辑结构来有序组织、开发出一个页
面设计原型，进行测试，逐步精炼此原型，形
成明确的特点
? 特色鲜明的 Web网站是精心策划的结果，只有
独特的创意和赏心悦目的网页设计才能在一瞬
间打动它的浏览者
? 应清楚地了解 Web网站用户的基本情况，从而
能有的放矢，挑选关键信息
人机交互技术编写组 27
8.5.1 Web界面设计基本原则
5．统一整体的形象
? Web网站标识以及网页设计标准确定后，
应尽量地应用到每一页页面上，使浏览者
可以确定当前所浏览的网站，并且给浏览
者留下深刻而统一的印象。
人机交互技术编写组 28
SONY公司的首页特点
SONY公司的首页设计充分体现了引领消
费电子产品的潮流这一特点，设计者很
好地传递了该 Web网站的特点,
? 页面上富有动感的线条和画面
? 鲜亮的用色
? Flash画面和字样
? 鼠标落在上面就会以彩色显示的多个画面等
人机交互技术编写组 29
SONY公司的首页
人机交互技术编写组 30
8.5.1 Web界面设计基本原则
6,Web网站设计的 3C原则
? concise （简洁 ）
?使用醒目的标题，这个标题常常采用图形
来表示，但图形同样要求简洁。
?限制所用的字体和颜色的数目。
?页面上所有的元素都应当有明确的含义和
用途，不要用无关的图片把页面装点起来。
人机交互技术编写组 31
8.5.1 Web界面设计基本原则
? Consistent（一致性）
?各页面使用相同的页边距；文本, 图形间保
持相同的间距 。
?各页面上都放上公司或网站的统一标志 。
?各页面应当使用相同的导航图标 。
?页面中的每个元素与整个页面以及站点的色
彩和风格上保持一致性 。
?文字的颜色要同图像的颜色保持一致并注意
色彩搭配的和谐。
人机交互技术编写组 32
8.5.1 Web界面设计基本原则
? contrast (对比度 )
?对比是强调某些内容的最有效的办法之一，
好的对比度使内容更易于辨认和接受。
?常用的对比方法是使用颜色进行对比。
?另一种实现对比的方法是使用字体变化。
?可以在文字排版中使用斜体和黑体写出关
键内容，但不要滥用，以免不能达到强调
效果。
人机交互技术编写组 33
8.5.2 Web界面规划
确定 Web界面设计的目标
? 企业 Web网站,
?企业建立这个 Web网站的目的
?这个网站的作用
?该提供哪些吸引访问者的东西
?用户访问这个 Web网站后，能给他们带来什么？
? 个人 Web网站,
?主要是展现自我、演练技术 。
?建立的 Web网站要有个性和特色 。
人机交互技术编写组 34
8.5.2 Web界面规划
? 界面布局的规划
?制定好目标后，网页布局、元素的设计都要以这
个目标为中心，尽量从各方面综合表现 Web站点
的目标。
?在制定建立站点目标的同时，应该将站点作为一
种文化、一种艺术来看。
人机交互技术编写组 35
8.5.2 Web界面规划
Web界面设计中用户的地位
? 确定 Web站点的用户群体, 从用户的角度去思考。
? 以用户为中心的设计，为用户的共性设计，同时考
虑差异。
? 对目标用户群的构成进行分析,Web网站是以提供
的信息内容来分类的 。
? 对目标用户的行为方式来分析：按照人机工程学的
观点，行为方式受年龄、性别、地区、种族、职业、
生活习俗、受教育程度等因素影响。
人机交互技术编写组 36
8.6 Web界面概要设计
Web界面概要设计包括
? Web界面框架设计
? Web界面的内容与风格 的设计
? Web界面设计的语言与文化
人机交互技术编写组 37
8.6.1 Web界面框架设计
Web网站规划
? 对市场进行分析，确定站点的目的和功能，并根据
需要对站点建设中的技术、内容、费用、测试、维
护等做出规划。
建立原型系统
? 尝试采用不同的方法修改目标、更新形象。
? 解决 Web网站建设中的一些基本问题,
? Web网站的结构
? 信息的组织与管理
? 新增文件与原有系统保持一致的措施。
? 存储信息的物理方法（采用数据库还是文件系统）
? 文档版本控制
? 结构的完整性以及维护方法等
人机交互技术编写组 38
8.6.1 Web界面框架设计
详细设计包括
? Web页面的布局
? 系统的内部结构
? 实现方法和维护方法等
? 确定 Web网站的运行模式
? 制造企业网站
? 商业企业网站
? 门户网站
? 新闻网站
? 个人网站
? 通过广告, 销售等方式进行运作的网站
正式实施
人机交互技术编写组 39
8.6.2 Web界面的内容与风格
网站内容设计的原则,
? HTML文档的效果由其自身的质量和浏览器
解释的方法决定。应让所有的浏览器都能够
正常浏览。
? 网站信息的组织的总体结构要层次分明，尽
量避免形成复杂的网状结构。
? 要权衡图像和多媒体信息的数量，在不影响
网站效果的前提下，尽量减少图像的数量和
所占面积。
人机交互技术编写组 40
8.6.2 Web界面的内容与风格
网站内容设计的原则
? 网站的首页要给用户带来好的第一印象，能够吸引
用户再次光临这个网站。
? 网站内容应是动态进行修改和更新；。
? 网页中应该提供联机帮助功能。
? 网页的文本内容应简明，通俗易懂。
? 所有的内容都要针对设计目标而写，不要节外生枝。
? 文字要正确，不能有语法错误和错别字。
人机交互技术编写组 41
8.6.2 Web界面的内容与风格
Web界面的风格
? Web界面的风格包括站点的标志、色彩、字体、布
局、交互方式、内容价值、存在意义等。
? 一个杰出的网站需要整体的形象包装和设计。
? 为儿童设计的网站应当使用比较丰富的色彩和图形，
并且较多使用动画和声音等多媒体表现工具。
? 为老年人设计的网站需要考虑采用较大的字体、直
截了当的信息显示和简单的浏览方式，以适用老年
人可能逐渐减弱的视力和记忆力
人机交互技术编写组 42
体现儿童特点的迪斯尼网站
人机交互技术编写组 43
8.6.3 Web界面设计的语言与文化
网站应设置多语言选择
? 网站面向的用户使用不同的语言，则在设计时要考
虑包括不同语言的版本，将选择语言版本的功能放
在网站的主页，并用不同版本的语言进行标注 。
在网站设计和建设中进行跨文化研究
? 应当注意到不同地区的文化特点。
? 不同的语言表达可以产生不同的效果。
? 有些内容在一个地区是允许的或适用的，但是在另
外一个地区使用却是不合适的。
? 应当避免显示对用户不适合的内容。
人机交互技术编写组 44
8.7 Web界面设计要素
Web界面设计要素 包括,
? Web界面布局
? Web界面的色彩
? Web界面的字体
? Web界面的动画与多媒体
? Web界面的导航
人机交互技术编写组 45
8.7.1 Web界面布局
布局设计应做到整体布局合理、有序、
整体化。
常用 Web页面布局的形式,
?,同”字形结构布局
?,国”字形结构布局
? 左右对称布局
? 自由式布局
人机交互技术编写组 46
8.7.1 Web界面布局
“同”字形结构布局
? 页面顶部为主菜单，下方左侧为二级栏目条，
右侧为链接栏目条，屏幕中间显示具体的内
容。
? 优点是页面结构清晰、左右对称、主次分明，
因而得到广泛的应用。
? 缺点是太过于规矩呆板，需要善于运用细节
色彩的变化来调剂。
人机交互技术编写组 47
8.7.1 Web界面布局
2．“国”字形结构布局
?, 国, 字形结构布局在, 同, 字形结
构布局的基础上, 在页面下方增加一
横条菜单或广告
? 其优点是充分利用版面, 信息量大,
切换方便 。
? 有的网站将页面设计成镜框的样式,
显示出网站设计师的品味 。
人机交互技术编写组 48
8.7.1 Web界面布局
3．左右对称布局
? 采取左右分割屏幕的方法形成对称布
局。
? 优点是自由活泼，可显示较多文字和
图像。
? 缺点是两者有机结合较为困难。
人机交互技术编写组 49
8.7.1 Web界面布局
4．自由式布局
?自由式布局打破上述两种布局的框
架结构，常用于文字信息量少的时
尚类和设计类网站。
?其优点是布局随意，外观漂亮，吸
引人。
?缺点是显示速度慢。
人机交互技术编写组 50
8.7.2 Web界面的色彩
确定网站的标准色彩
? 不同的色彩搭配产生不同的效果，并可能影
响到访问者的情绪。
以红、绿、蓝三色称为三基色
? 其它的色彩都可以用这三种色彩调和而成。
底色应应柔和、素雅
? 柔和的底色配上深色文字，读起来自然，流
畅。
人机交互技术编写组 51
8.7.2 Web界面的色彩
网页色彩搭配的原则,
? 色彩的鲜明性
? 网页的色彩要鲜艳，容易引人注目。
? 色彩的独特性
? 要有与众不同的色彩，使得大家对网页的印象强烈。
? 色彩的合适性
? 色彩和网页要表达的内容气氛相适合。
? 色彩的联想性
? 不同色彩会产生不同的联想，选择色彩要和网页的内涵相
关联。
人机交互技术编写组 52
8.7.3 Web界面的字体
字体是每一个网站的必要组件，选择字
体和颜色，和其它页面元素一起产生一
个视觉效果。
人机交互技术编写组 53
常用的英文字体
（ 1） Serif字体
（ 2） Sans-Serif字体
（ 3） TrueType字体
人机交互技术编写组 54
常用的英文字体
Serif字体
? Serif是在字母主要笔画的结束处加上的小装
饰笔画。 Times New Roman是一个 Serif字
体的例子。
? Serif引导眼睛随着打字线移动，提高了可读
性。 Serif字体最适合于正文文本。
人机交互技术编写组 55
常用的英文字体
Sans-Serif字体
? Sans-Serif字体没有小装饰笔画,Arial是一
个 Sans-Serif的例子。
? 字符的外观被减少到只含有必要的笔画。
? Sans-Serif文本必须逐个字母的阅读。
? 建议在小尺寸文本和非常大的文本中使用。
? 通常,Serif字体和一个 Sans-Serif字体就可
以在网页上提供一个较好的文本组合。
人机交互技术编写组 56
常用的英文字体
TrueType字体
? 许多字体都是 TrueType，即可以产生任意尺
寸而不降低字母质量。
? TrueType是苹果公司开发的一项数字技术，
现在被 Apple和 Microsoft操作系统使用。
? Times New Roman和 Arial都是 TrueType字
体。
人机交互技术编写组 57
运用不同英文字体的网页
人机交互技术编写组 58
常用的中文字体
Web界面中常用的中文字体有宋体, 仿宋体,
楷体和黑体 。 除这四种基本字体外, 还有多种
可选用的字体如书宋体, 报宋体, 隶书体, 美
黑体, 广告体, 行草体等 。
汉字大小定为九个等级，按初、一、二、三、
四、五、六、七、八排列，在字号等级之间又
增加一些字号，并取名为小几号字，如小四号、
小五号等。
人机交互技术编写组 59
常用的中文字体
正文中的中文字体
? 可以采用传统媒体中的各种字体作为 Web界
面正文中的字体 。
? 根据 Web网页中的不同要求, 选择相应的字
体和字号 。
? 常见正文中文字体用法如表 8-1所示 。
人机交互技术编写组 60
常用的中文字体
标题中的中文字体
? 网页应该重视标题的处理, 把标题排版作为
版面修饰的主要手段 。
? 标题的字体变化更为讲究, 用于网页排版系
统一般要配十几到几十种字体, 才能满足标
题用字的需要 。
? 网页标题一般无分级要求，字形普遍要比图
书标题大，字体的选择多样，字形的变化修
饰更为丰富。
人机交互技术编写组 61
常见正文中文字体用法
名称
正文字体
正文字号
图书
书宋 (宋体 )
五号, 小五号
工具书
书宋 (宋体 )
小五号, 六号
报纸
报宋
小五号, 六号
公文
仿宋
三号, 四号
期刊杂志
书宋, 细等体
五号, 小五号, 六号
人机交互技术编写组 62
使用字体的原则
整个网站上的字体应该保持使用的一致
? 网站中可能会使用多种字体，但是同一种字
体应该表示相同类型的数据或者信息。
? 文字的颜色应该一致，让用户可以容易的确
定不同文本和颜色所代表的内容。
? 为了让字体匹配网站的总体概念，必须要意
识到每一个字体变化和可以使用的范围。
人机交互技术编写组 63
使用字体的原则
考虑字体如何适应网页, 以及字体与整个
设计的关系 。
选择的字体和整个页面及网站应融为一体 。
设计元素例如页边框，行间距，背景颜色
和前景颜色等都可以影响最终的结果。
通过字体不同的安排，可以让网站产生丰
富变化的外观和感觉。
人机交互技术编写组 64
8.7.4 Web界面的动画与多媒体
动画、音频和视频这样的多媒体可以补充平淡
的文本或者二维图形，也补充网站的视觉设计、
音调和消息等。
Web设计者可以使用很多当前 Web设计中的多
媒体处理工具和技术；但是带宽以及浏览器的
支持能力限制了多媒体技术的迅速采用。
为了充分享受新技术，通常需要大带宽、浏览
器插件或第三方应用程序的支持。
人机交互技术编写组 65
WEB中的动画
动画是区别 Web和其它媒体的一个重要展示形
式，动画赋予了用户运动和投入的感受。
动画可以分为不同的级别，从简单的动画 GIF
图像到三维以及虚拟环境。
最常用的基本动画类型是 GIF,Rollover和
Macromedia Flash文件。
动画 GIF是静止图像的汇集，可以按照指定的
序列号和速度重复运动。许多标志广告就是动
画 GIF。
人机交互技术编写组 66
WEB中的动画
JavaApplet是经常被用来制作互联网上动
画效果的程序设计语言。
Macromedia Flash文件在网站设计中被
广泛地接受。
Flash引入了一种新的动画形式。它在带
宽有限的情况下提供了媒体丰富的内容。
? Flash允许设计者创建吸引人的动画网站，
为通常的静态站点提供了一种新的选择。
人机交互技术编写组 67
8.7.5 Web界面上的导航
对于 Web站点来说, 需要包含导航条, 用户利
用导航的提示在信息的空间里移动 。
真实世界的导航观点在 Web中常被采用 。
应该注意, Web不是真实的世界, Web导航应
该帮助用户理解他们在哪里, 可以去哪里, 怎
样获得想要的东西 。
人机交互技术编写组 68
Web界面上的导航
为使用户得到真实的感觉, 必须充分考虑可见
性, 标记和导航元素的布局 。
Web页上仅有五个基本区域可放置导航元素,
? 顶部
? 底部
? 左侧
? 右侧
? 中央
人机交互技术编写组 69
8.8 Web界面设计技术与工具
要设计好的 Web界面，需要有良好的设
计工具，随着 Internet网络的发展，国际
组织和许多互联网软件开发商制订了若
干标准，开发了不同的 Web界面设计工
具。本节对一些常见的技术和工具进行
简单介绍。
人机交互技术编写组 70
8.8.1 Web界面设计技术基础
超文本标记语言 HTML
客户端脚本语言 JavaScript
JavaApplet
服务器端脚本语言
人机交互技术编写组 71
1,超文本标记语言 HTML
HTML已经成为表示 Web文档信息的标准方法,
是构成 Web页面的主要工具 。
HTML是用来表示网上信息的符号标记语言，
是一个跨平台语言。
HTML标准定义了构成语言的每一个独立元素,
这些元素是说明如何在浏览器中显示 HTML文
档的指令或标记符 。
从结构上讲,HTML文件由各种标记元素组成，
用于组织文件的内容和指导文件的输出格式。
人机交互技术编写组 72
（ 1）基本标记元素（部分）
标记元素
功能含义
<HTML></HTML>
创建一个 HTML文档，通知浏览器该文件含有 HTML标记码
<HEAD></HEAD>
设置文档标题以及其它不在 Web网页上显示的信息
<TITLE></TITLE>
网页标题，将显示在浏览器的标题栏中
<BODY></BODY>
设置文档的可见部分，它包含了文件的内容
<BODY BGCOLOR=？ >
设置背景颜色，使用颜色名或十六进制值
<BODY BACKGROUND=？ >
设置背景图片
<BODY TEXT=？ >
设置文本文字颜色，使用颜色名或十六进制值
<BODY LINK=？ >
设置超级链接文字的颜色，使用颜色名或十六进制值
<BODY VLINK=？ >
设置已访问过的超级链接文字的颜色，使用颜色名或十六进制值
<BODY ALINK=？ >
设置鼠标悬停于超级链接文字的颜色，使用颜色名或十六进制值
<H1></H1>
创建最大的标题，在 HTML中有六种标题
人机交互技术编写组 73
（ 2）图形标记元素
目前能被 Web浏览器直接解释的常见图像格式有,GIF
格式 (.GIF文件，支持 256色 )； X位图格式 (.XBM文件，
黑白图像 )； JPEG格式 (.JPG,.JPEG文件，支持 RGB色 )。
标记元素
功能含义
<IMG SRC="name" ALIGN=?
BORDER=? WIDTH=?
HEIGHT=?>
添加一个图像。 SRC给定图片文件的定位,ALIGN属
性定义图与文本行的对齐方式； BORDER属性设置围
绕一个图像的边框的大小； WIDTH和 HEIGHT分别重
新定义图像的宽度和高度 。
<HR SIZE=? WIDTH=?
NOSHADE>
加入一条水平线,SIZE设置水平线的大小,WIDTH
设置水平线的宽度,NOSHADE表示创建无阴影的水
平线
人机交互技术编写组 74
（ 3）表格标记元素 （部分）
标记元素
功能含义
<TABLE BORDER=#
CELLSPACING=# CELLPADDING=#
WIDTH=# or %>
定义表格,BORDER属性表示表格边框粗细程度，
CELLSPACING属性用于设置表格格子之间空间的大小，
CELLPADDING用来设置表格格子边框与其内部内容之间空间
的大小,WIDTH属性是用来定义表格宽度
<CAPTION></CAPTION>
定义表格标题
<TR ALIGN=? VALIGN=?>
表示一个新的表格行的开始，属性 ALIGN表示横向对齐方式
<TH ALIGN=? VALIGN=?
COLSPAN=? ROWSPAN=?>
在表格的当前行里产生一个新的表项单元,<TH>表示一个表
项标题 (TableHeader)单元,COLSPAN及 ROWSPAN表示进行
横向及纵向地扩展表项单元
<TD ALIGN=? VALIGN=?
COLSPAN=? ROWSPAN=?>
在表格的当前行里产生一个新的表项单元,<TD>表示一个表
项数据 (TableData)单元，其它属性的含义同上
人机交互技术编写组 75
（ 4）表单标记元素 (部分 )
标记元素
功能含义
<FORM></FORM>
创建所有表单
<INPUT TYPE="TEXT"
NAME="name" SIZE=#>
创建一个单行文本输入域,SIZE设置以字符计数的
宽度文本
<INPUT TYPE="PASSWORD"
NAME="name" VALUE="*"
SIZE=#>
创建一个口令输入域，输入的字符全部显示为, *”
<TEXTAREA NAME="name"
COLS=#
ROWS=#></TEXTAREA>
创建一个文本框区域, 列的数目设置宽度, 行的数
目设置高度
<INPUT TYPE="RADIO"
NAME="name" VALUE="x">
创建一个单选按钮, 文字在标签后面
<INPUT TYPE="CHECKBOX"
NAME="name">
创建一个复选框, 文字在标签后面
人机交互技术编写组 76
【 例 8-1】 Demo.html
【 例 8-1】 用任一编辑器建立文本文件 Demo.html。
<HTML>
<HEAD>
<TITLE>网页标题显示于浏览器窗口的标题栏 </TITLE>
</HEAD>
<BODY BGCOLOR="#E7F9F3">
<H1>H1设定一级标题 </H1><BR>
<B>黑体字 </B><BR>
<I>斜体字 </I>
<P ALIGN="right">
<FONT SIZE=5 COLOR="red">红色 5号字 </FONT><BR><BR><BR><BR><BR>
<P ALIGN="center"><A HREF="http://www.sdu.edu.cn">点击这里将超链到山东大学主页
</A><P><BR><BR>
<A HREF="#next">点击这里将超链到下面的锚点 </A>
<P ALIGN="center"><A HREF="mailto:xueqingli@sdu.edu.cn">有意见请告诉我 </A> <P>
<A NAME="next">这里是一个文档内部锚点的起始处 </A>
</BODY>
</HTML>
人机交互技术编写组 77
Demo.html的运行效果
人机交互技术编写组 78
【 例 8-2】 用 HTML实现表单实例
<HTML>
<HEAD>
<TITLE>HTML表单实例 </TITLE>
</HEAD>
<BODY BGCOLOR="#E7F9F3">
<FORM>用户名,
<INPUT TYPE="TEXT" NAME="username" SIZE=10> 口令,
<INPUT TYPE="PASSWORD" NAME="password" SIZE=8><HR> 选学内容,
<INPUT TYPE="CHECKBOX" NAME="ck1" VALUE="W"> Word
<INPUT TYPE="CHECKBOX" NAME="ck2" VALUE="E"> Excel
<INPUT TYPE="CHECKBOX" NAME="ck3" VALUE="I"> Internet <P>课程类别,
<INPUT TYPE="RADIO" NAME="class" VALUE="must">必修
<INPUT TYPE="RADIO" NAME="class" VALUE="option">选修 <HR>你的计算机是哪一种类型,
<SELECT NAME="computer">
<OPTION>PC
<OPTION>UNIX
<OPTION>MAC
<OPTION>OTHER
</SELECT><P> 备注,<BR>
<TEXTAREA NAME="comment" ROWS=5 COLS=25> 请在此填写补充内容 </TEXTAREA> <P
ALIGN="center"> <INPUT TYPE="SUBMIT" VALUE="确定 "> <INPUT TYPE="RESET" VALUE="重填
">
</FORM>
</BODY>
</HTML>
人机交互技术编写组 79
用 HTML实现表单实例效果
人机交互技术编写组 80
2．客户端脚本语言 JavaScript
HTML无法独自完成交互和客户端动态网页的
任务,JavaScript，它弥补了 HTML语言的缺陷。
利用 JavaScript，可以使得信息和用户之间不
仅只是一种显示和浏览的关系，而是实现了一
种实时的、动态的、可交互式的表达能力。
JavaScript是一种内嵌于 HTML中的脚本语言，
它是一种基于对象和事件驱动并具有安全性能
的脚本语言。使用它的目的是与 HTML、
JavaApplet一起实现在一个 Web页面中链接多
个对象，与 Web客户交互作用，可用于开发客
户端的应用程序等。
人机交互技术编写组 81
JavaScript 的 特点
（ 1）一种脚本编写语言
（ 2）基于对象的语言
（ 3）简单性
（ 4）安全性
（ 5）动态性
（ 6）跨平台性
人机交互技术编写组 82
JavaScript与 HTML结合实例
<html>
<head>
<Script Language ="JavaScript">
// JavaScript 在此出现
alert("这是第一个 JavaScript例子 !");
alert("欢迎你进入 JavaScript世界 !");
alert("今后我们将共同学习 JavaScript知识 ！ ");
</Script>
// JavaScript 在此结束
</Head>
</Html>
//JavaScript代码由 <Script Language =“JavaScript”>...</Script>说明
//alert()是 JavaScript的窗口对象方法，其功能是弹出一个具有 OK对话框
并显示括号中的字符串
人机交互技术编写组 83
JavaScript与 HTML结合实例运行结果
人机交互技术编写组 84
3,JavaApplet
JavaAapplet是访问 Internet服务器，在
Internet上传播的，自动安装的，可作为部分
Web文档运行的小应用程序。
当 JavaAapplet到达客户端，它被限制访问资源，
以使它能够在不受病毒威胁和破坏数据完整性
的情况下生成一个二进制的多媒体用户界面以
及完成复杂的计算。它还提供了装载和显示图
像的方法，以及装载和播放语音片断的方法。
人机交互技术编写组 85
JavaAapplet是一种基于窗口的程序
JavaAapplet是由事件驱动的。一个 JavaAapplet类似于
系列提供中断服务的子程序的集合。
在事件发生之前,JavaAapplet一直处于等待状态中。
一旦事件发生,JavaAapplet就会采取相应措施并迅速
将控制权交给 AWT。针对特定的事件作出相应的动作
并把控制交给 AWT的运行环境。
用户可以与 JavaAapplet进行交互，而不是通过其它方
式。这些交互被送至 JavaAapplet,JavaAapplet必须作
出响应的事件。
人机交互技术编写组 86
JavaApplet在网页中实现放大镜的例子
<applet archive="AnLens.jar"
code="AnLens.class" width="320" height="256">
<param name="credits" value="Applet by Fabio
Ciucci ">
<param name="distdval" value="10">
…
</applet>
AnLens.jar是 JavaApplet的源文件。其效果如下
图。
人机交互技术编写组 87
人机交互技术编写组 88
4．服务器端脚本语言
目前流行的三大服务器端脚本语言是 ASP、
PHP,JSP。
? ASP（ Active Server Pages），是一个 Web服务器端的开发环
境,利用它可以产生和运行动态的、交互的、高性能的 Web
服务应用程序。
? PHP（ HyperText Preprocess）是一种跨平台的服务器端的嵌
入式脚本语言。它大量地借用 C,Java和 Perl语言的语法，并
耦合 PHP自己的特性，使 Web开发者能够快速地写出动态生
成页面。
? JSP （ Java Server Page） 是 Sun公司推出的新一代站点开发
语言，它完全解决了目前 ASP,PHP的一个通病 —脚本级执行。
JSP可以在 Servlet和 JavaBeans的支持下，编写出功能强大的
Web站点程序。
人机交互技术编写组 89
三大服务器端脚本语言
三者都提供在 HTML代码中混合某种程序代码、
由语言引擎解释执行程序代码的能力。 在 ASP、
PHP,JSP环境下,HTML代码主要负责描述信
息的显示样式，而程序代码则用来描述处理逻
辑。普通的 HTML页面只依赖于 Web服务器，
而 ASP,PHP,JSP页面需要附加的语言引擎分
析和执行程序代码。程序代码的执行结果被重
新嵌入到 HTML代码中，然后一起发送给浏览
器。
人机交互技术编写组 90
8.8.2常用 Web界面设计工具
页面编辑器
? MicroSoft公司 的 Frontpage
? Macromedia公司 的 Dreamweaver
? Dreamweaver对于动态网页的支持特别好, 可以轻而易举地
做出很多眩目的互动页面特效 。
? Dreamweaver与 Flash,Firework并称为 Macromedia的网页制
作三剑客 。
辅助工具
? AceHTML Pro 6.0—全功能的 HTML & JavaScript 编辑器 。
? Antenna Web Design Studio—强大的可视化网页设计软件 。
? Easy HTML—简单的所见即所得的 HTML 编辑器, 有固定,
类似浏览器的界面 。
? Easy Web Editor—是一个 Web 发布工具，允许不了解 HTML
而在所见即所得环境中编辑 Web网页。
人机交互技术编写组 91
8.8.3 Web界面设计新技术
Web 3D图形技术
语音 Web技术
人机交互技术编写组 92
1.Web 3D图形技术
（ 1） Web3D虚拟现实建模语言 VRML
? VRML是 3D图形和多媒体技术通用交换的文
件格式，它描述交互式的 3D对象和场景。
它不仅应用在互联网上，也可以应用在工程
和科学可视化、多媒体、娱乐游戏、互联网
3D图形、教育、虚拟社区等领域。 由于网
上传输的是模型文件，故其传输量大大小于
视频图像。
人机交互技术编写组 93
虚拟法国巴黎凯旋门及周围的 3D场景效果
人机交互技术编写组 94
1.Web 3D图形技术
（ 2） Web3D图形实时渲染引擎
? 实时渲染引擎的作用是解释并翻译实施场景
模型文件的语法，实时渲染从服务器端传来
的场景模型文件，在网页访问者的客户端逐
帧、实时地显示 3D图形。
? 实时渲染引擎是实施互联网 3D图形的关键技
术，它的文件大小、图形渲染质量、渲染速
度、以及它能提供的交互性都直接反映其解
决方案的优劣。
人机交互技术编写组 95
1.Web 3D图形技术
（ 3） Web3D图形新标准
? 可扩展 3D((Extensible 3D,X3D) 是一个软
件标准, 定义了如何在多媒体中整合基于网
络传播的交互三维内容。 X3D 是 VRML的继
承 和 改进，提供了以下的新特性：更先进的
应用程序界面，新添的数据编码格式，严格
的一致性，组件化结构。
人机交互技术编写组 96
1.Web 3D图形技术
（ 4） Web3D图形建模与制作工具
? 3DS max可用于 建立场景模型，安装相应的
输出插件，再直接建立场景模型文件。现在
最有名的 Web3D图形软件公司，如 cult3D
和 Viwepoint都可以在 3DS max中直接输出
它们的专用文件格式的场景模型文件。
人机交互技术编写组 97
1.Web 3D图形技术
（ 5） Java 3D
? Java 3D 的本质是一个交互式三维图形应用编
程接口 （ API）, 是 Java 2 SDK的标准扩展,
它可以和普通的 Java 2D, Swing,AWT等很
好地结合, 其目标是,
1） 用户能够在浏览器中观看或操作三维动态图形 。
2） 一次编程, 到处运行 。
3） 适应不同的软件平台 。
4） 适应各种显示环境和输入设备 。
人机交互技术编写组 98
1.Web 3D图形技术
（ 6） Web3D图形技术应用
? 互联网上的交互式 3D图形技术 Wed3D正在
取得新的进展，最具魅力的 Wed3D图形将在
互联网上有广泛应用，如电子商务、联机娱
乐休闲与游戏、科技与工程的可视化、教育、
医学、地理信息、虚拟社区。
人机交互技术编写组 99
两个 Web3D的浏览的例子
人机交互技术编写组 100
2,Web中的语音交互技术
语音浏览技术是正在互连网上的一种新
的应用和技术。
VoiceXML — 语音可扩展标记语言
? 世界上第一个真正的语音通信标准，它定义
了应用开发商向用户提供新型信息访问服务
的方式。
? VoiceXML的应用与 HTML的应用相同，唯
一的差别在于前者使用语音浏览器
人机交互技术编写组 101
VoiceXML — 语音可扩展标记语言
? 通过 VoiceXML，互联网语音应用运营商能
向电话用户发布他们感兴趣的信息
? VoiceXML 突破性地实现了互联网与电话
网的融合，结合传统的电话语音操作控制、
语音识别（ ASR）、文语转换（ TTS）、
XML,Web数据库等技术，完成方便、完
善的业务和信息控制操作。
? 基于 VoiceXML标准的语音数据互联将为声
讯网、移动网、互联网的统一提供技术保
障。
人机交互技术编写组 102
8.9 Web界面设计的评估
Web 界面设计的评估有其独特的特征。
为什么要对 Web进行可用性测试
? 如果某个站点不好用，用户就不会再去用它。
人机交互技术编写组 103
8.9.1 Web站点的可用性
可用性是指对用户来说软件或 Web站点是否易
用、高效和使人感到满意。
衡量可用性的 5个方面
? 易学性：当用户第一次使用设计时完成基本任务的难易 。
? 有效性：一旦用户学习了这个设计, 执行任务的快慢 。
? 易记性：当用户一段时间不用此设计后再来使用, 再次熟练
的难易 。
? 错误：用户会犯多少错误, 这些错误有多大的影响, 从错误
中恢复的难易 。
? 满意程度：使用这个设计让人感到何种程度的愉快。
人机交互技术编写组 104
8.9.2 常见 Web设计错误
目的描述不清楚。
存档内容换上新的地址。
内容不标注日期。
对大图片的缩小不能反映其真实内容。
过分详细的 ALT文本 。
不支持“如果 -那么”（ what-ifs）。
无法通过属性过滤的长长的列表。
产品只能按照品牌进行排序。
过分限制的表单条目。
页面上包括指向自己的链接 。
人机交互技术编写组 105
8.10 Web界面实例分析
简要介绍几种典型的网站的实例，以便
了解门不同类型的网站的设计风格与特
点。
1,商业站点
2.信息站点
3.娱乐站点
4.门户站点
人机交互技术编写组 106
1．商业站点
一般的，商业站点的主要观众是潜在的
和正常的客户组织。第二种观众包括潜
在的和正常的投资者，潜在的雇员，令
人感兴趣的第三种观众，是新闻媒体或
竞争者。
任何商业站点的最主要的目的是，以公
司直接或间接受益的方式服务于用户 。
人机交互技术编写组 107
1．商业站点
商业站点的共同特点包括,
? 基本信息的发布
? 支持与帮助
? 投资机会
? 公共关系
? 招聘信息
? 电子商务
人机交互技术编写组 108
商业网站例 -沃尔玛中国网站的首页
人机交互技术编写组 109
2．信息站点
政府, 教育, 新闻, 无利润的组织, 宗教组织,
或变化多样的社会站点经常被认为是信息站点 。
信息站点的访问者, 是他们对站点提供的信息
有兴趣或需要 。
信息站点的建立满足某些设计条件, 但不需要
考虑财政方面的因素 。
信息站点的目的变化很大 。 在大学的站点可能
尽力以某个题目如某个国家的历史等帮助受教
育的访问者 。
人机交互技术编写组 110
信息网站例 -新浪网的首页
人机交互技术编写组 111
3．娱乐站点
娱乐站点一般是商业性质的，但还有特
殊的考虑。娱乐站点的意图仅仅是使参
观者欢乐。在某种程度上，他们是出售
娱乐节目 。
建立娱乐站点时要求打破常规而取得成
功 。
就娱乐站点来说，目的是出售体验本身。
人机交互技术编写组 112
娱乐网站例 -联众世界的主页
人机交互技术编写组 113
4．门户站点
门户站点是用户在网上冲浪的起始站点，
该站点帮助人们查找信息。
门户站点经常试图提供尽可能多的信息，
为用户尽可能多地提供服务，鼓励他们
留在该站点或继续浏览该站点。
门户站点也包括搜索引擎或站点目录，
这些是门户站点的关键。
人机交互技术编写组 114
门户网站例 -雅虎中文网
人机交互技术编写组 115
习 题
简述 Web设计的原则 。
用 JavaScript或 JavaApplet写程序, 并嵌入 HTML网页 。
试举几个网页例子, 并进行可用性评估 。
