《一学就会的教你如何设计界面哦---Web界面设计.ppt

第七章 Web 界面设计 内容摘要 Web界面及相关概念 Web界面设计原则 Web界面要素的设计 Web界面基本设计技术 Web3D界面设计技术 7.1 Web界面及相关概念 Web基础 互联网是近年来对社会影响最大的技术进步,影响到人类生活的很多方面。 互联网已经成为全面支持多媒体，能在多种平台上运行的庞大信息服务系统。 互联网的应用范围也日趋扩大，被广泛用于商业办公、业务管理、购物娱乐等人类生活的各个方面，业已成为一种全球化社会现象。 7.1 Web界面及相关概念 90年代初，瑞士日内瓦的欧洲核能研究中心分布在世界各地的科学家需要高效率的通讯方式来进行彼此交流与分享信息。 该中心高能核理学家Tim Berners-Lee研究发展了万维网（World Wide Web，WWW）的雏形，目的是为了建立一个能够整合各种资源、文件及多媒体的系统，让使用者方便地取得不同媒体的资料。 7.1 Web界面及相关概念 Web是一个由许多互相链接的超文本（HyperText）文档组成的系统。分布在世界各地的用户能够通过Internet对其访问，进行彼此交流与共享信息。 在这个系统中，每个有用的事物，被称为一种“资源”，其由一个全局“统一资源标识符”（URI）标识；这些资源通过超文本传输协议（HyperText Transfer Protocol）传送给用户；而用户通过点击链接来获得这些资源。 7.1 Web界面及相关概念 简单来说，WWW是建立在客户/服务器模型之上，构成的一个环球信息网络空间，主要使用： 超文本标记语言（Hypertext Markup Language，HTML） 超文本传输协议（Hypertext Transport Protocols， HTTP） 通过Internet把遍布世界各地的服务器连接起来，它能够提供各种Internet服务，具有一致用户界面的信息浏览功能。 7.1 Web界面及相关概念 Web应用的成功与否，除了受其所采用的技术和所能够提供的功能的限制，还受Web网页的外观的影响。 Web网页的外观经常是最先被用户注意到的。用户对网站的第一印象与界面外观是否友好、吸引人密切相关。所以对于设计人员来说，Web界面设计至关重要。Web界面设计的人性化、易用性是Web界面设计的核心。 如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。 超文本与超媒体 超文本 （Hypertext） 是一种使用于文本、图形或计算机的信息的组织形式，是一种非线性的信息组织形式。它使得单一的信息元素之间相互交叉引用，这种引用并不是通过复制来实现的，而是通过指向对方的地址字符串来指引用户获取相应的信息。 超媒体 （Hypermedia） 利用超文本形式组织起来的文件不仅仅是文本，也可以是图、文、声、像以及视频等多媒体形式的文件。这些多媒体信息就构成了所谓的超媒体 。 7.2 Web 界面设计原则 一般的Web界面设计应该遵循如下基本原则： 以用户为中心 要求把用户放在第一位。设计时既要考虑用户的共性，同时也要考虑他们之间的差异性。 一致性 Web界面设计还必须考虑内容和形式的一致性。其次，Web界面自身的风格也要一致性，保持统一的整体形象。 简洁与明确 Web界面设计是设计的一种，要求简练、明确。 7.2 Web 界面设计原则 体现特色 只有丰富特色、内容翔实的网页才能使浏览者驻足阅读。特色鲜明的Web网站是精心策划的结果，只有独特的创意和赏心悦目的网页设计才能在一瞬间打动浏览者。 7.2 Web 界面设计原则 兼顾不同的浏览器 明确的导航设计 网站首页导航应尽量展现整个网站的架构和内容，要能让浏览者确切地知道自己在整个网站中的位置，可以确定下一步的浏览去向。 7.3.2 文化与语言 网站一经发布，意味着全世界都可以看到其中的信息。所以，全球服务型的网站还要考虑如何适应不同国家的不同类型的文化与语言环境。 7.4 Web界面基本设计技术 7.4.1 HTML HTML是用来表示网上信息的符号标记语言，是一个跨平台语言，能在Windows、Macintosh和Unix平台上工作。HTML已经成为了Web文档信息的标准方法，是构成Web界面的主要工具。 HTML语言的标记元素通常分为如下几类：基本标记元素、图形标记元素、表格标记元素、表单标记元素。 7.5 Web 3D界面设计技术 Web3D可以简单的看成是Web技术和3D技术相结合的产物，是互联网上实现3D图形技术的总称。 Web3D技术源于虚拟现实技术中的VRML分支。VRML协会正式更名为Web3D协会，并制定了VRML97这一新的国际标准。 7.5 Web 3D界面