今天我們要談的是網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格，重點(diǎn)是報(bào)紙排版的風(fēng)格。在這篇文章中，你會(huì)發(fā)現(xiàn)這種風(fēng)格的最鮮明的特點(diǎn)，并得到一些有用的提示，把你學(xué)到的東西運(yùn)用到您的項(xiàng)目將獲得更大的收獲。

風(fēng)格是你的網(wǎng)站設(shè)計(jì)的一個(gè)總的組合方式。風(fēng)格也是你和你的用戶交流的一種方式。每個(gè)網(wǎng)站的設(shè)計(jì)風(fēng)格都有它自己的組件合集。

網(wǎng)頁(yè)設(shè)計(jì)中主要的風(fēng)格分類：

• 極簡(jiǎn)主義；
• 破舊風(fēng)格；
• 懷舊風(fēng)格與時(shí)尚風(fēng)格；
• 插畫(huà)風(fēng)格；
• 報(bào)紙排版風(fēng)格個(gè)與雜志風(fēng)格。

報(bào)紙風(fēng)格的設(shè)計(jì)最時(shí)候用于在線報(bào)紙和雜志，因?yàn)樗鼈兊挠∷⑵芬彩沁@個(gè)結(jié)構(gòu)，所以這樣做用戶體驗(yàn)會(huì)更好。用這個(gè)風(fēng)格設(shè)計(jì)的網(wǎng)站必須是重視內(nèi)容的。報(bào)紙風(fēng)格的網(wǎng)站設(shè)計(jì)往往是靠?jī)?nèi)容豐富排版，多列結(jié)構(gòu)，簡(jiǎn)單的對(duì)比色，以及其他真實(shí)報(bào)刊種常用的手法。

報(bào)類網(wǎng)站布局：特點(diǎn)

1. 白紙黑字

傳統(tǒng)印刷的報(bào)紙都是白色的紙張黑色（灰、深灰）的字。這種色彩組合讓我們的眼睛非常舒適，可讀性好，這就是為什么報(bào)紙一直用這種配色的原因，特別是那種塞滿了內(nèi)容的版面。你也可以選擇黑底白字，但是千萬(wàn)不要選黑底黃色、綠藍(lán)色、粉紅色和藍(lán)色等顏色的字體，檢視你的設(shè)計(jì)盡量在你的眼睛感覺(jué)好了之后再做，你也可以吸取經(jīng)典的色彩并用于你的網(wǎng)頁(yè)設(shè)計(jì)。

中性的亮和黑是基本色，你還可以使用更多的強(qiáng)調(diào)色。舉例來(lái)說(shuō)，藍(lán)色是很好用的標(biāo)題，紅色是完美的按鈕。導(dǎo)航菜單上的各種效果可以用原色的更亮或更暗的色來(lái)修飾，或者是一樣調(diào)性的色彩。這樣菜單會(huì)比較突出，整體的用戶體驗(yàn)也會(huì)比較好。

2. 極簡(jiǎn)主義圖形

報(bào)紙排版風(fēng)格的網(wǎng)站界面是干凈的，內(nèi)容翔實(shí)的，結(jié)構(gòu)合理的，圖形是表達(dá)精準(zhǔn)的，極簡(jiǎn)主義的。圖形元素有以下幾種：

• 線
• 形狀
• 各種顏色
• 版式樣式
• 紋理

如我們已經(jīng)提到，這類網(wǎng)站用色的種類總是很少。紋理更是少之又少，因?yàn)楦鞣N質(zhì)感的紋理只會(huì)分散讀者的注意力，讓內(nèi)容的可讀性變差。但是紙張的質(zhì)感是可以的，這個(gè)很重要，它可以是一個(gè)背景紋理，或者是有紙張質(zhì)感的按鈕，又或者只是頁(yè)眉和頁(yè)腳區(qū)域。

報(bào)紙風(fēng)格的設(shè)置總是會(huì)基于網(wǎng)格的設(shè)計(jì)，或者使用多列布局，減少對(duì)形狀和線條的依賴。因?yàn)樗鼈冇凶銐虻膬?nèi)容去形成你的網(wǎng)站。

3.基于網(wǎng)格的設(shè)計(jì)或多列式排版

報(bào)紙風(fēng)格的網(wǎng)站布局會(huì)有一個(gè)完美的組織結(jié)構(gòu)，這些都是內(nèi)容豐富的網(wǎng)站，所以結(jié)構(gòu)第一重要。網(wǎng)格和柵格是內(nèi)容排版最佳工具。這是是事實(shí)，“精心設(shè)計(jì)的網(wǎng)格系統(tǒng)可以使您的設(shè)計(jì)不僅美觀而且清晰實(shí)用（馬克博爾頓）”  網(wǎng)格布局設(shè)計(jì)的頁(yè)面會(huì)讓你的內(nèi)容突破條條框框，從而吸引用戶閱讀你的內(nèi)容而不離開(kāi)。

相似而不相同的是多列柵格布局。這些可能有很多適合高度的柵格，但是寬度不一樣。柵格越寬闊可讀性越好。2種柵格會(huì)有一個(gè)很好的外觀，雖然3種柵格或更多當(dāng)然會(huì)更好。柵格和網(wǎng)格能很好的區(qū)分內(nèi)容，讓用戶更容易找到他感興趣的板塊。當(dāng)你使用這種布局的時(shí)候，你不能忘記柵格的空格。如果柵格太緊，網(wǎng)頁(yè)上的內(nèi)容就會(huì)非常難讀。

4.標(biāo)題和摘要

當(dāng)你進(jìn)入一個(gè)文字內(nèi)容很多的網(wǎng)站或博客的時(shí)候你會(huì)打開(kāi)每一篇么？標(biāo)題會(huì)讓我們區(qū)分感興趣的和不重要的內(nèi)容。所以每個(gè)內(nèi)容板塊需要有標(biāo)題，哪怕這個(gè)區(qū)塊在網(wǎng)格和柵格中很小，它都必須有標(biāo)題，標(biāo)題的字體要大，最好是加粗的字體和色彩不同，這樣會(huì)更清晰。

摘要文字是對(duì)文章簡(jiǎn)短的描述，這些經(jīng)常會(huì)讓讀者更容產(chǎn)生興趣，讓他們更容易理解長(zhǎng)篇的文字內(nèi)容，摘要這個(gè)元素是非常好用的，特別是博客、新聞?lì)惖木W(wǎng)站。

5.主要和次要內(nèi)容

有一種老的辦法，就是繪制一條粗線在你的內(nèi)容之間，當(dāng)然形式不限，這樣會(huì)定義那些是最重要的那些是等待被讀的文字。例如：你能給你的前臺(tái)頁(yè)面中的文章頁(yè)面設(shè)計(jì)一個(gè)大標(biāo)題。這是一個(gè)有特征的區(qū)域，包含大圖和圖形。其他的內(nèi)容將會(huì)更小并根據(jù)網(wǎng)格系統(tǒng)排列。這樣將會(huì)更容易分享新內(nèi)容，并且獲取更多分享。

6.直觀和一致的導(dǎo)航

報(bào)紙風(fēng)格的網(wǎng)站排版是為內(nèi)容而設(shè)計(jì)的，而且這些內(nèi)容必須能容易被導(dǎo)航，由此可見(jiàn)，導(dǎo)航菜單的特征就是簡(jiǎn)單，和正確的位置。

最好的位置在頁(yè)面頂部，因?yàn)檫@塊區(qū)域是最先被注意到的，而且總是在同樣的地方，如果你在頁(yè)面底部，你只需要滾動(dòng)頁(yè)面。如果，你喜歡垂直導(dǎo)航，而且非要不可，讓你的菜單在左邊垂直，因?yàn)槲覀兊拈喿x習(xí)慣是從左至右的。

報(bào)紙風(fēng)格的網(wǎng)站分享出大量的文字內(nèi)容，這些內(nèi)容都需要能傳達(dá)給用戶。

7.分類目錄

更好的分類目錄可以讓報(bào)紙風(fēng)格的網(wǎng)站有更好的布局效果，這種情況在博客上效果更明顯，其他網(wǎng)站也是。很多網(wǎng)站沒(méi)做好就是內(nèi)容沒(méi)組織好。分類目錄，在那些經(jīng)常發(fā)布大量不同內(nèi)容的網(wǎng)站（新聞?lì)悾┦欠浅１匾摹?/p>

將您的內(nèi)容進(jìn)行分類，并將其顯示在菜單欄上。

8. 廣告位

在你的網(wǎng)站火起來(lái)前，你有考慮會(huì)如何利用它賺錢(qián)么？廣告是許多站長(zhǎng)賺錢(qián)的好工具。廣告banner放置的地方必須要定義好。正確的地方是側(cè)邊欄、左、右、頁(yè)眉或頁(yè)腳。宣傳的banner經(jīng)常在文字中間。這對(duì)你的廣告位買家是好事，而且這些也可以刺激你的讀者。

9. 功能邊欄工具條

邊欄不僅僅只是放廣告，也可以放文章目錄、最新內(nèi)容、搜索框、電子郵件、導(dǎo)航、社交按鈕、折扣或誘惑活動(dòng)等。報(bào)紙風(fēng)格的網(wǎng)站邊欄是一個(gè)很好的位置，因?yàn)檫@里只是一個(gè)柵格而已。

邊欄設(shè)計(jì)相關(guān)的要素：

• 尺寸（高和寬）
• 顏色
• 字體
• 位置

邊欄一般小于普通的柵格布局，不能做大，色彩保持中型，字體大小要可視，位置在頁(yè)面的左邊還是右邊？我們之前已經(jīng)說(shuō)過(guò)，放在左邊就是一切，因?yàn)橛脩魰?huì)立刻看到。

10. 最大化留白

無(wú)論我們?cè)O(shè)計(jì)了多少網(wǎng)站，功能有多多，我們都不能忘記要留白，因?yàn)榱舭资菆?bào)紙類網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格的必要組成部分。讓柵格之間留白，讓空白存在于側(cè)面和底部 ，用戶必須有機(jī)會(huì)讓他們的眼鏡離開(kāi)如墻一般的文本，去休息一會(huì)，并且思考。

一般情況下，留白被看作是沒(méi)有內(nèi)容的。在狹義上還有一層意思：留白是指行與行之間，字與字之間和內(nèi)容元素周邊。留白會(huì)讓你的網(wǎng)站可讀性更高，更簡(jiǎn)潔，即便是你的網(wǎng)站內(nèi)容很多也如此。

11. 經(jīng)常更新

報(bào)紙風(fēng)格的網(wǎng)站布局必須有不斷的內(nèi)容補(bǔ)充與更新。因?yàn)橛镁W(wǎng)格和柵格設(shè)計(jì)的網(wǎng)頁(yè)如果沒(méi)有充足的內(nèi)容會(huì)很難看，因此你必須徹底填滿你的網(wǎng)站，并且保持更新，保持與時(shí)事熱點(diǎn)接軌。

內(nèi)容和頻率像是一對(duì)情侶，就想國(guó)王和王后。保持內(nèi)容更新除了會(huì)讓你的網(wǎng)站好看，還可以讓搜索引擎更多的收錄你的內(nèi)容，從而影響人們的搜索結(jié)果。如果你的內(nèi)容是過(guò)時(shí)的，人們會(huì)很少看你的網(wǎng)站，搜索引擎也一樣（如：百度和谷歌等），你的網(wǎng)站在搜索引擎的權(quán)重就會(huì)很低。

12. 開(kāi)通社交軟件分享功能

博客和新聞?lì)惥W(wǎng)站報(bào)紙風(fēng)格用得最多，而這些網(wǎng)站沒(méi)有社交媒體的整合就不能存在?，F(xiàn)在是大眾分享時(shí)代，人們?cè)谏鐣?huì)網(wǎng)絡(luò)上花費(fèi)了大量時(shí)間。所以你的網(wǎng)站一定要有社交網(wǎng)絡(luò)分享按鈕，如：微博、微型、Facebook、谷歌、LinkedIn等，沒(méi)有這些功能，你如果沒(méi)這些功能，就等于放棄了大量入口。

還有一件事，就是報(bào)紙風(fēng)格類網(wǎng)站必須是響應(yīng)式的，這種布局效果無(wú)論在什么設(shè)備上都需要保持不變，移動(dòng)類的網(wǎng)站不能有邊欄，而且最好重新設(shè)計(jì)導(dǎo)航，因?yàn)橐苿?dòng)網(wǎng)站滾動(dòng)用得比點(diǎn)擊多。

以下是用報(bào)紙風(fēng)格排版的網(wǎng)頁(yè)設(shè)計(jì)例子欣賞

Mijlo Blog

International Civil Defence Organization

Advertising Health

Fashionising

Mano Teises

Blackbox

Proven Quality

The Boston Globe

Motonews

The Brief

New York Magazine

Deadspin

The Wall Street Journal

MindBodyGreen

TED Blog

I am a Food Blog

Long Island Business News

Express

Tribune