Web界面设计课件

1、人机交互基础教程,第7章 Web界面设计,重点大学计算机专业系列教材,Web界面及相关概念 Web界面设计原则 Web界面要素的设计 Web界面基本设计技术 Web3D界面设计技术,内容摘要,Web是一个由许多互相链接的超文本（HyperText）文档组成的系统。分布在世界各地的用户能够通过Internet对其访问，进行彼此交流与共享信息。在这个系统中，每个有用的事物，被称为一种“资源”，其由一个全局“统一资源标识符”（URI）标识；这些资源通过超文本传输协议（HyperText Transfer Protocol）传送给用户；而用户通过点击链接来获得这些资源。,7.1 Web界面及相关概念,

2、Web应用的成功与否，除了受其所采用的技术和所能够提供的功能的限制，还受Web网页的外观的影响。Web网页的外观经常是最先被用户注意到的。用户对网站的第一印象与界面外观是否友好、吸引人密切相关。所以对于设计人员来说，Web界面设计至关重要。Web界面设计的人性化、易用性是Web界面设计的核心。,7.1 Web界面及相关概念,7.1 Web界面及相关概念,山东大学考古数字博物馆视听博览界面,一般的Web界面设计应该遵循如下基本原则： 以用户为中心 要求把用户放在第一位。设计时既要考虑用户的共性，同时也要考虑他们之间的差异性。 一致性 Web界面设计还必须考虑内容和形式的一致性。其次，Web界面自

3、身的风格也要一致性，保持统一的整体形象。 简洁与明确 Web界面设计是设计的一种，要求简练、明确。,7.2 Web界面设计原则,迪斯尼网站（，2008年7月）,Google首页 （，2009年9月）,7.2 Web界面设计原则,体现特色 只有丰富特色、内容翔实的网页才能使浏览者驻足阅读。特色鲜明的Web网站是精心策划的结果，只有独特的创意和赏心悦目的网页设计才能在一瞬间打动浏览者。 兼顾不同的浏览器 明确的导航设计 网站首页导航应尽量展现整个网站的架构和内容，要能让浏览者确切地知道自己在整个网站中的位置，可以确定下一步的浏览去向。,7.2 Web界面设计原则,7.2 Web界面设计原则,清华大

4、学首页（，2009年9月）,Web界面规划 无论那种类型的Web网站，想要把界面设计得丰富多彩，吸引更多的用户前来访问，Web界面规划至关重要。,7.3 Web界面要素设计,个人网页示例,文化与语言 网站一经发布，意味着全世界都可以看到其中的信息。所以，全球服务型的网站还要考虑如何适应不同国家的不同类型的文化与语言环境。,7.3 Web界面要素设计,Google首页图标（中国七夕）,内容、风格与布局、色彩设计 内容：Web界面的内容不仅要遵循简洁明确的原则，也要符合确定的设计目标，面向不同的对象要使用不同的口吻和用词。 风格：Web界面的风格是指网站的整体形象给浏览者的综合感受。这个整体形象包

5、括网站的标志、色彩、字体、布局、交互方式、内容价值、存在意义等。一个优秀的网站与实体公司一样，也需要整体的形象包装和设计。,7.3 Web界面要素设计,布局：Web界面布局就是指如何合理地在界面上分布内容。常用的Web界面布局形式有：“同”字形结构、“国”字形结构、左右对称、自由式。 色彩：Web网站给人的第一印象来自视觉冲击。颜色元素在网站的感知和展示上扮演重要的角色。某个企业或个人的风格、文化和态度可以通过Web界面中的色彩混合、调整或者对照的方式体现出来。一般地，Web界面中色彩选择可考虑：鲜明性、独特性、合适性、联想性、和谐性。,7.3 Web界面要素设计,文本设计 文本不要太多，以免

6、转移浏览者注意力。 要选择合适的颜色，以便使文本和其它界面元素一起产生一个和谐的视觉效果；文本的颜色应该一致，让用户可以容易地确定不同文本和颜色所代表的内容。 选择的字体应和整个界面应融为一体；一旦已经为某些元素选择了字体，应该保证其在整个网站中应用的一致性。 网站中可能会使用多种字体，但是同一种字体应该表示相同类型的数据或者信息。 通过合理设置页边框、行间距等，使Web界面产生丰富变化的外观和感觉。 应该重视标题的处理。标题一般无分级要求，其字形一般较大，字体的选择一般具有多样性，字形的变化修饰则更为丰富。,7.3 Web界面要素设计,多媒体元素设计 图形、图像、动画、音频和视频等多媒体元素

7、可以弥补平淡文本的不足，增强Web界面的艺术表现力。因此，在设计Web网页时有必要考虑使用不同类型的多媒体元素，使得网站更生动，而且有吸引力。,7.3 Web界面要素设计,Rollover按钮,HTML HTML是用来表示网上信息的符号标记语言，是一个跨平台语言，能在Windows、Macintosh和Unix平台上工作。HTML已经成为了Web文档信息的标准方法，是构成Web界面的主要工具。 HTML语言的标记元素通常分为如下几类：基本标记元素、图形标记元素、表格标记元素、表单标记元素。,7.4 Web界面基本设计技术,表单实例： HTML表单实例 用户名： 口令： 选学内容： Word E

8、xcel Internet 课程类别： 必修 选修 你的计算机是哪一种类型： PC UNIX MAC OTHER 备注： 请在此填写补充内容 ,7.4 Web界面基本设计技术,7.4 Web界面基本设计技术,HTML建立表单的运行实例,JavaScript JavaScript是一种内嵌于HTML中的脚本语言，它是一种基于对象和事件驱动并具有安全性能的脚本语言。 基本特点： JavaScript是一种脚本编写语言；是基于对象的语言；简单性；安全性；动态性；跨平台性。,7.4 Web界面基本设计技术,脚本： alert（这是第一个JavaScript例子!）; alert（欢迎你进入JavaSc

9、ript世界!）; alert（今后我们将共同学习JavaScript知识！）; ,7.4 Web界面基本设计技术,JavaScript例子,JavaApplet JavaAapplet是访问Internet服务器、在Internet上传播的、自动安装的、可作为部分Web文档运行的小应用程序。 放大镜例子： ,7.4 Web界面基本设计技术,JavaApplet实现放大镜效果,服务器端脚本语言 目前流行的三大服务器端脚本语言是ASP、PHP、JSP。对于Web服务器来说，提供一个接口使其它应用程序能够与之相连成为一种常用的方法。通过这个接口，定制的可执行程序能够接收来自客户端的信息，包括通过点

10、击超链接或在浏览器中键入统一资源定位符（URL）所提出的界面请求的细节。应用程序对客户端的请求能够生成相应的响应，而不是从服务器磁盘上读取文本或标记文件。,7.4 Web界面基本设计技术,AJAX技术 AJAX（Asynchronous JavaScript and XML）全称为“异步JavaScript和XML”，是一种创建交互式Web界面应用的开发技术，是一种新的架构模式。AJAX尝试建立桌面应用程序的功能和交互性与不断更新的 Web 应用程序之间的桥梁。在 Web 应用程序中可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件。 基本流程：创建XMLHttpRequest类，发送请求

11、，响应处理，用文本字符串的方式返回服务器的响应，以XMLDocument对象方式返回服务器的响应。,7.4 Web界面基本设计技术,Web3D可以简单的看成是Web技术和3D技术相结合的产物，是互联网上实现3D图形技术的总称。 2004年被ISO审批通过的由Web3D协会发布的新一代国际标准X3D，标志着Web3D进入了一个新的发展阶段。 目前，Web3D技术已经发展成为一个技术群，成为网络3D应用的独立研究领域。,7.5 Web3D界面设计技术,7.5 Web3D界面设计技术,Web3D的核心技术及特征对比,7.5 Web3D界面设计技术,Web3D的浏览例子之一,Web3D的浏览例子之二,

12、VRML VRML是一种建模语言，可用来描述三维物体及其行为，构建虚拟场景。VRML的基本目标是建立Internet上的交互式三维多媒体，其基本特征包括分布式、三维、交互性、多媒体集成、高度真实感等。,7.5 Web3D界面设计技术,7.5 Web3D界面设计技术,VRML执行模式,Java3D Java3D是Java语言在三维图形领域的扩展，是一组应用编程接口（API）。利用Java3D提供的API，可以编写出基于Web界面的三维动画、三维游戏等等。 Java3D提出了一种基于视平台的视模型和输入设备模型的技术实现方案，即通过改变视平台的位置、方向来浏览整个虚拟场景。,7.5 Web3D界面设计技术,视模型 由虚拟环境和物理环境两部分组成。 视平台 代表与视对象相关的一个点，并充当确定绘制图象的基础。 输入设备模型 除了支持通用的键盘、鼠标输入外，还能给各种不间断的输入设备。 应用开发 利用Java3D开发的虚拟现实应用程序或者applets程序，可建造一个虚拟场景，并能将一个或多个场景图插入到虚拟场景中。,