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

第一：戰(zhàn)略層設計

主要體現(xiàn)在兩方面：一是用戶核心需求的分析，二是網(wǎng)站商業(yè)的主要目的等。

第二：范圍層設計

主要體現(xiàn)在內容需求和實現(xiàn)內容的功能方式上。具體講是指從新聞事件的核心信息，周邊信息以及輻射信息三個層次深度挖掘內容，從中組織相關文字，圖片以及音頻視頻資料。并確定內容信息呈現(xiàn)的優(yōu)先級， 即欄目設定及層次。

第三：結構層設計

新聞網(wǎng)站的結構層設計包含信息結構和信息交互設計。

第四：框架層設計

框架層包括界面設計、信息設計等。

第五：表現(xiàn)層設計

主要指的是視覺設計。

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

結構層設計

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

下面從創(chuàng)新互聯(lián)小編從七方面一一細致剖析。

1 內容類別網(wǎng)站導航展示形式

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

(1) 全局網(wǎng)站導航之 一：文字單元網(wǎng)站導航

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

范例：

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

(2)全局網(wǎng)站導航之二：二級菜單形式網(wǎng)站導航(推薦)

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

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

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

2 網(wǎng)站導航位置

(1)通常網(wǎng)站導航都會放在頂部

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

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

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

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

(2)垂直導航

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

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

3 廣告位置

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

4 網(wǎng)站局部導航 ， 即分類頁面導航

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

5 網(wǎng)站語境導航

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

共有三種形式。

第一種，純文字鏈接。

第?種 ， 圖片+下方文字

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

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

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

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

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

6 “分享 ”

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

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

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

? 框架層設計

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

1 首頁信息布局。

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

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

新聞網(wǎng)站首頁界面的視覺傳達設計及整體信息架構中，每屏的架構變化不能太多，主次內容信息位置需保持一致，否則用戶每瀏覽到下面的頁面都需要重新理解架構，很不友好。

將圖片作為主要視覺元素， 這是未來網(wǎng)站設計的發(fā)展?向之一，?目前為止已有很多信息類網(wǎng)站首頁采用圖片作為主要視覺元素。所以建議在圖片不會加重帶寬負荷的前提下，采用以圖片為主要視覺元素的設計。

新聞類網(wǎng)站需要在首頁用大幅板塊突出重大新聞，引起視覺注意。

一些研究表明，現(xiàn)代設計風格更受用戶歡迎，具體體現(xiàn)在同樣的新聞標題和內容，如果設計是現(xiàn)代設計風格，網(wǎng)站點擊率更高。

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

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

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

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

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

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

第一，列表形式

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

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

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

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

第一：瀑布流。

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

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

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

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

網(wǎng)站的首頁上要有個大版頭，用于放置當天最重要新聞，可能是一個，也可能是兩個。這片區(qū)域通常會配有報道相關的一張大圖。

其他內容的占地面積?定比這部分小，且基于網(wǎng)格分布在網(wǎng)頁的其他地方。這讓人會把很多精力集中在重要的新聞上，這些新聞也要引導用戶分享到SNS網(wǎng)站。

此部分有以下幾種形式：

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

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

例子：衛(wèi)報

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

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

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

二 子頁面信息布局

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

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

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

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

4 子頁面布局

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

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

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

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

三 表現(xiàn)層設計

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

(1)整體設計風格

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

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

(2)顏色和文字

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

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

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

(3)導航

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

但天氣是次要信息，導航是主要信息，這個網(wǎng)站頁面十分突出天氣，這點上不值得借鑒

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

新聞名稱：新聞類網(wǎng)站設計五個特點
網(wǎng)頁URL：http://redsoil1982.com.cn/news1/170251.html

網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡營銷seo公司；服務項目有網(wǎng)站設計等

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)