网站设计论文

您当前的位置:学术堂 > 计算机论文 > 网站设计论文 >

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

来源:学术堂 作者:姚老师
发布于:2015-07-10 共2731字
摘要

  所谓地方门户网站,是指某一地区综合性互联网信息的大杂烩。其应用系统包罗万有,包括新闻、娱乐、体育、社交平台,甚至还有邮箱、电子商务等多种功能。以东莞阳光网为例,该网汇集了东莞最权威的新闻动态和最全面的生活资讯,设有新闻、社区、房产、旅游、文化、体育、生活、交友、财经、视频、商城、供求等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)。

相关内容推荐
相关标签:个人网站设计论文
返回:网站设计论文