赢在视觉

新闻网站的视觉呈现

VISION
顾群业 aas@yeah.net http://www.guqunye.com
 赢在视觉
VISION

新闻网站为什么要重视“视觉呈现”
？

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

视觉，是一种古老的手段
视觉呈现，是有价值的。

中国黎族的纹身 北非的纹身

纹身的含义： 1 、“自己人”的标志。 2 、图腾崇拜的符号。 3 、形象的展示。

4 、成人的象征。
包含着对生命的祈求，对幸福的盼望，对灾难的回避，对青春美丽的显示等内容和意义。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

独龙族妇女

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

因为用户要“看”，所以我们要“视觉呈现
”
新闻网站尤其要注意“视觉呈现”的问题。有些网站，比如当当，它提
供的不仅是信息服务，主要的还是商品。所以，只要它的商品价格有
竞争力，它的视觉呈现稍微差一些，大家还是能够忍受。但是新闻网
站不同，因为用户浏览新闻网站是为了认知──而认知的主要手段就
是“看”。所以新闻网站需要特别关心信息如何“呈现”的问题。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

信息架构

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站拥有庞大的用户需求
2007-2008 年网络新闻用户对比

2007 年底 2008 年底 变化

网络新闻 网民规模 网民规模 增长量

使用率 使用率 增长率
（万人） （万人） （万人）
73.6% 15,500 78.5% 23,400 7,900 51.0%

据中国互联网络信息中心 (CNNIC) 2009 年 1 月份发布的《第 23 次中国互联网络发展状况统计报

告》中显示， 2008 年网络新闻的使用率达到 78.5% ，用户群体达到 2.34 亿人。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站的竞争力
“ 内容为王”是绝大部份网站经营者赞同的观点，因为我们传媒产业被很多人定义为“内
容产业”。但并不是说你把内容堆上去就成“王”了。“内容为王”的真正含义是：如果
你能把最适当的内容提供给尽可能多的有需求的人，你才有可能成为赢家。而在
这个过程中，很多要素都在发挥作用，内容只是最最基本的东西，最低层的东西，例
如还需要受众定位、用户体验、运营推广等等。所以说，传媒市场的竞争绝不仅仅是
内容的竞争。换句话说，就是大家的产品质量都上去了，我们再靠什么竞争？

新闻网站的视觉呈现

WEB
 视觉设计在网站传播中的作用
Vision

新闻网站视觉设计原则及建议

Vision
 视觉设计在网站传播中的作用
Vision
 赢在视觉
VISION

视觉设计在新闻网站传播中的作用

1 、视觉设计是新闻网站信息的表现形式

网站的新闻和视觉呈现是内容和形式的关系，两者逻辑相依；

视觉：一种特殊的感知方式

信息阅读行为、方式
基于文本的阅读 基于视觉图像的解读

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

视觉设计在新闻网站传播中的作用

信息传播日益转向为“以视觉为中心”的感性主义形态
 视觉文化是指文化脱离了以语言为中心的理性主义形态，日益转向以形象为中
心，特别是以影像为中心的感性主义形态。视觉文化，不但标志着一种文化形
态的转变和形成，而且意味着人类思维范式的一种转换。

—— 美国心理学家 W·J·T· 米歇尔

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

视觉设计在新闻网站传播中的作用

http://www.design.cn/yszh/2008-12-26/10742.html

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

视觉设计在新闻网站传播中的作用

2 、有助于提高阅读品质、增强新闻网站传播力

重视新闻网站的视觉设计，合理
利用视觉元素，既能快速、准确
的传达信息，又能提高用户体验
，促进品牌塑造，从而增加黏性
、增强网站的传播力。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

视觉设计在新闻网站传播中的作用

3 、有助于确立独特风格，形成品牌影响力

良好的视觉设计能传达出一个新闻网
站的理念和文化，确立自己明显的风
格特征，保持自己的独立性和不可替
代性，以更为直观的视觉形式宣传自
己。从而获得用户的认同感，在同类
网站中脱颖而出。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

视觉设计在新闻网站传播中的作用

3 、有助于确立独特风格，形成品牌影响力

网站独特的 LOGO 、整体色调、字体设

计、版式、图片等视觉元素都能在浏览
者脑海中形成品牌形象。但要符合物理
一致性的特点。

以提供信息服务为主的新闻网站给人以
稳重感和可信任感。使用亮粉色或者漫
画字体可能不是正确的选择，不仅是美
学的问题，还是战略定位的问题。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

视觉设计在新闻网站传播中的作用

3 、有助于确立独特风格，形成品牌影响力

（ 1 ）明显地与其他网站区分开来。

确立自己明显的风格特征，确保该网站
在运营活动中的独立性和不可替代性；
明确该网站的定位，属于网站无形资产
的一个重要组成部分；

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

视觉设计在新闻网站传播中的作用

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

视觉设计在新闻网站传播中的作用
3 、有助于确立独特风格，形成品牌影响力

（ 2 ）以直观的视觉形式传
达网站的理念和文化；

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

视觉设计在新闻网站传播中的作用

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

视觉设计在新闻网站传播中的作用

3 、有助于确立独特风格，形成品牌影响力

（ 3 ）以特有的视觉符号系统吸引公众的注意力并产生记忆，使用户对该网站所
提供的产品或服务产生最高的品牌忠诚度；

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

视觉设计在新闻网站传播中的作用

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

视觉设计在新闻网站传播中的作用

3 、有助于确立独特风格，形成品牌影响力

（ 4 ）提高对网站的认同感，形成凝聚力。
纹身的 含义： 1 、“自己人 ”的标志。 2 、图 腾崇拜的符号 。 3 、形象的展 示。 4 、成 人的
象征。
包含着 对生命的祈求 ，对幸福 的盼望，对灾 难的回避 ，对青春美丽 的显示等 内容和意义。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

视觉设计在新闻网站传播中的作用

4 、有助于实现新闻网站的功能

新闻网站作为新型的网络媒体，主要功能是传播新闻信息。但不同层次

、不同领域的用户的信息需求也不一样。合理的界面设计能有效区分各
类信息板块，使用户快速找到所需信息。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

视觉设计在新闻网站传播中的作用

4 、有助于实现新闻网站的功能
今日美国
http://www.usatoday.com/

导航条将网站内容分为新闻
、旅游、理财、运动、生活
、科技、天气等方面，分别
用不同的底色加以区分。

新闻网站的视觉呈现

WEB
 新闻网站视觉设计原则及建议

Vision
 赢在视觉
VISION

新闻网站视觉设计原则及建议

1 、采用清晰、合理的布局，干净的页面，科学的结构，使用户吸收信息
变得简单

新闻网站以内容为主，在
网站页面布局设计和结构
规划上应注重如何更能直
观地呈现新闻信息，保证
信息传达的清晰、明确。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

网页架构中，水平和
垂直方向的间距相同

利用局部颜色的反差对比来
突出网站的重点新闻和视频

美国 CNN 新闻网站： http://www.cnn.com/

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

网页主体架构清晰
在新闻标题排列上，适当的留出
边距和行距、注意留白

中新网： http://www.chinanews.com.cn/

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

2 、使用和谐、适合主题的的网站配色

建立配色体系，根据环境、主题来决
定新闻网站采用统一的色标或是制作
违反规范的样例等。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

2 、使用和谐、适合主题的的网站配色
色彩的情感联想：
序列 色性 心理联想的表达
1 橙色 辉煌、收获、激情、甜蜜、胜利、光明、成熟、兴奋
2 金色 高贵、华丽、激动、至高无上、权力、财富、贪欲
3 黄色 突出、愉快、高贵、希望、发展、注意、刺激

4 绿色 生命、环保、安逸、和平、安全、青春、新鲜、柔和
5 蓝色 博大、广阔、沉静、发展、智慧、寒冷、深远、理智
6 紫色 优雅、高贵、魅力、自傲、轻率、神秘、惊恐
7 白色 洁净、纯洁、朴素、神圣、明快、柔弱、恐怖、死亡
8 灰色 平静、谦虚、沉默、中庸、寂寞、忧郁、消极
9 黑色 沉重、严肃、坚实、粗莽、沉默、黑暗、罪恶、恐怖、死亡
10 红色 热情、爱情、热闹、革命、生命、幸福、吉祥、危险

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议
浅灰色现代、冷静

搜狐： http://www.sohu.com/

英国广播公司： http://www.bbc.co.uk

淡黄色明亮、轻快

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

3 、图文并茂、相得益彰
文字能清晰的传达信息，图片能帮助理解，避免线性的单调。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

3 、图文并茂、相得益彰
文字和图片作为信息传播的主要载体，两者具有一种相互补充的视觉关系。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

3 、图文并茂、相得益彰

网站页面上文字过多，就显得沉闷，缺乏生气，在视
觉上给用户带来阅读的疲惫感；页面上图片过多，必然
会减少页面的信息容量，同时给网络带宽带来压力降低
网站的稳定性。

文字与图片合理搭配，互为衬托，既能显示新闻网站
的丰富内容，又能有效地活跃页面。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

使用图片和简洁的版面并不矛盾

法新社： http://www.afp.com/english/home/

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

阅读一组图文信息需要上下、左右不停移动眼睛，造成视觉
消耗。而上下两组信息的并排加剧了视觉疲惫感。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

允许浏览者视线停在一个平面上。
视线流动复杂度低，阅读起来较舒服。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

新闻 网站 信息量 大， 对图片 和文 字
按照 一定 的次序 进行 合理的 编排 和
布局

图像的冲击力是文本无法比拟的，让用
户在第一眼就能激起心理与情感活动，
增加感染力获得认可。
新浪网： http://www.sina.com.cn/

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

扣人心弦效应（蔡加尼克效应）

人们总是倾向于对感兴趣、未回答的问题能尽快找到答案，扣人心弦效应就是基于这
一事实。视觉设计中，可以将这个效应运用在图片处理和选择上，使浏览者和图片间
建立情感联系，如激发浏览者的好奇、恐怖和欲望等，抓住浏览者的视线。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

造型独特的
图形在页面
中，使人产
生好奇感。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

使人产生神秘感。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

产品照片勾人食欲。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

4 、合理规划视觉流程，使视觉流向更为清晰。

“ 视觉流程”——使用户的视线跟随页面中的各构成元素（文字、图像、标
题、内容等）在空间沿一定轨迹运动的过程，是以人的生理和心理习惯的认
知模式来进行的。

对新闻网站来说，合理的视觉流程应根据传播信息的主次即重要程度来确定
各视觉信息的顺序，并组织自然流畅的视觉导向来引导用户，在最短的时间
内有效表达信息。

心理学认为视觉上，页面的上方和左方易受重视。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

4 、合理规划视觉流程，使视觉流向更为清晰。

http://www.simpleusability.com/

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

4 、合理规划视觉流程，使视觉流向更为清晰。

杰柯伯 · 尼尔森的“ F 型网页浏览模式”：

1 、浏览者的眼睛首先是水平移动的，常常是扫过网页内容的最上半部分，形成了一条水平的浏览轨迹
；

2 、浏览者的眼光稍微下移，扫描比第一范围较短的区域；

3 、浏览者沿网页左边的部分进行垂直扫描，这一步浏览速度较慢，较有系统性、条理性。
1

2
3

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

杰柯柏 · 尼尔森报告中的 3 张热度图，用颜色来表示浏览者眼光聚集程度的高低

最热
一般地说明性网页 电子商务类网页 Google 搜索结果页面网页
较热
不热
基本不关注

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

5 、合理使用多元化的视觉元素，掌握合适的尺度。

声音、图像、动画、视频等视觉元素的引入能有效强
化用户的视觉直觉感受，提升新闻网站的表现力，多
维度的感觉使网站与用户间形成全方位的信息交流，
从而赋予网站更多的现代感。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

http://www.mcdonalds.com.hk/chinese/index.htm

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

5 、合理使用多元化的视觉元素，掌握合适的尺度。

使用视觉元素传达信息应该是有计划、有理性的，要把握合适的
尺度，不能为了追求视觉效果而滥用，要做到每一个视觉元
素的存在都是为了突出新闻、表达内容，避免视觉噪音。比
如闪烁的图标，不同样式的字体，浮动的动画这些视觉元素
的存在都传达特定的信息，它们的使用不仅要依据视觉表现
，还要注重是否可以帮助有效的表达内容。同时，网页上各
元素的使用、布局都要保持统一的设计风格。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

5 、合理使用多元化的视觉元素，掌握合适的尺度。

设计过程中避免视觉噪音、消弱主题

非链接文字信息避免使用蓝色；
避免使用纯装饰性的图标、动画等，要做到每一个视觉元素的存在
都是为了突出新闻、表达内容；
标题说明清楚即可，不必重复；
个性化字体和标签不能滥用，要符合整体网站的风格。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

6 、注重细节设计。

网站设计者要充分考虑到用户信息获取过程中的
各种细节，给用户带来良好的阅读体验，提供最
清晰和最高回报的交流。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

6 、注重细节设计。

在以内容为主的新闻网站设计中，不仅要使用各种视
觉元素对不同板块进行区分，还要凸显网站的细节功
能如导航和检索等。网站的导航条和搜索框必须清晰
可见，容易辨认和使用。在配色和样式设计中除了要
符合网站的整体视觉风格，还要在位置和视觉上突出
，不致于淹没在整体页面中。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

6 、注重细节设计。

“ 站内搜索”位于网页的上部，
独立放置，突出搜索功能。

新闻网站的视觉呈现
英国观察家报： http://www.observer.co.uk
WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

6 、注重细节设计。

“ 站内搜索”位于网页的上
部，置于重要位置。

新闻网站的视觉呈现
英国经济学家 :http://www.economist.com/index.html
WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

6 、注重细节设计。

搜索框位置不突出，用户很难找到。

新闻网站的视觉呈现

WEB
 赢在视觉
VISION

新闻网站视觉设计原则及建议

6 、注重细节设计。

新闻网站的新闻注重时效，将新闻以日期作为区分
，可以提醒用户哪些新闻可能看过。

英国金融时报： http://www.ftchinese.com/

新闻网站的视觉呈现

WEB
赢在视觉
新闻网站的视觉呈现

谢谢！

VISION