资源简介

(共18张PPT)
第3章
网页布局设计
3.3
网页布局技巧
网页的精彩与否不仅在于网页的色彩搭配、文字变化、图像处理，还在于网页的布局。网页布局是制作网页的重要环节，它包括对页面中各版块的位置、大小、间距以及叠加关系等方面的规划。下面介绍几种常见的网页布局技巧。
当网页中2个版块内容之间有所关联时，通常会将2个版块居中对齐进行布局，如图3-13（a）所示，这样的布局方式会导致版块之间过渡生硬；而图3-13（b）所示的延伸布局方式打破了2个版块之间的界限，使2个版块出现交叉，从而不仅增强了网页的活力，而且使两个版块的信息更有连接性，效果如图3-14所示。3.3.1延伸图3-14 采用版块延伸处理的网页（a）（b）图3-13 版块的对齐与延伸在对网页布局时，常用直线分割版块。这样的布局方式虽然不会出错，但过多的直线分割会让画面显得死板，如图3-15（a）所示。而通过改变分割线形状，如将直线改为曲线、折线等，能有效地解决这个问题，如图3-15（b）所示，效果如图3-16所示。3.3.2曲线图3-16 采用曲线分割的版块布局（a）（b）图3-15 用直线和曲线分割版块对称型是目前比较流行的网页布局方式之一，采用这种布局的页面简洁大气，能够有效避免因图片与文字叠加造成的混乱，但由于对称版块的颜色、样式不同，分割线会十分明显，导致版块间过渡生硬，如图3-17（a）所示。此时，可将与版块内容相关的元素置于2个版块之间，对版块进行过渡处理，如图3-17（b）所示。3.3.3过渡图3-17 版块之间过渡生硬和过渡自然（a）（b）图3-18所示的网页中，设计师将产品图片横跨2个版块，巧妙地打破了生硬的分割线，让版块过渡更为柔和，并且为页面增加了活力。图3-18 采用产品图片过渡的对称布局对于POP型的页面布局来说，将图像中的所有信息集中放在版块中的某个位置会使页面显得小气，如图3-19（a）所示。而通过提炼信息内容，保留主要信息，隐藏次要信息能使页面更加大气，如图3-19（b）所示。3.3.4隐藏图3-19 版块内容的全显和部分隐藏（a）（b）图3-20所示是一家设计类网站，该网站以精简化的图片作为首页的背景。图片只保留最具特色的部分，将重复、次要的部分置于屏幕外，从而更有利于突出重要信息，同时也让画面有一定的延伸感，显得更加大气。图3-20 隐藏次要信息的POP型页面网站的宣传版块通常使用图文结合的形式进行宣传，此时，使用图文平铺是最基本的信息排列方式，它能使页面显得整洁利落，如图3-21（a）所示。如果将图片、文字等信息进行层叠，打破传统的左右、上下布局，能增加画面的透视与层次关系，使枯燥的图文说明方式更具设计感，如图3-21（b）所示。3.3.5层叠图3-21 版块的平铺和层叠（a）（b）图片和文字的层叠布局虽然可以让画面充满动感，但需要注意的是，层叠方法应做到“形散神不散”，页面看似随意，实际上是经过设计师精心思考过的。在图3-22所示的页面中，人物图片与其顶部的文字是左对齐，而蝴蝶图片与其右侧的文字是底对齐。图3-22 采用层叠图文的版块布局效果在网页布局时通常会遇到级别相同的多个版块，将这些版块一字排开，并将各版块的间距保持相同能给人规矩、整齐的感觉，如图3-23（a）所示。如果将同级别的版块错位排列，可提升页面的亲和力并增加动感，如图3-23（b）所示。3.3.6错位图3-23 同级别版块的对齐和错位（a）（b）在图3-24所示的页面中，将3张图片进行波浪式的错位排列，虽然只是稍微改变了水平对齐的方式，但是立刻让画面充满了韵律感。图3-24 采用错位排列版块的页面布局
3.4
课堂案例——分析企业网站页面布局
网页设计公司的设计师小杨接到一家电子产品销售公司网站的设计项目，该公司的项目负责人说：“我公司是一家私营企业，主要从事电子产品的代销、批发等工作。现需要制作一个企业网站，主页内容包括首页、新品上市、产品展示、热卖配件几个主要导航项。此外，还需加入登陆、购物车、收藏、评论等功能。要求网站页面干净大气，分类清晰，使消费者能够轻松地找到所需信息。”图3-25所示为小杨根据客户描述规划的网站首页基本布局图。该布局图主要由图像、文字、浮动导航几个色块组合而成，简洁明了地展示了网页的基本结构和图文比例，并且直观地表现了Logo、导航栏、Banner、主体内容和页尾版块的位置。图3-25 网页的基本布局网站Logo与导航栏网页Banner新品展示热卖展示行业资讯网页页尾浮动导航（登录、购物车、收藏、评论）在设计时，小杨将顶部导航栏与网站Banner的高度之和设定为950像素，使2个版块组成约一屏的高度，目的是让浏览者感受到Banner带来的强大视觉冲击；然后将新品展示版块与热卖展示版块依次排列，并控制各版块的间距，给人规整、简洁的感觉，便于浏览者挑选商品；最后添加一个资讯版块，用来放置与行业和本企业相关的咨询。此外，右侧的浮动导航中包括登陆、购物车、收藏、评论等功能，既保证了页首导航栏的简洁，又能始终为浏览者提供导航服务。根据网页的布局结构，小杨结合该企业的商业模式和企业性质，对各版块进行设计和制作，最终完成的网页效果如图3-26所示。图3-26 网页效果图提 示清晰、规律的网页布局虽然能够使网页内容一目了然，降低浏览者的阅读障碍，但中规中矩的网页布局也会给人机械、古板的感觉，因此，应在满足网站基本功能需求的前提下多考虑一些创意，提高用户的浏览体验。课后练习（1）网页的定宽和自适应宽度分别指什么？常用的网页宽度有哪些？（2）列举几个常见的网页布局类型，说明其特点。（3）从网上搜集几个知名网站的主页和其他页面，分析其布局类型。（4）为课堂案例中提到的电子产品销售公司网站首页重新设计一个布局（可利用Photoshop设计或在纸上绘制）。
THANK YOU!

展开更多......

收起↑