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

黃睿

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

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

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

一、研究對象的界定

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

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

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

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

二、研究方法與框架

（一）研究方法

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

（二）研究框架

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

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

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

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

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

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

三、對比分析

（一）結(jié)構(gòu)層的視覺呈現(xiàn)

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

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

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

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

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

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

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

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

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

1、基礎(chǔ)色調(diào)對比

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

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

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

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

2、標(biāo)題文字、字體對比

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

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

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

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

四、研究結(jié)論

（一）對比分析總結(jié)

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

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

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

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

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

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

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

（二）發(fā)展啟示

1、精簡導(dǎo)航——首頁個性化定制新聞

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

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

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

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

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

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

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

結(jié)語

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

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

責(zé)編：周蕾