WEB网页设计常见布局

Posted 2023-04-22

参考技术A 我们一般的版式设计除了平面设计，就是网页设计和互联网产品，比如一些移动端手机APP这些界面的设计。这些设计都有一些通用的布局， 大家在刚开始学习布局时有一个诀窍，即不用太在意布局的理论，而去收集一些大家常用的布局，先把这些东西记下来，随着经验的积累，可以通过这些通用的布局产生自己的理解和想法，然后去打破这些传统的布局，有自己的创新和突破。

左边为最常见的大框套小框的布局，整个网页首先在一个比较大的框里面，然后各个模块在大的框里面去布局分配。

这种布局的特点是有一个比较大的背景，背景是可以平铺的，然后其他的内容可以限制在一定的宽度范围内，好处就是视线比较集中。

通栏布局打破了框的限制，如图导航部分等是适应屏幕拉伸的。

如图背景可以根据屏幕无限延伸，显得比较大气。视觉上显示比较整体，整个网页上都是有内容的。

如图为导航在主视觉下方的布局的示意图，传统规则就是导航放在画面中间。

这是一种比较时尚、流行的布局方式，如图上面是体现当前页面主题的一个banner，这个banner比较重要，它的设计完全可以体现整个网页的风格，同时也起到一个装饰的作用。接下来把这个banner放在中间的位置而不是传统的上面的位置，这样就给banner这个位置留下了比较多的空间，让整个画面显得比较简洁大气。

如图为左中右布局示意图。

结合案例，如图分三栏左中右。对banner进行比较主题式的设计，如图第一张素材的选择体现了整个网页的风格。同样第二张、第三张的图片选择也是体现整个网页主题的主体部分。所以这种布局是必须有个部分体现这个主题的，其他两个部分用来布局网页的其他内容。

如图为环绕式布局的示意图。

环绕式就是页面会环绕一个比较显眼的图片装饰来进行设计。如图一，中间为图片焦点，内容部分环绕在图片焦点周围，进行布局设计。第二张、第三张也为内容环绕主题进行设计的。这种布局比较灵活，可以先选好一个主题图，然后所有元素围绕它的视觉效果去设计，整个画面的效果就会以图为中心，主题非常鲜明。

穿插式布局虽然很少看到，但效果也不错。

如图案例均属于穿插式布局，即所使用的图片素材在内容里面是一个穿插效果。整个banner穿插在网页内容里面，整个网页对称、画面感非常强。比较适合做一些专题类的网站。

真正的版面设计里面的布局时千变万化的，我们只要遵循前面讲到的用户体验要好、视觉上画面平衡，那效果就会很好。

布局知识

一、静态布局（Static Layout）
即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。

1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。
2、设计方法：
　　PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
　　移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。

　   在移动端开发中采用静态布局的两种方式：(来自：流布局与响应式网页设计有什么区别？)

　（1）在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。

　（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。（具体见content"width=640,user-scalable=no" 然后再进行固定尺寸的px设计？ - 前端开发）

优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。

缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。

当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。

二、流式布局（Liquid Layout）

流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。

网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。

1、布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】

2、设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

三、自适应布局（Adaptive Layout）
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
1、布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
2、设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

四、响应式布局（Responsive Layout）

随着CSS3出现了媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

响应式几乎已经成为优秀页面布局的标准。

1、布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

2、设计方法：媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

优点：适应pc和移动端，如果足够耐心，效果完美

缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。