新闻网站首页视觉呈现元素研究

黄睿

[摘要]新闻网站凭借其视觉元素方面的丰富资源，以及大屏幕阅读的视觉体验，在视觉呈现上相对于报纸和移动终端都有着一定的优势。本文旨在通过对新华网、凤凰网、澎湃新闻（网页）三家不同性质的新闻网站首页的视觉呈现元素进行对比研究，提炼出新闻网站视觉编辑的共性和差异，以分析异同点为手段，挖掘视觉传播之于网页新闻的意义，并对其发展方向和着力点提出建议。

[关键词]新闻网站；视觉呈现；共性；差异

“如报刊设计家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级新闻与传播硕士）

责编：周蕾