浅谈新闻门户网站的界面设计和色彩搭配

计算机光盘软件与应用　

工程技术　

Ｃｏｍｐｕｔｅｒ　ＣＤ　Ｓｏｆｔｗａｒｅ　ａｎｄ　Ａｐｐｌ　ｉ　ｃａｔ　ｉ　ｏｎｓ　２０１０年第９期　

浅谈新闻门户网站的界面设计和色彩搭配　

蒋频辉　

（武汉理工大学，武汉４３００７０）　

摘要：介绍了新闻门户网站的特点，从多方面分析了新闻门户网站在界面设计及色彩搭配方面的要点。　

关键词：门户网站；界面设计；色彩搭配；网页设计　

中图分类号：ＪＯ６３　文献标识码：Ａ　文章编号：１００７－９５９９（２０１０）０９－００６２－０２　

Ｎｅｗｓ　Ｐｏｒｔａｌ　Ｉｎｔｅｒｆａｃｅ　Ｄｅｓｉｇｎ　ａｎｄ　Ｃｏｌｏｒ　Ｍａｔｃｈ　

Ｊｉａｎｇ　Ｐｉｎｈｕｉ　

（Ｗｕｈａｎ　Ｕｎｉｖｅｒｓｉｔｙ　ｏｆ　Ｔｅｃｈｎｏｌｏｇｙ，Ｗｕｈａｎ　４３００７０，Ｃｈｉｎａ）　

Ａｂｓｔｒａｃｔ：Ｔｈｅ　ｎｅｗｓ　ｐｏｒｔａｌ　ｆｅａｔｕｒｅｓ，ｆｒｏｍ　ｖａｒｉｏｕｓ　ａｓｐｅｃｔｓ　ｏｆ　ｔｈｅ　ｎｅｗｓ　ｐｏｒｔａｌ　ｉｎ　ｔｈｅ　ｉｎｔｅｒｆａｃｅ　ｄｅｓｉｇｎ　ａｎｄ　ｃｏｌｏｒ　ｅｌｅｍｅｎｔｓ　ｗｉｔｈ　

ｒｅｓｐｅｃｔ．　

Ｋｅｙｗｏｒｄｓ：Ｐｏｒｔａｌ；Ｉｎｔｅｒｆａｃｅ　ｄｅｓｉｇｎ；Ｃｏｌｏｒ　ｍａｔｃｈ；Ｗｅｂ　Ｄｅｓｉｇｎ　

伴随着互联网的发展，网络新闻从开始的粘贴拷贝，发展到　界面层次分明，结构清晰，利于访问者操作，使其能快速浏览。　

今天的各具特色，网络新闻逐渐成为门户网站的王牌产品。　合理搭配视觉清晰度强的色彩更能给人以高强度的视觉感。同时，　

一

、

新闻门户网站的特点　

合理运用多媒体插件，如Ｆｌａｓｈ、图片等，能使页面看上去生动，　

新闻门户网站尽管其主要的新闻业务与商业网站之间存在交　

增强访问者浏览网页的兴趣。　

叠现象，但是商业网站的新闻发布以经济利益为终极目标，新闻　

将各层次、版块进行相互交汇、互有链接，动态栏目和静态　

对于这些网站的惟一目标基本上就是获得更高的页面浏览量。这　

栏目的适度配合，使主页面层次清晰、重点突出，尤其是将传统　

与新闻门户网站以新闻业务为全部事业重心、着重于信息发布的　网页页面的４次到５次的链接方式缩减为２次最多３次链接即可　

发展理念存在本质差异。　

到达，方便检索浏览，并可快捷返回主页面。　

作为一个新闻门户网站，必须在内容和形式上具备以下特征：　（二）页面简洁大方　

（一）必须是主流媒体人承办的。新闻门户网站怎样正确地　

在页面中不要过多的加入与本页内容无关的信息，保证主题　

坚持自己的主流方向，制定符合国家政策的报道方针和原则，从　

内容让浏览者一目了然。从人记忆能力角度来说，由于人的大脑　

正面的角度来挖掘新闻，这一切都取决于承办新闻网站的媒体人。　

一

次最多可记忆五到七条信息，因此如果希望人们在看完你的页　

只有主流媒体人才能保证新闻门户网站始终走在阳光大道上。　

面后能留下印象，最好用一个简单的关键词语或图像吸引他们的　

（二）具有综合性。在现实世界中，主流媒体基本上是综合　

注意力。对于文字信息来说，保证简洁的作法是限制所用的字体　

性媒体。应包括大家臼常生活中所需要的一切信息，如：新闻（政　

和颜色的数目。一般每页使用的字体不超过３种，一个页面中文　

策、社会、财经、体育、娱乐等板块）、论坛、视频、商品、邮箱　

字使用的颜色少于４种。页面上所有的元素都应当有明确的含义　

博客等。作为能够对社会舆论产生重大影响力的新闻门户网站也　

和用途，不要用无关的图片把页面装点起来，切忌把页面搞的很　

必须是综合性的新闻网站。　

花哨，使人不明白你到底要突出表达的是什么内容、主题和意念。　

（三）内容丰富。作为一个主流媒体，新闻门户网站应该关　

对于图像信息来说保证简洁的常用作法是尽量使用文件尺寸较小　

注社会的各个方面，满足社会各方面的信息需要，使浏览者能够　的图标。　

获得多方面的信息，而不能仅仅局限于某一专业领域，否则就成　

（三）网站风格统一　

为专业化网站。网页内容是决定网页价值最重要的因素，为了突　

新闻门户网站在设计时要考虑到网站整体风格的统一。从页　

出展示网站形象，配合国家新闻传播、信息发布工作的开展，普　

面的排版和布局下手，各个页面使用相同的页边距，文本、图形　

及科学技术知识，使访问者通过网站一目了然，尽快找到自己所　

之间保持相同的间距；主要的图形、标题或符号旁边留下相同的　

需的信息。可使访问者通过访问该栏目获得各种信息，提高访问　

空白：如果在第一页的顶部放置了站点标志，那么在其他各页面　

者兴趣。尤其是二级网页设置的的各栏目在首页“栏目纵横”中　

都放上这一标志；如果使用图标导航，则各个页面应当使用相同　

展开，简化了点击程序，访问者通过点击进入各大版块。以某门　

的图标。此外，考虑到目前上网浏览者使用电脑屏幕的分辨率多　

户网站为例，二级页面中体育版块中，分为足球、篮球等，对国　

为１２８０×８００，因此，每个页面在设计时也要设定在此分辨率下。　

内外的重大赛事有非常详细的报道，对各国家队、俱乐部也有详　

如有特殊，还要给浏览者作出提示。　

细的介绍，各种信息应有尽有，非常丰富。　

三、新闻门户网站的色彩搭配　

（四）个性化。即有自己独特的办网站的理念。所编采的新　

网站的风格直接影响了访问者的第一印象。如何运动各种不　

闻，在符合国家有关政策的情况下，都是围绕着这个理念来进行　

同的颜色心理来策划和设计网的风格是网站设计者需要考虑的重　

的。必须为自己特定的读者服务。比如网易新闻的最大特色之一　

要内容，针对新闻门户网站网页界面色彩设计，所做的色彩喜好　

就是它的特色评论。　

及意象调查分析结果表明，影响色彩意象有三个因素：美丑因素、　

（五）原创性。新闻门户网站的新闻必须是记者采写所得，　

明暗因素及兴奋沉静因素。美丑因素受到色彩三属性全面的影响：　

即使转载传统媒体的新闻，也必须进行一定的整合加工，添加适　

明暗因素则受到明度的影响最大；而兴奋沉静因素则受色相与彩　

合网络传播规律的元素，尽量符合网络读者的阅读要求。　

度的影响最大。　

二、新闻门户网站的界面设计　

（一）色彩设计的标准　

新闻门户网站能够对受众和舆论产生重大的影响力，并能通　

针对色彩评价的调查表明，不存在绝对统一色彩审美的唯一　

过独立运作取得较高社会收益，不外乎它独特的界面设计，能吸　

标准。但在门户网站界面设计时仍然有一些原则是可以遵循的。　

引大量的受众。　

可以视之为一般条件下的标准。　

（一）特色界面　

１．色彩与用户审美的统一　

网站界面保持独特风格，可使访问者记忆深刻，提高叵Ｉ访率，　

（下转第６４页）　

计算机光盘软件与应用　

工程技术　

Ｃｏｍｐｕｔｅｒ　ＣＤ　Ｓｏｆｔｗａｒｅ　ａｎｄ　Ａｐｐｌ　ｉｃａｔ　ｉｏｎｓ　２０１０年第９期　

（二）网站登录系统的结合　

密钥，而共享内存的方式实现了双方的通信。在每次ＢＨＯ调用本　

为了实现浏览器与本地的密码输入系统的通信我们将用到　

地程序的同时，本地程序会开启共享内存，结束时自动消除。本　

ＢＨＯ进行编程，ＢＨＯ（全称ｂｒｏｗｓｅｒ　ｈｅｌｐｅｒ　ｏｂｊｅｃｔ）是微软推出　

地程序会将生成的密钥写入共享内存中，方便ＢＨＯ的读取，从而　

的作为浏览器对第三方程序员开放交互接口的业界标准，通过简　

实现了进程间的通讯。　

单的代码就可以进入浏览器领域的“交互接口”。利用ＢＨＯ中的一　

进程调用方法：ＣｒｅａｔｅＰｒｏｃｅｓｓ（）　

个重要方法ｓｅｔｓｉｔｅ，可以合法的得到ＩＥ浏览器的ＩＵｎｋｎｏｗｎ指　

共享内存的生产：ＣｒｅａｔＦｉｌｅＭａｐｐｉｎｇ（）　

针，这是实现ＢＨＯ与ＩＥ浏览器通讯以及接下来与本地程序通讯，　

共享内存映射的实现：　ＯｐｅｎＦｉｌｅＭａｐｐｉｎｇ（）　

密钥自动填充的基础。　

ＭａｐＶｉｅｗＯｆＦｉｌｅ（）　

二、具体实现方法　自动填充的实现：　

利用ｓｅｔｓｉｔｅ方法获得浏览器的ＩＵｎｋｎｏｗｎ指针。　自动填充的实现同样在网页密码输入框响应事件中完成：　

每当网页的ＨＴＭＬ文档下载完毕会产　通过ｓｐＤｉｓｐ＝ｐＤｉｓｐＰａｒａｍｓ一＞ｒｇｖａｒｇ［０］．ｐｄｉｓｐＶａｌ；获得浏　

生Ｄｏｃｕｍｅｎｔｃｏｍｐｌｅｔｅ事件，之后遍历文档中的所有表单项，　

览器Ｄｉｓｐａｔｃｈ接口　

找到类型为密码输入框的表单项，将该网页元素与ＢＨＯ实现的　

通过ｈｒｌ＝ｓｐＯｂｊ一＞ｇｅｔ

ｓｒｃＥｌｅｍｅｎｔ（＆ｐＥｌｅｍ）；获得网页元素　

Ｄｉｓｐａｔｃｈ接口的Ｉｎｖｏｋｅ方法建立连接，连接的方式用ａｄｖｉｓｅ方　

事件的源　

法。　

通　ｈｒ３＝ｐｇｌｅｍ－＞ＯｕｅｒｙＩｎｔｅｒｆａｃｅ（１ＩＤ

工ＨＴＭＬ工ｎｐｕｔＥｌｅｍ　

当用户点击密码输入框将会产生　ｅｎｔ，（ｖｏｉ　）＆ｐＩｎｐｕｔＥｌｅｍ）；获得ＨＴＭＬｌｎｐｕｔＥｌｅｍｅｎ接口　

ＨＴＭＬＥＬＥＭＥＮＴＥＶＥＮＴｓ２

ＯＮＣＬＩＣＫ（网页元素单击事件），由于之前已　

通过ｈｒ＝ｐｌｎｐｕｔＥｌ　ｅｍ－＞ｐｕｔ

ｖａｌｕｅ（ｂｓｔｒＴａｇＶａｌｕｅ）；完成最　

经将密码输入框与浏览器ｄｉｓｐａｔｃｈ接口的Ｉｎｖｏｋｅ方法建立了连　

后的自动填充　

接，相应的响应事件就可以按照白定义的流程去实现。从而代替　参考文献：　

了原来的输入方式。　［１］吕颖，方漪．基于摄像头的手势捕捉技术的研究．科技信息．２００９　

代码示例：以下代码获得网页元素　

年第１期　

ｃ＆ｓｅ　ＤＩＳＰＩＤ　ＨＴＭＬＥＬＥＭＥＮＴＥＶＥＮＴＳ２　ＯＮＣＬＩＣＫ：　

【２］刘瑞祯，于仕琪．ＯｐｅｎＣＶ教程：基础篇．北京航空航天大学出版社　

｛ＣＣｏｍＱＩＰｔｒ＜ＩＤｉｓｐａｔｃｈ＞ｓｐＤｉｓｐ；　

［３】陈胜勇，刘盛等．基于ＯｐｅｎＣＶ的计算机视觉技术实现．科学出版　

ＣＣｏｍＱＩＰｔｒ＜ＩＨＴＭＬＥｖｅｎｔＯｂｊ＞ｓｐＯｂｊ；　

社　

ｓｐＤｉ　ｓｐ＝ｐｄｉ　ｓｐｐａｒａｍｓ一＞ｒｇｖａｒｇ［０］．ｐｄｉ　ｓｐＶａｌ：　

ｓｐＤｉｓｐ一＞ＱｕｅｒｙＩｎｔｅｒｆａｃｅ（１ＩＤ

ＩＨＴＭＬＥｖｅｎｔＯｂｊ，（ｖｏｉｄ＊＊）　

作者简介　

＆ｓｐＯｂｊ）：　

吕晶晶（１９８８．１２一），男，江苏省姜堰市人，大学本科学历，东南　

…………●…－●

‘　

大学信息科学与工程学院在读学生，研究方向：信息科学与技术；　

具体响应事件代码　

黄曙，东南大学信息科学与工程学院；李穆清，东南大学信息科　

）　

学与工程学院；龚皓，东南大学信息科学与工程学院　

通过以上步骤将密码输入框响应时问替换为自定义的事件，　致谢：本项目的实施得到了东南大学信息科学与工程学院信息安　

从而形成整个方案的基础。　

全学科宋宇波老师的热心指导，并作为信息安全竞赛项目得到了　

浏览器与本地程序的通信　

经费支持，江苏省“网络与信息安全”重点实验室提供了工作环　

由于浏览器与本地程序属于两个进程，无法直接传递生成的　境和设备支持，在此特别感谢。　

（上接第６２页）　

（二）网站设计的标准色彩　

在网页设计之前，对页面所面对的用户以及对用户的审美倾　网站“标准色彩”指能体现网站形象和延伸内涵的色彩。一　

向等问题要有清楚的定位。不同用户群体对色彩的接受存在很大　般来说，～个网站的标准色彩不超过三种，标准色彩要用于网站　

的差别，色彩会因不同的性别、年龄、生活环境、种族等不同的　

的标志、标题、主菜单、主页块等，给人以整体统一的感觉。　

因素，引发不同程度的生理与心理共鸣，不管是正面或负面。因　

门户网站由于其地位的特殊性，所以在界面色彩设计时，一　

此，对于门户网站颜色，一定要配合用户的心理或生理需求进行　

定要以科学的色彩理论为指导，以敏锐的感觉去发现，以高超的　

组合、搭配及设计。当在选定颜色组合时，必须考虑到所选择的　配色技巧去完成　如新华网是以白色为底色，深黄色为主色，问　

颜色是否能引起适当的回响。符合接受者审美倾向的配色会激发　以深绿、淡红、黑等各色，特点是温馨、清晰；搜狐网则以白色　

阅读兴趣，在一定程度上有利于信息的传播。　

为底色，以淡黄为主色，问以橙红、天蓝、绿等色，特点是丰富　

２．色彩与内容的统一　

而略显繁杂；而南方网在白色的基点上采用深红为主色，辅以黄　

包彩与界面主要信息内容应有内在的联系，通过色彩倾向和　色、淡青等色，热烈而略显压抑感；东方网以赤色为底色，加以　

色彩联想，突出主要内容，同时在用户的情绪上引发共鸣。例如　

红、灰、白色字，又问以蓝、绿等色，别具一格；人民日报网络　

中国人讲究对称，故一些门户网站在其广告设计时，通常在左右　

版采用的主色则是深蓝色，体现了其严肃性和权威性。德国物理　

各设计一个，并以不同的颜色以示与其它栏目的区别，达到了很　

学家赫林提出的颜色对立学说就认为，在人的视网膜接收过程中，　

好的视觉效果。　

存在着黑一白／红一绿／黄一蓝等三种对立的视素，前者对视网膜起破　

３．色彩与功能的统一　

坏作用，而后者则起建设作用，因此，当前各大网站大多以蓝色／　

色彩与信息传播功能需求要达成统一。利用色彩的视觉心理　

黄色／黑色为主调，以求与受众的知觉思维习惯达成一致。　

效果可以有效地促进信息的接受程度。例如，在５．１２地震后，各　四、结语　

大新闻门户网站的新闻报道、图片等均调整为黑色，很好的表达　

新闻门户网站给浏览者留下深刻印象，首先就要掌握网站设　

了地震后大家的悲情，其视觉效果让大家很快就接受。　

计的一些基本原则，然后再对网站本身的特殊性和针对性作一些　

４．色彩与构图功能的统一　

考虑，从网站内容、风格、色彩搭配等方面综合考虑，，应着意运　

色彩的美感是在构图的基础上表现出的一种总体感觉。构图　

用和汲取那些能体现几千年的历史沉淀、凝聚了中华民族特定的　

本身就是一种表现形式，具有一定的形式美感，如重心的安定感，　

思维方式、价值观念和人格心理及审美情趣的语言。　

布局的均衡感，元素的条理与节奏等。色彩的美感正是由构图的　

参考文献：　

这些形式要素统一体现出来的。在构图中要注意色彩的平衡，把　

ｆ１１李远红＿网站设计与制作ｆＭｌ＿重庆：重庆大学出版社，２００２　

握好轻重、明暗等关系，从而达到视觉上色彩力度的平衡状态，　

【２曾励，２１追寻特色：新闻网站首页之要【１１新闻导刊，２００３．０４　

引起视觉的快感，激发人的情感与之呼应，给人以美的感受。