新闻网站新闻作品的视觉设计探讨

《新闻网站新闻作品的视觉设计探讨》由会员分享，可在线阅读，更多相关《新闻网站新闻作品的视觉设计探讨（13页珍藏版）》请在装配图网上搜索。

1、新闻网站新闻作品的视觉设计探讨第七届湖北网络新闻奖获奖作品述评07月25日15:43来源：中国新闻研究中心【字号 大 中 小】打印留言论坛网摘手机点评纠错窗体顶端E-mail推荐:窗体底端发稿：中国新闻研究中心作者：王朝阳单位：武汉大学新闻与传播学院网络传播系讲师地址：武汉大学新闻与传播学院网络传播系邮编：4300724月“第七届湖北网络新闻奖”评比出24件获奖作品，笔者作为武汉大学网络新闻评价课题构成员之一参与了湖北网络新闻奖获奖作品的述评研究，从专业角度对获奖作品从视觉设计角度加以分析，试借本文对整个新闻网站目前的状况做个客观分析和评价。本文所指的“新闻网站”是指与国家媒体不可分割的、血脉

2、相依的互联网站点，而部分商业门户网站尽管具有刊登新闻的资质，但却并不被认定为“新闻网站”。（阐明：文中从专业角度对所举个案表扬少批评多，但均为客观评价）一、新闻网站视觉设计的重要特点1、视觉与主题的一致性网络视觉设计作为一种特殊媒介的视觉传达设计，在具有平面设计一般特性的同步，还具有自身的设计特性。网络视觉设计应始终环绕“信息传达”这一主题来开展。主线上来讲它是一种以功能性为主的设计。新闻作品在选择视觉元素时应充足考虑与作品内容主题的有关性，保证主题和视觉信息的一致性。一致性体目前网页主色调的选择、标题文字字体的选择、主题图片的拟定、背景风格的选择以及版面布局的拟定。和其她商业网站不同，考虑到

3、新闻网站相对特殊的性质，不管是新闻专项、新闻评论还是新闻专栏，在拟定视觉风格时都应当考虑到和整个新闻网站风格的一致性。从第七次湖北网络新闻奖获奖作品来看，在视觉元素的选择上基本和网站的主题有关，能较好地体现主题思想。以湖北电视台火凤网和武汉市汉阳区档案馆联合制作的“罹难、屈辱、胜利、复兴”主题网站为例，该网站采用典型的红黑色彩对比，主题色调鲜明，并选择了长城、青砖墙、岩石等具有象征性的视觉符号，形象明确，将中华民族经历磨难时的坚毅、顽强，中华民族伟大复兴时的奋斗精神充足体现出来。如图1.1所示。图1.1“罹难、屈辱、胜利、复兴”首页局部2、新闻作品总体视觉风格的统一性从广义上来讲，新闻作品总体

4、视觉风格的统一性体目前新闻作品（涉及多级网页）与其所依附的新闻网站整体风格的一致性。这种统一性事实上就是规定新闻网站要有严格的VIS系统，例如网站标示的统一、版权信息的统一等。而狭义的统一性重要体目前两个方面。其一，同级网页的视觉统一；其二，整个新闻作品的和谐统一。统一性体现的是“审美功能”，满足了网民的心理需求。具体表目前增强整体感和增长体现性。增强整体感即谋求视觉要素的合理搭配，在有限空间内产生“1+12”的效果；增长体现性规定网页版式富有“创意”、“风格化”，作为信息的承载，努力实现对网民视线的瞬间捕获。本次网络新闻奖获奖作品的视觉设计基本按照总体视觉风格统一性这一原则进行设计制作。网站

5、风格在不同级别的页面中能较好体现。以湖北日报报业集团荆楚网筹划制作的“中部崛起”主题网站为例，该网站获得了第十六届中国新闻奖网络专项类二等奖。网站选择了某些简朴而实用的导航符号，选择了浅灰色作为一部分内容的底色，选择了橘红色作为该主题导航区和内容的分割线，这些视觉语言的运用出目前首页及下级的网页当中，让网民一目了然。如图1.2所示。图1.2“中部崛起”专项首页局部图1.3“中部崛起”专项中部财经子栏目首页局部3、视觉语言的丰富性视觉语言的丰富性正好体现出互联网迅速发展的特性。网络技术的发展为网络媒体丰富的视觉语言选择发明了条件。到目前为止，网络媒体视觉元素涉及文字、图形、图像、音频、视频、动画

6、等，还涉及Java、Active控件等用于制作特殊效果及交互功能的元素。多种要素的应用充足体现出网络媒体的独特优势，挣脱了老式纸媒只能涉及文字和图像的弊端，使整个网站在形式上更加丰富，更能吸引网民的浏览。固然多种媒体要素的应用在丰富了页面形式的同步，势必要考虑由于带宽、浏览器技术等因素导致的媒体效果在网民客户端不能正常呈现的问题。本次网络新闻奖获奖作品中，每个作品基本上都涉及了文字、图形、图像、动画以及少量的Javascript程序和视频。以长江网制作的“第三届世界华文传媒论坛”主题网站为例，在首页有限的空间内就涉及了文字标题、图片标题、视频（链接点击完毕观看）、图片新闻、Javascript

7、语言控制的“论坛日程”滚动信息栏等媒体要素。如图1.4所示。图1.4“第三届世界华文传媒论坛”首页局部二、媒体（视觉元素）组合的合理性分析1、主题有关是媒体组合的前提根据CNNIC第17次中国互联网络发展状况记录报告中“网民对互联网的满意度”记录资料表白，顾客对“网络速度”、“操作简便”等都比较满意。如图2.1所示。而网络速度除了和网站接入互联网的方式，顾客上网方式等因素有关外，还和网站中选择的媒体组合有关。随着互联网技术的发展，可支持的媒体类型在不断增长，根据网站的主题选择合适的媒体组合来体现主题成为网络视觉设计中核心部分。图2.1第17次中国互联网络发展状况记录报告网民对互联网的满意度在本

8、次获奖作品中，荆楚网“张之洞督鄂115周年”专项网站，重要体现的是某些数据资料，可以选择图文声像的媒体方式加以体现。但汉网“请问武汉市还想赚出多少个黄鹤楼来？”网络评论专项网站重在网民的交流，并且规定更新速度快，就不适合选择数据量比较大的媒体形式，更多的是简朴图形、文字。2、丰富并不等于合理多样媒体信息可以丰富网页，但丰富的度却需要和网站的主题紧密有关。并不是越丰富，越多样就合理。如果网页中涉及视频信息，可以设立为打开不立即播放的方式，播放与否完全由网民浏览时控制。这样可以避免由于视频信息的存在而使页面下载速度变慢的问题。正如前文所述，部分网站重点在于呈现数据资料，没有必要通过“文字+图像”的

9、方式来体现，仅运用简朴实用的文字即可以体现，如果额外地加入图像，反而有点“画蛇添足”的味道。本次获奖作品中绝大多数网站媒体组合比较合理，但有些网站多媒体要素过于丰富，有种“乱花渐欲迷人眼”的感觉。如湖北电视台火凤网首页。如图2.2所示。图2.2“火凤网”首页局部三、存在的重要问题1、设计总体水平不高从本次网络新闻奖获奖的24件作品来看，整体设计水平和专业性网站相比尚有待提高。也许有如下某些因素：（1）网站设计没有进行合理规划有些网站没有对的解决排版布局问题。如“中华鲟保护大型放养”专项网站，左侧视频播放器下方大量的空白可以阐明网站在建设之初没有进行一般的草图构建，网站建设中走一步看一步，导致以

10、上状况发生。合理的规划和设计在网站建设开始的时候就应当考虑到，必须制定严格的方案，理清设计思路，绘制设计草图，选择合理的网站构造等。（2）新闻网站对视觉设计不是非常注重“视觉时代”或者说“读图时代”的来临促使老式媒体改版，不断迎合读者的视觉需求。而对于网络新闻媒体，诸多决策者和规划者更注重的是网站的内容，并不非常注重网站的外观和媒体类型的选择。现代的互联网社会，信息量庞大，网站林立，网民在选择网站时也会站在十字路口或者米字路口，不知所措。内容制胜很核心，但网民在最初注意网站时更多关注的是网站的外在体现和可阅读性，新闻网站在规划设计时还需要从顾客的角度进行换位思考。新闻网站有时可以借助视觉设计获

11、得更多的“卖点”。（3）设计人员并非专业人员也许考虑到成本或者其她因素，网站的设计人员也许是网站的技术人员、文案人员甚至是管理者自身。由于缺少正规的设计理论的系统学习，会浮现偏科现象。例如技术人员兼职设计人员，则网站看上去也许更像一种网络技术仓库，在网站中涵盖了多种目前流行的媒体技术，导致“花而不实”。网站的总体设计水平不高不仅是本次网络新闻奖获奖作品的问题，还是整个国内新闻网站建设的问题。2、设计人员素养有待提高技术并不是网页视觉设计人员的所有，设计人员除了具有夯实的设计软件运用能力，具有一定的审美能力，还应当具有基本的文化素养、传播学知识和心理学知识等。纵观本届网络新闻奖获奖作品，绝大多数

12、网站的视觉设计做得都非常优秀，其中尚有某些小问题有必要提出来加以强调和阐明。（1）视觉设计人员应当理解中国老式文化并合理运用“辛末”还是“辛未”湖北电视台火凤网筹划制作的“罹难、屈辱、胜利、复兴”主题和视觉设计都较好，缺憾却出目前整个网站首页的左上角。中国老式文化中有“天干地支”，“天干地支”也称“干支”，是“甲乙丙丁戊已庚辛壬癸”十天干与“子（鼠）丑（牛）寅（虎）卯（兔）辰（龙）巳（蛇）午（马）未（羊）申（猴）酉（鸡）戌（狗）亥（猪）”十二地支。而1931年是农历“辛未”年（羊年），在“地支”中并没有“末”，视觉设计人员在设计中由于缺少基本的文化知识，将“辛未”错写成“辛末”，足见不仔细。如

13、图1.1所示。此外一种状况便是刻意加入某些老式文化因素，导致负面效应。如“3000小学生妖魔化妈妈”中的网站标示，如图3.1所示，标示以中文、英文和简朴图形构成。姑且不谈中文英文搭配与否合理，标示中“妖魔化”三个中文选择了篆书字体，在辨认上存在很大的困难。这种现象比较普遍。视觉设计人员为追求特殊的视觉效果，喜欢选择装饰性相对较强的古体中文或者拉丁字母（重要是英文）作为设计的语言符号，视觉效果达到了，但却忽视了最重要的一点，网站的网民是网民而不是设计者自身。网民由于种种因素，缺少对古中文和英文的识认，不能识认就没有措施理解和理解。从这个角度讲，视觉设计人员应坚持“简朴即美”的原则，用最大众化的视

14、觉语言传递信息。图3.1“3000小学生妖魔化妈妈”篆字标题（2）视觉设计人员应具有一定的外语水平“Low”还是“Law”网民的文化层次很复杂而丰富，如1月CNNIC发布的第17次中国互联网络发展状况记录报告显示的网民文化限度分布图所示（图3.2、图3.3）。除此之外，网民的心理比较脆弱，容易受到网站多种因素的影响。如果网站给网民不好的印象，网民也许会放弃继续浏览该网站。图3.2第17次中国互联网络发展状况记录报告网民文化限度分布图3.3第17次中国互联网络发展状况记录报告历次调查网民文化限度分布在本次网络新闻奖获奖作品中浮现了诸多由于应用外语而导致的错误，这些错误也许导致网民心理变化。如在长

15、江日报报业集团汉网筹划制作的“何媛?戒毒”专项网站中，标题图片采用了“图形+中文+英文”的常规模式，如图3.4所示，这种模式是最常有的模式之一，但需要考虑两种状况，如果网站面向的网民涉及比较多的国外顾客，则建议使用英文，但如果网站面向的网民中并不涉及这些顾客，则舍弃英文而采用拼音字母较好。本例中“法律”的英文为Low，事实上应为Law，这是个明显的错误。类似的问题频繁浮现最重要的因素在于视觉设计人员在设计时并没有注重内容的精确性，更多关注的是视觉效果。图3.4“何媛?戒毒”标题图片中的英文错误3、为视觉而视觉网络视觉设计人员选择不同的视觉元素发明出易用、独特、美观的网页是她们的职责，但在实际实

16、行中却会浮现“为视觉而视觉”、“为设计而设计”、“为美而设计”的某些错误倾向。这些问题的存在主线因素在于网络视觉设计人员并没有真正理解“视觉载动信息”这个原则，所有的视觉语言最后的目的都是为主题服务，都是为传递主题思想服务。因此，对于网络视觉设计人员必须要牢记的第一原则就是“功能性”原则，环绕主题思想进行创新、设计。本次获奖作品中也浮现了这种状况。如长江日报报业集团汉网筹划制作的“相约汉网”专项网站，在页首制作了大篇幅的银灰色金属质感很强的图像准备作为栏目导航条的背景图，但并没有应用。如图3.5所示。尚有几种典型的问题：（1）more。许多网站更乐意用英文解决本来该中文解决的问题，more是非

17、常典型的案例。more不是不能用，而是应用的场合要对。中文网站强烈建议用“更多”，而英文网站必须用“more”。（2）随意使用英文简称。本次新闻网站作品中，有个网站在标题图片中浮现了“CH*”（*指编号），CH*的意义模糊不清，网民浏览时会留有疑问。美国出名的网站效果评论专家斯蒂芬?克鲁格用了一句话来解决这个问题，那就是“不要让顾客动脑”。给网民直观、简洁的视觉符号，让网民能借助这些符号获得对的、完整的信息，这应当是网站的目的和目的。图3.5“相约汉网”首页局部以上问题的浮现也许的因素在于“测试过程”的缺失。在整个网站建设过程中，要通过多次测试，在半途和结束时都要开展，并且是必要的。测试过程最

18、佳聘任“模拟顾客”参与，以便获得更精确的测试成果。4、媒体形式选择一方面应考虑顾客不是所有的网民使用的都是宽带，不是所有的网民使用的都是1024*768的显示辨别。网络视觉设计人员和管理人员要学会换位思考，站在网民的角度设计和使用网站。网站在建设过程中更多状况下是在内部局域网中进行的，网络速度相对较快，不会注意到由于使用的媒体元素不当导致的网页下载速度慢，网页长时间打不开的现象。一旦网站通过互联网和网民会面，则必须要考虑到顾客的具体使用条件，如使用的上网设备、浏览器版本、显示屏辨别率等因素。根据CNNIC第17次中国互联网络发展状况记录报告中“不同上网方式网民数”显示，到目前为止尚有大部分网民

19、采用拨号上网的方式上网。如图3.6所示。由于这些因素都不能为网站设计者所控制，因此在网站建设之初就必须一方面站在网民的立场进行设计。没有进行换位思考的网站往往浮现如下问题。图3.6第17次中国互联网络发展状况记录报告不同上网方式网民数（1）图片解决不得当图片解决不得当表目前两个方面。其一，可以用文字的地方用了图片，导致页面文献增大；其二，图片大小和图像文献格式选择不当，导致文献庞大，影响网民浏览需要。第一种状况如“江城月中华情”主题网站，如图3.7所示。主办单位、承办单位、协办单位及其他信息完全可以采用棕黄色背景色再加上文本来加以实现，但该网中却选择了用整幅图片来加以体现，导致页面文献增大了至

20、少20K。图3.7“江城月中华情”能用文本就不要用图片第二种状况在必须使用图片时，没有合理选择文献尺寸大小和图像文献格式及压缩比，导致页面由于大量的图像文献而庞大。大大影响网民通过客户端浏览器的访问速度甚至主线不能完整浏览。如下案例取自不同的网站，如图3.83.13所示，表3.1对如下图片的有关数据进行了记录。图3.8“883社区建设行动筹划”题图图3.9“第三届世界华文传媒论坛”题图图3.10“江西发生5.7级地震”新闻图片图3.11“江西发生5.7级地震”图片图3.12“江西发生5.7级地震”题图图3.13“中部崛起”题图表3.1不同网站题图及重要图片比较图片类型文献类型尺寸（像素）大小（

21、K）“883”题图静态GIF747*11953.7“华文传媒论坛”题图静态JPG776*188161“江西地震”题图静态JPG772*120115“江西地震”新闻图片静态JPG276*20858.6“江西地震”图片静态GIF772*12062.2“中部崛起”题图动态GIF778*119735针对以上也许存在的问题，建议按如下方式解决图片：A、图片裁剪。将大幅图片裁剪成小幅图片，通过表格按顺序排列，构成完整的图像，大大缓和由于下载大幅图像的压力。B、尽量保存为GIF文献格式，如必须保存为JPG则压缩比相应增大。根据需要将图片保存为GIF或者JPG，如果对色彩规定不是非常严格，完全可以将图像保存为

22、GIF图像文献格式，减小文献大小。如果色彩相对比较丰富，则保存成JPG文献格式时尽量提高压缩比例，前提是图像能满足需要。C、动态图像可选择用Flash动画。考虑到网民通过浏览器访问网站的图片时，需要整幅图片所有下载完后才干浏览的特性，可以考虑将动画制作成Flash文献，运用Flash动画边下载边播放的特性，缩减由于下载时间导致网民厌倦的也许性，提高网民的浏览爱好。（2）应用表格过程中表格过宽表格应用在目前网页设计中还是非常重要的手段，虽然原则化设计的概念已经提出，但真正按照原则化规定进行设计的网站还是相对较少。表格应用有其优势也存在劣势。优势在于可以合理控制页面的外观构造，劣势在于它是一种构造

23、化的形式，不利于某些特殊视觉效果的体现。在表格设立中，宽度往往可以选择绝对和相对宽度两种，相对宽度可根据网民客户端显示辨别率和浏览器状况灵活机动地自动调节，而绝对宽度以像素为单位，一旦设定，将不以客户端显示辨别率和浏览器的不同而变化。如“三峡工程纵深行”专项网站在版权信息部分专门给网民提示“最佳浏览辨别率1024X768”，如图3.14所示是种人性化的措施。图3.14“三峡工程纵深行”版权信息中的人性化提示5、空间运用不合理清朝画家邓石如曾说过：“字画疏处可使走马，密处不使透风，常计白以当黑，奇趣乃出。”讲得是国画创作中要注重着墨部分和空白部分的比例关系，当彼此比例得当时，才会使整个画作生动。

24、网页设计虽然和国画创作存在很大的区别，但空白（虚空间）的应用和解决却仍然非常重要。这里提到虚空间，与之相相应的即为实空间，是网页中有文、图、像、动画等元素的位置。实空间和虚空间关系的解决问题波及到页面的排版和网民浏览时的心理、生理状态。本次获奖作品中大部分作品办事版式设计得当，构造安排合理，虚空间的解决也很优秀，但还是需要从某些网站的问题中总结经验。（1）虚空间过大如长江日报报业集团汉网筹划制作的“何媛?戒毒”专项网站的“毒品资料”栏目，页面中列举了6种毒品的名称，由于名称字数不同，长短不一，为了达到比较好的视觉效果，设计着用插入空格的措施尽量使名称左右对齐，其中“大麻”中间的空格特别突出，虚空间太大，破坏了该栏目的整体性。如图3.15所示。图3.15“何媛?戒毒”错落的标题文字（2）虚空间过小虚空间太小将导致页面拥挤，不利于网民正常浏览页面内容。因素也许是多方面的，如荆楚网“嘉宾访谈”专项网站中由于设计思路和后期标题设定不相吻合，导致标题过于错落，网民浏览费力。如图3.16所示。图3.16“嘉宾访谈”首页局部