新聞網(wǎng)站首頁視覺呈現(xiàn)元素研究

黃睿

[摘要]新聞網(wǎng)站憑借其視覺元素方面的豐富資源，以及大屏幕閱讀的視覺體驗，在視覺呈現(xiàn)上相對于報紙和移動終端都有著一定的優(yōu)勢。本文旨在通過對新華網(wǎng)、鳳凰網(wǎng)、澎湃新聞（網(wǎng)頁）三家不同性質的新聞網(wǎng)站首頁的視覺呈現(xiàn)元素進行對比研究，提煉出新聞網(wǎng)站視覺編輯的共性和差異，以分析異同點為手段，挖掘視覺傳播之于網(wǎng)頁新聞的意義，并對其發(fā)展方向和著力點提出建議。

[關鍵詞]新聞網(wǎng)站；視覺呈現(xiàn)；共性；差異

“如報刊設計家Gyorgy Kepes所言：‘視覺的法則取決于時代的習慣”，互聯(lián)網(wǎng)時代新聞網(wǎng)站信息呈現(xiàn)的視覺法則是否具有其必然的時代性，不同網(wǎng)絡媒體在通過視覺呈現(xiàn)搶奪受眾注意力的時候呈現(xiàn)出的狀態(tài)有何共性和差異，是本文探討的方向。

一、研究對象的界定

（一）新聞網(wǎng)站

本文所探討的新聞網(wǎng)站，是以經(jīng)營新聞業(yè)務為主要生存手段的網(wǎng)站。其中包括如新華網(wǎng)等國家大型新聞門戶，新浪等商業(yè)門戶新聞網(wǎng)站，鳳凰網(wǎng)等跨平臺網(wǎng)絡新媒體的網(wǎng)站部分。這其中有相當一部分新聞網(wǎng)站已經(jīng)開展了跨媒介的新聞發(fā)布業(yè)務，如鳳凰網(wǎng)、澎湃新聞、網(wǎng)易新聞等都擁有移動終端的新聞APP產品，但本文不將APP產品列入探討范圍。

（二）視覺呈現(xiàn)

媒介技術的發(fā)展是視覺傳播得以進行的前提。在海量信息云集于新聞網(wǎng)頁這一信息媒介時，受眾主要通過文本、色彩、圖片、版面分布、超鏈接、互動窗口等視覺形象的接收和認知來獲得信息。新聞網(wǎng)站的信息傳達無疑主要通過新聞文本，但視覺界面作為一種信息可視化的方式，對于受眾接受資訊有著非常重要的助力。用戶在瀏覽網(wǎng)絡頁面時，也主要是對視覺信息產生最初的感官反應，從而激發(fā)大腦進行信息識讀。一個優(yōu)秀的新聞網(wǎng)站頁面，必須是以受眾感知信息過程的舒適程度為原則，在受眾點選網(wǎng)頁內容的過程中關注其心理體驗。

二、研究方法與框架

（一）研究方法

“比較研究法是指根據(jù)一定的規(guī)則，把彼此有某種內在聯(lián)系的或兩個以上的事物加以類比和分析，確定其相似與相異之點，從而把握事物的本質、特征及其規(guī)律性的一種思維過程和科學方法”嘲。本文選擇三個研究對象，其中新華網(wǎng)作為新華社主辦的中央重點新聞網(wǎng)站，是中國最權威的網(wǎng)上中外文新聞發(fā)布平臺；鳳凰網(wǎng)作為鳳凰衛(wèi)視傳媒集團跨平臺網(wǎng)絡新媒體公司，以全球主流華人為服務對象；上海報業(yè)集團旗下的澎湃新聞可以說是我國報業(yè)集團改革創(chuàng)新的成果，以其“專注時政與思想的互聯(lián)網(wǎng)平臺”口號廣受歡迎。

（二）研究框架

一個優(yōu)秀的新聞網(wǎng)頁應該為受眾提供優(yōu)質的視覺體驗，這就需要網(wǎng)站對頁面上基本的信息進行合理的視覺設計。武漢大學胡昌平教授在宏觀層次上將用戶體驗劃分為戰(zhàn)略層、范圍層、結構層、框架層、表現(xiàn)層五個層次。

戰(zhàn)略層是網(wǎng)站信息構建中意義最深遠的、形態(tài)最抽象的層級，它關系到新聞網(wǎng)站的本質和原則。在明確了戰(zhàn)略層之后，網(wǎng)站必須明確自身的范圍層，即網(wǎng)站能夠提供給受眾的具體功能以及瀏覽內容，包括報道角度、政治傾向等。

本文認為新聞網(wǎng)站的視覺呈現(xiàn)主要體現(xiàn)在結構層、框架層和表現(xiàn)層之上：

新聞網(wǎng)站的結構層體現(xiàn)在網(wǎng)頁的組織分類和導航設計上，表現(xiàn)為一個足夠清晰的結構來包含不同類別的新聞信息，讓受眾進入首頁時可以明確地點選需要瀏覽的新聞類別。

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

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

三、對比分析

（一）結構層的視覺呈現(xiàn)

新華網(wǎng)首頁部分，在網(wǎng)頁上方安排了分類十分廣泛的單元導航模塊，通過時政、法制、軍事等諸多關鍵詞將網(wǎng)站信息進行了分類，在點擊任意一個單元之后會立即載入獨立的專題網(wǎng)頁，如新華財經(jīng)。鳳凰網(wǎng)在這方面的設計與新華網(wǎng)類似，但是分類相對較少，視覺上更加簡潔大方?？傮w來說表現(xiàn)出傳統(tǒng)新聞網(wǎng)站穩(wěn)重的導航風格。這一類的導航分類設計很容易因為過于擁擠的文字讓受眾產生視覺疲勞。

在澎湃新聞首頁上，導航模塊被設計到網(wǎng)站Logo的正右方，僅僅設置了七個單元，鼠標移動到每一個導航目錄上，便會自動出現(xiàn)一個二級菜單，將目錄進行更具體的分類。這樣的分類導航設計在視覺上更加簡潔清晰，在視覺符號之間有足夠的留白，能夠有效杜絕受眾產生視覺疲勞。

（二）框架層的視覺呈現(xiàn)

研究顯示受眾對網(wǎng)頁整體設計的反應僅有50毫秒的視覺印象，網(wǎng)頁的視覺設計直接影響了用戶對網(wǎng)站信息的信任感。第一頁面是網(wǎng)站首頁“門臉”，超過3次以上的下拉界面會讓受眾感到厭倦，因此新聞網(wǎng)站的各種信息內容都意在搶奪這塊最具關注度的高地。首頁整體版塊布局所承載的信息構架十分重要，一個具有整體性的信息架構能帶給用戶統(tǒng)一的視覺體驗。

根據(jù)已有的對于網(wǎng)站內容瀏覽眼動儀測試發(fā)現(xiàn)，用戶瀏覽網(wǎng)頁的視線軌跡大多是由上而下、從左及右的，而新華網(wǎng)的首頁似乎有意打破這一傳統(tǒng)的瀏覽軌跡。在第一頁面上，除了由上而下分別設置了Logo及廣告區(qū)、導航區(qū)、頭條新聞區(qū)以外，下方主頁面采取兩欄式設計，左邊由上而下布局當日重大新聞和國事活動報道，而在右側卻是更醒目的大屏幕圖像區(qū)域。這一區(qū)域被新華網(wǎng)稱之為大屏幕“全媒體播放器”，集成圖片、視頻等多種表現(xiàn)形式。網(wǎng)頁上獨辟一處的媒體播放器已不少見，但在傳統(tǒng)新聞首頁設置尺寸如此之大的播放器十分少見，這樣的設計無疑表現(xiàn)出新華網(wǎng)對圖像視覺呈現(xiàn)的關注。

鳳凰網(wǎng)首頁部分，則運用了較為傳統(tǒng)的三欄式設計，左中右分別是板塊推薦區(qū)、要聞區(qū)、圖像視頻區(qū)。這樣的板式布局在視覺呈現(xiàn)上表現(xiàn)較為保守，視覺區(qū)域較為分散。右側圖像視頻區(qū)的頂端也設置有一個類似于新華網(wǎng)的“全媒體播放器”，但尺寸不大，沒有形成強有力的視覺中心。

澎湃新聞的首頁設計顯得更加大膽，在Logo和導航區(qū)的下方，直接用大圖片的方式放置頭條新聞，并且圖片可以隨著鼠標的移入而放大，形成更強烈的視覺沖擊。頭條圖片的下方是按照新聞熱度依次排列的新聞標題區(qū)，受眾可以選擇卡片和列表兩種呈現(xiàn)形式。新聞標題區(qū)幾乎占據(jù)了3/4寬度的頁面，在頁面最右邊則是從上到下依次設置了“熱新聞”、“熱話題”、“熱回答”三個單元。澎湃新聞網(wǎng)頁的設計摒棄了傳統(tǒng)新聞網(wǎng)站將板塊和信息僅通過一排排標題排列在首頁上的做法，板塊劃分清晰，條理有序，形成了一個簡潔大方的框架結構。

（三）表現(xiàn)層的視覺呈現(xiàn)

表現(xiàn)層是其它四個層次在視覺上的最終體現(xiàn)，在框架層解決了網(wǎng)頁的排版布局、邏輯順序的問題之后，就需要表現(xiàn)層的色彩管理、文字設計、圖像表現(xiàn)來最終呈現(xiàn)網(wǎng)站的視覺樣貌。

1、基礎色調對比

基礎色調在一定程度上擔當著網(wǎng)站的辨識符號。在本文考察的三個對象中，新華網(wǎng)選取深藍色為代表色，并將顏色大范圍運用到網(wǎng)頁中，包括Logo設計、導航欄底色、熱點新聞大標題、板塊之間的分欄都使用了深藍色來表現(xiàn)，甚至廣告中也幾乎選擇偏深藍色調的圖片。

鳳凰網(wǎng)首頁在色彩的設計上顯得比較謹慎，由于2015年新改版的鳳凰網(wǎng)Logo采用了西瓜紅，因此首頁導航欄底色也設置成了西瓜紅。除此之外，各個分欄線的1/10長度設計為西瓜紅，部分網(wǎng)站廣告也簡單使用了紅色元素。

澎湃新聞則沒有明顯的代表色彩，只有首頁頂端用淺藍色打底設置了一個“問吧”的關鍵詞欄。網(wǎng)站Logo采用傳統(tǒng)的黑色書法設計，導航欄無背景色，選擇時會出現(xiàn)簡單的紅色背景。與新華網(wǎng)、鳳凰網(wǎng)不同的還有網(wǎng)頁的留白色設置為淺灰色。

總體來看，新華網(wǎng)的主體色貫穿于整個網(wǎng)頁的各個細節(jié)，這樣有利于頁面色彩的統(tǒng)一，增強網(wǎng)頁辨識度。澎湃新聞的色彩運用比較節(jié)制，這與上文分析其框架層的板式設計的簡約相互配合，呈現(xiàn)出一個更加舒適的視覺系統(tǒng)。鳳凰網(wǎng)則居于兩者之間，試圖從復雜和簡單之間尋求色彩的平衡，將主色調作為一種視覺的點綴。

2、標題文字、字體對比

無論新聞網(wǎng)站如何發(fā)展，文字終究是新聞信息呈現(xiàn)的第一載體。新聞網(wǎng)站首頁的文字，主要承載的內容是各個新聞信息的標題。

新華網(wǎng)，根據(jù)新聞顯要度大小，將重大新聞標題進行了加粗、加大和上色的處理，行間距較大。這樣的設計較有層次感，用戶能夠比較方便地辨析哪些是重要新聞信息。

鳳凰網(wǎng)首頁要聞版標題區(qū)則顯得比較擁擠，行間距小，字體均采用藏青色黑體，部分標題進行了加粗加大處理，但并不能判定加粗標題就是相對顯要的新聞。這樣的設計在視覺上表現(xiàn)得較為擁擠，層次不夠分明。

澎湃新聞在頭條大圖的下方，是采用扁平化卡片、列表的模式排列各條新聞，用戶可以根據(jù)自己的喜好來選擇排列模式，標題均配有可以預覽放大的新聞圖片。這樣的標題設計可以說是對“讀圖時代”更為積極的響應。尼古拉斯·米爾佐夫（Nicholas Mirzoeff）認為“視覺文化并不依賴于圖像本身，而是依賴于將存在加以圖像化或視覺化的現(xiàn)代發(fā)展趨向?！笨梢哉f，澎湃新聞把新聞標題、導語融入新聞圖片而設計的卡片式標題，便是一種將新聞信息加以視覺化的現(xiàn)代發(fā)展趨向。

四、研究結論

（一）對比分析總結

1、版面風格統(tǒng)一，各具特色

經(jīng)過以上對比分析，可以發(fā)現(xiàn)三個新聞網(wǎng)站都形成了各自的視覺特色，新華網(wǎng)在色彩、字體等元素上表現(xiàn)出大膽的特色，頁面呈現(xiàn)出十分濃烈的色彩氛圍。鳳凰網(wǎng)的保守設計代表了國內較主流的新聞網(wǎng)頁視覺設計。澎湃新聞表現(xiàn)出簡約、時尚的風格。

一個持續(xù)且連貫的網(wǎng)站風格，有助于媒體建立的品牌形象?！拔覀冮喿x任何一張報紙都是通過視覺線索的積累來傳遞它的個性”，新聞網(wǎng)站也一樣，從主體色調、字形字體到圖片運用，所有元素的設計都是網(wǎng)站整體風格的展示，讀者可以很輕易地通過這些視覺特色分辨網(wǎng)站是屬于穩(wěn)重型還是活潑型。

2、視覺設計有創(chuàng)新，設計理念有待改進

保持沉穩(wěn)風格并不代表拒絕創(chuàng)新。通過對三個網(wǎng)站的比較，可以看出它們均不排斥頁面創(chuàng)新，只是著力點有所不同。新華網(wǎng)著力于利用色彩、字體和圖片來增強視覺沖擊力，鳳凰網(wǎng)對于網(wǎng)站Logo的扁平化設計符合平面設計潮流。但是相對于澎湃新聞的頁面設計，前兩者均表現(xiàn)出“創(chuàng)新有余而力不足”的狀態(tài)，特別是新華網(wǎng)的設計，高飽和度的主色調表現(xiàn)得過于濃烈，雖然醒目，但有違當下網(wǎng)頁設計“扁平、清新、簡約”的主流理念。

3、圖片作為視覺元素獲得了更高的地位

圖片作為視覺傳播的重要載體，向來是平面媒體進行視覺化探索時首要考慮的元素。出現(xiàn)在網(wǎng)站首頁的新聞圖片不一定具有足夠的信息承載價值，但往往體現(xiàn)出一種導航和視覺表現(xiàn)的功能。新華網(wǎng)在首頁設置大尺寸的全媒體閱讀器，用于新聞圖片的呈現(xiàn)，以及澎湃新聞將新聞標題與圖片相結合的做法，都是將圖片作為視覺元素進行導航的功能體現(xiàn)。將圖片作為主要視覺元素，未來依舊是網(wǎng)站設計的發(fā)展方向之一，但是對圖像的運用要做到合理安排，濫用圖片容易產生視覺疲勞，同時加重帶寬負荷，拖延加載速度，反而影響受眾的視覺體驗。

（二）發(fā)展啟示

1、精簡導航——首頁個性化定制新聞

我國新聞網(wǎng)站在欄目導航上更多還是遵守著傳統(tǒng)的導航目錄進行信息分類。新華網(wǎng)的導航欄一共設置了36個目錄，讀者要么從36個目錄中尋找自己需要的信息，要么不斷地下拉頁面尋找信息單元，這樣的導航設置在互聯(lián)網(wǎng)快速閱讀的環(huán)境下顯得比較繁瑣，影響整體的瀏覽體驗。

澎湃新聞在這方面提供了借鑒，在其導航欄中的“訂閱”單元，用戶可以根據(jù)自己偏好的新聞類型對時事、財經(jīng)、思想、生活四個單元50個板塊的新聞和資訊信息進行訂閱，在隨后的瀏覽中，便可以直接在首頁的導航欄看到自己制定的欄目。澎湃新聞這種新聞訂閱方式只是在網(wǎng)站諸多單元中的一個，沒有影響到首頁的信息發(fā)布，從信息接收效率的角度來看，首頁新聞的個性化定制是一條值得探索的方向。

2、新聞標題呈現(xiàn)方式——首頁預覽式標題的未來

澎湃新聞首頁的預覽式標題，將新聞標題、新聞圖片、新聞導語集合成卡片式的視覺呈現(xiàn)方式，在國外諸如《衛(wèi)報》、《紐約時報》等媒體網(wǎng)頁版已被廣泛運用。

預覽式標題不僅可以規(guī)避大量標題堆砌在頁面上讓用戶產生視覺疲勞，用戶甚至不用點開標題，僅通過對新聞圖片的識別和對導語的簡單閱讀來判斷是否需要深入閱讀，從而提高了受眾獲取信息的主動性。

預覽式標題所面臨的問題在于，是否會影響網(wǎng)頁的信息承載量。以本文研究的三個網(wǎng)站為例，澎湃新聞首頁采用預覽式標題模式，通過一次下拉，只能看到7則新聞標題，但是新華網(wǎng)和鳳凰網(wǎng)無需下拉便可看到幾十則新聞標題。通過數(shù)字簡單比較，似乎預覽式標題的閱讀效率比較低，但正如上文提到預覽式標題能夠準確地向受眾傳達新聞信息概況，它避免了讓受眾一個個點擊標題，通過彈出新的網(wǎng)頁來進行閱讀，從而提升了閱讀體驗。

預覽式標題占據(jù)版面位置相對過多，這要求網(wǎng)站在設計標題的時候，要充分結合網(wǎng)站的品牌形象進行適宜的設計規(guī)劃。

結語

視覺傳播在國內越來越受到學界、業(yè)界重視，在平面媒體視覺傳播以及網(wǎng)絡視覺傳播研究領域都頗有收獲。本文通過對三個網(wǎng)站的比較研究，從結構、框架和表現(xiàn)三個層面分析了新聞網(wǎng)站首頁的視覺呈現(xiàn)要素，提出了“首頁定制新聞”、“首頁預覽式標題”在網(wǎng)頁視覺呈現(xiàn)上的優(yōu)勢，希望對我國網(wǎng)絡媒體的視覺傳播發(fā)展有一定參考價值。

（作者：四川大學文學與新聞學院2014級新聞與傳播碩士）

責編：周蕾