《网站界面设计》PPT课件.ppt

1、,第四章 网站界面设计,网站的板式构成和特点,网站的客户端开发技术,2,4,网站首页的设计,3,网站二级页面的设计要点和方法,网站界面艺术设计,2,网站的板式构成和特点,网页界面的版式构成设计，是将文字、图像、色彩、动画、视频等网页界面的传达要素，根据特定的内容和主题，在网页所限定的范围中，运用造型元素和形式原理进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。 1）分列式布局结构 2）区域式布局结构 3）自由式布局结构,1）分列式布局结构的特点 分列式布局结构是运用最为广泛的商业网页布局结构，因特网上的门户网站和综合类网站绝大部分是这一结构。分列式布局结构一般版面呈长方形，显示效果横窄

2、竖宽，有上下滚动条。 分列式布局结构可分为：整列式、二列式、三列式、四列式、五列式、混合列式。,2）区域式布局结构的特点 区域式布局结构在商业网页布局中运用也很广，它通常利用颜色、线条、文字的断口或插图的变换等手段把网页平面划分为几个规则的或不规则的区域。区域式布局结构版面接近方形，一般没有滚动条或滚动条很短。,3）自由式布局结构的特点 自由式布局结构有静态和动态两种形式。 静态布局通常把网页当作平面出版物创意设计，将信息与背景画面融为一体，没有清晰的界限区分，设计好的网页图片通常采取分割整张图片生成网页的形式去制作。此类页面设计通常精美华丽，视觉效果较好，个性化强，但不适用于信息量大的站点。

3、 动态布局通常采用流行的Flash动画作为表现形式。由于Flash强大的功能，这种排版形式变化多样，视觉冲击力强，整体效果好。,另外，也可以将网页布局分为：“国”字形布局、“匡”字形布局 、“三”字形布局、“川”字形布局 、海报型布局、Flash布局、标题文本型布局 。,各类版式构成设计的开发工具：,网站的客户端开发技术,1）Html语言 HTML它是一种文档标记语言，支持超链接，可由浏览器呈现。 HTML的优点有： HTML允许任何使用任何浏览器访问（通用客户）；HTML是一种小型语言，易于学习；浏览器容易获得；HTML输出相对简单。,2）CSS语言 CSS（Cascading Style

4、Sheets）是一种风格语言，它允许为不同的显示部分建立不同的字体，页空白或行空白等。使用CSS可以使整个站点的所有页面看起来具有统一的风格。 优点： CSS提供HTML对象的X，Y，Z位置的放置。 因为只有文本被传送，因此具有较快的下载速度，容易建立和维护网站范围的风格。 缺点： 早期的浏览器可能不支持CSS。 浏览器可能不能正确实现标准。,3）JavaScript/JScript/VBScript 客户端的脚本（script）是指可以伴随文档下载到用户端或直接嵌入文档中的，用脚本语言编写的程序。脚本程序在文档载入或文档中某一事件被激活时执行。它为开发者提供了制作动态交互的网页的机会。 优点

5、：允许域的预处理。如在客户端检查用户输入是否正确，使用脚本是最快的办法；下载速度较快；提供页面对象的访问 。 缺点：有多种脚本语言的选择和版本；早期浏览器可能不支持；用户可以禁用脚本。,网站的首页设计,首页是网站的形象页面，一个网站能否吸引浏览者留在该站中漫游，全凭首页设计的效果。所以，首页设计对于任何网站都是至关重要的。 要掌握网站首页的设计方法，熟悉首页的功能模块，构造出主题鲜明、版面精彩、立意新颖的网站首页。,1、首页的功能模块 首页，从根本上说就是全站内容的目录，也是一个索引。但只是罗列目录显然是不够的，设计好一个首页首先需要确定首页的功能模块。一般的站点都需要页头、页中和页尾这三个模

6、块。,(1)页头 页头包括网站名称、Logo、广告条(banner)、导航等板块。页头用来标示网站，体现网站主题。它可以用企业的名称、标语、徽号或图像来集中、概括地反映企业的经营理念和服务定位。导航提供了对关键页面的简捷链接，使用户能够迅速地到达他们所需信息的其他页面上。,(2)页中 页中包括公告与新闻、产品推荐、广告条、搜索、友情链接等板块。为保持网站的新鲜感，应时刻确保主页提供的是最新信息。可以以大字标题宣布新消息，也可以定期改变主页上的图像，或更改主页的式样。,(3)页尾 页尾包括版权与联络信息、计数器等板块。在首页上标示一句简短的版权声明，用链接方法带出另一个载有详细使用条款的页面，这

7、样可以避免首页显得杂乱。在页面的底部可以放置简单的联系方式。,2、首页设计的要点 (1)主题明确，重点突出。要能使用户通过网站首页明确企业的主要任务。要达到这个目的，最好在文本或图像中设置阐明主题的句子视觉兴趣点，这一点对于绝大多数的企业来说是很重要的。国内许多企业的首页设计平庸，既无特色又显呆板，原因就是其缺乏让人“神往其间”的视觉兴趣点。,(2)页面简洁，重在创意。设计并不是再现具体的物象和特征，它要表达的是一定的意图和要求，在适当的环境里 为人们所理解和接受。它以满足人们的实用和需求为目标，因而要求简练，准确。页面创意涉及诸多领域，独特的创意会使首页极具吸引力，令用户深入浏览。,(3)技

8、术合理，浏览快捷。上网浏览需要的是快速、有价值的信息。在首页设计中充斥许多纯为了炫耀技术的东西，如多个风格迥异的动画（缺乏美感甚至是与主体无关的动画），还有大量的利用Javascript和动态HTML的技术，这样的首页会造成页面的混乱，不管是从功能上还是从形式上都是不可取的。目前，商业网站首页的简洁化已经成为设计趋势。,3.首页设计的方法 首页设计需要经过以下几个基本步骤。 （1）构思布局 （2）绘制草图 （3）方案细化 （4）修整定稿,某网站可视化设计分析,DIV结构如下：body /*这是一个HTML元素*/#Container /*页面层容器*/#Header /*页面头部*/#Page

9、Body /*页面主体*/#Sidebar /*侧边栏*/#MainBody /*主体内容*/#Footer /*页面底部*/,实训：网站Logo和首页设计 通过学习能够掌握网站的设计要点，为杭州某数码产品公司设计出合理、美观、大方的首页。 步骤一：分组，自由组合（最多2人一组） 步骤二：收集、查找资料（文字图片） 步骤三：首页的设计与修正 源代码下载中心 ,要求： 1、版面设计结构新颖，布局合理、规范、有创意，层次分明。作品主题风格突出，具有商业气息 2、Logo设计精美、独特，与网站的整体风格相融。 3、Banner设计内容醒目、美观，视觉效果好。 4、导航设计层次清楚、合理，操作便捷。

10、5、页面字体美观大方、大小适宜，文字图片等编排整齐。图象设计精练筒洁、颜色协调、风格吻合、布局合理。造型元素的综合运用，点、线、面合理搭配。 6、首页体现搜索、商品显示、用户登录等功能。,网站的二级页面设计,通过本节的学习熟悉网站二级页面的组成，掌握网站新闻、产品、客户支持等二级页面的设计方法，构造出站点整体、风格统一的网站页面。,1.新闻页面设计 网站都应有一个新闻页面，既可以用来动态发布有关新产品或新开发项目或公司活动的情况，又可以作为公司的活动年表。 建立新闻页面，首先可以在首页上编写并设置可点击的新闻标题，然后再编写完整的新闻页面，这些页面通过超链接与新闻标题相连。在设计新闻页面时，应

11、保持清晰、简单、快捷的特点以便于打印，不要使用那些不利于任何文本阅读的背景图片和颜色。,1) 页面的新闻标题 (1)新闻标题的功能 提示新闻内容。新闻标题是以最精练的文字将新闻中最重要、最新鲜的内容提示给读者。 评价新闻内容。标题不但简明扼要地介绍新闻内容，而且能够体现评价新闻内容。一则好的新闻标题具有鲜明的思想性，不仅能向读者提示新闻内容，而且能帮助读者理解新闻内容的性质和意义。,(2)新闻标题组成的要素 用一个动词来描述该新闻的目的，如说明产品或公司发生了什么。 涉及的产品或企业，着重表示该新闻直接涉及到的产品或企业。 用提示语来激发浏览者的兴趣，用字样表示新闻是最新的或加一个“new”图

12、标。 将新闻日期置于标题的结尾。,(3)新闻标题的版面布置 主页中新闻标题的版面布置要保持简单、清晰、引人注目，通常可采用以下几种方法： 新闻标题的排列应按降序进行排列，最近的新闻在开头顶部，最旧的新闻在底部。 可在新闻标题前采用项目符号和编号或小图标作点缀，增加页面的可读性。 可将新闻标题的列表放在一个上下滚动的窗口中以容纳更多的新闻。,2)新闻页面 新闻页面要满足易于导航的要求，首先要方便用户从新闻页面到网站中其他内容页面的跳转，其次还要方便用户迅速地到达其他的新闻页面。通常可以通过在新闻页面建立以下几种方式来实现。,(1)建立科学的菜单栏导航系统以便于用户实现新闻页面与网站中其他页面间的

13、无缝跳转。 (2)建立与前面或后面新闻的链接，便于用户浏览。 (3)通过检索和搜索引擎使用户可根据时间或内容查看其感兴趣的新闻。 (4)在新闻页面中包含与该新闻有关的图片、声音或其他多媒体文件。 (5)将新闻中出现的关键字或人名链接到其因特网页面上或其E-mail地址。 (6)添加客户、舆论对该新闻稿主题的见解，丰富新闻内容。,2、产品页面的设计 网站产品页面通常采用信息分层、逐层细化的方法展示公司产品或服务。所谓信息分层就是按一定的分类方法将它放在不同的页面上详细介绍，从而允许用户能按需要地找到最适合他们需要的信息层。比如，首先建立一个产品价格清单(第一层)，该清单允许用户为每一项选择一个产

14、品页面(第二层)，这个页面又能引出具有详细信息的页面(第三层)。,我们通常把产品目录的主要分为三层。 第一层：首先建立一个产品价格列表，该表使用户能够全面浏览公司的产品。 第二层：对应每个产品的页面，该页面将对此项产品的有关信息进行全面的介绍。 第三层：产品更深层次的信息，如果浏览者还要深入了解该产品的技术细节、设计维护等，可以通过本页面获得这些信息。,3.客户支持页面设计 在设计客户支持页面时，尽可能地站在客户的角度，预测每种潜在的需要，向客户提供有用信息，使他们对企业和产品产生亲切感。我们利用因特网这种服务工具，目前，因特网的最佳用途可能是与消费者通信并为其提供服务。许多用户上网并不是要购

15、买，而是寻求帮助，因特网站点应尽其所能为客户提供服务和技术支持。令人满意的服务能更好地满足客户需求，这种投资必定会获得回报。 支持页面内容不限制，既可以帮助用户了解购买方法，也可以对产品的行业信息进行咨询。,4.企业信息页面设计 网上企业的特点之一是资信不易确定，这是网上购买者不轻易下订单的主要原因之一。因此，企业应尽量提高企业资信的透明度，让浏览者了解企业的状况。企业信息页面能达到这个目的，它主要包括公司状况、发展规模、与投资者关系等页面。,网站的界面艺术设计,网站在满足网页功能需要的前提下，需要有针对性的采用一些美的形式。把美的形式规律同现代的网页设计的具体问题相结合起来，使网页更加有生气

16、，更吸引人。通过本节的学习熟悉网站界面艺术设计形式美的规律，掌握界面设计的创意方法，构造出视觉冲击力清晰、张力巨大的商业网站。,1）统一和变化 统一是个部分之间的内在关联，变化是各个组成部分之间的区别。在网页设计中运用统一与变化的规律，是处理形象和组织的对立统一过程，完美的网页设计，形式上要丰富有条理；组织上要有秩序而不单调，不混乱。在网页设计中恰当的利用这种规律，在我们把大量的信息塞如到网页上去的时候，考虑怎样把它们合理的用统一的方式来布局编排，页面丰富而更有生气，使网站作品整体感强同时又有变化，看起来就不感到枯燥。,2）条理与反复 条理是“有条不紊”，对事物有规律、有秩序的组织和安排，是使

17、物象单纯化、统一化。反复是“来回重复”，是有规律的连续与延伸，有组织的变化与扩展并加以归纳，概括而富于条理化。条理与反复即有规律的重复，条理与反复的原则是页面整体的秩序美的基础，是变化中的统一，也是运动发展中求得协调一致的表现方式，由它可以演化出多种多样的图形变化。,3）对比与调和 对比是指在质或量方面相互差异甚大的两个要素同时配置在一起时，两者之间有相互作用的性格，更加令人感到彼此强烈地相互衬托。对比是为了使主题画面具有变化和生气而运用的方法。而调和是构成美的对象在部分与部分之间的相互关系。它无论是在质的方面还是量的方面都没有矛盾，各部分所传达给人的感受和意念之间不是相互分离或排斥，而是一个

18、部分多样性的整体统一来表现美的状态。,4）对称与均衡 对称是指形态以某一点为中心，其左右或者上下因同等、同量、同形而形成的平衡。对称的形式法则是自然法则在设计上的具体体现，对称有以中轴线为轴的左右对称，以水平线为轴的上下对称和以中心点为基准的放射对称。对称的网页设计稳定、庄严、整齐、秩序、安宁、沉静，如同中国古代宫殿一样庄重、严肃，体现了一种古典主义的风格。当然在设计时片面的追求静止的对称，那时僵硬的、不生动的，同样会失去美感。均衡是指版面以某一点为中心，左右或者上下等量不等形的配置。,5）节奏与韵律 运动中的事物都具有节奏和韵律的形式规律。节奏是指单体按照一定的条理、秩序、重复连续地排列，形成一种律动形式。节奏本身没有形象特征，只是表明事物在运动中的快慢、强弱以及间歇的节拍，带有机械的秩序美。韵律是一种规律性的变化，是比节奏更高一级的律动。韵律是每个节拍间运动所表现的轨迹，带有形象特征。在具体的网页设计的运用中，按钮的编排就经常会遇到这个问题，做得好的按钮能够使排在一起的诸多按钮富有音乐般的美感，同时