Web界面设计课件.ppt

1、本章内容简介 Web界面及相关概念 Web界面设计原则 Web界面要素设计 Web界面基本设计技术 Web3D界面设计技术山东大学计算机学院2课程目标 熟悉Web设计的原则及Web界面设计包含的元素。 掌握Web界面设计语言和技术，并灵活应用。Web界面及相关概念 万维网（World Wide Web，WWW） 高能核理学家Tim Berners-Lee雏形，建立一个能够整合各种资源、文件及多媒体的系统，让使用者方便地取得不同媒体的资料。 建立在客户/服务器模型之上 超文本标记语言（Hypertext Markup Language，HTML） 超文本传输协议（Hypertext Transp

2、ort Protocols， HTTP） 通过Internet把遍布世界各地的服务器连接起来，它能够提供各种Internet服务，具有一致用户界面的信息浏览功能。山东大学计算机学院4Web的发展趋势 图形Web页面的爆炸性发展。 网上浏览中包括了大量使用的动态图形，使图形Web遍布网络的各个角落。 新一代Web信息描述标准XML 能更详尽地描述文档的结构信息，具有比HTML有更强大的功能，为Web的发展提供了强有力的支持。 网格的概念 云的概念山东大学计算机学院5超文本与超媒体 超文本 （Hypertext） 是一种使用于文本、图形或其他信息的组织形式，是一种非线性的信息组织形式。它使得单一的

3、信息元素之间可以相互交叉引用，这种引用并不是通过复制来实现的，而是通过指向对方的地址字符串来指引用户获取相应的信息。 超媒体 （Hypermedia） 利用超文本形式组织起来的文件不仅仅是文本，也可以是图、文、声、像以及视频等多媒体形式的文件。这些多媒体信息就构成了所谓的超媒体 。山东大学计算机学院6Web界面设计问题的提出 Web界面设计与站点外观直接相关 站点的界面外观是否友好直接关系到是否能吸引人的关注。 人性化的设计是Web界面设计的核心 如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。山东大学计算机学院7Web界面设计基本原则 1以用户为中心

4、2一致性 3简洁与明确 4体现特色 5兼顾不同的浏览器 6明确的导航设计山东大学计算机学院8Web界面设计基本原则 1以用户为中心 一方面，不同类别的Web网站，面向的访问群体不同；同一类型的Web网站，用户群体也有年龄、行业等差别。因此，Web界面的设计只有了解不同用户的需求，才能在设计中体现用户的核心地位，设计出更合理、能满足用户需求的界面，以吸引用户。山东大学计算机学院9 兼顾用户习惯 Mac OSX：新邮件 图标在正中间 Iphone：新邮件 图标在右下角 Ipad: 新邮件 图标在右上角 用户特点M myspace在中国区战略是覆盖18-35岁男女。通过的搜索页面，大概能分析出用户年

5、龄 在18-26岁。所在地区北京、喜欢上传照片的居多。通过认证的不多。Web界面设计基本原则 2. 一致性 内容一致：Web网站显示的信息、数据等 形式一致：Web界面设计的版式、构图、布局、色彩以及它们所呈现出的风格特点Web界面设计基本原则 Web界面自身的风格也要一致性 各页面使用相同的页边距；文本、图形间保持相同的间距； 各页面上都放上公司或网站的统一标志； 各页面应当使用相同的导航图标； 页面中的每个元素与整个页面以及站点的色彩和风格上保持一致性； 文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。山东大学计算机学院13Web界面设计基本原则n3. 简洁与明确使用一个醒目的标题，

6、这个标题常常采用图形来表示，但图形同样要求简洁。限制所用的字体和颜色的数目。界面上所有的元素都应当有明确的含义和用途，不要试图用无关的图片把界面装点起来。尽量减少浏览层次山东大学计算机学院14图7-5 Google首页（http:/，2009年9月）Web界面设计基本原则 4体现特色 清楚地了解Web网站背景、体现主题和服务对象的基本情况，选择合适的表现手法，展示关键信息和特色内容，并形成独特、鲜明的风格。图7-6 清华大学首页（http:/ 5兼顾不同的浏览器 不同浏览器类别和版本在功能支持上有所区别Web界面设计基本原则 6明确的导航设计 网站首页导航应尽量展现整个网站的架构和内容；另外导

7、航要能让浏览者确切地知道自己在整个网站中的位置，可以确定下一步的浏览去向。实例 灾难性目录 找苯甲酸苄酯 视觉搜索眼动模式 Hornof和Halverson提出的两种视觉搜索策略。圆圈表示用户的注视点，圆圈的连线表示视线经过的路径。搜索整列由6个group组成，每个group包含五个搜索项。左图为无标签（相当于无一级类目）时的混合搜索策略（12个注视点），右图为有标签时的层次搜索策略（7个注视点）。 目录设计的目录设计google directory 的目录设计Web界面要素设计 1. Web界面规划 2. 文化与语言 3. 内容、风格与布局、色彩设计 4. 文本设计 5. 多媒体元素设计1.

8、 Web界面规划 Web界面的布局、元素的设计都要以”网站的目标和用途”这个目标为中心。 将网站作为一种文化、一种艺术作品看待，确定Web界面的设计风格，力求在设计Web界面时追求艺术效果与美感。2. 文化与语言 全球服务型的网站还要考虑如何适应不同国家的不同类型的文化与语言环境。 在设计Web界面时，要将选择语言版本的功能放在网站的主页，并以不同版本的语言进行标注。图7-9 google网站（，2009年农历七月初七）图7-10 Nvidia网站（http:/ 内容、风格与布局、色彩设计 Web界面的内容不仅要遵循简洁明确的原则，也要符合确定的设计目标，面向不同的对象要使用不同的口吻和用词。

9、 网站的标志、色彩、字体、布局、交互方式、内容价值、存在意义等。 Web界面布局就是指如何合理地在界面上分布内容。 1）“同”字形结构布局 2）“国”字形结构布局 3）左右对称布局 4）自由式布局 4色彩 中国红山东大学计算机学院24实例 UI花园 败笔http:/ 文本设计 文本不要太多，以免转移浏览者注意力。 要选择合适的颜色，以便使文本和其它界面元素一起产生一个和谐的视觉效果；文本的颜色应该一致，让用户可以容易地确定不同文本和颜色所代表的内容。 选择的字体应和整个界面应融为一体。 网站中可能会使用多种字体，但是同一种字体应该表示相同类型的数据或者信息。 合理设置页边框、行间距等。 应该重

10、视标题的处理，把标题排版作为界面修饰的主要手段之一。标题一般无分级要求，其字形一般较大，字体的选择一般具有多样性，字形的变化修饰则更为丰富。实例 文字的可用性 辨识度与可读性实例 过于强调等于没强调实例 文字大小 http:/ 下划线主要区分是否有链接实例 视觉显著性5. 多媒体元素设计 动画、音频和视频这样的多媒体可以补充平淡的文本或者二维图形，也补充网站的视觉设计、音调和消息等。 Web设计者可以使用很多当前Web设计中的多媒体处理工具和技术；但是带宽以及浏览器的支持能力限制了多媒体技术的迅速采用。 为了充分享受新技术，通常需要大带宽、浏览器插件或第三方应用程序的支持。 山东大学计算机学院

11、32 WEB中的动画 动画是区别Web和其它媒体的一个重要展示形式，动画赋予了用户运动和投入的感受。 动画可以分为不同的级别，从简单的动画GIF图像到三维以及虚拟环境。 最常用的基本动画类型是GIF、Rollover和Macromedia Flash文件。 动画GIF是静止图像的汇集，可以按照指定的序列号和速度重复运动。许多标志广告就是动画GIF。山东大学计算机学院33 WEB中的动画 JavaApplet是经常被用来制作互联网上动画效果的程序设计语言。 Macromedia Flash文件在网站设计中被广泛地接受。 Flash引入了一种新的动画形式。它在带宽有限的情况下提供了媒体丰富的内容。

12、 Flash允许设计者创建吸引人的动画网站，为通常的静态站点提供了一种新的选择。山东大学计算机学院34 WEB中的动画 全景图作为虚拟实景的一种重要表现形式，会让使用者有进入照片中的场景的感觉：全方位；真实的场景；三维立体的效果。 http:/Web界面设计技术基础 1. 超文本标记语言HTML 2客户端脚本语言JavaScript 3JavaApplet 4服务器端脚本语言 山东大学计算机学院361. 超文本标记语言HTML HTML已经成为表示Web文档信息的标准方法，是构成Web页面的主要工具。 HTML是用来表示网上信息的符号标记语言，是一个跨平台语言。 HTML标准定义了构成语言的每

13、一个独立元素，这些元素是说明如何在浏览器中显示HTML文档的指令或标记符。 从结构上讲，HTML文件由各种标记元素组成，用于组织文件的内容和指导文件的输出格式。山东大学计算机学院37（1）基本标记元素（部分） 山东大学计算机学院38标记元素功能含义创建一个HTML文档，通知浏览器该文件含有HTML标记码设置文档标题以及其它不在Web网页上显示的信息网页标题，将显示在浏览器的标题栏中设置文档的可见部分，它包含了文件的内容设置背景颜色，使用颜色名或十六进制值设置背景图片设置文本文字颜色，使用颜色名或十六进制值设置超级链接文字的颜色，使用颜色名或十六进制值设置已访问过的超级链接文字的颜色，使用颜色名

14、或十六进制值设置鼠标悬停于超级链接文字的颜色，使用颜色名或十六进制值创建最大的标题，在HTML中有六种标题 （2）图形标记元素 目前能被Web浏览器直接解释的常见图像格式有：GIF格式(.GIF文件，支持256色)；X位图格式(.XBM文件，黑白图像)；JPEG格式(.JPG、.JPEG文件，支持RGB色)。山东大学计算机学院39标记元素功能含义添加一个图像。SRC给定图片文件的定位，ALIGN属性定义图与文本行的对齐方式；BORDER属性设置围绕一个图像的边框的大小；WIDTH和HEIGHT分别重新定义图像的宽度和高度 加入一条水平线，SIZE设置水平线的大小，WIDTH设置水平线的宽度，N

15、OSHADE表示创建无阴影的水平线（3）表格标记元素 （部分）山东大学计算机学院40标记元素功能含义定义表格，BORDER属性表示表格边框粗细程度，CELLSPACING属性用于设置表格格子之间空间的大小，CELLPADDING用来设置表格格子边框与其内部内容之间空间的大小, WIDTH属性是用来定义表格宽度 定义表格标题表示一个新的表格行的开始，属性ALIGN表示横向对齐方式在表格的当前行里产生一个新的表项单元，表示一个表项标题(TableHeader)单元， COLSPAN及ROWSPAN表示进行横向及纵向地扩展表项单元在表格的当前行里产生一个新的表项单元，表示一个表项数据(TableDa

16、ta)单元，其它属性的含义同上（4）表单标记元素(部分) 山东大学计算机学院41标记元素功能含义 创建所有表单 创建一个单行文本输入域，SIZE设置以字符计数的宽度文本 创建一个口令输入域，输入的字符全部显示为“*” 创建一个文本框区域，列的数目设置宽度，行的数目设置高度创建一个单选按钮，文字在标签后面创建一个复选框，文字在标签后面【例8-1】Demo.html山东大学计算机学院42【例8-1】用任一编辑器建立文本文件Demo.html。网页标题显示于浏览器窗口的标题栏 H1设定一级标题黑体字斜体字 红色5号字点击这里将超链到山东大学主页点击这里将超链到下面的锚点有意见请告诉我 这里是一个文档

17、内部锚点的起始处Demo.html的运行效果山东大学计算机学院43【例8-2】用HTML实现表单实例 山东大学计算机学院44HTML表单实例 用户名： 口令： 选学内容： Word Excel Internet 课程类别：必修选修 你的计算机是哪一种类型： PC UNIX MAC OTHER 备注：请在此填写补充内容 用HTML实现表单实例效果山东大学计算机学院452客户端脚本语言JavaScript HTML无法独自完成交互和客户端动态网页的任务,JavaScript，它弥补了HTML语言的缺陷。利用JavaScript，可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时

18、的、动态的、可交互式的表达能力。 JavaScript是一种内嵌于HTML中的脚本语言，它是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是与HTML、JavaApplet一起实现在一个Web页面中链接多个对象，与Web客户交互作用，可用于开发客户端的应用程序等。山东大学计算机学院46JavaScript 的 特点 （1）一种脚本编写语言 （2）基于对象的语言 （3）简单性 （4）安全性 （5）动态性 （6）跨平台性 山东大学计算机学院47JavaScript与HTML结合实例山东大学计算机学院48/ JavaScript 在此出现alert(这是第一个JavaScript例子!

19、);alert(欢迎你进入JavaScript世界!); alert(今后我们将共同学习JavaScript知识！); / JavaScript 在此结束 /JavaScript代码由 .说明 /alert()是JavaScript的窗口对象方法，其功能是弹出一个具有OK对话框并显示括号中的字符串 JavaScript与HTML结合实例运行结果山东大学计算机学院493JavaApplet JavaAapplet是访问Internet服务器，在Internet上传播的，自动安装的，可作为部分Web文档运行的小应用程序。 当JavaAapplet到达客户端，它被限制访问资源，以使它能够在不受病毒威

20、胁和破坏数据完整性的情况下生成一个二进制的多媒体用户界面以及完成复杂的计算。它还提供了装载和显示图像的方法，以及装载和播放语音片断的方法。 山东大学计算机学院50JavaApplet是一种基于窗口的程序 JavaAapplet是由事件驱动的。一个JavaAapplet类似于系列提供中断服务的子程序的集合。 在事件发生之前，JavaAapplet一直处于等待状态中。 一旦事件发生，JavaAapplet就会采取相应措施并迅速将控制权交给AWT。针对特定的事件作出相应的动作并把控制交给AWT的运行环境。 用户可以与JavaAapplet进行交互，而不是通过其它方式。这些交互被送至JavaAappl

21、et，JavaAapplet必须作出响应的事件。 山东大学计算机学院51JavaApplet在网页中实现放大镜例子 山东大学计算机学院52 AnLens.jar是JavaApplet的源文件。其效果如图 山东大学计算机学院534服务器端脚本语言 目前流行的三大服务器端脚本语言是ASP、PHP、JSP。 ASP（Active Server Pages），是一个Web服务器端的开发环境， 利用它可以产生和运行动态的、交互的、高性能的Web服务应用程序。 PHP（HyperText Preprocess）是一种跨平台的服务器端的嵌入式脚本语言。它大量地借用C、Java和Perl语言的语法，并耦合PH

22、P自己的特性，使Web开发者能够快速地写出动态生成页面。 JSP （Java Server Page）是Sun公司推出的新一代站点开发语言，它完全解决了目前ASP，PHP的一个通病脚本级执行。JSP可以在Servlet和JavaBeans的支持下，编写出功能强大的Web站点程序。 山东大学计算机学院54三大服务器端脚本语言 三者都提供在HTML代码中混合某种程序代码、由语言引擎解释执行程序代码的能力。在ASP、PHP、JSP环境下，HTML代码主要负责描述信息的显示样式，而程序代码则用来描述处理逻辑。普通的HTML页面只依赖于Web服务器，而ASP、PHP、JSP页面需要附加的语言引擎分析和执

23、行程序代码。程序代码的执行结果被重新嵌入到HTML代码中，然后一起发送给浏览器。 山东大学计算机学院55常用Web界面设计工具 1页面编辑器 MicroSoft公司 的Frontpage Macromedia公司 的Dreamweaver Dreamweaver与Flash、Firework 2辅助工具 AceHTML Pro 6.0全功能的 HTML & JavaScript 编辑器。 Antenna Web Design Studio强大的可视化网页设计软件 Easy HTML简单的所见即所得的HTML 编辑器，有固定、类似浏览器的界面。 Easy Web Editor是一个 Web 发布

24、工具，允许不了解HTML而在所见即所得环境中编辑Web网页。 山东大学计算机学院568.8.3 Web界面设计新技术 Web 3D图形技术 语音Web技术 山东大学计算机学院571.Web 3D图形技术 （1）Web3D虚拟现实建模语言VRML VRML是3D图形和多媒体技术通用交换的文件格式，它描述交互式的3D对象和场景。它不仅应用在互联网上，也可以应用在工程和科学可视化、多媒体、娱乐游戏、互联网3D图形、教育、虚拟社区等领域。由于网上传输的是模型文件，故其传输量大大小于视频图像。 山东大学计算机学院58虚拟法国巴黎凯旋门的3D场景效果山东大学计算机学院591.Web 3D图形技术 （2）W

25、eb3D图形实时渲染引擎 实时渲染引擎的作用是解释并翻译实施场景模型文件的语法，实时渲染从服务器端传来的场景模型文件，在网页访问者的客户端逐帧、实时地显示3D图形。 实时渲染引擎是实施互联网3D图形的关键技术，它的文件大小、图形渲染质量、渲染速度、以及它能提供的交互性都直接反映其解决方案的优劣。 山东大学计算机学院601.Web 3D图形技术 （3）Web3D图形新标准 可扩展3D(Extensible 3D , X3D) 是一个软件标准，定义了如何在多媒体中整合基于网络传播的交互三维内容。X3D 是 VRML的继承和改进，提供了以下的新特性：更先进的应用程序界面，新添的数据编码格式，严格的一

26、致性，组件化结构。 山东大学计算机学院611.Web 3D图形技术 （4）Web3D图形建模与制作工具 3DS max可用于建立场景模型，安装相应的输出插件，再直接建立场景模型文件。现在最有名的Web3D图形软件公司，如cult3D 和Viwepoint都可以在3DS max中直接输出它们的专用文件格式的场景模型文件。 山东大学计算机学院621.Web 3D图形技术 （5）Java 3D Java 3D 的本质是一个交互式三维图形应用编程接口（API），是Java 2 SDK的标准扩展，它可以和普通的Java 2D 、Swing、AWT等很好地结合，其目标是： 1）用户能够在浏览器中观看或操作

27、三维动态图形 2）一次编程，到处运行 3）适应不同的软件平台 4）适应各种显示环境和输入设备 山东大学计算机学院631.Web 3D图形技术 （6）Web3D图形技术应用 互联网上的交互式3D图形技术Wed3D正在取得新的进展，最具魅力的Wed3D图形将在互联网上有广泛应用，如电子商务、联机娱乐休闲与游戏、科技与工程的可视化、教育、医学、地理信息、虚拟社区。山东大学计算机学院64Web3D的核心技术实现原理技术特征应用特点VRML技术服 务 器 端 提 供 的 是VRML文件和支持资源，浏览器通过插件将描述性的文本解析为对应的类属，并在显示器上呈现出来。通过编程、三维建模工具和VRML可视化软

28、件实现；在虚拟三维场景展示时，文件数据量很大。高版本浏览器预装插件；文件传输慢，下载时间长；呈现的图像质量不高；与其他多技术集成能力及兼容性弱。适合于三维对象和场景的展示。XML技术将用户自定义的三维数据集成到XML文档中，通过浏览器对其进行解析后实时展现给用户。通过三维建模工具和可视化软件实现；在三维对象和三维场景展示时，文件数据量小。需要安装插件；文件传输快，可被快速下载；呈现的图象质量较好；与其他多技术集成能力强；兼容性好。适合于三维对象和场景的展示。Java技术通过浏览器执行程序，直接将三维模型渲染后实时展现三维实体。通过编程和三维建模工具来实现；在三维对象和三维场景展示时，文件数据量

29、小。不需要安装插件；文件传输快，可被快速下载；呈现的图象质量非常高；兼容性好。适合于三维对象和场景的展示。动画脚本语言在网络动画中加入脚本描述，脚本通过控制各幅图像来实现三维对象。通过脚本语言编程来实现；在三维对象和三维场景展示时，文件数据量较小。需要插件；文件传输快，可被快速下载；呈现的图象质量随压缩率可调；兼容性好。适合于三维对象和场景的展示。流式传输技术直接将交互的虚拟场景嵌入到视频中去。通过实景照片和场景集成（缝合）软件来实现；在场景模拟时，文件数据量较小。需要下载插件；用户可快速浏览文件；三维场景的质量高；兼容性好。实现360度全景虚拟环境。两个Web3D的浏览的例子。山东大学计算机

30、学院662Web中的语音交互技术 语音浏览技术是正在互连网上的一种新的应用和技术。 VoiceXML 语音可扩展标记语言 世界上第一个真正的语音通信标准，它定义了应用开发商向用户提供新型信息访问服务的方式。 VoiceXML的应用与HTML的应用相同，唯一的差别在于前者使用语音浏览器山东大学计算机学院67VoiceXML 语音可扩展标记语言 通过VoiceXML，互联网语音应用运营商能向电话用户发布他们感兴趣的信息 VoiceXML 突破性地实现了互联网与电话网的融合，结合传统的电话语音操作控制、语音识别（ASR）、文语转换（TTS）、XML、Web数据库等技术，完成方便、完善的业务和信息控制

31、操作。 基于VoiceXML标准的语音数据互联将为声讯网、移动网、互联网的统一提供技术保障. 山东大学计算机学院68 Web界面设计的评估 Web 界面设计的评估有其独特的特征。 为什么要对Web进行可用性测试 如果某个站点不好用，用户就不会再去用它。山东大学计算机学院69 Web站点的可用性 可用性是指对用户来说软件或Web站点是否易用、高效和使人感到满意。 衡量可用性的5个方面： 易学性：当用户第一次使用设计时完成基本任务的难易； 有效性：一旦用户学习了这个设计，执行任务的快慢； 易记性：当用户一段时间不用此设计后再来使用，再次熟练的难易； 错误：用户会犯多少错误，这些错误有多大的影响，从

32、错误中恢复的难易； 满意程度：使用这个设计让人感到何种程度的愉快。 山东大学计算机学院70常见Web设计错误 1目的描述不清楚 2存档内容换上新的地址 3内容不标注日期 4对大图片的缩小不能反映其真实内容 5过分详细的ALT文本 6不支持“如果-那么” 7无法通过属性过滤的长长的列表 8产品只能按照品牌进行排序 9过分限制的表单条目 10页面上包括指向自己的链接 山东大学计算机学院71习题 7.1简述Web设计的原则。 7.2 Web界面一般包括那些主要元素以及所产生的作用。 7.3用HTML实现交互界面。 7.4用JavaScript或JavaApplet写程序，并嵌入HTML网页。 7.5利用VRML构造一个模型，并通过浏览器够从各个角度观察此模型，能使之简单地运动。 7.6利用Java3D设计简单三维迷宫场景。