風格這東西吧，說白了(le)就是你是怎麽設計網站的(de)。網站也(yě)是與讀者溝通(tōng)的(de)一個渠道。每種風格背後都有一些固定構成。在網頁設計中，大(dà)概有以下(xià)幾種風格：

• 幹淨的(de)；
• 醜而美(měi)的(de)；
• 複古風格；
• 插畫風格；
• 報刊風格。

報刊風格主要用(yòng)在報紙或雜志的(de)網站，通(tōng)常都帶有一些與紙質印刷品相似的(de)結構。其實，這種風格适合各種網站，尤其是擁有大(dà)量内容的(de)網站。報刊風格網站的(de)特點十分(fēn)鮮明(míng)：豐富的(de)布局、多(duō)列分(fēn)欄結構、簡潔的(de)頁面還有對比鮮明(míng)的(de)顔色。

報刊風格網站的(de)基本特征

1. 白底黑(hēi)字

傳統的(de)印刷媒體便是這樣的(de)，白色或略帶灰色的(de)紙張上印刷著(zhe)黑(hēi)色的(de)文字。對我們的(de)眼睛來說這樣的(de)組合很舒适，可(kě)讀性很高(gāo)，這也(yě)是爲什(shén)麽傳統媒體采用(yòng)這樣的(de)配色方案，因爲這類網站的(de)主體是文字，這樣的(de)顯示方式會讓文字更加鮮明(míng)易讀。我是鼓勵設計師在傳統的(de)基礎上有些創新，但是千萬不能忘了(le)對比度！比如把傳統的(de)模式反過來，黑(hēi)底白字。但是以下(xià)幾個組合強烈不推薦使用(yòng)：黑(hēi)底黃字、藍底綠字和(hé)藍底粉字等等。如果您非不信邪，大(dà)可(kě)以試試看，看看會不會還是用(yòng)回第一稿！設計稿做(zuò)出來之後自己先看看，如果自己覺得(de)看著(zhe)舒服，再應用(yòng)在你的(de)項目裏。

黑(hēi)白這兩個顔色都是基本顔色，有時候也(yě)需要一些輔助色來讓設計更勾人(rén)。舉個栗子來說：藍色很适合用(yòng)在标題上；紅色則更适合作爲按鈕；導航菜單有時候需要用(yòng)陰影(yǐng)或發光(guāng)特效來裝飾一下(xià)，但是裝飾的(de)顔色與主色對比度不要太高(gāo)。這樣可(kě)以讓導航更明(míng)确，給予用(yòng)戶更好的(de)視覺體驗。

2. 圖形元素最少化(huà)

報刊的(de)布局是簡單幹淨的(de)，内容突出并且十分(fēn)詳實，結構明(míng)确，圖形元素出現的(de)方式與其他(tā)設計不太一樣，通(tōng)常以下(xià)面幾種方式出現：線條、形狀、顔色、排版和(hé)紋理(lǐ)。

就像咱剛才說的(de)，這樣的(de)網站裏，配色通(tōng)常很簡單。紋理(lǐ)的(de)應用(yòng)很少見，想象一下(xià)，報紙雜志類的(de)網站，背景是一堵磚牆，或者是一塊木(mù)闆，或者是什(shén)麽複雜的(de)紋理(lǐ)，會是怎麽個感受？影(yǐng)響閱讀是肯定滴！紋理(lǐ)會分(fēn)散讀者的(de)注意力，這違背了(le)我們的(de)設計初衷：突出文字。但是這類網站裏，可(kě)以采用(yòng)紙質紋理(lǐ)。紋理(lǐ)可(kě)以出現在背景裏、按鈕上或者是頁眉頁腳。

規範的(de)網格設計或者是分(fēn)欄布局可(kě)以減少線條和(hé)形狀的(de)使用(yòng)，因爲畫面裏已經被分(fēn)割成很多(duō)部分(fēn)了(le)，無需再添加更多(duō)的(de)。如果設計中添加過多(duō)線條和(hé)形狀，反而不夠簡潔美(měi)觀。

3. 基于網格的(de)布局和(hé)分(fēn)欄結構

報刊網站的(de)布局基本上可(kě)以說是完美(měi)的(de)結構布局，内容豐富的(de)網站通(tōng)常都是采用(yòng)類似的(de)布局，所以網站結構是第一重要的(de)。網格和(hé)分(fēn)欄将内容有效地分(fēn)布在閱讀媒介上，正如Mark Boulton所說：“一個優秀的(de)網格系統不僅可(kě)以讓你的(de)設計看起來整潔美(měi)觀，也(yě)會增強可(kě)讀性和(hé)易用(yòng)性。”基于網格系統的(de)布局設計可(kě)以把内容分(fēn)類，讓用(yòng)戶可(kě)以有選擇地去閱讀自己感興趣的(de)部分(fēn)。

相似但不同的(de)分(fēn)欄布局可(kě)以有不同的(de)寬度，但是應該注意内容的(de)高(gāo)度，更寬的(de)分(fēn)欄可(kě)以容納更多(duō)的(de)文字。兩個分(fēn)欄的(de)結構可(kě)以讓網頁更耐看，盡管三個或三個以上的(de)分(fēn)欄可(kě)以讓分(fēn)類更明(míng)确，但是分(fēn)欄和(hé)網格的(de)作用(yòng)差不多(duō)，都隻是讓内容的(de)分(fēn)類更明(míng)确，讓用(yòng)戶可(kě)以更快(kuài)更方便地找到自己感興趣的(de)内容，不要忘了(le)這個初衷。考量好了(le)分(fēn)欄的(de)寬度，也(yě)不能忘了(le)分(fēn)欄内兩段内容之間的(de)間距，間距若是太小會造成閱讀不便，網站的(de)體驗也(yě)不會好。

4. 标題和(hé)摘要

打開一個網站或博客，我相信任何人(rén)都不會想要迷失在在一篇又一篇充滿文字的(de)文章(zhāng)裏，标題讓找尋文章(zhāng)的(de)過程變得(de)更簡單。不管是網格系統中的(de)一小塊還是一整個分(fēn)欄，都需要一個标題告訴大(dà)家，這一塊文字是在講點啥，不然誰有那個耐性看下(xià)去然後再總結中心思想啊！标題要比正文的(de)字号大(dà)一些，也(yě)可(kě)以選擇加粗或是用(yòng)其他(tā)顔色來标明(míng)，讓它更醒目。

摘要則是一篇文章(zhāng)的(de)簡短概括，它要通(tōng)過簡短的(de)幾句話讓人(rén)理(lǐ)解這篇文章(zhāng)主要是講了(le)啥事兒，也(yě)要足夠吸引人(rén)，讓人(rén)産生興趣進而閱讀整篇文章(zhāng)。這幾句話還是十分(fēn)必要的(de)，尤其是博客、在線期刊和(hé)新聞類的(de)網站。

5. 主要和(hé)次要内容

在你的(de)設計稿裏要有這樣的(de)主次觀念：要分(fēn)清哪些是最重要的(de)，要第一時間閱讀；哪些是可(kě)以先放放，等會再看甚至不堪也(yě)沒所謂的(de)内容。具體說來，網站的(de)首頁上一般都有一個巨大(dà)的(de)版頭，這裏通(tōng)常是一些重要的(de)新聞，可(kě)能是一個，也(yě)可(kě)能是兩個。這片區域通(tōng)常會配有報道相關的(de)一張大(dà)圖。其他(tā)内容的(de)占地面積一定比這部分(fēn)小，并且基于網格分(fēn)布在網頁的(de)其他(tā)地方。這讓人(rén)會把很多(duō)精力集中在重要的(de)新聞上，這些新聞也(yě)是人(rén)們分(fēn)享到其他(tā)SNS上數量最多(duō)的(de)新聞。

6. 簡單易用(yòng)且風格一緻的(de)導航

報刊網站布局是爲了(le)内容的(de)設計，它簡單易用(yòng)，因此，報刊網站的(de)導航也(yě)要具備簡單明(míng)确的(de)特點，導航的(de)位置也(yě)要明(míng)顯。

一般來說，導航最好放在頁面的(de)頂部，因爲通(tōng)常人(rén)們會最先注意到這裏，而且即使頁面滾到底，導航依然可(kě)以放在屏幕的(de)最上方。如果你喜歡垂直導航，那麽導航應該放在頁面左邊。這世界上大(dà)多(duō)數人(rén)的(de)閱讀習慣都是自左向右的(de)，放在左邊更符合視覺規律。

7. 分(fēn)類

報刊網站的(de)分(fēn)類是最明(míng)确的(de)，這樣的(de)分(fēn)類方式博客和(hé)其他(tā)網站也(yě)同樣适用(yòng)。單純的(de)排列文字并不會增加網站的(de)可(kě)讀性，我們還需要給内容進行分(fēn)類。像新聞類的(de)網站，我們還需要将不同的(de)主題區分(fēn)開來。

我認爲把内容分(fēn)類，并在導航裏體現出來是個不錯的(de)解決辦法。

8. 廣告位

在網站受歡迎以前該怎麽賺錢？對于各個網站來說，廣告是個不錯的(de)收入來源。廣告不能随随便便放在網頁上，它要有一個固定的(de)位置。一般來說可(kě)以放在左邊或右邊，頁眉和(hé)頁腳也(yě)是不錯的(de)選擇。也(yě)有一些Banner是放在文章(zhāng)中間的(de)，但這樣做(zuò)是一把雙刃劍：它可(kě)以讓網站賺到錢，但是也(yě)可(kě)能會讓一些讀者反感。

9. 側邊欄

側邊欄不僅可(kě)以挂廣告，還可(kě)以作爲另一種導航，它可(kě)以包括：文章(zhāng)類别、最新内容、搜索框、導航、SNS分(fēn)享按鈕、折扣等等内容。報刊網站布局很适合設置側邊欄，因爲可(kě)以直接作爲一個分(fēn)欄存在。

成功的(de)側邊欄要注意以下(xià)内容：長和(hé)寬、顔色、字體和(hé)位置。

側邊欄應該比其他(tā)分(fēn)欄小一些或者是等同的(de)大(dà)小，不會是布局中比較大(dà)的(de)部分(fēn)。它應該使用(yòng)一些中性色，但在布局中依然不會黯淡得(de)讓人(rén)忽略它。位置在左邊在右邊都可(kě)以，但之前我們說過，人(rén)們會率先看到左側。

10. 留白最大(dà)化(huà)

文章(zhāng)寫到這兒，都是在寫如何建立一個令人(rén)印象深刻同時又具有一定功能性的(de)網站，除了(le)功能，我們不能忘了(le)要給頁面留出一點透氣的(de)空間，沒錯！就是留白。這是報刊風格網站必不可(kě)少的(de)一項内容。在分(fēn)欄與分(fēn)欄之間，側邊和(hé)底部都需要留白，這樣讀者才會感覺有思考的(de)空間留給自己，而不是通(tōng)篇一眼望不到頭的(de)文字。

一般來說，人(rén)們認爲沒有内容的(de)地方才會是一片空白的(de)，其實報刊風格設計裏提到的(de)“留白”有一個更狹隘的(de)定義：文本行與行，字與字之間的(de)空白還有内容周圍的(de)空白，是爲留白。适當的(de)留白可(kě)以讓網站看起來更簡潔、舒服，内容更易閱讀。即使是擁有超級多(duō)文字的(de)頁面也(yě)不例外。

11. 頻繁的(de)内容更新

報刊網站需要經常地添加新的(de)内容。試想一下(xià)，如果某些分(fēn)欄是空的(de)，這個網站看起來多(duō)尴尬！所以這就需要遵循某個頻率不停地來更新網站的(de)内容。

定期更新内容除了(le)爲了(le)網站的(de)外觀，也(yě)會影(yǐng)響到網站在搜索引擎的(de)排名。如果網站的(de)内容陳舊過時，人(rén)們就不會訪問網站，這會體現在搜索結果中。

12. 鼓勵SNS分(fēn)享

博客和(hé)新聞網站是最常見的(de)報刊風格網站，這些網站的(de)内容就是分(fēn)享給别人(rén)看的(de)，離不開社交媒體這個大(dà)平台。現在是一個信息高(gāo)度發達的(de)社會，人(rén)們會在社交網絡上花費大(dà)量的(de)時間，所以應該爲每一個流行的(de)社交媒體設置分(fēn)享按鈕：微博、人(rén)人(rén)、Pinterest、LinkedIn等等。這裏還是有一個忠告：分(fēn)享按鈕要突出！确保人(rén)們能随時随地一不小心就戳上去分(fēn)享給親朋好友七大(dà)姑八大(dà)姨們！

我還要說一點，是關于移動終端的(de)。報刊網站設計在移動終端上沒有辦法保持它在網頁上的(de)基本布局，手機網站不應該有那麽多(duō)分(fēn)欄，而這是報刊網站風格的(de)标志性特點之一。移動終端的(de)網頁不應該有側邊欄，導航也(yě)應該針對移動終端重做(zuò)，因爲滑動操作比點擊操作更适合移動終端。

報刊網站布局設計案例