海淘科技溫馨提示：細(xì)讀本文需要7分鐘，速讀僅需2分鐘。網(wǎng)站有哪些排版模式如下：

固定邊欄布局

導(dǎo)航是網(wǎng)站的重要組成部分，也許你沒(méi)注意到，菜單是我們尋找的第一個(gè)元素。保持菜單的最常見(jiàn)的方法之一是將它放在固定的側(cè)邊欄。這意味著，即使你滾動(dòng)網(wǎng)站的內(nèi)容的其余部分，菜單也保持靜止，總是可見(jiàn)。側(cè)欄還可以包含菜單以外的內(nèi)容，包括社交媒體鏈接，聯(lián)系信息或任何其他你想要訪問(wèn)者輕松找到的內(nèi)容。這類(lèi)排版形式多被運(yùn)用于企業(yè)網(wǎng)站中。由Build

in Amsterdam設(shè)計(jì)的Trefecta的網(wǎng)站，其左側(cè)邊欄帶有公司的標(biāo)志和簡(jiǎn)單的菜單，非常常見(jiàn)的設(shè)計(jì)形式：

兩欄布局

由于大部分網(wǎng)站都是基于用戶(hù)使用習(xí)慣的垂直滾動(dòng)，因此豎版的信息展示自然是最多的，將網(wǎng)頁(yè)分為兩欄能夠多功能的展示。這種兩欄布局的網(wǎng)站在電商中也比較常見(jiàn)，能夠給用戶(hù)極好的視覺(jué)體驗(yàn)，如果你要試試新布局，可以選擇等分兩欄式。這里展示的是Get

Bowtied的作品，大圖像的展示能給用戶(hù)更大的視覺(jué)沖擊，同時(shí)該作品在頁(yè)面中使用倒敘也是一個(gè)非常膽大的設(shè)計(jì)想法。

基于文本的排版布局

這類(lèi)布局形式適合圖片較少的情況，通常在白色、黑色等純色背景中實(shí)現(xiàn)，整體的效果呈現(xiàn)一種干凈和簡(jiǎn)潔化的風(fēng)格，而排版則通常會(huì)使用大一些的字符文本，防止設(shè)計(jì)看起來(lái)平淡無(wú)奇。Impossible

Bureau的主頁(yè)以黑色背景呈現(xiàn)大型無(wú)襯線(xiàn)文字，為了一個(gè)漂亮的視覺(jué)驚喜，當(dāng)您選擇一個(gè)菜單選項(xiàng)時(shí)，該欄又會(huì)以一個(gè)充滿(mǎn)活力的漸變照亮：

卡片式布局

與Google的MaterialDesign同種風(fēng)格的卡片式布局也越來(lái)越受到大家的喜愛(ài)，這種排版能讓用戶(hù)以?huà)呙璧姆绞搅私饷總€(gè)區(qū)域的內(nèi)容。每一塊卡片區(qū)域都是獨(dú)立的信息展示，就好像一個(gè)個(gè)內(nèi)容模塊一般。此外，因其方形的型態(tài)，在不同的螢?zāi)淮笮∠拢W(wǎng)站也可以輕易地重新排配版面。Pinterest是應(yīng)用卡片式排版的先驅(qū)。

自由排版布局

自由形式的網(wǎng)頁(yè)排版可以不受任何網(wǎng)格的限制，并可以有大量留白，呈現(xiàn)一個(gè)干凈、現(xiàn)代的界面。同時(shí)這種結(jié)構(gòu)可以隨時(shí)根據(jù)內(nèi)容靈活調(diào)整，在留白位置可以通過(guò)填充色彩或空白來(lái)創(chuàng)意設(shè)計(jì)。這類(lèi)排版手法通常用于創(chuàng)意型領(lǐng)域中，在Jonas和Noma的個(gè)人頁(yè)面設(shè)計(jì)網(wǎng)頁(yè)結(jié)構(gòu)中，圖片大小不一、使用文本進(jìn)行填充留白，組成了形狀、大小、形態(tài)上的變化，是一個(gè)非常有趣的視覺(jué)布局。

在使用這些排版模式時(shí)也會(huì)出現(xiàn)各種緊急突發(fā)事件，小編這里可以預(yù)測(cè)幾種。

1.在甲方巴巴提供的圖片像素較低時(shí)：

這里有三種處理方法，一是使用圖片外框，使用同基色的背景色填充區(qū)塊能夠起到調(diào)整圖片的作用；二是通過(guò)對(duì)圖片的重復(fù)使用來(lái)設(shè)計(jì)頁(yè)面，也能起到豐富網(wǎng)頁(yè)的作用；三是使用無(wú)損放大圖片軟件PhotoZoom，這款軟件能夠無(wú)損放大素材到你需要的像素。

2.甲方巴巴不舍得購(gòu)買(mǎi)字體時(shí)：

出現(xiàn)這種情況可以大膽的調(diào)整文字的大小、色彩變化，通過(guò)大小、粗細(xì)對(duì)比和調(diào)整字間距來(lái)增加頁(yè)面的設(shè)計(jì)感，在設(shè)計(jì)的文本區(qū)域中，亦可以使用移動(dòng)標(biāo)題、內(nèi)容的變化來(lái)調(diào)整排版模式，這樣同樣也是對(duì)內(nèi)容的創(chuàng)新。

3.當(dāng)甲方巴巴提供的內(nèi)容幅寬不同時(shí)：

這種情況是經(jīng)常在電商類(lèi)網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中碰到的。圖片的安排通常由縱向和橫向兩種不同的類(lèi)型，在我們的排版中，對(duì)內(nèi)容的統(tǒng)一顯然是很重要的，但也會(huì)經(jīng)常出現(xiàn)產(chǎn)品的圖片是不同的兩種形式，自然可以通過(guò)裁剪圖片變成統(tǒng)一的形式，但這種處理方式使用在所有的作品中不免會(huì)讓人覺(jué)得缺少?gòu)埩蛣?chuàng)意性，其實(shí)還有另外一種處理方式，即在統(tǒng)一各項(xiàng)內(nèi)容的邊線(xiàn)范圍內(nèi)進(jìn)行內(nèi)容增減調(diào)整。

學(xué)習(xí)了這么多，如果甲方巴巴對(duì)你的網(wǎng)站布局依舊意見(jiàn)多多，分享稿稿過(guò)小妙招：

• 記錄所有客戶(hù)認(rèn)可過(guò)的網(wǎng)站框架圖+你自己的想法和方案的介紹解決辦法介紹(視頻，其他網(wǎng)站案例，插畫(huà)，包括色彩)。
• 與客戶(hù)交流。這個(gè)問(wèn)題通常不是由設(shè)計(jì)解決方案引起的，而是由演示或演示所使用的工具引起的(電話(huà)、會(huì)議、視頻、可點(diǎn)擊原型、.pdf文件，帶圖片的郵件)。
• 第一個(gè)概念稿我會(huì)盡力滿(mǎn)足客戶(hù)的理想化需求。第二個(gè)方案基于我自己的想法，我會(huì)試著把第二個(gè)做的比第一個(gè)更加具有吸引力。最后就會(huì)順利選擇第二稿。大寫(xiě)的服！

要想完美的說(shuō)服甲方巴巴，靠的還是我們的基礎(chǔ)功。海淘科技小編還為你準(zhǔn)備了，《16個(gè)網(wǎng)頁(yè)設(shè)計(jì)排版技巧》