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

第七章Web界面设计,内容摘要,Web界面及相关概念Web界面设计原则Web界面要素的设计Web界面基本设计技术Web3D界面设计技术,7.1Web界面及相关概念,Web基础互联网是近年来对社会影响最大的技术进步,影响到人类生活的很多方面。互联网已经成为全面支持多媒体，能在多种平台上运行的庞大信息服务系统。互联网的应用范围也日趋扩大，被广泛用于商业办公、业务管理、购物娱乐等人类生活的各个方面，业已成为一种全球化社会现象。,7.1Web界面及相关概念,90年代初，瑞士日内瓦的欧洲核能研究中心分布在世界各地的科学家需要高效率的通讯方式来进行彼此交流与分享信息。该中心高能核理学家TimBerners-Lee研究发展了万维网（WorldWideWeb，WWW）的雏形，目的是为了建立一个能够整合各种资源、文件及多媒体的系统，让使用者方便地取得不同媒体的资料。,7.1Web界面及相关概念,Web是一个由许多互相链接的超文本（HyperText）文档组成的系统。分布在世界各地的用户能够通过Internet对其访问，进行彼此交流与共享信息。在这个系统中，每个有用的事物，被称为一种“资源”，其由一个全局“统一资源标识符”（URI）标识；这些资源通过超文本传输协议（HyperTextTransferProtocol）传送给用户；而用户通过点击链接来获得这些资源。,7.1Web界面及相关概念,简单来说，WWW是建立在客户/服务器模型之上，构成的一个环球信息网络空间，主要使用：超文本标记语言（HypertextMarkupLanguage，HTML）超文本传输协议（HypertextTransportProtocols，HTTP）通过Internet把遍布世界各地的服务器连接起来，它能够提供各种Internet服务，具有一致用户界面的信息浏览功能。,7.1Web界面及相关概念,Web应用的成功与否，除了受其所采用的技术和所能够提供的功能的限制，还受Web网页的外观的影响。Web网页的外观经常是最先被用户注意到的。用户对网站的第一印象与界面外观是否友好、吸引人密切相关。所以对于设计人员来说，Web界面设计至关重要。Web界面设计的人性化、易用性是Web界面设计的核心。如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。,超文本与超媒体,超文本（Hypertext）是一种使用于文本、图形或计算机的信息的组织形式，是一种非线性的信息组织形式。它使得单一的信息元素之间相互交叉引用，这种引用并不是通过复制来实现的，而是通过指向对方的地址字符串来指引用户获取相应的信息。超媒体（Hypermedia）利用超文本形式组织起来的文件不仅仅是文本，也可以是图、文、声、像以及视频等多媒体形式的文件。这些多媒体信息就构成了所谓的超媒体。,山东大学考古数字博物馆视听博览界面,7.2Web界面设计原则,一般的Web界面设计应该遵循如下基本原则：以用户为中心要求把用户放在第一位。设计时既要考虑用户的共性，同时也要考虑他们之间的差异性。一致性Web界面设计还必须考虑内容和形式的一致性。其次，Web界面自身的风格也要一致性，保持统一的整体形象。简洁与明确Web界面设计是设计的一种，要求简练、明确。,迪斯尼网站（,Google首页（，2009年9月）,7.2Web界面设计原则,体现特色只有丰富特色、内容翔实的网页才能使浏览者驻足阅读。特色鲜明的Web网站是精心策划的结果，只有独特的创意和赏心悦目的网页设计才能在一瞬间打动浏览者。,清华大学首页（,7.2Web界面设计原则,兼顾不同的浏览器明确的导航设计网站首页导航应尽量展现整个网站的架构和内容，要能让浏览者确切地知道自己在整个网站中的位置，可以确定下一步的浏览去向。,无论那种类型的Web网站，想要把界面设计得丰富多彩，吸引更多的用户前来访问，Web界面规划至关重要。明确网站的目标和用途。Web界面的布局、元素的设计都要以这个目标为中心。有必要将网站作为一种文化、艺术作品看待，力求在设计Web界面时追求艺术效果与美感,7.3Web界面要素设计7.3.1Web界面规划,个人网页示例（优美）,7.3.1Web界面规划,7.3.2文化与语言,网站一经发布，意味着全世界都可以看到其中的信息。所以，全球服务型的网站还要考虑如何适应不同国家的不同类型的文化与语言环境。,Google首页图标（中国七夕）,内容：Web界面的内容不仅要遵循简洁明确的原则，也要符合确定的设计目标，面向不同的对象要使用不同的口吻和用词。风格：Web界面的风格是指网站的整体形象给浏览者的综合感受。这个整体形象包括网站的标志、色彩、字体、布局、交互方式、内容价值、存在意义等。一个优秀的网站与实体公司一样，也需要整体的形象包装和设计。,7.3.3内容、风格与布局、色彩设计,布局：Web界面布局就是指如何合理地在界面上分布内容。常用的Web界面布局形式有：“同”字形结构、“国”字形结构、左右对称、自由式。,7.3Web界面要素设计,色彩：Web网站给人的第一印象来自视觉冲击。颜色元素在网站的感知和展示上扮演重要的角色。某个企业或个人的风格、文化和态度可以通过Web界面中的色彩混合、调整或者对照的方式体现出来。一般地，Web界面中色彩选择可考虑：鲜明性、独特性、合适性、联想性、和谐性。,7.3Web界面要素设计,文本不要太多，以免转移浏览者注意力。要选择合适的颜色，以便使文本和其它界面元素一起产生一个和谐的视觉效果；文本的颜色应该一致，让用户可以容易地确定不同文本和颜色所代表的内容。选择的字体应和整个界面应融为一体；一旦已经为某些元素选择了字体，应该保证其在整个网站中应用的一致性。,7.3.4文本设计,网站中可能会使用多种字体，但是同一种字体应该表示相同类型的数据或者信息。通过合理设置页边框、行间距等，使Web界面产生丰富变化的外观和感觉。应该重视标题的处理。标题一般无分级要求，其字形一般较大，字体的选择一般具有多样性，字形的变化修饰则更为丰富。,7.3.4文本设计,图形、图像、动画、音频和视频等多媒体元素可以弥补平淡文本的不足，增强Web界面的艺术表现力。因此，在设计Web网页时有必要考虑使用不同类型的多媒体元素，使得网站更生动，而且有吸引力。,Rollover按钮,7.3.5多媒体元素设计,7.4Web界面基本设计技术7.4.1HTML,HTML是用来表示网上信息的符号标记语言，是一个跨平台语言，能在Windows、Macintosh和Unix平台上工作。HTML已经成为了Web文档信息的标准方法，是构成Web界面的主要工具。HTML语言的标记元素通常分为如下几类：基本标记元素、图形标记元素、表格标记元素、表单标记元素。,表单实例：HTML表单实例用户名：口令：选学内容：WordExcelInternet课程类别：必修选修你的计算机是哪一种类型：PCUNIXMACOTHER备注：请在此填写补充内容,7.4.1HTML,HTML建立表单的运行实例,7.4.1HTML,JavaScriptJavaScript是一种内嵌于HTML中的脚本语言，它是一种基于对象和事件驱动并具有安全性能的脚本语言。基本特点：JavaScript是一种脚本编写语言；是基于对象的语言；简单性；安全性；动态性；跨平台性。,7.4Web界面基本设计技术,alert（这是第一个JavaScript例子!）;alert（欢迎你进入JavaScript世界!）;alert（“今后我们将共同学习JavaScript知识！”）;(弹出一个对话框),7.4Web界面基本设计技术,JavaScript例子,7.4Web界面基本设计技术,JavaAapplet是访问Internet服务器、在Internet上传播的、自动安装的、可作为部分Web文档运行的小应用程序。所有小应用程序都是Applet类的子类Applet类为小应用程序的执行提供了所有必需的支持，提供了装载和显示图像、动画的方法，以及装载和播放语音片断方法经常被用来制作互联网上动画效果的程序设计语言。,7.4.3JavaApplet,放大镜例子：,7.4.3JavaApplet,JavaApplet实现放大镜效果,7.4.3JavaApplet,目前流行的三大服务器端脚本语言是ASP、PHP、JSP。对于Web服务器来说，提供一个接口使其它应用程序能够与之相连成为一种常用的方法。通过这个接口，定制的可执行程序能够接收来自客户端的信息,7.4.4服务器端脚本语言,包括通过点击超链接或在浏览器中键入统一资源定位符（URL）所提出的界面请求的细节。应用程序对客户端的请求能够生成相应的响应，而不是从服务器磁盘上读取文本或标记文件。,7.4.4服务器端脚本语言,ASP（ActiveServerPages），是一个Web服务器端的开发环境，利用它可以产生和运行动态的、交互的、高性能的Web服务应用程序。JSP（JavaServerPage）是Sun公司推出的新一代站点开发语言，它完全解决了目前ASP，PHP的一个通病脚本级执行。JSP可以在Servlet和JavaBeans的支持下，编写出功能强大的Web站点程序。,7.4.4服务器端脚本语言,PHP（HyperTextPreprocess）是一种跨平台的服务器端的嵌入式脚本语言。它大量地借用C、Java和Perl语言的语法，并耦合PHP自己的特性，使Web开发者能够快速地写出动态生成页面。,7.4.4服务器端脚本语言,JSP（JavaServerPage）是Sun公司推出的新一代站点开发语言，它完全解决了目前ASP，PHP的一个通病脚本级执行。JSP可以在Servlet和JavaBeans的支持下，编写出功能强大的Web站点程序。,7.4.4服务器端脚本语言,三者都提供在HTML代码中混合某种程序代码、由语言引擎解释执行程序代码的能力。在ASP、PHP、JSP环境下，HTML代码主要负责描述信息的显示样式，而程序代码则用来描述处理逻辑。,7.4.4服务器端脚本语言,普通的HTML页面只依赖于Web服务器，而ASP、PHP、JSP页面需要附加的语言引擎分析和执行程序代码。程序代码的执行结果被重新嵌入到HTML代码中，然后一起发送给浏览器。,7.4.4服务器端脚本语言,AJAX（AsynchronousJavaScriptandXML）全称为“异步JavaScript和XML”，是一种创建交互式Web界面应用的开发技术，是一种新的架构模式。AJAX尝试建立桌面应用程序的功能和交互性与不断更新的Web应用程序之间的桥梁。,7.4.5AJAX技术,在Web应用程序中可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件。AJAX实质是遵循Request/Server架构，架构的基本流程：创建XMLHttpRequest类(对象初始化)，发送，请求，服务器接收，服务器返回，客户端接收，修改客户端界面内容,7.4.5AJAX技术,“Web2.0中AJAX应用的详细探讨”一文中两个验证通行账号是否存在的例子讲述AJAX在实际中的应用：用文本字符串的方式返回服务器的响应来验证网易通行账号是否存在；以XMLDocument对象方式返回服务器的响应来验证金山通行账号是否存在。,7.4.5AJAX技术,1.创建XMLHttpRequest类2.发送请求3.响应处理4.用文本字符串的方式返回服务器的响应5.以XMLDocument对象方式返回服务器的响应,7.4.5AJAX技术,7.5Web3D界面设计技术,Web3D可以简单的看成是Web技术和3D技术相结合的产物，是互联网上实现3D图形技术的总称。Web3D技术源于虚拟现实技术中的VRML分支。VRML协会正式更名为Web3D协会，并制定了VRML97这一新的国际标准。,7.5Web3D界面设计技术,2004年被ISO审批通过的由Web3D协会发布的新一代国际标准X3D，标志着Web3D进入了一个新的发展阶段。目前，Web3D技术已经发展成为一个技术群，成为网络3D应用的独立研究领域。,Web3D的浏览例子之一,Web3D的浏览例子之二,7.5Web3D界面设计技术,7.5.1VRML,VRML是一种建模语言，可用来描述三维物体及其行为，构建虚拟场景。VRML的基本目标是建立Internet上的交互式三维多媒体，其基本特征包括分布式、三维、交互性、多媒体集成、高度真实感等。,VRML是3D图形和多媒体技术通用交换的文件格式，它描述交互式的3D对象和场景。它不仅应用在互联网上，也可以应用在工程和科学可视化、多媒体、娱乐游戏、互联网3D图形、教育、虚拟社区等领域。由于网上传输的是模型文件，故其传输量大大小于视频图像。,7.5.1VRML,Java3D是Java语言在三维图形领域的扩展，是一组应用编程接口（API）。利用Java3D提供的A