网页布局设计

时间：2023-10-09 00:06:02 | 来源：网站运营

时间：2023-10-09 00:06:02 来源：网站运营

网页布局设计：

设置网页尺寸是进行网页设计的第一步。网页尺寸是指网页的高度和宽度。网页的高度一般没有限制，可根据网页内容来灵活设置。网页宽度主要分为定宽和自适应宽度两种类型。其中，定宽是指网页内容区域（版心）的宽度固定；自适应宽度是指网页内容区域的宽度自动适应浏览器（显示器）的宽度，随浏览器的宽度而变化。

网页美工在设计网页前，应考虑页面是定宽还是自适应宽度。如果是定宽，应根据主流显示器的分辨率来设置效果图中的网页宽度。目前，主流显示器的分辨率如图3-1所示，因此，可将网页宽度设置为1 920、1 600、1 440、1 280、1 140、990等像素。其中，如果要让网页显得大气并具有现代感，可将其宽度设置为1 440像素以上；如果要让网页兼顾尺寸较小的显示器，则需要将其宽度设置得小一些，如990或1 024等像素。

如果网页使用自适应宽度模式，可直接使用1 920像素或更大的宽度设计。

网页常见布局类型

网页布局的类型很多，下面简要介绍一些常见布局类型。

国字型网页布局通常被门户、购物类等内容丰富的大型网站所使用。其基本布局形式是将网站的Logo、导航栏及Banner等置于顶部；下方安排网页的主体内容，主题内容的左、右两侧分别是导航菜单、广告或其他栏目；最后由页尾形成外框底部，将主体内容包围。

拐角型布局与国字型布局类同，网页顶部都是网站的Logo、导航栏和Banner（Banner也可位于内容区）。不同的是，拐角型布局的页面左侧或右侧是纵向导航菜单，对侧为网页主体内容，即通过横向导航栏与纵向的导航菜单形成拐角，包围网页主体内容。拐角型布局同样适合购物类、门户类等网站使用。

POP引自广告术语，是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，如图3-4所示。POP型布局的网页常用于时尚类网站首页。其优点是页面优美，具有视觉冲击力，缺点是网页打开速度慢。

标题文本型布局是指页面内容以文本为主。这种类型的网页顶部通常是标题，下面是正文，常用于注册、登录、评论或文章阅读等信息简洁的页面

顾名思义，对称型网页布局是指采取左右或者上下对称的布局。对称型布局如何应用得到，能使页面形成极佳的视觉冲击感。图3-6所示是典型的对称型网页布局，该网页无论是图像的内容还是版块的大小，都保持着人与马一一对称的关系。这样布局使页面极具震撼力，能给浏览者带来深刻的印象。

全景型是目前十分流行的网页布局形式，是指使用全景图像或动画作为网站首页。该类型的网页高度通常只有一屏大小，浏览者可通过导航切换到其他页面。全景型布局的网页不仅时尚大方，而且有很强的视觉冲击感，多用于宣传企业形象

组合型网页布局多用于摄影网站或需要大量图片说明的网站，是指将等大或大小不一的多张图片组合、排列在网页中。需要注意的是，在选取图片时应事先统一图片的明度，让组合起来的图片具有整体感，否则密密麻麻拼在一起的图片会让人眼花缭乱。图3-8所示为日本的一家旅游网站的网页，它所选用的图片虽然大小不一，但色调是相同的。缤纷的色彩十分符合该行业特点，同时也能吸引浏览者的视线。

一家律师事务所的网站首页，该页面通过大小不一，但错落有致的矩形版块将导航内容散开分布在页面中。页面整体散而不乱，极具设计感。

分割型布局是当今网页布局的一种流行趋势。常见的分割布局方式有斜线分割、块面分割、主题分割、等距分割等。使用分割布局的网页主次分明，形式感极强，能够将内容的重要性和层次性体现在网页的结构上，从而引导浏览者按顺序进行阅读

扁平化是目前流行的网页设计趋势之一，其特点是去掉页面中多余的透视、纹理、渐变及3D效果等元素，让“信息”重新作为网页核心被凸显出来。同时，在设计元素上强调极简化和符号化，让页面中的内容更容易被聚焦，从而带给用户更直观的浏览体验