网页设计论文

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

门户型网站的布局与色彩选择

来源:学术堂 作者:姚老师
发布于:2015-05-09 共1946字
摘要

  网页设计的视觉效果日新月异,随着互联网技术应用的不断发展,视觉形式的呈现也更加贴切地服务于用户的浏览与应用需要。在众多门类的网站中,资讯类网站是最普遍的网站类型之一,目前大部分政府、企业、综合门户网站都属于这一类网站。

  资讯类网站的视觉效果多以简洁大方的风格呈现。在看似简单实则收纳了大量繁杂讯息的网页版面上,科学的视觉传达规律起到了重要的作用。就颜色而言,门户类网站的用色要整体统一协调,局部对比醒目。确定主色,主色调是页面的主要色彩倾向。企业网站设计中非常重视主色调的作用,如IBM的蔚蓝色、可口可乐的红色等,这些颜色已经成为企业的象征。

  综合门户网站由于其内容频道广泛的原因,它们在主色调的运用上相对灵活。而政府门户网站对主色调的选择则较为严谨,多以红、蓝作为其主色。设计者要根据网站的定位、主题、浏览用户,表现利用色彩想要传达的视觉效果,大胆地用色。

  从方法上来说,门户网站通常从网站内容的主题立意角度选择主色。如针对网站的布局,从图片着手选择主色,运用Photoshop软件使图片彩块化呈现:用吸管工具将颜色提取出来,按规律排列,得到一组可用样色。在众多可用色调中,选择切合主题且视觉效果出众的颜色作为主色。

  主色调确定后,要合理运用色彩规律进行配色工作。将主色调在色相环上定位,以此寻找与主色调协调的色彩。第一,单色调:主色的深、中、浅的组合被称为单色调。单色调没有色相上的变化,却提供了色彩明度对比,使得版面给人以统一的整体印象,常用于风格稳健的设计中。第二,类似色色调:在色相环中与主色相邻的颜色是类似色。类似色之间具有很强的潜在关联性,这种色调既有单色调的统一,又具有活力和变化。类似色色调类别丰富,相对容易驾驭。第三,对比色色调:将色相或色彩差异大的色调搭配在一起,利用对比呈现出强烈的视觉效果,称为对比配色。它与前面两种配色相反,会给人强烈的视觉冲击力。对比配色在门户类网页设计中通常以强调色的身份出现,同色系低饱和度、变化少且单调的配色中,用与主色成对比的色彩色调作为强调重点,如标题横幅(banner)区域的文字和标志(logo)使用对比关系色彩,能让整个网页看起来更完整且色彩分明。而此时所用的重点色就成为强调色。小面积使用高明度、高饱和度的强调色是为了与主色形成对比。如果大范围、大面积使用强烈色彩,则会打乱视觉平衡,使整体网页视觉印象过于强烈。

  就布局而言,门户类网站的讯息繁多,各类信息的位置十分重要。布局要以美观清晰、便于用户浏览阅读为根本。这首先就涉及视觉流程的问题。所谓视觉流程,是指网站界面设计对于用户的视觉引导,用户浏览网页时首先会看到什么,然后会看到哪里,在哪个位置浏览停留时间长,哪里用时少,这些都是运用科学的视觉流程规律来引导的。有人认为网站的版式布局、选色配色、字体安排只关乎页面的美观问题,其实这些版式布局同样对用户的心理产生一定的影响。

  从位置上来讲,人们的视线习惯于从上至下、从左到右地浏览页面内容。所以,网页的上方位置比下方重要,左侧位置比右侧重要。通常,中上部被称为“优选视域”,多用于放置重要内容。从面积上来说,用户在掌握整体画面信息之后,不管是文字还是图片,一定会先从大面积的部分看到小面积的部分。从色彩上来说,用户视线会从浓烈的色彩开始,移动到浅淡的色彩,容易从色调高的部分移向色调低的部分。此外,在色彩统一的版面中加入性质不同的色彩后,人们也会自然地将视线移到不同的色彩上。

  以上引导视线的方法在传达视觉印象或呈现视觉感受时,都能在网站的版面设计中反映出先后顺序。以政府门户类网站为例,在首页设计中,一些重要信息多以大图的动态形式出现在左侧,右侧为推荐文字信息。实时突出的重大新闻用大字置顶。首页的下半部分(顶部导航栏以下)放置更新速度相对较慢的常规信息,这样整个版面的层次就拉开了,让浏览用户第一眼就能找到主次关系。

  综合门户类网站的布局相对更灵活,因为其频道范围广,其导航栏占据更大的空间,位置的扩张本身就加强了其功能性,在视觉顺序上也提前了,让浏览者一目了然,直奔主题。标题和站内搜索引擎虽然置顶,但由于面积和导航栏对比悬殊,在视觉顺序上相对要弱些,想看的时候才能看见它--这正是设计者、浏览用户所需要的。此类门户网站多在导航栏下方配图,以广告居多,可灵活运用位置空间。

  网页设计中的文字也是影响布局的重要因素。字体、字形大小的选择要观察可用区域面积的比例,如配图及图案中肌理的走势。首页整体格调也是选用文字的重要参考因素,文字要与之相呼应。如时尚的气氛配时尚的字体,朴素的气氛配平静的字体等。

  门户类网站信息量庞大,只有科学地运用色彩与布局等视觉传达规律,合理地配色、排版,才会使页面呈现出条理清晰、主次分明、简洁大方的视觉效果,从而方便浏览者使用。

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