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

精品文档 精品文档 PAGE PAGE # 欢迎。下载 实验三 Web 界面设计 一 实验目的和要求 熟悉Web站点的信息交互模型和结构 熟悉Web界面设计的基本思想和原则 掌握Web界面设计的工具和技术 二 预备知识 Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。 Web界面设计与站点外观直接相关，站点的界面外观是否友好直接关系到是否 能吸引人的关注。人性化的设计是 Web界面设计的核心，如何根据人的心理、 生理特征，运用技术手段，创造简单、友好的界面，是 Web界面设计的重点。 Web 信息交互模型 用来解释Web的人机界面性质的一个模型，它提出网页是用户和知识之间 的界面。对于信息提供者来说包括信息的表达，对于使用者来说则是信息的获 取。信息的表达与获取分别受到两者认知结构的制约。 模型涉及到信息的三种类型 数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。 复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。 过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在 线练习、在线测试等。 模型涉及到信息的两种特性： 1)动态性：信息在不断的变化，具有动态性； 2) 一致性：信息元素的组织方式具有一致性 Web 信息设计模型 是解释 Web人机界面性质的另一个模型，是一种研究网页的信息设计模型。 设计模型中要考虑到信息的两个方面： 1)第一是应该呈现或略去什么信息。 2) 第二个方面指的是信息该如何被表现。 Web 界面设计基本原则 ? 了解浏览者的心理状态 ? 内容与形式的统一 ? 减少浏览层次 ? 特点明确 ? 统一整体的形象 ? Web界面设计的3C原则 Web 界面概要设计 Web界面框架设计：Web网站规划、建立原型系统、详细设计、正式实 施 Web界面的内容与风格的设计：网站内容设计的原则、 Web界面的风格 Web界面设计的语言与文化：网站应设置多语言选择，在网站设计和建 设中进行跨文化研究 Web 界面设计要素 ? Web界面布局 ? Web界面的色彩 ? Web界面的字体 ? Web界面的动画与多媒体 ? Web界面的导航 Web 界面设计技术与工具 要设计好的Web界面，需要有良好的设计工具，随着In ternet网络的发展, 国际组织和许多互联网软件开发商制订了若干标准，开发了不同的 Web界面设 计工具。主要的技术包括超文本标记语言 HTML客户端脚本语言JavaScript、 JavaApplet 、服务器端脚本语言。 页面编辑器主要包括： 1)MicroSoft 公司 的 Frontpage ；2)Macromedia 公 司的Dreamweave，Dreamweaver对于动态网页的支持特别好，可以轻而易举 地做出很多眩目的互动页面特效， Dreamweaver与 Flash、Firework并称为 Macromedia 的网页制作三剑客。 辅助工具主要包括：1)AceHTML Pro 6.0 —全功能的HTML & JavaScript 编辑器； 2)Antenna Web Design Studio —强大的可视化网页设计软件； 3)Easy HTM—简单的所见即所得的HTML编辑器，有固定、类似浏览器的界面； Easy Web Editor —是一个 Web发布工具，允许不了解 HTML而在所见即所得 环境中编辑Web网页。 精品文档 精品文档 PAGE PAGE #欢迎下载 三实验内容与步骤 （一） 实验内容： 要求根据 Web界面设计的原则（简洁、一致性、对比度），进行Web界面规 划、概要设计和设计要素的选择，利用一种界面设计工具 （Dreamweaver / Frontpage）完成网页设计。 （二） 实验步骤： 1） 选择一种界面设计工具，并熟悉它； 2） 针对一个具体的网站（学校、个人、公司）设计应用，进行 Web界面规 划和概要设计； 3） 选择WEB界面设计要素，设计出网页 实验结果： 下面是我使用Axure制作的一个购物网站的web界面 1.主界面 界面包含顶部菜单栏、网站logo、左侧商品导航栏、快捷搜索框、商品图 片展示区、下部商品广告轮播区 我的慎电 启自车 商禺分尖 收雅灭 联斥忘阳 直血［IU0M m关时 ST 1.购物车 界面包含顶部菜单栏、搜索框、购物车详情页、结算按钮等 1-^- "■ ■ **w :掘 400 ■ 1 *■ r^-oo X Si4|T* 运醉?： = ￥157.00 4 SB 鬣的值息识 MJLLMOM1.商品购买页面 鬣的值息 识 MJLLMOM 界面包含顶部导航栏、商品图片展示、商品简介、价格、商品参数、购买 数量等 西页％ 冏装 > T'tt > Atari Walk