□徐世平
　　和传统媒体相比，网络传播有其特有的规律。重点新闻网站肩负着占领网络舆论宣传主阵地、掌握主流意识形态传播主导权的责任和使命。如何在尊重网络传播规律的基础上，充分发挥网络传播优势，实现主流价值观传播效率的最大化，是包括东方网在内的国内重点新闻网站一直在思考探索的课题。
　　从网页设计的角度看，页面展示只是形式，最终目标必须是更好地服务于内容和价值观的传播。东方网采编、设计、技术等部门通力合作，精心制作的“辛亥革命百年纪念”新闻专题，充分实践了这一理念，并对传统的网页呈现样式有着大胆的突破和创新。该专题最终获得第22届中国新闻奖网页设计项目二等奖，一定程度上印证了这次实践的成功。
　　　　
一、围绕重大宣传主题专题形式求新求变
　　辛亥革命一百周年是一个值得纪念、回顾的重大新闻、历史报道主题，对东方网这样的主流媒体而言，属于必须做好的“命题作文”。东方网在2011年年初就成立专门报道组，全面策划相关网络专题的制作、发布方案。
　　对于类似重大主题的网络宣传报道，在规模上必然是以大型网络专题形式，涵盖文字、图片、视频等多媒体传播方式，结合博客、微博、网上答问等互动模式，来进行展示的。为了获得最佳传播效果，专题的网页展示形式必须求新求变。经过反复论证，报道组提出的最终方案为：借鉴北京奥运会开幕式缓缓打开的卷轴的创意，大胆突破传统网页纵向滚动的页面展示形式，尝试以横向滚动方式来展示页面，以期能更好体现“百年辛亥”这一主题的历史纵深感。
　　专题样稿试演基本实现了预期的视觉效果——在首屏孙中山先生的形象引领下，专题页面缓缓展开，一个个栏目、一幅幅图片逐渐呈现，宛如沧桑扑面的历史画卷，令人从直观上就能感受到中华民族那段历经磨难但又波澜壮阔、英才辈出的峥嵘岁月。
　　　　　
二、合理配置网页要素确保版面视觉效果
　　业内有观点认为“信息内容永远滞后于版面视觉” ①。对新闻网页设计而言，如果页面无法起到良好的视觉吸引效果，其承载的内容就很有可能成为“有传播，无点击”的“沙漠化信息”。如何合理配置网页设计中栏目分类、栏目结构、主题色调、图文布局等要素，使得展现出来的版面更具有视觉冲击力，更能突出宣传主题，并进而吸引有效访问，是页面设计必须充分考虑的课题。
　　根据内容布局的要求，“辛亥革命百年纪念”需要设立最新消息、高清图集、精彩视频、辛亥研究、评论集锦、重走辛亥路、辛亥百年图片展、辛亥人物、辛亥风云、辛亥遗址、辛亥专家、辛亥后裔、电影《辛亥革命》特辑、辛亥文物、辛亥革命100周年网上知识竞赛、辛亥热帖、精彩微博、辛亥博文等栏目。此外，页面设计还需要兼顾电子商务部门配合辛亥百年推出的“中山装定制”业务。林林总总加起来，专题栏目达到19个之多。其中，“重访辛亥”是东方网组织的独家系列报道，“辛亥革命在上海”是凸显上海色彩的网上文献文物展，“纪念辛亥革命100周年”网上知识竞赛是吸引网民参加的重点互动活动，需要在页面展示方面强化处理。
　　首先是确保所有内容“装得下”。最终方案以导航条、专题页面展示、二级页面集纳相结合的方式，统筹解决了版面完整美观和内容多样丰富的问题。其次是从提升专题首页版面视觉效果的角度，对首页图片、文字、视频、动画的具体展示方式、搭配比例进行了专业处理。三是就需要强化处理的栏目、子专题除考虑版面展示外，还充分考虑到具体表现样式实现的可操作性，在设计先期即充分考虑了技术支撑问题。
　　　　
三、充分考虑用户体验细节设计以人为本
　　在内容明确、栏目框架已定、专题首页基本形式和结构以样稿方式初定的基础上，细节设计是完美实现宣传效果的关键。必须兼顾网络传播规律、用户体验等，才能充分体现“以人为本”的理念，最终实现整个专题不但版面好看，更要好用。
　　1.配色方案力求触发用户心理共鸣。色彩的选择是给专题赋予情感的最直观因素。不同的色彩选择，往往都体现了美学、光学、心理学、民俗学上的特点，每一种色彩都具有象征意义，不同的色彩会产生不同的情绪、不同的气氛。
　　辛亥百年专题页面中，采用怀旧的米色与鲜明的红色作为专题的主色调。红色调的大量运用对该专题的革命历史主题加以强化；接近羊皮纸感觉的米色是为了创造出历史沧桑感及调动用户的怀旧感。而通过色块的过渡、组合等专业处理，又处处透露出活泼生动时尚的现代感。最终方案基本做到了用户在打开专题页面，看到第一眼时，就能迅速感受到浓浓的怀旧感但又不失“刻下”的现代定位，为内容传播营造出了比较协调的阅读氛围。
　　2.封面设计“扣题”“扣色”“扣眼球”。封面是专题最重要的部分，“头”开得好，就成功了一半。本专题的封面设计，充分考虑了“扣题”、“扣色”、“扣风格”，并进而“扣”住用户的眼球。精心选择的孙中山形象，配以与辛亥革命密切相关的历史图片为背景，加上视觉中心位置飘扬的红色绸带关联着辛亥革命起义军的红领巾标志和国旗，同时凸显“中华”、“民族”这一本专题极力强化的核心概念，充分突出了辛亥百年纪念的重大意义，不仅在于勿忘历史，更在于提醒炎黄子孙要团结奋进，为完成“振兴中华，民族复兴”的伟大历史使命而不懈奋斗。定稿的专题封面，较好奠定了设计风格和颜色倾向，以新颖独特的视觉效果建立了良好的第一印象，引发用户继续阅读的兴趣。
　　3.大图片大标题大行距确保阅读舒适度。卷轴的样式，以“横屏”颠覆了传统的竖屏形式，对用户的阅读习惯确实可能带来某种程度的不适应。但横屏也有其优势，其中最显著的就是幅面完整和版面空间宽松。竖屏版面经常出现一个栏目跨越两屏的情况，阅读中难免出现“不完整”、“断裂”等感觉。东方网百年辛亥专题采用横屏设计后，每个栏目都是独占完整的一屏，栏目内容展示、编辑意图贯彻，有了充分的版面空间保障。该专题多数栏目都得以采用“大图”、“大标题”展示方式，部分栏目还采用动态滚屏提高版面活泼度。
　　对于以文字内容为主、配图难以保障的栏目，采取了在要闻区域运用醒目的大号字体的处理方式，并加大行间距，增加留白空间，以使得用户获得更舒适的浏览体验。
　　对于图片（视频、动画）来源有保障的栏目，则大胆采取了“读图时代”图片占比二分之一以上的“大图”设计方式，还以多图并列、图片滚动等富于变化的展示形式等，避免了栏目布局千篇一律的雷同感、枯燥感，带给用户“变中有新”、“新中有物”的更佳阅读体验。
　　相比竖版网页密集的信息罗列方式，充分利用横屏版面空间充裕，更倾向于杂志封面式的排版，可以使编辑的每一个文字每一张图片都具有更切实的存在感，也能使用户在舒适阅读的前提下，进行深度阅读，起到更好的传播效果。
　　4.丰富人机交互模式确保使用便利。首先是考虑到横屏设计对用户阅读习惯的改变，可能会带来一些不便，我们采取了多种细节设计加以保障。一是横屏页面的滚屏范围，仅为中间的内容区，顶部导航条和底部版权信息区是静止的。这种“动静结合”使得用户无论处于专题的什么位置，都能通过导航条迅速去往下一个访问目标。二是滚屏操作实现方式多样化。用户不但可以通过鼠标滚轮的来回滚动、页面右方和下方的拖曳游标实现快速自由的滚屏操作，还可以通过精心预留在页面左右方的“鼠标感应区”，通过把鼠标停留在相应位置实现网页匀速、自动的左右滚动。这样的设计不但最大程度解决了用户浏览横屏网页的不方便问题，而且操作性的提升更能带来用户体验的新鲜感。
　　其次是图片浏览提供了“大小结合”的切换方式和图文结合的导读方式。专题中选用了大量珍贵的图片资料。为了能够更好地展示，在图片展专栏共设置了背景篇、开端篇、风潮篇、同盟篇、首义篇、响应篇、共和篇、终结篇、文物篇、纪念篇10大部分，每一篇章都有文字简介，并且在右方以大图导航方式提供高清图集入口。该专栏的动画效果设计也进行了精心考虑：在用户无操作的情况下，页面会自动在10大篇章中逐一切换，以吸引视线；在用户以鼠标介入操作后，会转为手动模式，增强了互动体验。高清图集采用大图幻灯片自动切换和手动切换相结合的方式，方便观看。同时，在专题多个栏目的首页，以图文结合方式进行导读，图片标题以“鼠标悬浮显示”的方式强化，也充分考虑了用户快速浏览和深度浏览的不同需求，提高了内容传播的有效性。
　　第三是适当保留竖屏滚动模式，满足用户体验的连贯性。在处理论坛、博客、微博等互动性栏目与本专题的融合问题时，采用了嵌入内容框的解决方案。嵌入的内容框保留了竖屏滚动模式，以满足其他板块用户跳转到本专题后，在体验方面的连贯性，同时也维持了全网总体风格的延续性和统一性。在二级页面及子专题的设计中，出于同样的考虑，传统的竖版滚动方式也加以保留。
　　5.充分考虑编辑作为特殊“用户”群体的灌稿便利性。从页面设计制作角度看，用户的概念并不仅仅是网页的最终浏览者，也包括对网页内容进行更新维护的网站编辑。通常在新闻专题制作中，往往会碰到因为稿源的文本形式（格式）的不同，导致页面设计稿和实际呈现样式有一定差异的情况，严重的甚至还会出现页面破损、图片空白的故障。在该专题设计过程中，充分考虑到编辑需求，对可能涉及的稿件组合形式、视频动画等流媒体文本格式、标题超出预留字数等情况均进行了评估，并预设模板，通过代码判断编辑灌入文本的情况，自动以适当形式呈现，从技术上避免了页面破损等潜在风险，大大提高了编辑维护效率。
　　6.充分考虑多浏览器适应性，保障不同用户访问需求。针对当前浏览器市场产品繁多，彼此间并不完全兼容的情况，页面设计时对占市场主流、具有代表性的几大浏览器适应性有着充分的预估。经测试最终上线的专题页面能够通过包括IE在内的几大主要浏览器进行正常访问，覆盖目标用户群体的97%以上。
　　值得一提的是，东方网电子商务部门通过该专题推出的中山装定制业务，也很快完成了预设的100套的营销目标，从另一个侧面反映了专题的影响力。
　　　　
四、重大新闻报道页面设计的体会和思考
　　重点新闻网站作为日益重要的主流意识形态传播渠道，面临的重大新闻宣传报道任务也越来越多。和传统媒体不同的是，以互动性为显著特征的网络传播，其宣传效果评估也必将接受用户互动情况的考验。有传播无访问是网络信息沙漠化情况下经常要面对的尴尬之一。从网页设计角度来说，如何通过专业化的处理，尽可能提高每个设计项目的实际传播效果，是我们必须时时思考的课题。需要特别关注的是网络传播和视觉设计两个领域的基本规律和最新动向，及其对网页设计带来的影响。
　　1.宽带与高分辨显示器环境下的“大图时代”。拨号上网时代几分钟打开一个网页的情况一去不复返，“图大杀猫”这类半调侃半无奈的版主提醒也基本绝迹。只要传播需要，在网页中使用大幅面、高精度图片，已经不必太担心硬件环境的制约。同时，报纸杂志等平面媒体的版面设计也越来越强调视觉冲击力，尤其是头版、封面，在“读图时代”的口号下，没有内容没有思想或许还不至于陷入绝境，但没有美图大图，就将彻底失去在报摊竞争的资格。在这样的情况下，网页设计业必然受到影响。一是杂志化的设计排版方式将越来越多。如使用较大的标题字体，鲜明的色块，较多的留白以及风格迥异的图片，以提高专题的可读性可看性。二是简洁化的页面设计风格可能日益流行。因为页面元素越少，也就意味着核心信息越突出。三是图说新闻将越来越多地取代文字信息。对于耐心越来越缺乏的受众来说，一张视觉冲击强烈的图片可能会吸引其3秒的关注，图片内容是什么的文字说明或许只能得到1秒的时间。这意味着我们要花越来越多的时间将新闻（信息）制作成容易看懂的图片（图表）。
　　2.移动时代“兼容”“分享”与“完美体验”的矛盾。“苹果”产品风靡全球，中国互联网也从2010年起迈入了移动时代。基于固定终端的用户增长进入了平台期，而移动用户群体则高速增长。网页设计必须越来越多地考虑移动终端的兼容，同时为了提高传播率，还必须兼顾分享（再传播）的便捷性。事实上，移动终端多样化的现状对于实现理想状态的“完美体验”是个制约——如果要确保我们的某个网页（信息）能实现完美传播，必须同时推出适应苹果、塞班、黑莓、微软等所有操作系统、所有终端的所有版本。基于效率和成本，这几乎是不可能完成的任务。本专题设计未能实现在移动终端同步展示的统筹，也算是受客观条件所限的小小遗憾。
　　对于网页设计师来说，好消息是，响应式Web设计（Responsive Web Design）已经成为行业重点研究的方向。简单来说，就是未来的网页应该有能力去自动响应用户的设备环境。这样，无论用户正在使用笔记本还是iPad平板电脑，或是各种不同型号的手机，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等。但无论如何，在上述理想状态未能普遍实现之前，多终端的适应性仍是设计师不能回避的现实问题。
　　3.网页功能和网页设计师的“全能型”要求越来越高。要完美实现网络传播效果，必须充分考虑信息接收、信息再加工、信息再传播等多方面的要求。以本专题为例，整个专题的策划设计，充分考虑了网页的美观性、内容的可读性、使用的便利性、用户的参与性。就参与来说，包括了浏览、转发、互动等方面，兼顾了新闻留言、论坛讨论，以及博客、微博客的互动。同时，相关信息包涵了文字、图片、视音频、动画等现有的所有网络信息形态。这些功能和形态方面的要求，使得我们设计的每个专题甚至每个网页，都要满足“全能型”需求。
　　另一方面，网页设计师除了在视觉设计方面必须具备较高专业素养和能力外，还必须具备和设计内容相关的知识积累（比如新闻网页设计师的新闻常识，辛亥专题设计师对相关历史背景和现实意义的准确把握），以及实现设计所涉及的技术方面的知识积累（比如鼠标感应区的基本原理和实现可能）。从本专题策划、设计过程来看，这样的需求是通过团队协同来实现的。但基于效率和成本的考虑，未来以核心专业技能为基础、具备相关复合能力的专业人才，将成为设计师领域的主要需求。这对设计师的知识结构来说，也提出了新的挑战。
　　笔者认为，在网络新闻、网络传播领域，“形式为内容服务”的基本定位没有改变。但网络传播规律显示，形式对传播的影响越来越大。因此，正如平面媒体中美编地位越来越显得至关重要那样，对于网络传播而已，网页设计师所扮演的角色也将变得越来越重要。■
　　（作者系东方网总编辑）
　　
注释：
①范慰慈著，劳动和社会保障部教材办公室编：《网络编辑师高级网络编辑师(国家职业资格2级、1级)》，中国劳动社会保障出版社2006年版
　　
（本文有插图，详见本期第41、43页。）