新聞網站首頁視覺呈現元素研究

黃睿

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

[關鍵詞]新聞網站；視覺呈現；共性；差異

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

一、研究對象的界定

（一）新聞網站

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

（二）視覺呈現

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

二、研究方法與框架

（一）研究方法

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

（二）研究框架

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

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

本文認為新聞網站的視覺呈現主要體現在結構層、框架層和表現層之上：

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

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

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

三、對比分析

（一）結構層的視覺呈現

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

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

（二）框架層的視覺呈現

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

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

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

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

（三）表現層的視覺呈現

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

1、基礎色調對比

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

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

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

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

2、標題文字、字體對比

無論新聞網站如何發展，文字終究是新聞信息呈現的第一載體。新聞網站首頁的文字，主要承載的內容是各個新聞信息的標題。

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

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

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

四、研究結論

（一）對比分析總結

1、版面風格統一，各具特色

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

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

2、視覺設計有創新，設計理念有待改進

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

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

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

（二）發展啟示

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

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

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

2、新聞標題呈現方式——首頁預覽式標題的未來

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

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

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

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

結語

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

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

責編：周蕾