实验三 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) 了解浏览者的心理状态 2) 内容与形式的统一 3) 减少浏览层次
4) 特点明确 5) 统一整体的形象 6) 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)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） 比较网站运行质量； 专业网比较。
(二)实验步骤：
步骤1：任务分析。为了成功地提供企业整体形象，为访问者和潜在的消费者提供所需的信息，企业在建设网站时要完成的6个任务如下： 1） 表达企业的整体形象。 2） 提供对企业信息的方便访问。 3） 允许访问者以不同方式和不同层次访问网站。 4） 为消费者提供有意义的双向沟通方式。 5） 维系消费者的注意力并鼓励重复访问。 6） 提供对产品和服务技使用方式的方便访问。 请在网上找到你认为能满足其中3个以上任务的网站，并解释这个网站是如何实现这些目标的。 步骤2：比较网页设计。网页设计作为一种视觉语言，要讲究色彩、编排和布局。版式设计通过文字图形的空间组合，表达出和谐与美。 请在网上找到3个你认为网页设计较好的网站，并以10分为满分，给这些网站的网页设计打个印象分。 步骤3：比较搜索引擎。搜索产品及比较价格可利用多种搜索引擎，请尝试利用不同搜索引擎来搜索同一商品信息，比较这几种搜索引擎（建议选择3种）哪个对你而言更有效。 步骤4：比较网站运行质量。进入网上书城（如当当、网易、新浪和互动出版网等），订购一本《网络运销学》，比较其商品数量、价格（折扣）、配送和支付手段等环节的优劣。 步骤5：专业网比较。请对中国钢铁联合网（www.custeel.com）和上海宝山钢材交易市场（www.sinometal.com）进行比较，试分析两者服务的共同点和不同点以及成功之处，如投资者必须在两者之间选择一个，请问，你将推荐选择哪一个？请说明理由。 四 实验结果
1．任务分析。请记录：你找到的这3个网站。
1） 网站名称：中公教育培训网
网址：http://bj.yuloo.com/school/639.html 入选理由：给学员提供较好的消费导航。
网站信息包括：学校首页 | 开班信息 | 学校介绍 | 师资介绍 | 教学环境 | 服务承诺 | 预约报名。
2） 网站名称：北京领航考研网
网址：http://www.linghang.com/
入选理由：比较全面的介绍企业工作流程
介绍了培训学校的一些具体情况：包括师资力量、教学设备、往年的通过率等 还有一些优惠活动。
3） 网站名称：中国移动通信集团公司
网址：http://10086.cn/
入选理由：介绍自己企业文化的同时，访问者可以办理业务
请简述该网站是如何实现这些目标的：开展网上营业厅，访问者可以登录，开展网
上业务，方便用户办理业务。
2．比较页面设计。请记录：你找到的这3个网站。 1） 网站名称：中公教育培训网
网址：http://bj.yuloo.com/school/639.html 印象分：6
2） 网站名称：北京领航考研网
网址：：http://www.linghang.com/ 印象分：7
3） 网站名称：中国移动通信集团公司
网址：http://10086.cn/ 印象分：8
3．比较搜索引擎。你选用的搜索引擎是：
百度 谷歌 搜搜
你搜索比较的商品（关键字）是： 1）硬盘
3个搜索引擎的比较分析：百度搜索到相关网页约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秒；搜搜搜索到约14,500,000项结果，用时0.099秒
4
五 总结
．优劣分析：当当网（http://dangdang.com）目前是全球最大的中文网上图书音像商城，面向全世界中文读者提供近30多万种中文图书和音像商品，每天为成千上万的消费者提供方便、快捷的服务，给网上购物者带来极大的方便和实惠。
卓越网(http://www.joyo.com )发布于2000年5月，主营音像、图书、软件、游戏、礼品等流行时尚文化产品。迅速成长为国内最有影响力和辐射力的电子商务网站，赢得了超过520万注册用户的衷心支持，发展成为中国访问量最大、营业额最高的零售网站。
当当网与卓越网都是国内B2C模式电子商务网站排名比较靠前的经营网站，两者的业务模式、所卖商品都极其类似,他们也取得不同程度上的成功。
5．专业网比较。我推荐中国钢铁联合网，因为其界面更简明，生动，方便用户使用，给浏
览用户营造舒适的视觉环境。
