5种网站设计的布局方法

来源：https://www.chinanovo.net   发布时间：2024-02-11 00:23:48      

设计网站的第一步是了解网站地图，设计师根据网站的版面划分来编排不同版面的空间大小和位置关系。网站的布局实际上就是把文本、图片、多媒体等在页面里面进行合理的组织排列。由此，网页设计也衍生出许多种类的布局样式。

The first step in designing a website is to understand the website map. Designers arrange the spatial size and positional relationships of different layouts based on the layout of the website. The layout of a website is actually the rational organization and arrangement of text, images, multimedia, etc. within the page. As a result, web design has also spawned many types of layout styles.

Banner式布局

Banner style layout

顾名思义，Banner(opens in a new tab or window)式布局就是指页面上方是导航条，顶部是一个Banner，下方是其他内容。这种布局方法的优点是页面的结构十分清晰，主次分明。无论屏幕的尺寸是什么，网页的内容都会清晰地呈现出来。

As the name suggests, a banner (opens in a new tab or window) layout refers to a navigation bar at the top of a page, a banner at the top, and other content below. The advantage of this layout method is that the page structure is very clear, with clear priorities. No matter what the screen size is, the content of the webpage will be presented clearly.

Banner式布局是网页设计中基本也是普遍的一种设计手法，比如说站酷、好奇心日报等。虽然有的设计师会将Banner设计成固定宽或者横跨整个页面的大小，但总体的布局样式都是差不多的。

Banner style layout is a basic and common design technique in web design, such as website coolness and Curiosity Daily. Although some designers may design banners to be fixed width or span across the entire page, the overall layout style is similar.

上下型布局

Up-down layout

上下型布局指的是网页的上下都有一个广告条，左右两侧是超链接，中间放置主要内容，下面是网站的基本信息、联系方式、版权声明等。

The up and down layout refers to a webpage with an advertising bar on both sides, hyperlinks on the left and right, and main content placed in the middle. Below are the basic information, contact information, copyright statement, etc. of the website.

很显然，这种布局方法的优点是可以充分利用版面，尽可能多地传达信息量。同时，设计师需要注意板块的内容和面积大小，不能让页面过分臃肿。

Obviously, the advantage of this layout method is that it can fully utilize the layout and convey as much information as possible. At the same time, designers need to pay attention to the content and size of the sections, and not make the page overly bulky.

左右型布局

Left and right layout

左右型布局是将网页分为左右两页的框架结构，左面是导航链接，顶端是小标题，右面是主要内容。

A left and right layout is a framework structure that divides a webpage into two pages, with navigation links on the left, subheadings at the top, and main content on the right.

目前大部分的导航网站、论坛都采取了这种结构，非常清晰，一目了然。比如说科技网站36氪，左面是咨询分类，中间是新闻和文章。

At present, most navigation websites and forums adopt this structure, which is very clear and clear at a glance. For example, on a technology website with 36 Kr, on the left is the consultation category, and in the middle are news and articles.

POP式布局

POP style layout

POP是广告中的术语，意思是售点广告。在网页设计中，POP式布局是指页面的布局设计像一张宣传海报(opens in a new tab or window)，精致又吸睛。

POP is a term in advertising that means point of sale advertising. In web design, POP style layout refers to the layout design of a page that resembles an open in a new tab or window, exquisite and eye-catching.

通常情况下，时尚购物类网站会采取POP式布局，用一张精美的图片作为页面中心，在顶端或者下方放置导航条。POP式布局的缺点是由于图片过大，渲染速度较慢。

Usually, fashion shopping websites adopt a POP style layout, with a beautiful image as the page center and a navigation bar placed at the top or bottom. The disadvantage of POP style layout is that the image is too large and the rendering speed is slow.

有时，POP式布局还加上小动画，或者直接在图片上放上对应的链接。这种设计一般会出现在企业介绍的首页或者个人网页，给人一种简洁、优雅的视觉享受。

Sometimes, POP style layouts also add small animations or directly place corresponding links on the images. This type of design usually appears on the homepage of a company introduction or personal webpage, giving people a simple and elegant visual enjoyment.

标题正文型布局

Title Text Layout

这种类型的布局是网页设计中简单的一种样式，通常是顶端放置标题，下方用作正文区。设计师们喜欢在咨询文章页面、注册页面等使用标题正文型的布局样式，这样的样式可以小程度地打扰用户，还给用户一个安静的浏览体验。

This type of layout is a simple style in web design, usually with a title placed at the top and a body area used below. Designers like to use a title based layout style on consultation article pages, registration pages, etc. This style can slightly disturb users and provide them with a quiet browsing experience.

其实，无论设计师采用哪一种布局，在网页设计中，重要的要求是主次分明和重点突出。只有当页面中有一个明确的视觉中心时，网站用户才能够迅速找到内容重点，不至于进入到网站后变得一头雾水。

In fact, no matter which layout the designer adopts, the important requirement in web design is to have clear priorities and prominent emphasis. Only when there is a clear visual center on the page can website users quickly find the key points of the content, so as not to become confused after entering the website.

设计师还可以利用留白来制造视觉集中的效果，引导用户的视线到主要内容区域。比如苹果官网中，在产品的介绍页面，仅保留了中间的详情图片和上下方的导航条，大量的留白使得用户集中注意力在产品图上面。

Designers can also use white space to create a visually focused effect, guiding users to the main content area. For example, on the Apple official website, only the detailed image in the middle and the navigation bar at the top and bottom are retained on the product introduction page, and a large amount of blank space makes users focus on the product image.

本文由济南网站建设友情奉献.更多有关的知识请点击:https://www.chinanovo.net真诚的态度.为您提供为全面的服

This article is dedicated to building friendship on the Jinan website. For more information, please click: https://www.chinanovo.net Sincere attitude. We provide you with comprehensive service

上一篇： 为什么制造行业更适合做爱采购？
下一篇： 微信视频号推荐算法介绍及运营方式