门户型网站的布局与色彩选择发布者：本站     时间：2020-05-02 14:05:14

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

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

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

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

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

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

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

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

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

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

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