《人机交互实验报告Web界面设计.docx》由会员分享，可在线阅读，更多相关《人机交互实验报告Web界面设计.docx（5页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
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）第一是应该呈现或略去什么信息。2）第二个方面指的是信息该如何被表现。Web界
3、面设计基本原则 了解浏览者的心理状态 内容与形式的统一 减少浏览层次 特点明确 统一整体的形象 Web界面设计的3C原则Web界面概要设计l)Web界面框架设计：Web网站规划、建立原型系统、详细设计、正式实 施2)Web界面的内容与风格的设计:网站内容设计的原则、Web界面的风格3)Web界面设计的语言与文化：网站应设置多语言选择，在网站设计和建 设中进行跨文化研究(5)Web界面设计要素 Web界面布局 Web界面的色彩 Web界面的字体 Web界面的动画与多媒体 Web界面的导航(6)Web界面设计技术与工具要设计好的Web界面，需要有良好的设计工具，随着Internet网络的发展， 国
4、际组织和许多互联网软件开发商制订了若干标准，开发了不同的Web界面设计 工具。主要的技术包括超文本标记语言HTML、客户端脚本语言JavaScript JavaApplets服务器端脚本语言。页面编辑器主要包括：l)MicroSoft公司的Frontpage； 2)Macromedia公司 的Dreamweaver, Dreamweaver对于动态网页的支持特别好，可以轻而易举地 做出很多眩目的互动页面特效，Dreamweaver与Flash、Firework并称为 Macromedia的网页制作三剑客。辅助工具主要包括：l)AceHTMLPro6.0-全功能的HTML & JavaScrip
5、t编辑 器；2)Antenna Web Design Studio强大的可视化网页设计软件；3)Easy HTML 简单的所见即所得的HTML编辑器，有固定、类似浏览器的界面；4)EasyWeb Editor是一个Web发布工具，允许不了解HTML而在所见即所得环境中编辑 Web网页。三实验内容与步骤（一）实验内容：要求根据Web界面设计的原则（简洁、一致性、对比度），进行Web界面规 划、概要设计和设计要素的选择，利用一种界面设计工具（Dreamweaver / Frontpage）完成网页设计。（二）实验步骤：1）选择一种界面设计工具，并熟悉它；2）针对一个具体的网站（学校、个人、公司）设
6、计应用，进行Web界面规 划和概要设计；3）选择WEB界面设计要素，设计出网页实验结果：下面是我使用Axure制作的一个购物网站的web界面1.主界面界面包含顶部菜单栏、网站log。、左侧商品导航栏、快捷搜索框、商品图片 展示区、下部商品广告轮播区KRt：PW商品分食期/夷3系皆法叵wromi均人共二宗*文X，隽*内衣 屯洪社丁机 美份灰炉燃 远必沪外乐钟1.购物车界面包含顶部菜单栏、搜索框、购物车详情页、结算按钮等北眦旦的彻主收诺实行 QIDWJM1.商品购买页面界面包含顶部导航栏、商品图片展示、商品简介、价格、商品参数、购买数 量等一页了二Ttt AJ.ill WilkuAlan Walk
7、窃同款 Fa)：j (IT恤短袖电台Ali.lp W& er T-Shirt讲妇时佟若必总拦尺寸长或咨斫硼势必对竺 述中的身.点佑兰和衣K# .乜仔，汪均为先他隼臣 .卬好.Xiii 7无网白火陵比 非麻氏rWfflUSH H能不完寺.真社启再下单以免也切电街何明发生。佃 V128.DOR袒XSII5O-I55 S165- 170 HIL70-ii 3 L175 -183 n I Hl -In军身忘称五含含霄冶可霄霄言付了霄可官了+件怜73OIH件）网友投兰凸的书.W1.支付页面界面包含顶部导航栏,待支付商品详情、支付步骤提示等花五 正扛支付RI； 3彩卫衣填粒易读出:灼切0-勺开迳快最付限银行卡28.001 ,11 28.00 X汾00 .可 为00 X总计不含垓一157.00勺 （勺设定麻楙支支付完成