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

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)式布局就是指頁(yè)面上方是導航條，頂部是一個(gè)Banner，下方是其他內容。這種布局方法的優(yōu)點(diǎn)是頁(yè)面的結構十分清晰，主次分明。無(wú)論屏幕的尺寸是什么，網(wǎng)頁(yè)的內容都會(huì )清晰地呈現出來(lái)。

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式布局是網(wǎng)頁(yè)設計中基本也是普遍的一種設計手法，比如說(shuō)站酷、好奇心日報等。雖然有的設計師會(huì )將Banner設計成固定寬或者橫跨整個(gè)頁(yè)面的大小，但總體的布局樣式都是差不多的。

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

上下型布局指的是網(wǎng)頁(yè)的上下都有一個(gè)廣告條，左右兩側是超鏈接，中間放置主要內容，下面是網(wǎng)站的基本信息、聯(liá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.

很顯然，這種布局方法的優(yōu)點(diǎn)是可以充分利用版面，盡可能多地傳達信息量。同時(shí)，設計師需要注意板塊的內容和面積大小，不能讓頁(yè)面過(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

左右型布局是將網(wǎng)頁(yè)分為左右兩頁(yè)的框架結構，左面是導航鏈接，頂端是小標題，右面是主要內容。

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.

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

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是廣告中的術(shù)語(yǔ)，意思是售點(diǎn)廣告。在網(wǎng)頁(yè)設計中，POP式布局是指頁(yè)面的布局設計像一張宣傳海報(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.

通常情況下，時(shí)尚購物類(lèi)網(wǎng)站會(huì )采取POP式布局，用一張精美的圖片作為頁(yè)面中心，在頂端或者下方放置導航條。POP式布局的缺點(diǎn)是由于圖片過(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.

有時(shí)，POP式布局還加上小動(dòng)畫(huà)，或者直接在圖片上放上對應的鏈接。這種設計一般會(huì )出現在企業(yè)介紹的首頁(yè)或者個(gè)人網(wǎng)頁(yè)，給人一種簡(jiǎn)潔、優(yōu)雅的視覺(jué)享受。

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

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

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.

其實(shí)，無(wú)論設計師采用哪一種布局，在網(wǎng)頁(yè)設計中，重要的要求是主次分明和突出。只有當頁(yè)面中有一個(gè)明確的視覺(jué)中心時(shí)，網(wǎng)站用戶(hù)才能夠迅速找到內容，不于進(jìn)入到網(wǎng)站后變得一頭霧水。

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.

設計師還可以利用留白來(lái)制造視覺(jué)集中的效果，引導用戶(hù)的視線(xiàn)到主要內容區域。比如蘋(píng)果官網(wǎng)中，在產(chǎn)品的介紹頁(yè)面，僅保留了中間的詳情圖片和上下方的導航條，大量的留白使得用戶(hù)集中注意力在產(chǎ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.

本文由濟南網(wǎng)站建設友情奉獻.更多有關(guān)的知識請點(diǎn)擊:http://www.hfjtr.cn真誠的態(tài)度.為您提供為的服

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