人机交互实验报告-Web界面设计.pdf

精品文档

实验三Web界面设计

一实验目的和要求

1)熟悉Web站点的信息交互模型和结构

2)熟悉Web界面设计的基本思想和原则

3)掌握Web界面设计的工具和技术

二预备知识

Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。

Web界面设计与站点外观直接相关，站点的界面外观是否友好直接关系到是否

能吸引人的关注。人性化的设计是Web界面设计的核心，如何根据人的心理、

生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。

(1)Web信息交互模型

用来解释Web的人机界面性质的一个模型，它提出网页是用户和知识之间

的界面。对于信息提供者来说包括信息的表达，对于使用者来说则是信息的获

取。信息的表达与获取分别受到两者认知结构的制约。

模型涉及到信息的三种类型

1)数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。

2)复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。

3)过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在

线练习、在线测试等。

模型涉及到信息的两种特性：1)动态性：信息在不断的变化，具有动态性；

2)一致性：信息元素的组织方式具有一致性

(2)Web信息设计模型

是解释Web人机界面性质的另一个模型，是一种研究网页的信息设计模型。

设计模型中要考虑到信息的两个方面：1)第一是应该呈现或略去什么信息。

2)第二个方面指的是信息该如何被表现。

(3)Web界面设计基本原则

•了解浏览者的心理状态

•内容与形式的统一

•减少浏览层次

1。

欢迎下载

精品文档

•特点明确

•统一整体的形象

•Web界面设计的3C原则

(4)Web界面概要设计

1)Web界面框架设计：Web网站规划、建立原型系统、详细设计、正式实

施

2)Web界面的内容与风格的设计:网站内容设计的原则、Web界面的风格

3)Web界面设计的语言与文化：网站应设置多语言选择，在网站设计和建

设中进行跨文化研究

(5)Web界面设计要素

•Web界面布局

•Web界面的色彩

•Web界面的字体

•Web界面的动画与多媒体

•Web界面的导航

(6)Web界面设计技术与工具

要设计好的Web界面，需要有良好的设计工具，随着Internet网络的发展，

国际组织和许多互联网软件开发商制订了若干标准，开发了不同的Web界面设

计工具。主要的技术包括超文本标记语言HTML、客户端脚本语言JavaScript、

JavaApplet、服务器端脚本语言。

页面编辑器主要包括：1)MicroSoft公司的Frontpage；2)Macromedia公

司的Dreamweaver，Dreamweaver对于动态网页的支持特别好，可以轻而易举

地做出很多眩目的互动页面特效，Dreamweaver与Flash、Firework并称为

Macromedia的网页制作三剑客。

辅助工具主要包括：1)AceHTMLPro6.0—全功能的HTML&JavaScript

编辑器；2)AntennaWebDesignStudio—强大的可视化网页设计软件；3)Easy

HTML—简单的所见即所得的HTML编辑器，有固定、类似浏览器的界面；

4)EasyWebEditor—是一个Web发布工具，允许不了解HTML而在所见即所得

环境中编辑Web网页。

2。

欢迎下载

精品文档

三实验内容与步骤

(一)实验内容: