地方门户网站东莞阳光网页设计成功要素

　　所谓地方门户网站，是指某一地区综合性互联网信息的大杂烩。其应用系统包罗万有，包括新闻、娱乐、体育、社交平台，甚至还有邮箱、电子商务等多种功能。以东莞阳光网为例，该网汇集了东莞最权威的新闻动态和最全面的生活资讯，设有新闻、社区、房产、旅游、文化、体育、生活、交友、财经、视频、商城、供求等20 多个专业频道。由于其资源丰富，且获取信息便利，东莞阳光网已然成为东莞第一地方门户网站，深受东莞网民的青睐，现日均点击率超过 500 万。

　　一直以来，门户网站走的都是“高大全”路线，以构造强大的资讯资源库，创造不同口味、满足不同需求的网民为目标。但对于“读图时代”的网民而言，多元快速的信息传播早已造成一定的审美疲劳，由此养成了一目十行的网页浏览习惯。一个“高大全”的门户网站，如何让网民抓住重点，取其所需、博其所好，网站的设计及版式编排至关重要。基于此，以东莞阳光网为例，重点探究地方门户网站网页设计的几大成功之处：
　　
　　1 虚实相生的视觉流程

　　“网页的作用是通过视觉元素来引人注目而实现信息内容的传达，为了使网页获得最大的视觉传达功能，网页的设计必须适应人们视觉流向的生理和心理特点。”[1]网民打开网页后，首先把着眼点放在哪里，其次放到哪里，再次放到哪里，最后把目光停留在哪里，停留多长的时间，对于网站来说都非常重要。在很大程度上，这种“第一视觉”需要通过网页设计的视觉引导来实现。

　　以东莞阳光网为例，成功之处有以下几点：

　　1.1 将视觉引导贯穿于整个网页设计

　　如网页第一行各栏目的链接，链接将日常点击率较高的内容有序排列，然后细分为新闻、社区、房产、旅游等版块。每一组链接的头一项加以黑体字标明，让网民一目了然。个别栏目为近期时尚热点，更新较快，则以红字标明，吸引网民目光。这种轻重有别的设计让网民能迅速寻找到最佳视域、捕捉兴趣焦点，从而起到视觉引导的作用。后面的网页则大体上跟随栏目，分块列出头条要点，从而构成合理的视觉空间定位，加深网民的“第一印象”.

　　1.2 以合理的方位编排来引导视觉流程

　　按照“上方优先”的规律，把要闻放在网页上方，从上到下依次是东莞新闻、镇街新闻和国际新闻，从而在要闻中突出地方特色，体现地方门户网站的资讯优势。

　　按照“左方优先”的原则，左方设置了“莞视界”栏目，以图片的形式报道近期发生在本地的新闻趣事。而右方则依次为焦点、旅游、生活、社会、娱乐等复合栏目，报道一些国内的趣闻轶事。网站设计牢牢抓住了视觉中心规律，大图类链接多放在网页中心位置，小型图链接则置于两旁互补，通过图片的大小、虚实、远近对比，成功突出中心主题。

　　2 刚柔并济的色彩联想

　　《易·系辞下》云：“刚柔相推，变在其中矣。”从美学的观念出发，美大概可以分为“壮美”和“柔美”.作为一个包罗万有的门户网站，网页设计基于不同的内容，既要有壮美的一面，也要有柔美的一面，刚柔并济才能给网民带来更多元的视觉效果。

　　“色彩本身具有象征作用，色彩和界面元素的巧妙结合会赋予元素更多的感情内涵。”色彩是“第一视觉”的重要组成部分，网页色彩的合理灵活运用，不但能为栏目增色不少，更能充分吸引网民的眼球，达到“一见钟情”的效果。东莞阳光网沿用东莞广播电视台的台标作为网标，以黄色为主色调。黄色给人以光明、希望的色彩联想。

　　浏览网页可见，黄色贯穿了全网的所有栏目，台标均列于每个网页的左上方，台标右侧是搜索栏，网页右侧是阳光网微信公众号二维码和东莞阳光台下载二维码等，凡带有“阳光网”字样的栏目，与“东莞阳光网”的主题理念配套一致。在主色调的基础上，网页设计者巧妙地根据各栏目的内容，设置了不同的颜色，冠以不同的色彩联想：

　　2.1 通过明暗度来提高网民的注意力。

　　如优惠信息类、旅游类的网页以高亮度的色彩为主，给人生机勃勃的感觉；举报犯罪活动类、问政平台类则使用淡雅色调，给人庄严肃穆的感觉。

　　2.2 通过互补色来调节页面

　　相邻的两个链接往往采用高反差色调作为调和，有效地增加了链接的区分度。在复合栏目的幻灯片或动画播放时，注重色调的变化，往往一方加强，一方减弱，泾渭分明。部分新闻标题做了特殊色彩、动画或艺术字处理，形成“千帆竞渡，独树一帜”的效果。

　　2.3 通过冷暖色调来调节视觉

　　如娱乐类、消费类、动漫类的网页，一般采用暖色调，凸显活泼、温馨的效果；而文化、财经、法律、科技等网页则广泛采用冷色调，给人以厚重、理性的联想。

　　2.4 通过均衡色彩来避免视觉疲劳

　　东莞阳光网总体的色调设计采用的是简约风格，整个网站没有太多千奇百怪的“非主流”颜色，不同颜色所占的比例、面积和位置都经过合理搭配，色彩间均有适当的留白或点缀一些过渡颜色，使整个网站看上去“简约而不简单”“养眼而不刺眼”,色彩搭配的和谐有效地避免了长时间观看网页带来的视觉疲劳。

　　3 主次分明的布局结构

　　“用户界面是当最终用户使用系统时所接触到的全部内容，无论从物理意义、感知意义，还是从概念意义上来讲，都是如此。”[3]东莞阳光网页面布局主要有三种形态：

　　3.1 “国”字型

　　网站最上方是横幅广告条，左右两边罗列一些小条内容，多为趣味性图片、实用信息或对联性广告条等。最下面的是网站的主要信息，包括联系电话、地址、广告专线等。上述内容分列网站的四周，把中间的主要内容包围起来，使网站形成“国”字形态。

　　3.2 “拐角”型

　　“拐角”型多用于二级网页。网页顶端是广告或其他栏目链接，左右其中一侧是信息罗列，如办事大厅、领导信箱、公众留言、相关链接等，其余位置为正文。“拐角”形网页有利于一些字数较长的文章发表，保持文章的视觉宽度，提高网民的阅读速度。

　　3.3 标题型

　　这是最简单的形态，正文标题至上，下面为正文及与正文相关的网页链接。这种形态的设计多用于时政新闻、通知公告等。由于网页设计简单，没有太大的网络链接参杂其中，让网民能集中精神阅读和把握文章要点。

　　至于网页内容框架设置方面，常见的有：左右框架型、上下框架型、综合框架型和封面型等。前三种结构应用比较广泛，原理相近，适用于各种类型的网页，只是设置的框架位置不同。封面型框架多用于一些专题网页，如阳光热线、阳光周末等。这些专题具有常设性，往往封面设计大气精美，随着时间的推移，有利于形成一定的栏目品牌效应和标识效应。

　　4 结语

　　在“视觉优先”的现代社会，人们在讲求实用性的同时，也追求视觉的美感，这与生活品质有关；在资讯爆炸的 2.0 时代，人们接收讯息的渠道多元而广泛，作为地方门户网站，想在众多竞争对手中突围而出，离不开独具匠心的网站设计。这一点，东莞阳光网做到了。

　　参考文献：
　　[1] 张婷婷 . 教学网站中视觉传达设计研究 [D]. 山东师范大学硕士论文 .2007 年 10 月
　　[2] 李艺 . 高校门户网站界面的人性化设计研究 [D].江南大学硕士论文 .2009 年 6 月
　　[3]（ 美 ）John Satzinger Robert Jackson StephenBurd 着，耿志强，朱宝，李芳，史晟辉译 . 系统分析与设计 [M]. 北京：机械工业出版社，2009（4）。