《教师生活365》网[师慧园]论坛

标题: 赢在视觉——新闻网站的视觉呈现 [打印本页]

作者: jssh365 时间: 2015-4-3 16:58
标题: 赢在视觉——新闻网站的视觉呈现
赢在视觉——新闻网站的视觉呈现
演讲：顾群业
时间：2009年3月28日　　感谢孙东哲主编、潘文锋部长和陈建华总编辑搭建了这么好的一个平台，创造了这么好的一个机会。很高兴有机会跟这么多同行进行交流。跟大家攀个同行，我是学平面设计出身的，99年开始做网页设计。网页设计也属于视觉传播，算是个传媒人，如果大家接纳我的话。今天跟大家分享的题目是新闻网站的视觉呈现。

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

　　因为视觉呈现是有价值的。我最近对纹身比较感兴趣。就先从文身切入。因为文身最终呈现的也是一种视觉形式。人们现在文身，是对美的追求，但在原始社会不是。它更大程度上具有宗教的意义。它是图腾崇拜的符号，就是原始社会部落的标志，如果我生活在原始社会，我的工作就是为部落设计图腾。因为它是跟我们现在的企业标志、网站标志是一样的。文身除了作为宗教信仰的外在视觉表现，它还有具体的作用，比如在战争的时候，它用来区分自己人和敌人。在中国的黎族，小姑娘成人的时候，要举行一个仪式，在这个成人仪式上文身，也是对青春美丽的一种展示。尽管还是一种宗教仪式，但是已经有了展示“美”的含义了。另外，即使文身在宗教上的意义更大一些，这种信仰也是为了祈求生活更美好，最终表现为对美的追求。例如右图上这位北非的姑娘，她嘴上的东西叫做唇盘，这在当地是美女的象征，就是说文身已经具有了装饰的含义了。像饰品一样，其实我们现在的饰品就是从这些东西发展而来，只是宗教的意义逐渐退去，变成了纯粹装饰的东西。当然现在情况又有了变化，我前段时间看电视购物，卖一种挂在脖子上的项链，说是可以治颈椎病，我感觉这就是现代的图腾崇拜，新的宗教信仰。宗教其实也可以理解为满足用户心理的一种需求。

　　这张图片是一位独龙族妇女的脸部特写，非常清晰的文身，虽然这种形式不是出于对艺术的追求，但不容质疑的是，这是一种视觉呈现。——它是一种视觉呈现形式，而且背后有深厚的文化。

　　新闻网站尤其要注意“视觉呈现”的问题。因为新闻就是要给人看的。有些销售产品的网站，比如当当，主要是销售产品，卖书、卖小商品，只要它的价格有竞争力，它的视觉呈现稍微差一点，大家还是能够忍受的。因为它的书一般都是6折或7折，有些甚至一两折，非常有诱惑力，这时候大家可能就会降低对视觉效果的要求。当然事实上当当的视觉设计和用户体验还是不错的。我的意思是说用户来到我们网站上，就是要看我们呈现了什么，呈现得不好，就不会有人来看了。所以新闻网站要特别重视“视觉呈现”。

　　这个图表是网站的信息架构图，左面列的就是用户体验的5个层次，是AJAX之父杰西•詹姆斯•加莱特(Jesse James Garrett)提出的。大家可以看到视觉设计处在这个框架的最外面一层，也是最具体的一层。就是说这个层面光讲理论是不行的。都是很具体的工作。

　　用户需求是我们要重视视觉呈现的理由之一。将近80%的使用率，2.34亿的用户群体，这么庞大的需求，我们有责任做好，为大家提供更好的服务。

　　我们经常讲“内容为王”。什么才是真正的“内容为王”？要正确理解。把适当的内容提供给尽可能多的有需求的人，才能成为“王”。并不是说有了内容就是王。内容只是最基础的东西，还需要做好受众定位、用户体验、运营推广等很多工作，才能成功。就是说，如果大家都有准确的定位，内容质量都非常高，这个时候我们靠什么去竞争呢？我们手里还可以打什么牌呢？

　　这个时候视觉设计就可以发挥作用了。

　　先跟大家一起探讨视觉设计在网站传播中的作用。

　　网站新闻和视觉呈现就是内容和形式的关系。跟文身和它背后文化含义的关系是一样的。用马克思主义文艺学原理来解释，就是：脱离了形式，内容就无所依。脱离了内容，形式就变得苍白无力。内容决定形式，形式为内容服务。就是说，你的新闻受众是谁，网站的定位是什么，决定了你要采用什么样的视觉样式来表现。视觉设计是为网站定位、内容定位服务的。视觉作为一种特殊的感知方式，正在发生着由基于文本阅读向基于视觉图象解读的转变。我们都说现在是“读图时代”，确实是。视觉的作用更加突显出来。

　　读图时代的特征是什么？就是“以视觉为中心”的感性主义形态成为信息传播的主要形态。有很多学者反思，认为读图时代造成了意义的消解，人们追求享受和娱乐，整个世界变得肤浅。其实这种担忧大可不必。人有追求享乐的本能，也有追求意义、追求崇高的天性。“快餐文化”、“浅阅读”是怎么形成的？很多人只是在表达忧思，都在表述这种现象，但很少有人思考我们这个时代为什么会成为“读图时代”。在座的诸位是怎么看这个问题的？谁能告诉我为什么现在成为“读图时代”？是大家都变懒了吗？全都堕落了？我不这样认为。事实正好相反，是因为现在人的压力大了。“读图”是时代的产物。现在是信息时代，信息大爆炸，我们整天淹没在信息的海洋里，每时每刻都在获取大量信息，所以必须快速处理这些信息。正是因为图象具有直观、便于理解的特点，能够被快速接受，迅速被处理，所以才会成为这个时代传播的主要方式。我们要正确认识到这一点，才能做出正确的判断，为我们下一步新闻网站该怎么走找到正确的路径。

　　这个是《设计•中国》的电子杂志的调查报告，我们做过一次问卷调查。网站建设是一个系统工程，绝不是设计师一个人能够完成的工作。所有的工作都应该从了解用户需求开始。刚才我们看到视觉设计只是处于最具体的表现层。

　　视觉设计有助于提高阅读品质，增强传播力。帮助用户快速理解和处理信息，让用户获得所需，就可以增加黏性，体现网站的价值。

　　打造品牌也离不开视觉。刚才讲到了很多图形图象具有的优势，塑造品牌是内在理念外在化形象化的过程，也是利用了图象的传播优势。截图是sony中国的网站。SONY对公司的商标一直非常珍视，使用方法上也很讲究。现在用的这个标志是73年设计的。最早的标识，是1955年注册的。1961年打霓虹灯广告时进行了修改。后来还组成了标识委员会，1962年，再次修正并制定了使用规则。为了使SONY这四个字母更对称，美观，又陆续作了好几次加工。比如把笔画改细等等……现在这个标志是修改了6次以后的作品，到现在为止，SONY的标志已经改过7次了。

　　如何通过视觉手段打造品牌呢？包括网站LOGO，整体色调、字体设计等等视觉元素，都能在用户脑子里形成品牌印象。设计过程中要注意符合物理一致性的要求。物理一致性是个网站开发的术语，意思是说网站外观的一致性，如logo的位置、导航、图形元素和版式的使用，它强调成系统、综合考虑问题，合理统筹的理念。作为新闻网站，避免使用亮粉色和漫画字体，因为新闻网站要给人以稳重感和可信任感。我注意到很多新闻网站的字体颜色选择了深蓝或钴蓝，这个选择是有道理的，因为沉稳的兰色就是给人以理性、客观和值得信赖的感觉。

　　这是视觉设计的具体作用。通过视觉手段确立个性。旁边这个截图是百事可乐的网站。采用了百事的标准色兰色。

　　这个是可口可乐的红色。可口可乐是碳酸饮料的创始人，百事可乐看这个市场大，利润高，想分一杯羹，但已经晚了可口可乐12年了。但是百事可乐非常重视品牌策略，一出现就扮演一个挑战者的角色。我们现在的话说就是傍名牌。我敢跟你叫板，说明我不比你差。为了跟可口可乐竞争，百事在视觉设计上下了很大工夫。它采用纯兰色，就是为了跟可口可乐的红色区分开。从这个角度看，我们现在的新闻网站，好象还没有意识到这个问题，就是如何通过视觉形象来塑造个性。

　　jeep中国的截图，体现自由和征服，jeep的精神也是美国精神。

　　宝马中国的截图，体现了高贵和完美，通过图象我们可以明显感受到jeep跟宝马的不同文化，这就是图象的作用，不用多说什么，直接就可以获得感受。

　　打造视觉符号系统，截图是adidas的网站。基本视觉要素是3条横杠。针对不同的产品线，又有不同的标志，都是在3条杠的基础上做的延展。

　　这个是nike的。在产品或服务的质量都差不多的情况下，品牌的重要性就突显出来。就运动服装而言，我选择Nike或是Adidas，很大程度上取决于Nike的钩子或者Adidas的三道杠。

　　增加认同感和凝聚力。其实视觉的手段是非常古老的一个手段。原始社会就知道通过图腾，通过文身，来形成认同感和凝聚力。我们现在所谓的形象策略，所谓的视觉设计，我们的祖先早就用过了。

　　有助于实现网站功能。网站开发有个“3次点击原则”，是说如果用户点击3次还不能找到目标信息，就会离开这个网站。刚才邓老师讲的那个形象页的案例，需要再度点击才能进入内容页，我认为是浪费了用户的浏览成本。所以我们必须强调明确的导航，逻辑架构和后续站点的层次结构。通过视觉设计，比如说每个频道的整体色调稍微做一些变化，让用户明显地感受到他们现在在哪，他们对这个网站很容易把握。

　　这个是今日美国网站，通过改变标签的颜色来区分不同频道。这个网站的频道你点击进去，每个频道的色调跟标签的颜色都是一致的，这样用户就很容易分辨自己处在什么位置。

　　通过分析视觉设计的作用，给出几个关于新闻网站视觉设计的建议。

　　这个是新闻网站一个常规的页面布局图表。作为一个新闻网站，页面布局还是应该清晰合理，结构科学简洁，干干净净。这样用户就很容易获取信息。

　　视觉设计师的工作，至少要跟这三种人沟通。对于设计师而言，沟通能力、说服能力非常重要。

　　美国CNN网站的页面分割方式，通过对比突出了重点新闻和视频。图片的大小，文字的疏密，适当的留白，尤其是留白的技巧，值得国内网页设计师学习。

　　我很高兴看到现在的网站，字体开始变大，行间距开始变宽，不像原来那样小字挤得密密麻麻，现在这样看起来舒服多了。我注意到改版之后的新华网变化比较大，现在各个网站都有这种趋势，是个好现象。但是还有个问题，就是页面的长度。刚才陈建华主编讲到，首页是内容的集合，精华部分的推荐。现在精华太多了，首页只好越做越长。这个问题如果仅限于讨论首页设计的话，恐怕不是设计师能够解决的问题。

　　根据网站定位确立标准色。截图是《设计•中国》网站的标准色组合。采用了黑色、暖灰和少量的橘黄。目的是为了明显区别于其他网站。精益求精的做法还应该建立一套色彩使用规范，包括在什么情况下是属于违反规范的行为，都要详细界定出来。

　　这是放大了看。

　　这是关于色彩的情感联想。不同的色彩会给人带来不同的感受。对于网站而言，色调留给用户的印象是最深刻的。尤其是新闻网站，仅靠版式布局往往很难区分开各自之间的不同，而色调是非常有效的方法之一。

　　英国广播公司的网站采用了浅灰色调，给人以现代感和冷静的感觉。搜狐的网站采用了浅黄色调，实际上是中黄色，因为黄色的面积相对较小，露出大量白色背景，所以给人以明亮、轻快的感觉。我们看搜狐的网站，虽然也有很多颜色变化，但是仍然给人以单薄的感觉，对照《设计•中国》的网站色调就可以看出，虽然《设计•中国》只有3种标准色，但是还有很多过度色，这些过度色增加了网站的层次，使颜色变得丰满、厚重起来。

　　关于图文的关系。如何进行图文搭配。

　　图文之间是一种互相补充的关系。

　　文字多了呆板，但图片太多了，也不符合新闻网站的特点。况且如果小图片应用得过多，在视觉上也会显得很乱。

　　这是法新社的英文版网站，感觉清爽得多。

　　这是图文关系处理失败的一个例子。阅读这组新闻需要上下左右不停地移动眼睛，而且上下两组信息并排，加剧了视觉疲劳的感觉。

　　这是个排列比较舒服的例子。

　　关于图象的作用，可以增加页面的感染力。例如右边这种诉诸情感的图片，很容易打动人。

　　扣人心弦效应，这两个题图我相信都会吸引到点击。

　　靠图形吸引人的网站。

　　使人产生神秘感的图片。

　　引人食欲的图片。

　　关于视觉流程。视觉流程是我们在浏览网页时视线流动的过程。它对新闻网站的指导意义在于，要按照新闻的重要程度，按照一定的主次排列新闻的顺序，并且通过视觉流程的筹划引导用户视线，有效地传达信息。

　　这是一个眼球追踪的示例图。反映了视线的流动过程。国内缺少的就是这种实证的研究，研究方法很重要。

　　尼尔森的F型浏览模式。

　　这是通过热度图反映的F型浏览模式。几种不同类型的网页。我们现在缺少这种研究方法，缺少对网页的视觉心理、用户需求的研究。

　　合理使用视觉元素并掌握尺度。多媒体时代，技术手段丰富了，表现力得到了增强，但是也带来视觉噪音的问题。

　　这是一个FLASH制作的页面截图。

　　避免视觉噪音。每一个视觉元素的使用都应该能够讲出道理。

　　这是一个视觉噪音的例子。小图标的使用毫无道理，既没有起到装饰的作用，还白白增加了几十个字节。关键是把用户的视线吸引到一个没有价值的地方。

　　关于细节设计。

　　这里面提到了导航和检索。

　　这个检索框的位置不仅位于首页上部，还是独立放置的，说明设计师有意识地要突出检索的功能。

　　这个站内检索也是放在了一个重要的位置。

　　这个就是一个失败的例子。

　　这个是把新闻按出版日期加以分类，方便检索，非常体贴用户。还有网页的链接，默认的链接点击之后会变成另外一种颜色，也是一个非常体贴的设计，有些设计师为了颜色的统一，喜欢把链接强制改为一种颜色，这样就丧失了一个有用的功能。

　　谢谢大家！

欢迎光临《教师生活365》网[师慧园]论坛 (http://jssh365.cn/bbs/)