1、实验三 Web 界面设计一 实验目的和要求1) 熟悉 Web 站点的信息交互模型和结构 2) 熟悉 Web 界面设计的基本思想和原则 3) 掌握 Web 界面设计的工具和技术 二 预备知识Web 界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。Web 界面设计与站点外观直接相关，站点的界面外观是否友好直接关系到是否能吸引人的关注。人性化的设计是 Web 界面设计的核心，如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是 Web 界面设计的重点。 (1) Web 信息交互模型 用来解释 Web 的人机界面性质的一个模型，它提出网页是用户和知识之间的界面。对于信息提供
2、者来说包括信息的表达，对于使用者来说则是信息的获取。信息的表达与获取分别受到两者认知结构的制约。模型涉及到信息的三种类型1)数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。2)复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。3)过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在线练习、在线测试等。 模型涉及到信息的两种特性：1)动态性：信息在不断的变化，具有动态性；2)一致性：信息元素的组织方式具有一致性 (2)Web 信息设计模型 是解释 Web 人机界面性质的另一个模型，是一种研究网页的信息设计模型。设计模型中要考虑到信息的两个方面：1)第一是应该呈现或略去什
3、么信息。2)第二个方面指的是信息该如何被表现。(3)Web 界面设计基本原则 1) 了解浏览者的心理状态 2) 内容与形式的统一 3) 减少浏览层次 4) 特点明确 5) 统一整体的形象 6) Web 界面设计的 3C 原则 (4)Web 界面概要设计 1)Web 界面框架设计： Web 网站规划 、建立原型系统、详细设计、正式实施2)Web 界面的内容与风格的设计:网站内容设计的原则、Web 界面的风格3)Web 界面设计的语言与文化：网站应设置多语言选择，在网站设计和建设中进行跨文化研究(5)Web 界面设计要素 Web 界面布局 Web 界面的色彩 Web 界面的字体 Web 界面的动画
4、与多媒体 Web 界面的导航 (6)Web 界面设计技术与工具 要设计好的 Web 界面，需要有良好的设计工具，随着 Internet 网络的发展，国际组织和许多互联网软件开发商制订了若干标准，开发了不同的 Web 界面设计工具。主要的技术包括超文本标记语言 HTML、客户端脚本语言JavaScript、JavaApplet、服务器端脚本语言。 页面编辑器主要包括：1)MicroSoft 公司 的 Frontpage；2)Macromedia 公司 的 Dreamweaver，Dreamweaver 对于动态网页的支持特别好，可以轻而易举地做出很多眩目的互动页面特效，Dreamweaver 与
5、 Flash、Firework 并称为Macromedia 的网页制作三剑客。辅助工具主要包括：1)AceHTML Pro 6.0全功能的 HTML & JavaScript 编辑器；2)Antenna Web Design Studio强大的可视化网页设计软件；3)Easy HTML简单的所见即所得的 HTML 编辑器，有固定、类似浏览器的界面；4)Easy Web Editor是一个 Web 发布工具，允许不了解 HTML 而在所见即所得环境中编辑 Web 网页。 三 实验内容与步骤(一) 实验内容 :1） 企业在建设网站时要完成的任务分析；2） 比较网页设计；3） 比较搜索引擎；4） 比
6、较网站运行质量；专业网比较。(二)实验步骤：步骤 1：任务分析。为了成功地提供企业整体形象，为访问者和潜在的消费者提供所需的信息，企业在建设网站时要完成的 6 个任务如下：1） 表达企业的整体形象。2） 提供对企业信息的方便访问。3） 允许访问者以不同方式和不同层次访问网站。4） 为消费者提供有意义的双向沟通方式。5） 维系消费者的注意力并鼓励重复访问。6） 提供对产品和服务技使用方式的方便访问。请在网上找到你认为能满足其中 3 个以上任务的网站，并解释这个网站是如何实现这些目标的。步骤 2：比较网页设计。网页设计作为一种视觉语言，要讲究色彩、编排和布局。版式设计通过文字图形的空间组合，表达出
7、和谐与美。请在网上找到 3 个你认为网页设计较好的网站，并以 10 分为满分，给这些网站的网页设计打个印象分。步骤 3：比较搜索引擎。搜索产品及比较价格可利用多种搜索引擎，请尝试利用不同搜索引擎来搜索同一商品信息，比较这几种搜索引擎（建议选择 3 种）哪个对你而言更有效。步骤 4：比较网站运行质量。进入网上书城（如当当、网易、新浪和互动出版网等） ，订购一本网络运销学 ，比较其商品数量、价格（折扣） 、配送和支付手段等环节的优劣。步骤 5：专业网比较。请对中国钢铁联合网（www.c ）和上海宝山钢材交易市场（www.sino ）进行比较，试分析两者服务的共同点和不同点以及成功之处，如投资者必须
8、在两者之间选择一个，请问，你将推荐选择哪一个？请说明理由。四 实验结果1任务分析。请记录：你找到的这 3 个网站。1） 网站名称：中公教育培训网网址：http:/ | 开班信息 | 学校介绍 | 师资介绍 | 教学环境 | 服务承诺 | 预约报名。2） 网站名称：北京领航考研网网址：http:/ 网站名称：中国移动通信集团公司网址：http:/ 3 个网站。1） 网站名称：中公教育培训网网址：http:/ 网站名称：北京领航考研网网址：http:/ 网站名称：中国移动通信集团公司网址：http:/ 百度 谷歌 搜搜你搜索比较的商品（关键字）是：1）硬盘3 个搜索引擎的比较分析：百度搜索到相关网
9、页约 100,000,000 篇，用时 0.266 秒；谷歌获得约 58,600,000 条结果，用时 0.19 秒；搜搜搜索到约 22,800,000 项结果，用时 0.098秒。2）电脑3 个搜索引擎的比较分析：百度一下，找到相关网页约 100,000,000 篇，用时 0.206 秒；谷歌获得约 235,000,000 条结果，用时 0.09 秒；搜搜搜索到约 823,300,000 项结果，用时0.01 秒3）鼠标3 个搜索引擎的比较分析：百度一下，找到相关网页约 100,000,000 篇，用时 0.187 秒；谷歌获得约 57,600,000 条结果，用时 0.08 秒；搜搜搜索到
10、约 14,500,000 项结果，用时0.099 秒4五 总结优劣分析：当当网（http:/）目前是全球最大的中文网上图书音像商城，面向全世界中文读者提供近 30 多万种中文图书和音像商品，每天为成千上万的消费者提供方便、快捷的服务，给网上购物者带来极大的方便和实惠。卓越网(http:/ )发布于 2000 年 5 月，主营音像、图书、软件、游戏、礼品等流行时尚文化产品。迅速成长为国内最有影响力和辐射力的电子商务网站，赢得了超过 520 万注册用户的衷心支持，发展成为中国访问量最大、营业额最高的零售网站。当当网与卓越网都是国内 B2C 模式电子商务网站排名比较靠前的经营网站，两者的业务模式、所卖商品都极其类似,他们也取得不同程度上的成功。5专业网比较。我推荐中国钢铁联合网，因为其界面更简明，生动，方便用户使用，给浏览用户营造舒适的视觉环境。
