《人机交互技术》实验三.doc

人机交互技术 实验报告 软件091班 092543 王晶 实验实验目的和要求Web站点的信息交互模型和结构 2)熟悉Web界面设计的基本思想和原则 3)掌握Web界面设计的工具和技术 二 预备知识Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。Web界面设计与站点外观直接相关，站点的界面外观是否友好直接关系到是否能吸引人的关注。人性化的设计是Web界面设计的核心，如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。 (1) Web信息交互模型 用来解释Web的人机界面性质的一个模型，它提出网页是用户和知识之间的界面。对于信息提供者来说包括信息的表达，对于使用者来说则是信息的获取。信息的表达与获取分别受到两者认知结构的制约。 模型涉及到信息的三种类型 1)数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。 2)复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。 3)过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在线练习、在线测试等。 模型涉及到信息的两种特性：1)动态性：信息在不断的变化，具有动态性；2)一致性：信息元素的组织方式具有一致性 (2)Web信息设计模型 是解释Web人机界面性质的另一个模型，是一种研究网页的信息设计模型。设计模型中要考虑到信息的两个方面：1)第一是应该呈现或略去什么信息。 2)第二个方面指的是信息该如何被表现。 (3)Web界面设计基本原则 了解浏览者的心理状态 内容与形式的统一 减少浏览层次 特点明确 统一整体的形象 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网页。 三 实验内容与步骤 一 实验内容:实验JavaScript等编程工具或功能，探测用户浏览器的类型和版本等参数及对于特定功能的支持情况，根据探测结果显示适用于特定浏览器的网页的内容。 4、界面设计的基本原则： （1）了解浏览者的心理状态 （2）内容与形式的统一 （3）减少浏览层次 （4）特点明确 （5）统一整体的形象 Web网站设计的3C原则： （1）简洁 因为做的是个人网站，所以特点鲜明，导航放在网页的最上方，版本及设计者信息放在网站最下方，，所用的字体为微软雅黑，整体的颜色为绿色，页面上所有的元素都有明确的含义和用途。 （2）一致性 各个页面都使用相同的页边距、文本，图形之间使用相同的间距；主要图形、标题和符号旁边留下相同的空白，在每页都放有导航图标。页面中的每个元素与整个页面以及网站的色彩和风格上保持了一致，图标都采用了相同的设计风格。文字的颜色同图像保持了一致。 5、Web界面规划 此网站的目的是建立一个个人主页，主要目的是展示自我，让读者浏览信息，所以网站的功能都放在导航页上。 本网站的面向客户群是二十岁左右的青年，所以会加一下特效，而本网站的风格和现在个人网站的主流风格类似，所以客户用起来比较上手。 6、Web界面设计概要设计 先建立网站的原型系统。首先，打开Dreamweaver CS6软件的界面，在“站点