界面设计课件

《界面设计课件》由会员分享，可在线阅读，更多相关《界面设计课件（37页珍藏版）》请在金锄头文库上搜索。

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

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

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

4、中心 2一致性 3简洁与明确 4体现特色 5兼顾不同的浏览器 6明确的导航设计,9,Web界面设计基本原则,1以用户为中心 一方面，不同类别的Web网站，面向的访问群体不同；同一类型的Web网站，用户群体也有年龄、行业等差别。因此，Web界面的设计只有了解不同用户的需求，才能在设计中体现用户的核心地位，设计出更合理、能满足用户需求的界面，以吸引用户。,引自 2015.02.01,10,1以用户为中心,兼顾用户习惯 Mac OSX：新邮件 图标在正中间 Iphone：新邮件 图标在右下角 Ipad: 新邮件 图标在右上角,11,1以用户为中心,设计者也需要考虑目标用户的行为方式。,12,Web界

5、面设计基本原则,2. 一致性 内容一致：Web网站显示的信息、数据等 形式一致：Web界面设计的版式、构图、布局、色彩以及它们所呈现出的风格特点,13,Web界面设计基本原则,Web界面自身的风格也要一致性 各页面使用相同的页边距；文本、图形间保持相同的间距； 各页面上都放上公司或网站的统一标志； 各页面应当使用相同的导航图标； 页面中的每个元素与整个页面以及站点的色彩和风格上保持一致性； 文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。,14,Web界面设计基本原则,3. 简洁与明确 使用一个醒目的标题，这个标题常常采用图形来表示，但图形同样要求简洁。 限制所用的字体和颜色的数目。 界

6、面上所有的元素都应当有明确的含义和用途，不要试图用无关的图片把界面装点起来。 尽量减少浏览层次,引自,15,Web界面设计基本原则,4体现特色 清楚地了解Web网站背景、体现主题和服务对象的基本情况，选择合适的表现手法，展示关键信息和特色内容，并形成独特、鲜明的风格。,图7-6 清华大学学校概况主页，,16,Web界面设计基本原则,5兼顾不同的浏览器 不同浏览器类别和版本在功能支持上有所区别,17,5. 兼顾不同的浏览器,PC浏览器,iPad浏览器,iPhone浏览器,引自 2015.03.02,18,5. 兼顾不同的浏览器,PC浏览器,iPad浏览器,iPhone浏览器,引自 2015.03

7、.02,19,Web界面设计基本原则,6明确的导航设计 网站首页导航应尽量展现整个网站的架构和内容；另外导航要能让浏览者确切地知道自己在整个网站中的位置，可以确定下一步的浏览去向。,20,Web界面要素设计,1. Web界面规划 2. 文化与语言 3. 内容、风格与布局、色彩设计 4. 文本设计 5. 多媒体元素设计,21,1. Web界面规划,Web界面的布局、元素的设计都要以“网站的目标和用途”这个目标为中心。 将网站作为一种文化、一种艺术作品看待，确定Web界面的设计风格，力求在设计Web界面时追求艺术效果与美感。,22,2. 文化与语言,全球服务型的网站还要考虑如何适应不同国家的不同类

8、型的文化与语言环境。 在设计Web界面时，要将选择语言版本的功能放在网站的主页，并以不同版本的语言进行标注。,图7-9 google网站（，2009年农历七月初七）,引自,23,3. 内容、风格与布局、色彩设计,Web界面的内容不仅要遵循简洁明确的原则，也要符合确定的设计目标，面向不同的对象要使用不同的口吻和用词。 网站的标志、色彩、字体、布局、交互方式、内容价值、存在意义等。 Web界面布局就是指如何合理地在界面上分布内容。 1）“同”字形结构布局 2）“国”字形结构布局 3）左右对称布局 4）自由式布局 4色彩 中国红,24,实例,25,实例,引自 2015.03.02,26,实例,27,

9、4. 文本设计,文本不要太多，以免转移浏览者注意力。 要选择合适的颜色，以便使文本和其它界面元素一起产生一个和谐的视觉效果；文本的颜色应该一致，让用户可以容易地确定不同文本和颜色所代表的内容。 选择的字体应和整个界面应融为一体。 网站中可能会使用多种字体，但是同一种字体应该表示相同类型的数据或者信息。 合理设置页边框、行间距等。 应该重视标题的处理，把标题排版作为界面修饰的主要手段之一。标题一般无分级要求，其字形一般较大，字体的选择一般具有多样性，字形的变化修饰则更为丰富。,28,实例,下划线主要区分是否有链接,29,实例,视觉显著性,引自， 2015.03.02,30,5. 多媒体元素设计,

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

11、速度重复运动。许多标志广告就是动画GIF。,32,WEB中的动画 JavaApplet是经常被用来制作互联网上动画效果的程序设计语言。 Macromedia Flash文件在网站设计中被广泛地接受。 Flash引入了一种新的动画形式。它在带宽有限的情况下提供了媒体丰富的内容。 Flash允许设计者创建吸引人的动画网站，为通常的静态站点提供了一种新的选择。,33,WEB中的动画 全景图作为虚拟实景的一种重要表现形式，会让使用者有进入照片中的场景的感觉：全方位；真实的场景；三维立体的效果。 ,34,7.4 Web界面设计的评估,Web 界面设计的评估有其独特的特征。 为什么要对Web进行可用性测试

12、 如果某个站点不好用，用户就不会再去用它。,35,Web站点的可用性,可用性是指对用户来说软件或Web站点是否易用、高效和使人感到满意。 衡量可用性的5个方面： 易学性：当用户第一次使用设计时完成基本任务的难易； 有效性：一旦用户学习了这个设计，执行任务的快慢； 易记性：当用户一段时间不用此设计后再来使用，再次熟练的难易； 错误：用户会犯多少错误，这些错误有多大的影响，从错误中恢复的难易； 满意程度：使用这个设计让人感到何种程度的愉快。,36,常见Web设计错误,1目的描述不清楚 2存档内容换上新的地址 3内容不标注日期 4对大图片的缩小不能反映其真实内容 5过分详细的ALT文本 6不支持“如果-那么” 7无法通过属性过滤的长长的列表 8产品只能按照品牌进行排序 9过分限制的表单条目 10页面上包括指向自己的链接,37,习题,7.1简述Web设计的原则。 7.2 Web界面一般包括那些主要元素以及所产生的作用。 7.3用HTML实现交互界面。 7.4用JavaScript或JavaApplet写程序，并嵌入HTML网页。 7.5利用VRML构造一个模型，并通过浏览器够从各个角度观察此模型，能使之简单地运动。 7.6利用Java3D设计简单三维迷宫场景。,