人机交互第7章Web界面设计选编.ppt

第7章 Web界面设计;本章内容简介 ;7.1 Web界面及相关概念;20世纪40年代以来，人们就梦想能拥有一个世界性的信息库。在这个信息库中，信息不仅能被全球的人们存取，而且能轻松地链接到其他地方的信息，使用户可以方便快捷地获得重要的信息。 20世纪50年代末，正处于冷战时期。当时美国军方为使自己的计算机网络在受到袭击时，即使部分网络被摧毁，其余部分仍能保持通信联系，便由美国国防部的高级研究计划局（ARPA）建设了一个军用网，叫做“阿帕网”（ARPAnet）。70年代研究者提出互联网的概念。 ;万维网的诞生;7.1 Web界面及相关概念;7.1 Web界面及相关概念; Web 网页; Web 网页; Web 网页;静态网页;静态网页;动态网页;动态网页; 网站; 网站;优秀网站的特点;Web界面实例分析 ;1．商业站点 ;1．商业站点;;2．信息站点 ;;3．娱乐站点 ;;4．门户站点 ; 网站;网页设计的一般步骤;; HTML语言;; Web服务器的配置;Web服务简介;Web服务基本工作原理;Web服务工作原理 ; Web服务器配置;Web服务器配置;Web服务器配置;Web应用的成功与否，除了受其所采用的技术和所能够提供的功能的限制，还受Web网页的外观的影响。Web网页的外观经常是最先被用户注意到的。用户对网站的第一印象与界面外观是否友好、吸引人密切相关。所以对于设计人员来说，Web界面设计至关重要。Web界面设计的人性化、易用性是Web界面设计的核心。;Web的发展趋势;可扩展标记语言是一种很像超文本标记语言的标记语言。 它的标签没有被预定义。使用者需要自行定义标签。 它是对超文本标记语言的补充。 它和超文本标记语言为不同的目的而设计。 它被设计用来传输和存储数据，其焦点是数据的内容。 超文本标记语言被设计用来显示数据，其焦点是数据的外观。;网格计算 网格是利用互联网把地理上广泛分布的各种资源（包括计算资源、存储资源、带宽资源、软件资源、数据资源、信息资源、知识资源等）连成一个逻辑整体，就像一台超级计算机一样，为用户提供一体化信息和应用服务（计算、存储、访问等），彻底消除资源“孤岛”，最充分的实现信息共享。 云服务 通过使计算分布在大量的分布式计算机上，而非本地计算机或远程服务器中，好比是从古老的单台发电机模式转向了电厂集中供电的模式。它意味着计算能力也可以作为一种商品进行流通，就像煤气、水电一样，取用方便，费用低廉。最大的不同在于，它是通过互联网进行传输的。 ;超文本与超媒体 ;Web界面设计问题的提出 ;Web界面设计基本原则 ;Web界面设计基本原则;;;;;界面设计中的人因素：有限的短期记忆力（Limited short-term memory）人们在短期内可以记住7+2项信息。如果超过这个数量，人们很可能要出错。 人会犯错误（People make mistakes）当人犯错之后系统就会不正常，不适当的警声和警示会造成紧张，进而可能产生更多的错误。 人是不同的（People are different）人的物理能力悬殊很大。设计者不应该只以自身的能力为设计依据。 人们有各自的交互偏好（People have different interaction preferences）一些人喜欢图画，一些则喜欢文本。;Web界面设计基本原则;;;Web界面设计基本原则;Web界面设计基本原则;3．简洁与明确 Web界面设计是设计的一种，要求简练、明确。 应尽量把网页的层次简要化，力求以最少的点击次数链接到具体的内容。 在主页的访问率为100人次的情况下，下一页的访问率降到30到50人次。 网页的层次越复杂，实际内容的访问率也将越低，信息也就越难传达到读者的手里。;;Web界面设计基本原则;;Web界面设计基本原则;原因 站点浏览者可能使用不同类型和版本的浏览器。 以某一个浏览器的某一个版本为依据编写的网页程序，可能在其它的浏览器或其它版本上不能正常显示或运行。 方法 通过使用JavaScript等编程工具或功能，探测用户浏览器的类型和版本等参数及对于某特定功能的支持情况，然后根据探测结果显示适用于特定浏览器的网页内容。 根据用户浏览器分布情况决定设计所面向的浏览器类别和版本。;;Web界面设计基本原则;站点结构 站点的结构可分为逻辑结构和物理结构: 逻辑结构描述文档间的关系，定义文档间的链接。 物理结构描述文档的实际位置及显示方式 。 超文本结构中最常用层次结构 层次型结构按信息的必要性来改变信息的显示方式。 根网页是站点的主页，层次以根网页开始。 用户深入站点时，选择趋向于越来越具体，直到找到目标或叶子网页。 层次结构通过深度和广度来描述。 ;实例;;Web界面要素设计;1.