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

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è)面上方是導(dǎo)航條，頂部是一個(gè)Banner，下方是其他內(nèi)容。這種布局方法的優(yōu)點(diǎn)是頁(yè)面的結(jié)構(gòu)十分清晰，主次分明。無(wú)論屏幕的尺寸是什么，網(wǎng)頁(yè)的內(nèi)容都會(huì)清晰地呈現(xiàn)出來(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è)設(shè)計(jì)中基本也是普遍的一種設(shè)計(jì)手法，比如說(shuō)站酷、好奇心日?qǐng)?bào)等。雖然有的設(shè)計(jì)師會(huì)將Banner設(shè)計(jì)成固定寬或者橫跨整個(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è)廣告條，左右兩側(cè)是超鏈接，中間放置主要內(nèi)容，下面是網(wǎng)站的基本信息、聯(lián)系方式、版權(quá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)是可以充分利用版面，盡可能多地傳達(dá)信息量。同時(shí)，設(shè)計(jì)師需要注意板塊的內(nèi)容和面積大小，不能讓頁(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è)的框架結(jié)構(gòu)，左面是導(dǎo)航鏈接，頂端是小標(biāo)題，右面是主要內(nèi)容。

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ǎo)航網(wǎng)站、論壇都采取了這種結(jié)構(gòu)，非常清晰，一目了然。比如說(shuō)科技網(wǎng)站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是廣告中的術(shù)語(yǔ)，意思是售點(diǎn)廣告。在網(wǎng)頁(yè)設(shè)計(jì)中，POP式布局是指頁(yè)面的布局設(shè)計(jì)像一張宣傳海報(bào)(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í)尚購(gòu)物類網(wǎng)站會(huì)采取POP式布局，用一張精美的圖片作為頁(yè)面中心，在頂端或者下方放置導(dǎo)航條。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)畫，或者直接在圖片上放上對(duì)應(yīng)的鏈接。這種設(shè)計(jì)一般會(huì)出現(xiàn)在企業(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.

標(biāo)題正文型布局

Title Text Layout

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

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ú)論設(shè)計(jì)師采用哪一種布局，在網(wǎng)頁(yè)設(shè)計(jì)中，重要的要求是主次分明和突出。只有當(dāng)頁(yè)面中有一個(gè)明確的視覺(jué)中心時(shí)，網(wǎng)站用戶才能夠迅速找到內(nèi)容，不于進(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.

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

本文由濟(jì)南網(wǎng)站建設(shè)友情奉獻(xiàn).更多有關(guān)的知識(shí)請(qǐng)點(diǎn)擊:http://www.100weixin.cn真誠(chéng)的態(tài)度.為您提供為的服

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