5種(zhǒng)網站設計的布局方法

來源：https://www.chinanovo.net   發(fā)布時間：2024-02-11 00:23:48      

設計網站的第一步是了解網站地圖，設計師根據網站的版面(miàn)劃分來編排不同版面(miàn)的空間大小和位置關系。網站的布局實際上就是把文本、圖片、多媒體等在頁面(miàn)裡(lǐ)面(miàn)進(jìn)行合理的組織排列。由此，網頁設計也衍生出許多種(zhǒng)類的布局樣式。

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)式布局就是指頁面(miàn)上方是導航條，頂部是一個Banner，下方是其他内容。這(zhè)種(zhǒng)布局方法的優點是頁面(miàn)的結構十分清晰，主次分明。無論屏幕的尺寸是什麼(me)，網頁的内容都(dōu)會清晰地呈現出來。

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式布局是網頁設計中基本也是普遍的一種(zhǒng)設計手法，比如說站酷、好(hǎo)奇心日報等。雖然有的設計師會將(jiāng)Banner設計成(chéng)固定寬或者橫跨整個頁面(miàn)的大小，但總體的布局樣式都(dōu)是差不多的。

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

上下型布局指的是網頁的上下都(dōu)有一個廣告條，左右兩(liǎng)側是超鏈接，中間放置主要内容，下面(miàn)是網站的基本信息、聯系方式、版權聲明等。

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.

很顯然，這(zhè)種(zhǒng)布局方法的優點是可以充分利用版面(miàn)，盡可能(néng)多地傳達信息量。同時，設計師需要注意闆塊的内容和面(miàn)積大小，不能(néng)讓頁面(miàn)過(guò)分臃腫。

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

左右型布局是將(jiāng)網頁分爲左右兩(liǎng)頁的框架結構，左面(miàn)是導航鏈接，頂端是小标題，右面(miàn)是主要内容。

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.

目前大部分的導航網站、論壇都(dōu)采取了這(zhè)種(zhǒng)結構，非常清晰，一目了然。比如說科技網站36氪，左面(miàn)是咨詢分類，中間是新聞和文章。

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式布局是指頁面(miàn)的布局設計像一張宣傳海報(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式布局，用一張精美的圖片作爲頁面(miàn)中心，在頂端或者下方放置導航條。POP式布局的缺點是由于圖片過(guò)大，渲染速度較慢。

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式布局還(hái)加上小動畫，或者直接在圖片上放上對(duì)應的鏈接。這(zhè)種(zhǒng)設計一般會出現在企業介紹的首頁或者個人網頁，給人一種(zhǒng)簡潔、優雅的視覺享受。

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

這(zhè)種(zhǒng)類型的布局是網頁設計中簡單的一種(zhǒng)樣式，通常是頂端放置标題，下方用作正文區。設計師們喜歡在咨詢文章頁面(miàn)、注冊頁面(miàn)等使用标題正文型的布局樣式，這(zhè)樣的樣式可以小程度地打擾用戶，還(hái)給用戶一個安靜的浏覽體驗。

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.

其實，無論設計師采用哪一種(zhǒng)布局，在網頁設計中，重要的要求是主次分明和重點突出。隻有當頁面(miàn)中有一個明确的視覺中心時，網站用戶才能(néng)夠迅速找到内容重點，不至于進(jìn)入到網站後(hòu)變得一頭霧水。

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.

設計師還(hái)可以利用留白來制造視覺集中的效果，引導用戶的視線到主要内容區域。比如蘋果官網中，在産品的介紹頁面(miàn)，僅保留了中間的詳情圖片和上下方的導航條，大量的留白使得用戶集中注意力在産品圖上面(miàn)。

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真誠的态度.爲您提供爲全面(miàn)的服

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

上一篇： 爲什麼(me)制造行業更适合做愛采購？
下一篇： 微信視頻号推薦算法介紹及運營方式