作者曾在香港雅虎就職，本文梳理了新聞類網(wǎng)站用戶體驗的五個維度，從各方面闡述如何設計新聞類網(wǎng)站。

新聞類網(wǎng)站設計主要為以下五方面:

1. 戰(zhàn)略層設計。體現(xiàn)在兩方面：一是用戶核心需求分析，二是網(wǎng)站商業(yè)目標等。
2. 范圍層設計。體現(xiàn)在內(nèi)容需求和實現(xiàn)內(nèi)容的功能方式上。具體講是指從新聞事件的核心信息，周邊信息以及輻射信息三個層次深度挖掘內(nèi)容，從中組織相關文字，圖片以及音頻視頻資料。并確定內(nèi)容信息呈現(xiàn)的優(yōu)先級， 即欄目設定及層次。
3. 結構層設計。新聞網(wǎng)站的結構層設計包含信息結構和信息交互設計。
4. 框架層設計?？蚣軐影ń缑嬖O計、信息設計等。
5. 表現(xiàn)層設計。表現(xiàn)層設計主要指視覺設計。

其中戰(zhàn)略層和范圍層由于每個新聞網(wǎng)站的定位不同，自然不同。在這里全面梳理結構層設計，框架層設計和視覺設計。從各方面闡述如何設計新聞類網(wǎng)站。

一 結構層設計

新聞網(wǎng)站的結構層體現(xiàn)在網(wǎng)頁的組織分類和導航設計上。目標是要有足夠清晰的結構來包含不同類別的新聞信息，讓受眾進入網(wǎng)頁時就能明確地了解網(wǎng)站內(nèi)容，并輕松地選擇自己需要瀏覽的新聞類別。

下面從七方面一一細致剖析。

1 內(nèi)容類別導航展示形式

即是否能引起用戶進一步瀏覽網(wǎng)頁的欲望？

(1) 全局導航之 一 —— 文字單元導航

大部分傳統(tǒng)新聞網(wǎng)站使用這種形式。在網(wǎng)頁上方有分類十分廣泛的單元導航模塊，通過譬如國內(nèi)新聞/國際新聞/軍事/娛樂/財經(jīng)等諸多關鍵詞將網(wǎng)站信息進行分類，在點擊任意單元后立即載入相關獨立網(wǎng)頁。

范例：

這類的導航分類設計能區(qū)分出不同類別，結構相對清晰，但當欄目過多時，較考驗設計師水平。如容易因為太擁擠的文字讓用戶產(chǎn)生視覺疲勞，導致無法從導航中獲得繼續(xù)瀏覽網(wǎng)站的興趣。

采用這類導航形式的國內(nèi)外網(wǎng)站參考：

• 華爾街日報：http://www.wsj.com
• 衛(wèi)報：https://www.theguardian.com/international
• 鳳凰網(wǎng)：http://www.ifeng.com
• 香港新聞網(wǎng)站：http://www.hk01.com/
• 一傳媒：http://hk.nextmedia.com

(2)全局導航之二 —— 二級菜單形式導航(推薦)

?級菜單形式。即首頁導航模塊數(shù)量盡可能少，設置為當鼠標移動到某個導航目錄時，自動出現(xiàn)二級菜單，將目錄進行更具體的分類。這樣在視覺上更簡潔清晰，在視覺符號間有足夠的留白，能有效杜絕受眾產(chǎn)生生視覺疲勞。

參考例子：

• 澎湃 http://www.thepaper.cn

(3) 全局導航之三 —— 網(wǎng)頁地圖式導航

網(wǎng)頁地圖式導航可有可無，一般在網(wǎng)頁底部展示，目的是讓新用戶立即對網(wǎng)站全部布局有直觀認識，且方便用戶瀏覽感興趣內(nèi)容。

參考例子：

• http://www.ap.org/
• http://www.163.com

2 導航位置

(1)通常導航放在頂部

導航通常放于頁?頂部，因為人們會最先注意到這里?導航在上方的形式具體分為三種。

第?種，固定在頁?位置不動，隨頁面下拉，導航模塊消失在視野范圍內(nèi)。

第二種，導航標簽懸浮在上方。

參考例子：

• http://std.stheadline.com
• http://www.thepaper.cn

第三種，導航中的搜索/分享等始終懸浮在上方，但所有關鍵詞文本搜索聚焦到一處按鈕。

參考例子:

• http://www.theonion.com

(2)垂直導航

最早的網(wǎng)站也采用垂直導航。如設計師在綜合考慮后，采?用垂直導航的話，建議放在左邊，更符合視覺規(guī)律。

(3) 地圖導航通常放在網(wǎng)站底部。

3 廣告位置

廣告不能隨便放在網(wǎng)頁上，一定要有固定位置?一般來說可放在左邊或右邊，頁眉和頁腳也是不錯的選擇。也有一些Banner放在文章中間，但這樣做是把雙刃劍 : 它可以讓網(wǎng)站的廣告效果更好，但也會打斷閱讀體驗，引起用戶反感。

4 局部導航 ， 即分類頁面導航

分類頁面導航指面包屑路徑，即當用戶進入子頁面時 ， 給予用戶提示，讓用?明?自己當前所處位置。例如通常網(wǎng)站會顯示：

5 語境導航

語境導航指當用戶到達某個深層頁面時，根據(jù)該頁面語境給予用戶導航，例如“精彩推薦”“相關新聞”等。

共有三種形式。

第一種，純文字鏈接。

第?種 ， 圖片+下方文字:

參考例子：

http://www.vox.com/policy-and-politics/2016/10/6/13163220/trump-hotels-and-casino-resorts

第三種，圖片+圖片右邊文字

第四種，圖片+圖片上文字

推薦采用“圖片+圖片下方簡短文字”的卡片式布局推薦。原因為

第一，圖片在吸引用戶眼球和信息理解方面超過文字(下方框架設計時會講到）

第?，卡片式小布局比“圖片+圖片右方文字”的列表式形式更節(jié)省空間，也更易于用戶短時間內(nèi)接受整體信息，可在有限空間內(nèi)清晰地把所有推薦內(nèi)容展示出。

6 “分享 ”

“分享”是新聞類網(wǎng)站的重要需求。很多研究都證明“，分享”按鈕只要在界?上引導得當，會大大提高用戶的分享概率?！胺窒怼?有兩種形式：

第一，固定在文章底部或(和)開頭

參考例子：

• http://www.theonion.com

第二 “分享”按鈕懸浮在?頁?面左側

參考例子：

• https://www.statnews.com/2016/10/05/one-brave-idea- heart-research/?s_campaign=bostonglobe%3Asocialfl?ow%3Afacebook

? 框架層設計

框架層具體表現(xiàn)為網(wǎng)站頁面的整體布局，包括各個板塊在頁?上的布局，文本、圖?片等新聞信息的網(wǎng)頁區(qū)域安排等。

1 首頁信息布局。

首頁的整體版塊布局所承載的信息構架十分重要。

以下是已有研究成果確定需要遵循的原則：

• 新聞網(wǎng)站首頁界面的視覺傳達設計及整體信息架構中，每屏的架構變化不能太多，主次內(nèi)容信息位置需保持一致，否則用戶每瀏覽到下面的頁面都需要重新理解架構，很不友好。
• 將圖片作為主要視覺元素， 這是未來網(wǎng)站設計的發(fā)展?向之一，?目前為止已有很多信息類網(wǎng)站首頁采用圖片作為主要視覺元素。所以建議在圖片不會加重帶寬負荷的前提下，采用以圖片為主要視覺元素的設計。
• 新聞類網(wǎng)站需要在首頁用大幅板塊突出重大新聞，引起視覺注意。
• 一些研究表明，現(xiàn)代設計風格更受用戶歡迎，具體體現(xiàn)在同樣的新聞標題和內(nèi)容，如果設計是現(xiàn)代設計風格，網(wǎng)站點擊率更高。

?前大部分網(wǎng)站采用以下幾種設計方式：

(1)整體布局 之一 —— 最為傳統(tǒng)的兩欄/三欄布局

例子：

• http://www.bostonglobe.com
• http://www.theonion.com
• time magazine
• the wall street journal

(2 )整體布局之二——混合設計

三欄縮小成兩欄，然后一欄。這樣設計更有利于加載速度，閱讀體驗更流暢。但設計風格不統(tǒng)一，造成認知負荷。

例子:

• the Boston Globe

(3) 內(nèi)部元素布局 —— 把新聞標題、導語融入新聞圖片的卡片式布局。

這也是現(xiàn)在非常流行的設計手段，是一種將新聞信息加以視覺化的現(xiàn)代發(fā)展趨向，目前體現(xiàn)為三種方式。

第一，列表形式

第二，卡片形式 ：圖片+圖片下方文字

參考例子：

• 衛(wèi)報：https://www.theguardian.com/international
• 紐約時代：http://nytimes.comApple daily

第三，卡片形式 ： 圖片+圖片上標題

參考例子:

• USA today

總結：以圖片為主要視覺元素的新聞首頁能獲得更高點擊率，因此建議采用圖片卡形式。而具體采用哪種類型的圖片卡形式和下?第四點的選擇相關聯(lián)。

(4)分類如何布局/標簽如何打 —— 目前有以下幾種形式：

第一：瀑布流。

相似但不同的分欄布局可以有不同的寬度，但應注意內(nèi)容的?度，更寬的分欄可容納更多文字。網(wǎng)頁滑動到底后自動加載新內(nèi)容，且無明顯標線分隔，如要打標簽，只能采用打在“卡片”內(nèi)的形式。移動端更適合瀑布流。

參考例子：

• http://www.thepaper.cn
• mijlo blog

第二， 圖片卡設計+縱向排版

參考例子：

• http://edition.cnn.com/
• http://www.usatoday.com/
• http://www.xinhuanet.com

第三，圖片卡設計+橫向排版

參考例子:

• https://www.theguardian.com/international
• www.hko1.com

5)首頁突出重要新聞 —— 目前有以下幾種形式。

網(wǎng)站的首頁上要有個大版頭，用于放置當天最重要新聞，可能是一個，也可能是兩個。這片區(qū)域通常會配有報道相關的一張大圖。其他內(nèi)容的占地面積?定比這部分小，且基于網(wǎng)格分布在網(wǎng)頁的其他地方。這讓人會把很多精力集中在重要的新聞上，這些新聞也要引導用戶分享到SNS網(wǎng)站。

此部分有以下幾種形式：

第一， 主要視覺區(qū)域（大圖）在左邊，右邊是和大圖報導相關連的一系列報導的文字導航。

第二，主要視覺區(qū)域（大圖）位于中間

例子 ：衛(wèi)報

第三，主要視覺區(qū)域（大圖）在左邊，右邊是熱門文章列表(帶小圖片)

第四，主要視覺區(qū)域（大圖）在左邊，右邊是相關標題和導語。

第五，主要視覺區(qū)域（大圖）在左邊，右邊是登錄注冊和廣告，以圖片的形式呈現(xiàn)。

二 子頁面信息布局

新聞類網(wǎng)站的子頁面要注意以下四點：

1 子頁面應有面包屑導航，讓用戶知道目前所在位置。

2 新聞網(wǎng)站的“分享”是個重要需求，并且內(nèi)容帶有自傳播屬性，有利于產(chǎn)品推廣。所以在設計上應強化“分享”，可考慮在文章開頭和結尾都放置“分享”按鈕或?qū)ⅰ胺窒怼卑粹o懸浮在網(wǎng)頁上的固定位置。

3 “評論”也是新聞類網(wǎng)站子頁?的常見需求。設計方式上應引導用戶主動評論。

4 子頁面布局

新聞類網(wǎng)站的子頁面會根據(jù)產(chǎn)品定位和內(nèi)容的不同而不同，由此有很大的發(fā)揮和創(chuàng)新空間。

下面以新聞專題類內(nèi)容為例，舉例說明可采用的子頁面布局。

新聞專題類報道，指網(wǎng)站就某一個新聞話題，采集一系列相關文章。這種內(nèi)容布局很適合卡片設計?？ㄆＪ娇稍谀撤N程度上窮盡某一新聞話題的所有細節(jié)，通過新聞卡片的運用，還可將新聞信息精煉為讀者容易接受和閱讀的內(nèi)容。另外，卡片庫里每張卡片的標題內(nèi)容都可在新聞網(wǎng)頁中看到，這就很方便用戶隨意查看他們所關注的這一話題的某個具體內(nèi)容。這種設計方式有較個性化的閱讀體驗，同時卡?化設計也更適合在移動媒體中推廣。

另外，當某一專題的文章特別多時，卡片設計也可以解決問題。如某個專題，有200條相關信息，依照傳統(tǒng)?式，將信息?條條羅列出，那網(wǎng)站下方內(nèi)容很容易被用戶忽視， 但卡?可以全面?直接地呈現(xiàn)給讀者有趣內(nèi)容。此外，對于?型長篇報道計劃?言，讀者不可能?次性看完所有卡?，通過設計，讀者已閱讀過的卡片可變?yōu)榛?，這樣就很容易分辨出讀者讀過的內(nèi)容。

這里推薦兩個新聞類專題頁面：

• vox ：http://www.vox.com/cards/ukraine-everything-you-need-to-know/what-is-the-ukraine-crisis
• 華爾街日報：http://online.wsj.com/ww1/

三 表現(xiàn)層設計

表現(xiàn)層是指用?點開網(wǎng)頁后呈現(xiàn)在屏幕上的網(wǎng)頁樣貌，是以上四個層級之于視覺呈現(xiàn)的最終效果。包括色彩，標題，圖像(圖片與視頻) 等多個元素。

(1)整體設計風格

整體設計風格?定要和產(chǎn)品的定位相符合。比如，定位是針對中產(chǎn)階級的嚴肅媒體，則在選擇版式，交互方式，顏色等時都可傾向于更沉穩(wěn)；而如定位是針對年輕?的新聞網(wǎng)站，則可設計為活潑，互動性強。另外，注意新聞類網(wǎng)頁的設計最好要有留白。在分欄與分欄間，側邊和底部都需要留白，這樣讀者才會感覺有思考的空間留給自己，而不是通篇?眼望不到頭的文字。此外，還要注意文本行與行，字與字之間的空白以及內(nèi)容周圍的空白。適當留白可讓網(wǎng)站看起來更簡潔，更易閱讀。

在整體設計風格的創(chuàng)新上，水墨設計風格較適合中國新聞網(wǎng)站，有興趣的設計師不妨試試。

(2)顏色和文字

根據(jù)網(wǎng)站定位不同，色調(diào)選擇也不同。另外注意細節(jié)色調(diào)，譬如選中button的顏色色調(diào)等。

另外，新聞類網(wǎng)站的文字需要注意文字顏色和底色對比度。 白色或略帶灰色的紙張上印刷著黑色的文字，對人類眼睛來說這樣的組合很舒適，可讀性很高，這也是為什么傳統(tǒng)媒體采用用這樣配色方案的原因。

另可以選擇紋理底色來增強網(wǎng)站個性，但紋理有可能分散讀者的注意力，要謹慎使用，例如紋理可出現(xiàn)在背景，按鈕處，不一定要大面積使?在內(nèi)容區(qū)。

(3)導航

導航菜單有時需用陰影或發(fā)光特效來裝飾，但裝飾的顏色與主色調(diào)對比度不要太?。這樣可讓導航更明確，給用戶更好的視覺體驗。

參考網(wǎng)站：

https://www.thesun.co.uk/

但天氣是次要信息，導航是主要信息，這個頁面十分突出天氣，這點上不值得借鑒

http://www.reuters.com/

此網(wǎng)站排列布局清晰，重點層次突出

在實際應用中，應根據(jù)新聞網(wǎng)站的不同定位，采取不同的方案。

作者：宋林恒。曾于香港雅虎，國際聯(lián)合出版集團等公司就職

本文由 @小林子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。