第5章 家电家居网站.pptVIP

第5章 家电家居网站 5.1 背景概念 家电家居类网站主要是介绍和展示家电、家居等人们比较关注的信息和事物的网络平台，因此在设计风格上一般要求贴近生活，以更好地体现产品的价值。家电家居类网站除了发布家电家居行业的动态、供求等信息，还发布自己企业的产品，包括推广和展销产品的功能、亮点等，让用户可以方便、及时地了解产品动态。 5.2 实例分析 本章实例介绍的“长盛”网是一个企业网站，如图5-3所示。该 网站主要发布和推广长盛公司自己生产的家居、家电产品，主 要栏目分产品与服务、如何购买、客户服务、公司简介。由于 公司产品信息比较多，所以网站设置了栏目下拉菜单，以便更 有针对性的细分出子栏目，让浏览者能够很容易地找到自己感 兴趣的内容。 家电的设计工艺、各种家居营造的环境不仅可以给人强烈的美 感，往往还能体现出某种风格和气氛，给人以强烈感染。所以 ，要让网页和产品给人的视觉感受相吻合，在网页界面设计上 需要特别注意色彩搭配和布局规划。 下面将介绍一下本实例的配色方案和布局结构。 5.2.1 色彩分析 本网站使用饱和度较低的橄榄色至明度较高的银灰色渐变作为背景，给人一种安逸、和平的感觉。主色调选用橄榄灰和红色，在视觉上传达出强大、活泼和绚丽的意境，使页面表现的更为自信。 色彩可以左右人们对空间和光线的感觉，可以表达冷热、新旧或远近。哪怕是细小的色调变化也可使整个页面显得更加温暖些或更加宽大一点。用浅色和灰色进行遮光在感觉上可以使小空间变大，暖红色、暖绿色和橘黄色可以使房间具有亲密和好客的气氛，页面Banner条上的零星 绿色块点缀正体现了这点。 黑色和白色是比较大众的色彩，一般情况下，除了需要突出显示的内容外，其他文字均使用黑色或白色。本实例的链接网址、日期文字使用红色，其他文字使用的是黑色和白色 5.2.2 布局分析 依据导航的排列位置，该网站属于顶部导航的页面分割的复合结构页面布局，复合结构的优点在于使内容信息量大、菜单结构复杂的网站结构变得更加合理，这也是常用的页面布局类型。因为该网站设置有主栏目下拉菜单以及Banner条下方的“产品与服务”“商务合作”“关于常盛”的二级导航。另外，如前面章节中介绍到的，位于顶部导航对下方内容区域造成的影响是最小的，便于调整网站导航和内容区域的比重。该网站的顶部导航宽度设置的是100%，与浏览器的宽度相同，设计得非常简洁，下方的内容区域显得更加丰富、精彩 在内容区域的结构上可以很明显地看出“色彩块”：Banner区域、“产品与服务”等导航区域、企业动态区域、尾部区域，各个区域的风格设计都成矩形，结构层次非常清晰明了。尾部区域的色彩与顶部的背景相呼应，使页面具有整体性。 5.3使用Photoshop软件设计版面效果 该网站的版面给人一种大气、自由奔放、色彩绚丽的感觉，在设计上并无特别复杂的技巧，而是保持简单的信念，大胆而自由地运用色彩、造型，按照策划思路精心编排即可设计出不错的效果。 网站的主体内容采用了一种鲜明的色彩设计，并配合简洁的布局规划，突出了信息的集中性。下面将介绍在Photoshop软件中设计首页版面效果的步骤。 5.3.1设计主内容区域 任何一项设计都需要事先进行规划、取材、构思等步骤，然后在将这些资源进行加工、整合，创造出符合实际需求的效果。同样，网页设计也不例外，在进行具体设计之前需要收集相关的素材，然后再进行版面规划、元素设计等操作。下面介绍设计“长盛”网站的具体操作步骤。 首先使网页居中显示，然后再规划出头部区域Banner区域、内容区域和尾部区域的大致位置。 设计主导航栏。使用【矩形选框工具】 按照参考线的位置框选范围。 单击[渐变工具]，并在【渐变编辑器】对话框中设置渐变色。 按住【Shift】键不放，在选框范围内由上至下填充线性渐变。