第5章Web界面设计课件.ppt

《第5章Web界面设计课件.ppt》由会员分享，可在线阅读，更多相关《第5章Web界面设计课件.ppt（39页珍藏版）》请在三一办公上搜索。

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

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

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

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

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

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

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

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

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

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

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

12、的特征。为什么要对Web进行可用性测试如果某个站点不好用，用户就不会再去用它。,36,Web站点的可用性,可用性是指对用户来说软件或Web站点是否易用、高效和使人感到满意。衡量可用性的5个方面： 易学性：当用户第一次使用设计时完成基本任务的难易；有效性：一旦用户学习了这个设计，执行任务的快慢；易记性：当用户一段时间不用此设计后再来使用，再次熟练的难易；错误：用户会犯多少错误，这些错误有多大的影响，从错误中恢复的难易；满意程度：使用这个设计让人感到何种程度的愉快。,提问与回答用思想传递正能量,结束语CONCLUSION感谢参与本课程，也感激大家对我们工作的支持与积极的参与。课程后会发放课程满意度评估表，如果对我们课程或者工作有什么建议和意见，也请写在上边，来自于您的声音是对我们最大的鼓励和帮助，大家在填写评估表的同时，也预祝各位步步高升，真心期待着再次相会！,谢谢聆听THANK YOU FOR LISTENING演讲者：XX 时间：202X.XX.XX,