人机交互课件-第8章-Web界面设计.pptVIP

人机交互技术编写组 第8章 Web界面设计 本章内容简介 互联网上Web站点和页面的设计基础 Web站点的信息交互模型和结构 Web界面设计的基本思想和原则 Web界面设计的工具和技术 Web界面设计的可用性评估 一些典型的Web站点实例 8.1 Web基础 互联网是近年来对社会影响最大的技术进步,影响到人类生活的很多方面。 互联网已经成为全面支持多媒体，能在多种平台上运行的庞大信息服务系统。 互联网的应用范围也日趋扩大，被广泛用于商业办公、业务管理、购物娱乐等人类生活的各个方面，业已成为一种全球化社会现象。 8.1.1 Web的出现与发展 90年代初，瑞士日内瓦的欧洲核能研究中心分布在世界各地的科学家需要高效率的通讯方式来进行彼此交流与分享信息。 该中心高能核理学家Tim Berners-Lee研究发展了万维网（World Wide Web，WWW）的雏形，目的是为了建立一个能够整合各种资源、文件及多媒体的系统，让使用者方便地取得不同媒体的资料。 WWW-环球信息网络空间 简单来说，WWW是建立在客户/服务器模型之上，构成的一个环球信息网络空间，主要使用： 超文本标记语言（Hypertext Markup Language，HTML） 超文本传输协议（Hypertext Transport Protocols， HTTP） 通过Internet把遍布世界各地的服务器连接起来，它能够提供各种Internet服务，具有一致用户界面的信息浏览功能。 Web页面的发展趋势 Web的一个发展趋势，是图形Web页面的爆炸性发展。网上浏览中包括了大量使用的动态图形，使图形Web遍布网络的各个角落。 新一代Web信息描述标准XML，能更详尽地描述文档的结构信息，具有比HTML有更强大的功能，为Web的发展提供了强有力的支持。 8.1.2超文本与超媒体 超文本 （Hypertext） 是一种使用于文本、图形或计算机的信息的组织形式，是一种非线性的信息组织形式。它使得单一的信息元素之间相互交叉引用，这种引用并不是通过复制来实现的，而是通过指向对方的地址字符串来指引用户获取相应的信息。 8.1.2 超文本与超媒体 超媒体 （Hypermedia） 利用超文本形式组织起来的文件不仅仅是文本，也可以是图、文、声、像以及视频等多媒体形式的文件。这些多媒体信息就构成了所谓的超媒体 。 8.1.3 Web界面设计问题的提出 Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。 Web界面设计与站点外观直接相关 站点的界面外观是否友好直接关系到是否能吸引人的关注。 人性化的设计是Web界面设计的核心 如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。 8.2 Web信息交互模型 用来解释Web的人机界面性质的一个模型，它提出网页是用户和知识之间的界面。 对于信息提供者来说包括信息的表达。 对于使用者来说则是信息的获取。 信息的表达与获取分别受到两者认知结构的制约。 Web信息交互模型 Web信息交互模型 模型涉及到信息的三种类型 数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。 复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。 过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在线练习、在线测试等。 Web信息交互模型 模型涉及到信息的两种特性 动态性：信息在不断的变化，具有动态性 比如股票价格、机票价格等是不断变化的。 一致性：信息元素的组织方式具有一致性 信息元素总是通过一定的方式结合在一起，如通过讨论、说明，或根据电话号码、名字、数字等方式组织陈列。 8.3 Web信息设计模型 Web信息设计模型 是解释Web人机界面性质的另一个模型。 是一种研究网页的信息设计模型。 设计模型中要考虑到信息的两个方面 第一是应该呈现或略去什么信息。 第二个方面指的是信息该如何被表现 。 Web信息设计模型 WEB的三种设计空间结构模式 通路结构模式 说明要展示的关键问题，使用户更容易获取有用的信息。 如出版物中的索引、标题、摘要、概述等。 Web网站地图和各栏目标题等信息都属于通路结构。 兴趣结构 兴趣结构的目的在于捕捉用户的注意力，并维持用户浏览网页的注意力。 执行结构 指学习和教育材料之间的一系列交互，尤其是基于计算机的交互。 在WEB中指描述学习和网页信息之间的交互。 8.4 Web站点的概念设计 概念设计涉及的工作： 分析、确定站点的目标和用途。 准确定义所建立Web网站及站点的规范。 事先建立好站点的架构和导航设计。 兼顾不同的浏览器。 8.4.1 站点架构和导航设计 站点结构 站点的结构可分为逻辑