网页的布局类型有哪些（网页的布局类型有哪些种类）

大家好！今天让创意岭的小编来大家介绍下关于网页的布局类型有哪些的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

创意岭作为行业内优秀的企业，服务客户遍布全球各地，相关业务请拨打电话：175-8598-2043，或添加微信：1454722008

本文目录:

• 1、网页常见布局

• 2、用一篇文章，带你了解12种常见的网页布局设计

• 3、网页制作的结构布局有哪些？

• 4、网页布局方法

一、网页常见布局

在版式设计当中，主要有以下几种排版形式： 重心型、中轴型、分割型（分上下分割和左右分割）、倾斜型、骨骼型、满版型、曲线型、对称型、三角形、四角型和自由型 。这几种形式会比较常出现在网页设计当中，所以我们一一来分析以下几种排版方式。

1、重心型

重心型版式的网页容易让浏览者产生视觉焦点，界面效果强烈且突出。重心型又可以分以下三种形式。

A、直接以独立而轮廓分明的形象占据版面中心。

ivanovoiskozh俄罗斯企业网站

B、向心：视觉元素向版面中心聚拢的运动。

bdsalads食物食品网站

C、离心：犹如将石子投入水中，产生一圈圈向外扩散的弧线运动。

Twomari炸鸡食品美食网站

2、中轴型

中轴型的网页设计，是将图形做水平或垂直方向的排列，文案以上下或左右配置。水平排列的版面会给人稳定、安静、和平与含蓄之感。垂直排列的版面给人强烈的动感。垂直排列的这种排版方式比较常出现。

INSPOT激发你的品牌 韩国设计公司网站

3、分割型

分割型主要可以分成 上下分割和左右分割 。相比较，左右分割型的网站会比较常见。

A、上下分割

上下分割，顾名思义，就是把整个版面分为上下两个部分。可以在上半部或下半部配置图片，另一部分则配置文案。配置有图片的部分感性而有活力，而文案部分则理性而静止。上下部分配置的图片可以是一幅或多幅。

Sojournal时尚家居企业网站

B、左右分割

左右分割，就把整个版面分割为左右两个部分，分别在左或右配置文案。当左右两部分形成强弱对比时，则造成视觉心理的不平衡。这仅仅是视觉习惯上的问题，也自然不如上下分割的视觉流程自然。不过，倘若将分割线虚化处理，或用文字进行左右重复或穿插，左右图文则变得自然和谐。

AVEDA美容美发时尚网站

4、倾斜型

倾斜型的网站比较少见，这样的网站偏个性化一些，多在一些设计公司或是运动品牌的网站中出现。版面的主体形象做倾斜设计，造成版面强烈的动感和不稳定因素，这种设计比较引人注目。

2016CHUNGNAM韩国体育网站

5、骨骼型

骨骼型比较在传统网站当中比较常见，它是一种规范的界面分割方法。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。一般以竖向分栏为多。说到这个，就可以想到栅格系统，实际上这两者是差不多意思的。

骨骼型的网站会给人以严谨、和谐、理性的美。每一个区块经过相互混合后的版式，既理性、条理，又活泼而具弹性。

ZUI框架

6、满版型

满版型的网站近几年也越来越多见，通常是版面以图象充满整版，主要以图象为诉求，视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图象上。满版型给人以大方、舒展的感觉。

水族馆度假村俱乐部

7、曲线型

图片或文字在版面结构上作曲线的编排构成，产生节奏和韵律。

Transfer Window

8、对称型

对称的版式给人稳定、庄重理性的感觉。对称有绝对对称和相对对称。一般多采用相对对称。以避免过于严谨。对称一般以左右对称居多。

DeLaneau （万花筒效果，心脏受不住的勿点），这个网站是绝对对称，比较少见，这样的网站看久了会比较单调。

9、三角形

在圆形、四方形、三角形等基本形态中，正三角形(金字塔形)是最具安全稳定因素的形态，而圆形和倒三角形则给人以动感和不稳定感。

Asahi Refining黄金产品网站

10、四角型

四角型指在版面四角以及连接四角的对角线结构上编排的图形。这种结构的版面，给人以严谨，规范的感觉。

NOROO PAINT企业网站

11、自由型

自由行结构是无规律的、随意的编排构成，有活泼、轻快之感。

Happymaker in 高野山

以上简单给大家分析讲解了常见的几种版式形式，每种版式设计并非以一种表现形态出现，比如四角型的网站可能会结合对称性的出现或是中轴型，所以大家在分析一个网站的时候不要以单一的一种视角去分析。因为一个网站的设计可能同时存在好几种版式形式。

不同的排版可以给人不同的视觉感受，好的排版会给整个网站“锦上添花”。版式也没有绝对的好坏，只有适合和不适合。希望今天给大家分享的内容可以帮助到大家。

二、用一篇文章，带你了解12种常见的网页布局设计

为什么了解网页布局很重要？ 网页布局在很大程度上决定了网站的访问者将如何与网页内容进行交互。

这里将介绍一些常见的网页布局形式，例如卡片式、分屏布局、网格布局……一起来看看吧！

卡片式布局被Pinterest、脸书和推特等网站所使用，它非常适合在新闻网站和博客上使用，因为 卡片式布局可以在页面上放置大量内容，同时又保持每部分内容各不相同。

卡片式布局主要有两种形式：

网页中每个卡片的尺寸相同，卡片的排列非常标准，例如dribbble、UI中国的网页布局；

使用不同尺寸的卡片组成页面的布局，卡片间没有固定的排序，例如Pinterest、花瓣的页面布局。

当两个元素在页面上具有相等的权重时， 分屏布局是一种流行的设计选择，并且通常用于文本和图像都需要突出显示的设计中。

分屏设计特别适合电子商务网站上的产品页面。 产品图片需要在页面上突出显示，但价格、规格、购物车按钮等信息也要显示。

随着移动设计的盛行，大标题排版变得流行起来。大号字体在标题中特别流行，在一些网站的正文中也能看到。

较大的文本更具可读性，可以改善使用体验。 另外它还提供了强大的视觉效果，因此这种布局在极简主义设计中特别受欢迎。

个性化算法推荐可以根据每个人的喜好量身定制数字体验。 人工智能技术的发展让算法变得更易用，能精确分析用户的喜好。

根据用户之前的订阅习惯，Netflix可以为用户个性化推荐他们最有可能观看的电影。

像Medium这样的网站会基于用户以前阅读和喜欢的内容，向他们展示很多同类型的文章。

网格为设计提了视觉上的平秩序感， 以一种平衡且有组织的方式呈现内容，使内容更易于人们使用。

在网格设计中使用不同大小的内容可以在保持内容有序的同时增加视觉吸引力。

杂志和期刊的布局方式影响了网络杂志的版面设计。 这些网页布局很适合有大量内容的网站，尤其是每天都需要更新内容的网站。

单页布局将网站的所有主要内容放在一个网页上，通过滚动完成导航，有时还使用视差滚动效果。

对于内容稀疏的网站，单页布局是一个很好的解决方案。同时它也是内容叙事的完美选择，比如交互式儿童读物。

F型和Z型布局是指用户的视线如何在页面上移动，即用户如何扫描内容。F型布局有非常明确的视觉层次结构，因此适合内容更多的页面。

Z型布局将视线吸引到顶部，然后沿对角线方向向下延伸到底部，然后再次延伸。

在设计中，不对称会产生动态化的视觉冲击力。大多数情况下不对称是由于图像和文本间无法平衡而造成的。

由于不对称会产生动态的、充满活力的视觉印象，因此对那些想要传达这种形象的品牌来说是非常有用的。

这种布局的优点在于完全专注于内容，没有视觉上的混乱。

干净简单的布局几乎适用于任何类型的网站。许多优雅的网站都可以被认为是“简洁的”，无论它们包含什么设计形式。

导航标签适合用于包含少数项目的菜单，否则导航会显得很混乱。

轮播内容包含图像和文本，通常出现在网站的顶部，用来突出显示内容。

好的网页设计具有很强的适应性并且对用户来说始终是友好的。

遵循网页布局的最佳实践，能够带来全新的数字体验，灵活地调整不断变化的技术和设计趋势，进一步实现品牌目标。

精彩推荐：

1、聊聊卡片式设计的运用

2、案例分析：栅格系统的布局设计

3、如何设计深色模式？这3点因素需要考虑

4、深度解析：服务蓝图的应用逻辑 设计

三、网页制作的结构布局有哪些？

布局就是以最合适浏览的方式将图片和文字排放在页面的不同位置。不同的制作者会有不同的布局设计。网页布局有以下几种常见结构：

1.“同”字型结构布局

所谓同字型就够就是指页面顶部为“网站标志+广告条+主菜单”或主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体内容的布局。

这种布局的优点是充分利用版面，页面结构清晰，左右堆成，主次分明，信息量大；缺点是页面拥挤，太规矩呆板，如果细节色彩上缺少变化调剂，很容易让人感到单调缺乏。

2.“国”字型布局

“国”字型布局是在“同”字型布局基础上演化而来的，在保留“同”字型的同时，在页面的下方增加一横条状的菜单或广告，是一些大型网站所喜欢的类型。一般最上面是网站标题及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是在网上见到的最多的一种结构类型。

这种布局的优点是充分利用版面，信息量大，与其他页面的链接切换方便，缺点是页面拥挤，四面封闭，令人感到憋气。

3.T型布局

这是一个形象的说法，是指页面的顶部是“网站标志+广告条”，左面是主菜单，右面是主要内容。这种布局的优点是页面结构清晰、主次分明，是初学者最容易上手的布局方法；缺点是页面呆板，如果不注意细节上的色彩，很容易让人“看之无味”。

4.“三”字型布局

这种布局多用于国外站点，国内用得不多。特点是在页面上有横向两条色块，将页面整体分割为但部分，色块中大多放广告条、更新和版权提示。

5.对比布局

顾名思义，这种布局采用左右或者上下对比的方式：一半深色，一半浅色。一般用于设计型站点。优点是视觉冲击力强；缺点是将两部分有机地结合比较困难。

6.POP布局

POP引自广告术语，是指页面布局像一张宣传海报，一一张精美的图片作为页面的设计中心。这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接，甚至直接在首页的图片上做链接而没有任何提示。这种布局大部分出现在企业网站和个人主页，如果处理得好的话，会给人带来赏心悦目的感觉。

7.Flash布局

这种布局是指整个或大部分幅面的网页本身就是一个Flash动画，它本身就是动态的，画面一般不叫绚丽、有趣，是一种比较新潮的布局方式。其实这与封面型结构是类似的，只是这种类型才采用了目前非常流行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。

四、网页布局方法

众所周知，屏幕的尺寸千差万别。在考虑网页布局时，主要考虑：

同时，网页布局还应该综合考虑设计和实现上的问题：

虽然屏幕宽度、高度、宽高比千差万别。但是网页的组织方式基本上是以宽度适配，高度延伸为主。

当然，也有部分网页是需要考虑高度适配的，如视频网站的全屏播放。

这里主要讨论的是宽度适配。高度适配可以做类似处理，在这里就不做赘述。

网页基础的布局主要有三种： 静态布局、流失布局、弹性布局 。

静态布局

静态布局采用像素（px）作为页面设计的单位。在不同的显示宽度下，页面元素大小都是固定的。

流式布局

流式布局以百分比设定页面宽度，当显示区域变化时，页面布局会等比的发生改变。

流式布局强调的是适应屏幕宽度的变化。在实际应用中，经常是设置成宽度适应，而高度不变。当页面变大时，页面布局相当于被横向拉宽了。

弹性布局

弹性布局采用rem/em等相对单位，rem/em是相对的单位会随着屏幕变化而变化。

弹性布局更强调的是在不同的条件下，显示内容除了大小不一样，其布局是一致的。也就是说，弹性布局会宽度和高度都等比放大。当页面变大时，整个页面等比放大了。

假设有两个屏幕尺寸，一个是640px，一个是1080px。有个元素在640px页面下的尺寸是64px。

如果是静态布局，在640px屏幕下，元素被设置为64px。到了1080px屏幕下，依然是64px。元素的大小不变。

如果是流式布局，页面元素会被设置成640px屏幕宽度的10%。在1080px屏幕下，10%的长度变成了1080px * 10% = 108px了。元素大小随着屏幕变大了。

如果是弹性布局，假设在640px的屏幕下，设置1rem = 16px，那么 64px即为4rem大小。在1080px的屏幕下，设置1rem = 27px，4rem的大小变成了 4 * 27 = 108px。元素大小也随着屏幕变大了。

静态布局

静态布局没办法响应页面的变化，这个是优点也是缺点。

缺点是当屏幕变大时，会出现空白区域。当屏幕变小时，需要通过滚动条来浏览页面内容。

优点则是因为静态页面可以在任何条件下都按页面的设计进行显示，其适配性的问题最少，实现工作量最小。

实际上，目前很多大型的网站都是采用静态布局的。就是看中了其广泛的适配性，几乎不存在什么适配性问题，任何用户在任何条件下打开页面都显示的都是一样的。

虽然说屏幕尺寸种类繁多，但是在一定程度上屏幕宽度大体还是在一个范围之内的。应用静态布局时，可以适当放弃适配一些市场占有率很少的小屏幕显示器。

流式布局

流式布局大部分都是采用宽度适配，固定高度的方式。也就是说，页面此次被横向拉长或缩小了。

这样做的优点是页面可以适配屏幕的宽度，可以充分利用屏幕的面积，不至于出现大量空白的情况。

其缺点是，当屏幕过于宽时，页面会被拉得宽，整体显得不太协调。当屏幕过于窄时，页面会被缩得很小，部分元素的显示会出现问题。

为了规避这个问题，在实际应该上。一般会设置一个最大和最小适配宽度。当屏幕超过了最大最小宽度时，页面将不再适配屏幕。

弹性布局

弹性布局采用的是宽度和高度同时放大的方式，力求让页面在不同屏幕下在布局上是一致的。

弹性布局兼顾了静态布局和流式布局的优点，一方面其可以适配屏幕的变化，另一方面不会导致页面被横向拉宽导致比例不协调，在一定程度上保证页面布局和原设计一致。

但是这么做也带来了新的问题，页面加大会导致部分元素被拉伸，特别是图片元素，会导致失真。

所以弹性布局经常也采用了和流式布局一样的方式，设置最大最小响应尺寸，超过这个尺寸则不继续响应。

同时，针对图片失真问题，可以通过上传多个尺寸的图片进行解决。不同的屏幕尺寸响应不同的图片。不过因此也会带来了大量的维护工作，需要权衡。

由于静态布局特点，一般下列情况下会采用静态布局：

流式布局比较适用于文字型的页面。在流式布局中，虽然文字大小不会变化，但是文字段落仅需要改变换行就可以跟着宽度变化而变化。

如果屏幕尺寸变化不大，则可以考虑采用弹性布局的方式。既可以适配，又不改变页面的布局。

事实上，也有一些页面采用了几种不同的布局方式。例如，采用静态布局的侧边栏，而采用流式布局的主区域。

上文也讨论了流式布局和弹性布局不适合对尺寸跨度过大的屏幕进行适配。所以，基本上也都采用了限制最大最小适配尺寸，在适配范围内则采用流式布局或弹性布局进行适配。超过了适配范围，则变成静态布局的方式，不再响应屏幕的变化。

上面讨论的几种网页的基础布局一定程度上解决了页面适配的问题。但是随着显示终端的发展，出现了平板电脑、移动设备等屏幕。这些设备出现加大了屏幕尺寸的跨度。而上面讨论的几种网页布局恰恰是不支持屏幕尺寸跨度太大的情况的。

相比之下，自适应布局和响应式布局更能解决屏幕跨度过大的问题。

自适应布局

自适应布局为不同尺寸的屏幕准备多套方案，根据不同的屏幕尺寸确定一套显示方案。具体到每一套方案，则可以用上述几种基础的网页布局进行适配。可以看成是一系列的基础布局组成的一套方案。

一般自适应布局会设计宽屏、窄屏、移动端等几套适配方案，然后设定屏幕适配的范围。具体显示时，会根据屏幕尺寸匹配适配范围，选定其中的一套方案进行显示。

但是自适应布局一般情况下不会改变页面的结构。当页面缩小时，会选择缩小、替换、隐藏掉一些横向的页面元素，以达到适配的目的。有一些常见的处理方法：

响应式布局

响应式布局则是设置一套方案，通过调整行列的显示进行适配。当屏幕较大时，各个元素显示成一行，当屏幕变小时，转换转化成以列进行显示。

响应式布局因为需要换行来适配屏幕。所以其在页面缩小的过程中，页面布局会做改变。当页面缩小时，页面会先以流式布局或弹性布局的方式进行缩小，直至页面宽度再也无法适配时，横向显示的元素换行成纵向显示。

自适应布局

自适应布局需要设计是一系列页面布局。所以，在设计和实现上需要更多时间。

但是，因为其可以针对不同屏幕设计不同方案，方案之间相对独立。其限制较少和自由度却是比较高的。

但是注意，自适应并非几套完全不同的方案的组合，一般情况下，其主体部分是一致的。只是对部分横向的元素进行独立设计。

响应式布局

响应式布局只需要一个页面布局即可完成屏幕适配，其实现工作量比较小。但是，因为需要用一套方案适配所有屏幕尺寸。所以，在设计上需要考虑的因素比较多。

总的来说，自适应布局适用于较为复杂的页面，而响应式布局适用于页面结构简单的页面。

因为移动端和PC端的巨大差异，包括屏幕尺寸和操作方式都不尽相同。还有一种解决方案将各个端的页面单独进行设计。

这种方案优点是各个显示端可以自由的根据自身情况进行设计，从而设计出专门针对各个显示端的方案。这无疑给设计师和用户体验带来了巨大的好处。

但是这种方案带来了成倍的设计和实现工作量。同时，在产品投入使用后需要两套人马分别维护其内容。

如果您有如下的情况，可以考虑使用移动端和PC端分离的设计：

写在最后

并没有十全十美的方案，根据自身情况进行选择才是硬道理。

作为设计者，千万不要忘记了后期技术的实现、测试，运营人员的维护等工作量。同时也不要忘记了项目后期的迭代的难度。一句话，选择适合的才是最重要的。

要知道，看似很土的静态布局到现在仍然有大量的应用。千万不要做过度的设计。

以上就是关于网页的布局类型有哪些相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。

推荐阅读：

如何制作网页最简单的方法（自己如何制作一个网页）

如何构建完美的网页布局

网页设计跟平面设计哪个前景（网页设计跟平面设计哪个前景更好）

小区公园景观设计步骤

商业花卉景观设计（商业花卉景观设计图）