第7章 Web界面设计

1、第7章 Web界面设计山东大学(shn dn d xu)计算机学院共七十五页本章(bn zhn)内容简介 Web界面及相关概念 Web界面设计原则Web界面要素设计Web界面基本(jbn)设计技术Web3D界面设计技术山东大学计算机学院2共七十五页Web界面及相关(xinggun)概念万维网（World Wide Web，WWW）高能核理学家Tim Berners-Lee，建立了一个能够整合各种( zhn)资源、文件及多媒体的系统，让使用者方便地取得不同媒体的资料。 建立在客户/服务器模型之上超文本标记语言（Hypertext Markup Language，HTML）超文本传输协议（Hype

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

3、本、图形或其他信息的组织形式，是一种非线性的信息组织形式。它使得单一(dny)的信息元素之间可以相互交叉引用，这种引用并不是通过复制来实现的，而是通过指向对方的地址字符串来指引用户获取相应的信息。 超媒体 （Hypermedia）利用超文本形式组织起来的文件不仅仅是文本，也可以是图、文、声、像以及视频等多媒体形式的文件。这些多媒体信息就构成了所谓的超媒体 。山东大学(shn dn d xu)计算机学院5共七十五页Web界面设计问题(wnt)的提出 Web界面设计与站点外观直接相关站点的界面外观是否友好直接关系到是否能吸引人的关注。人性化的设计是Web界面设计的核心如何根据人的心理、生理(shn

4、gl)特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。山东大学计算机学院6共七十五页Web界面设计基本(jbn)原则 1以用户为中心2一致性3简洁与明确4体现(txin)特色5兼顾不同的浏览器6明确的导航设计山东大学计算机学院7共七十五页Web界面设计基本(jbn)原则1以用户为中心一方面，不同类别的Web网站，面向的访问群体不同；同一类型的Web网站，用户群体也有年龄、行业等差别。因此，Web界面的设计只有(zhyu)了解不同用户的需求，才能在设计中体现用户的核心地位，设计出更合理、能满足用户需求的界面，以吸引用户。山东大学计算机学院8共七十五页兼顾(jing)用户习惯Ma

5、c OSX：新邮件 图标在正中间Iphone：新邮件 图标在右下角Ipad: 新邮件 图标在右上角共七十五页用户(yngh)特点M myspace在中国区战略是覆盖(fgi)18-35岁男女。通过的搜索页面，大概能分析出用户年龄 在18-26岁。所在地区北京、喜欢上传照片的居多。通过认证的不多。共七十五页Web界面设计基本(jbn)原则2. 一致性内容一致：Web网站显示的信息、数据等形式一致：Web界面设计的版式(bnsh)、构图、布局、色彩以及它们所呈现出的风格特点共七十五页Web界面设计基本(jbn)原则 Web界面自身的风格也要一致性各页面使用相同的页边距；文本、图形间保持相同的间距；

6、各页面上都放上公司或网站的统一标志；各页面应当使用相同的导航图标；页面中的每个元素与整个页面以及站点的色彩和风格上保持一致性；文字(wnz)的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。山东大学计算机学院12共七十五页Web界面设计基本(jbn)原则3. 简洁与明确使用一个醒目(xngm)的标题，这个标题常常采用图形来表示，但图形同样要求简洁。限制所用的字体和颜色的数目。界面上所有的元素都应当有明确的含义和用途，不要试图用无关的图片把界面装点起来。尽量减少浏览层次山东大学计算机学院13图7-5 Google首页（，2009年9月）共七十五页Web界面设计基本(jbn)原则4体现特色(ts)

7、清楚地了解Web网站背景、体现主题和服务对象的基本情况，选择合适的表现手法，展示关键信息和特色内容，并形成独特、鲜明的风格。图7-6 清华大学首页（/，2009年9月）共七十五页Web界面设计基本(jbn)原则5兼顾不同的浏览器不同浏览器类别和版本(bnbn)在功能支持上有所区别共七十五页Web界面设计基本(jbn)原则6明确的导航设计网站(wn zhn)首页导航应尽量展现整个网站(wn zhn)的架构和内容；另外导航要能让浏览者确切地知道自己在整个网站(wn zhn)中的位置，可以确定下一步的浏览去向。共七十五页实例(shl)灾难性目录(ml)找苯甲酸苄酯共七十五页视觉搜索眼动模式Horno

8、f和Halverson提出的两种视觉搜索策略。圆圈表示用户(yngh)的注视点，圆圈的连线表示视线经过的路径。搜索整列由6个group组成，每个group包含五个搜索项。左图为无标签（相当于无一级类目）时的混合搜索策略（12个注视点），右图为有标签时的层次搜索策略（7个注视点）。共七十五页目录(ml)设计的目录(ml)设计google directory 的目录设计共七十五页Web界面要素(yo s)设计1. Web界面规划2. 文化与语言3. 内容、风格与布局(bj)、色彩设计4. 文本设计5. 多媒体元素设计共七十五页CNNUSA Today共七十五页共七十五页共七十五页共七十五页共七十五

9、页共七十五页1. Web界面(jimin)规划Web界面的布局、元素的设计都要以”网站的目标和用途”这个目标为中心。将网站作为(zuwi)一种文化、一种艺术作品看待，确定Web界面的设计风格，力求在设计Web界面时追求艺术效果与美感。共七十五页2. 文化(wnhu)与语言全球服务型的网站还要考虑如何(rh)适应不同国家的不同类型的文化与语言环境。在设计Web界面时，要将选择语言版本的功能放在网站的主页，并以不同版本的语言进行标注。图7-9 google网站（，2009年农历七月初七）图7-10 Nvidia网站（/，2009年9月）共七十五页3. 内容、风格(fngg)与布局、色彩设计Web界

10、面的内容(nirng)不仅要遵循简洁明确的原则，也要符合确定的设计目标，面向不同的对象要使用不同的口吻和用词。网站的标志、色彩、字体、布局、交互方式、内容价值、存在意义等。Web界面布局就是指如何合理地在界面上分布内容。1）“同”字形结构布局2）“国”字形结构布局3）左右对称布局4）自由式布局4色彩中国红山东大学计算机学院29共七十五页实例(shl)UI花园(huyun) 败笔/forums/register.php?do=register共七十五页4. 文本(wnbn)设计文本不要太多，以免转移浏览者注意力。要选择合适的颜色，以便使文本和其它(qt)界面元素一起产生一个和谐的视觉效果；文本的

11、颜色应该一致，让用户可以容易地确定不同文本和颜色所代表的内容。选择的字体应和整个界面应融为一体。网站中可能会使用多种字体，但是同一种字体应该表示相同类型的数据或者信息。合理设置页边框、行间距等。应该重视标题的处理，把标题排版作为界面修饰的主要手段之一。标题一般无分级要求，其字形一般较大，字体的选择一般具有多样性，字形的变化修饰则更为丰富。共七十五页实例(shl)文字(wnz)的可用性辨识度与可读性共七十五页实例(shl)文字大小/blog/?p=324共七十五页实例(shl)下划线主要(zhyo)区分是否有链接共七十五页实例(shl)视觉(shju)显著性共七十五页5. 多媒体元素(yun s

12、)设计动画、音频和视频这样的多媒体可以补充平淡的文本或者二维图形，也补充网站的视觉设计、音调和消息等。 Web设计者可以使用很多当前Web设计中的多媒体处理工具和技术；但是带宽以及浏览器的支持能力限制了多媒体技术的迅速采用。为了充分享受(xingshu)新技术，通常需要大带宽、浏览器插件或第三方应用程序的支持。 山东大学计算机学院36共七十五页WEB中的动画动画是区别Web和其它媒体的一个重要展示形式，动画赋予了用户运动和投入的感受。动画可以分为(fn wi)不同的级别，从简单的动画GIF图像到三维以及虚拟环境。最常用的基本动画类型是GIF、Rollover和Macromedia Flash文

13、件。动画GIF是静止图像的汇集，可以按照指定的序列号和速度重复运动。许多标志广告就是动画GIF。山东大学(shn dn d xu)计算机学院37共七十五页WEB中的动画JavaApplet是经常被用来制作互联网上动画效果的程序设计语言。Macromedia Flash文件在网站设计中被广泛地接受。Flash引入了一种新的动画形式。它在带宽有限的情况(qngkung)下提供了媒体丰富的内容。Flash允许设计者创建吸引人的动画网站，为通常的静态站点提供了一种新的选择。山东大学(shn dn d xu)计算机学院38共七十五页WEB中的动画全景图作为虚拟实景的一种重要表现形式，会让使用者有进入照片

14、(zhopin)中的场景的感觉：全方位；真实的场景；三维立体的效果。共七十五页Web界面设计技术(jsh)基础 1. 超文本标记(bioj)语言HTML 2客户端脚本语言JavaScript 3JavaApplet 4服务器端脚本语言 山东大学计算机学院40共七十五页1. 超文本标记(bioj)语言HTMLHTML已经成为表示Web文档信息(xnx)的标准方法，是构成Web页面的主要工具。HTML是用来表示网上信息的符号标记语言，是一个跨平台语言。HTML标准定义了构成语言的每一个独立元素，这些元素是说明如何在浏览器中显示HTML文档的指令或标记符。从结构上讲，HTML文件由各种标记元素组成，

15、用于组织文件的内容和指导文件的输出格式。山东大学计算机学院41共七十五页（1）基本标记(bioj)元素（部分） 山东大学(shn dn d xu)计算机学院42标记元素功能含义创建一个HTML文档，通知浏览器该文件含有HTML标记码设置文档标题以及其它不在Web网页上显示的信息网页标题，将显示在浏览器的标题栏中设置文档的可见部分，它包含了文件的内容设置背景颜色，使用颜色名或十六进制值设置背景图片设置文本文字颜色，使用颜色名或十六进制值设置超级链接文字的颜色，使用颜色名或十六进制值设置已访问过的超级链接文字的颜色，使用颜色名或十六进制值设置鼠标悬停于超级链接文字的颜色，使用颜色名或十六进制值创建

16、最大的标题，在HTML中有六种标题 共七十五页（2）图形(txng)标记元素 目前能被Web浏览器直接解释的常见图像格式有：GIF格式(.GIF文件，支持256色)；X位图格式(.XBM文件，黑白(hibi)图像)；JPEG格式(.JPG、.JPEG文件，支持RGB色)。山东大学计算机学院43标记元素功能含义添加一个图像。SRC给定图片文件的定位，ALIGN属性定义图与文本行的对齐方式；BORDER属性设置围绕一个图像的边框的大小；WIDTH和HEIGHT分别重新定义图像的宽度和高度 加入一条水平线，SIZE设置水平线的大小，WIDTH设置水平线的宽度，NOSHADE表示创建无阴影的水平线共七

17、十五页（3）表格标记元素(yun s) （部分）山东大学(shn dn d xu)计算机学院44标记元素功能含义定义表格，BORDER属性表示表格边框粗细程度，CELLSPACING属性用于设置表格格子之间空间的大小，CELLPADDING用来设置表格格子边框与其内部内容之间空间的大小, WIDTH属性是用来定义表格宽度 定义表格标题表示一个新的表格行的开始，属性ALIGN表示横向对齐方式在表格的当前行里产生一个新的表项单元，表示一个表项标题(TableHeader)单元， COLSPAN及ROWSPAN表示进行横向及纵向地扩展表项单元在表格的当前行里产生一个新的表项单元，表示一个表项数据(T

18、ableData)单元，其它属性的含义同上共七十五页（4）表单标记元素(yun s)(部分) 山东大学(shn dn d xu)计算机学院45标记元素功能含义 创建所有表单 创建一个单行文本输入域，SIZE设置以字符计数的宽度文本 创建一个口令输入域，输入的字符全部显示为“*” 创建一个文本框区域，列的数目设置宽度，行的数目设置高度创建一个单选按钮，文字在标签后面创建一个复选框，文字在标签后面共七十五页【例8-1】Demo.html山东大学(shn dn d xu)计算机学院46【例8-1】用任一编辑器建立文本文件Demo.html。网页标题显示于浏览器窗口的标题栏 H1设定(sh dn)一级

19、标题黑体字斜体字 红色5号字点击这里将超链到山东大学主页点击这里将超链到下面的锚点有意见请告诉我 这里是一个文档内部锚点的起始处共七十五页Demo.html的运行(ynxng)效果山东大学(shn dn d xu)计算机学院47共七十五页【例8-2】用HTML实现(shxin)表单实例 山东大学(shn dn d xu)计算机学院48HTML表单实例 用户名： 口令： 选学内容： Word Excel Internet 课程类别：必修选修 你的计算机是哪一种类型： PC UNIX MAC OTHER 备注：请在此填写补充内容 共七十五页用HTML实现(shxin)表单实例效果山东大学(shn

20、dn d xu)计算机学院49共七十五页2客户端脚本语言JavaScript HTML无法独自完成交互和客户端动态网页的任务,JavaScript，它弥补了HTML语言的缺陷。利用JavaScript，可以(ky)使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交互式的表达能力。JavaScript是一种内嵌于HTML中的脚本语言，它是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是与HTML、JavaApplet一起实现在一个Web页面中链接多个对象，与Web客户交互作用，可用于开发客户端的应用程序等。山东大学(shn dn d xu)计算机学院

21、50共七十五页JavaScript 的 特点(tdin)（1）一种脚本编写(binxi)语言 （2）基于对象的语言 （3）简单性 （4）安全性 （5）动态性 （6）跨平台性 山东大学计算机学院51共七十五页JavaScript与HTML结合(jih)实例山东大学(shn dn d xu)计算机学院52/ JavaScript 在此出现alert(这是第一个JavaScript例子!);alert(欢迎你进入JavaScript世界!); alert(今后我们将共同学习JavaScript知识！); / JavaScript 在此结束 /JavaScript代码由 .说明 /alert()是Ja

22、vaScript的窗口对象方法，其功能是弹出一个具有OK对话框并显示括号中的字符串 共七十五页JavaScript与HTML结合实例运行(ynxng)结果山东大学(shn dn d xu)计算机学院53共七十五页3JavaApplet JavaAapplet是访问Internet服务器，在Internet上传播的，自动安装的，可作为部分Web文档运行的小应用程序。当JavaAapplet到达客户端，它被限制访问资源，以使它能够在不受病毒威胁(wixi)和破坏数据完整性的情况下生成一个二进制的多媒体用户界面以及完成复杂的计算。它还提供了装载和显示图像的方法，以及装载和播放语音片断的方法。 山东大

23、学(shn dn d xu)计算机学院54共七十五页JavaApplet是一种基于窗口(chungku)的程序JavaAapplet是由事件驱动的。一个JavaAapplet类似于系列提供中断服务的子程序的集合。在事件发生之前，JavaAapplet一直处于等待状态中。一旦事件发生，JavaAapplet就会采取相应措施并迅速将控制权交给AWT。针对特定的事件作出相应的动作(dngzu)并把控制交给AWT的运行环境。用户可以与JavaAapplet进行交互，而不是通过其它方式。这些交互被送至JavaAapplet，JavaAapplet必须作出响应的事件。 山东大学计算机学院55共七十五页Ja

24、vaApplet在网页(wn y)中实现放大镜例子 山东大学(shn dn d xu)计算机学院56 AnLens.jar是JavaApplet的源文件。其效果如图 共七十五页山东大学(shn dn d xu)计算机学院57共七十五页4服务器端脚本语言 目前流行的三大服务器端脚本语言是ASP、PHP、JSP。 ASP（ActiveServerPages），是一个Web服务器端的开发环境，利用它可以产生和运行动态的、交互的、高性能的Web服务应用程序。 PHP（HyperText Preprocess）是一种跨平台的服务器端的嵌入式脚本语言。它大量地借用C、Java和Perl语言的语法，并耦合P

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

26、b服务器，而ASP、PHP、JSP页面需要附加的语言引擎分析和执行程序代码。程序代码的执行结果被重新嵌入到HTML代码中，然后一起发送给浏览器。 山东大学计算机学院59共七十五页常用(chn yn)Web界面设计工具 1页面编辑器 MicroSoft公司 的FrontpageMacromedia公司 的DreamweaverDreamweaver与Flash、Firework2辅助工具 AceHTML Pro 6.0全功能的 HTML & JavaScript 编辑器。Antenna Web Design Studio强大的可视化网页设计软件Easy HTML简单的所见即所得的HTML 编辑器

27、，有固定、类似浏览器的界面。Easy Web Editor是一个 Web 发布工具，允许不了解HTML而在所见即所得环境(hunjng)中编辑Web网页。 山东大学计算机学院60共七十五页8.8.3 Web界面设计新技术(jsh) Web 3D图形技术(jsh) 语音Web技术 山东大学计算机学院61共七十五页1.Web 3D图形(txng)技术（1）Web3D虚拟现实(x n xin sh)建模语言VRML VRML是3D图形和多媒体技术通用交换的文件格式，它描述交互式的3D对象和场景。它不仅应用在互联网上，也可以应用在工程和科学可视化、多媒体、娱乐游戏、互联网3D图形、教育、虚拟社区等领域

28、。由于网上传输的是模型文件，故其传输量大大小于视频图像。 山东大学计算机学院62共七十五页虚拟法国(f u)巴黎凯旋门的3D场景效果山东大学(shn dn d xu)计算机学院63共七十五页1.Web 3D图形(txng)技术（2）Web3D图形实时渲染引擎实时渲染引擎的作用是解释并翻译实施场景模型文件的语法，实时渲染从服务器端传来的场景模型文件，在网页访问者的客户端逐帧、实时地显示3D图形。 实时渲染引擎是实施互联网3D图形的关键技术，它的文件大小、图形渲染质量、渲染速度(sd)、以及它能提供的交互性都直接反映其解决方案的优劣。 山东大学计算机学院64共七十五页1.Web 3D图形(txng

29、)技术（3）Web3D图形新标准 可扩展3D(Extensible 3D , X3D) 是一个软件标准，定义了如何在多媒体中整合基于网络传播的交互三维内容。X3D 是 VRML的继承和改进，提供了以下(yxi)的新特性：更先进的应用程序界面，新添的数据编码格式，严格的一致性，组件化结构。 山东大学计算机学院65共七十五页1.Web 3D图形(txng)技术（4）Web3D图形建模与制作工具 3DS max可用于建立场景模型，安装相应的输出插件，再直接(zhji)建立场景模型文件。现在最有名的Web3D图形软件公司，如cult3D 和Viwepoint都可以在3DS max中直接输出它们的专用文

30、件格式的场景模型文件。 山东大学计算机学院66共七十五页1.Web 3D图形(txng)技术（5）Java 3D Java 3D 的本质是一个交互式三维图形应用编程接口（API），是Java 2 SDK的标准扩展，它可以(ky)和普通的Java 2D 、Swing、AWT等很好地结合，其目标是：1）用户能够在浏览器中观看或操作三维动态图形2）一次编程，到处运行3）适应不同的软件平台4）适应各种显示环境和输入设备 山东大学计算机学院67共七十五页1.Web 3D图形(txng)技术（6）Web3D图形技术应用 互联网上的交互式3D图形技术Wed3D正在取得新的进展，最具魅力的Wed3D图形将在互联网上有广泛应用，如电子商务、联机娱乐(yl)休闲与游戏、科技与工程的可视化、教育、医学、地理信息、虚拟社区。山东大学计算机学院68共七十五页两个(lin )Web3D的浏览的例子。山东大学(shn dn d xu)计算机学院69共七十五页2Web中的语音(yyn)交互技术 语音浏览技术是正在互连网上的一种新的应用和技术。VoiceXML 语音可扩展标记语言世界上第一个真正的语音通信标准，它定义了应用开发商向用户提供新型信息访问服务(fw)的方式。 VoiceXML的应用与HTML的应用相同，唯一的差别在于前者使用语音浏览器山东大学计算机学院70共七十五页Vo