门户网站网页设计的要点解析

门户网站网页设计的要点解析

目前，一些政府门户网站在网页设计方面还存在着诸多问题，如整体创意不足，页面布局不活，色彩搭配不当，字体运用不佳，导航设计不全，名称格式不一，域名没有统一，等等。笔者以为，政府门户网站的网页，特别是主页，起着呈现传达信息、与用户交互和提供帮助导航的重要功能，其设计应遵循以下原则：一是内容决定形式的原则，即网页设计必须服务于网站内容的呈现，要考虑浏览者获取信息的速度和舒适度。二是整体协调一致的原则。即网页设计的各个环节，包括色彩、布局、文字、图片等，要紧紧围绕既定的创意和风格展开。三是服从技术需要的原则。网页设计受技术制约的程度非常明显。如网页的宽度受限于显示器分辨率的大小；网页色彩的选取范围应在网络安全色中；网页中图片和动画的设计必须严格控制其大小和数量等等。

在明确以上设计原则的基础上，政府门户网站网页设计还应掌握以下要点。

1.整体创意与风格

网页的创意与风格是围绕主题和内容，对网页色彩、布局、动画、图片、文字等页面元素统一进行个性化设计而形成的整体视觉效果和艺术特点。当前，一些政府门户网站个性不足，趋向于模式化和同质化，中央人民政府门户网站几乎成了一些地方政府门户网站的“模板”，“千网一面”、“似曾相识”的现象严重。还有的网站网页风格不明显，主要表现在：同一页面内各种元素拼凑堆砌、零散混乱，缺少相互呼应和一致性；在页面与页面之间，特别是一级和二级页面之间，色彩、版式、文字等网页风格大相径庭，页面间联系不够紧密，没有形成统一的整站形象等。网页的创意与风格是网页设计的灵魂和统领，创意匮乏、风格平庸的网站很难吸引人的眼球。因此，加强网页的创意设计和风格塑造是提高网页设计水平的首要解决问题。

应该说，政府门户网站不应仅仅是一种政府发布信息资源和提供信息服务的工具，也应是一级政府在网络上精心打造的视觉形象，应着力反映政府的执政理念、发展策略和远景规划等深层次内容。尽管创意具有很强的主观色彩，似乎来自于灵感与顿悟，但绝非空穴来风完全不可把握。创意设计应紧紧抓住本地区的历史沿革、地域文化、民族特色等个性化特点，选取标志性的图片、有象征意义的色彩、隽永深刻的文字和恰当的布局，按照视觉规律进行艺术加工，设计出完整一致的视觉形象，并长期沿用下去，不断强化浏览者的记忆，久而久之就会深入人心，印象深刻，成为本地区独特的“网络形象代表”，这就是一个政府门户网站成功创意和风格的最终表现。

2.页面色彩与色调

对以呈现信息为主的门户网站而言，和谐的色彩色调能提高信息获取速度，比字形和字体的变化更能提高理解的准确度。当前，一些政府门户网站网页在色彩色调方面的问题主要有：色彩使用过多，造成色彩杂乱相互冲突，色彩观感矛盾，主色调不明确；文字、图片、动画等要素的色彩处理不一致，整体效果不佳，割裂了网页色彩的整体感；网页色调过于鲜艳，色彩对比过于强烈，视觉跳跃过于明显，引起浏览者视觉疲劳和注意力分散；文字颜色和背景色对比不明显，降低了阅读效率。因此，政府门户网站网页的色彩色调设计要尽量做到“稳重不夸张、大气不局促、素雅不浓烈、协调不跳跃”，其设计可分为以下步骤。

一是确定主色调。主色调是页面的主要色彩倾向。企业网站设计中非常重视主色调的作用，如：IBM的蔚蓝色、可口可乐的红色、联想集团的蓝色等，这些颜色与企业形象融为一体，已经成为企业的象征。当前，政府门户网站网页主色调的选择以红色居多，有千篇一律的感觉，其实设计者完全可以根据网站的创意、主题和使用对象，以及利用色彩想要达到的视觉和心理效果，大胆选择黄色、灰色、绿色等作为主色调。

二是确定配色方案。主色调确定后，就要合理运用色彩规律，以主色调为中心，利用色彩的明度、纯度、色相三要素的变化，适当增加其他色彩作为对比色和补色，选取辅色调、点睛色、背景色等组成配色方案，和主色调一起构成有节奏韵律、和谐统一的色彩关系（见图1）。网页配色方案要避免出现色彩单一或用色过多的现象，色彩种类最好不要超过四种。

图1 一种配色方案

三是正确使用色彩。确定好主色调和配色方案后，在色彩的使用中应注意“总体协调、局部对比”，即网页的整体色彩效果应该是和谐的，只有局部小范围的地方可以有一些强烈的色彩对比。要适当保持用色的延续性，在风格统一的基础上，为子网站或功能模块选取不同的主色调和配色方案，既要从颜色上对不同内容加以区分，使得页面富于变化，又要保持色彩的整体性和协调性。背景色一般采用素淡清雅的色彩，应避免采用花纹复杂的图片和纯

度很高的色彩，背景色与文字的色彩对比要强烈一些，便于区分背景和文字，提供舒适的视觉体验。

3.栏目布局与版式

网页布局与版式设计是运用版面设计原理，合理配置与秩序化网页视觉元素的过程，其目的是实现信息传递的清晰化、合理化、人性化，并考虑视觉形态的美化，使浏览者在获取信息的同时获得审美感受。网页布局与版式设计同传统平面媒体的版式设计非常相似，其实质就是在有限的屏幕空间内将特定的视听多媒体元素进行合理的编辑和安排。从整体上讲，一些政府门户网站网页在布局与版式方面，过于方正、刚硬和死板，缺少设计灵感和艺术美感，主要表现在：采用直线和方块元素的多，采用曲线和不规则形状元素的少；采用对称性设计的多，采用非对称性设计的少；采用常规布局的多，突破常规布局的少。布局与版式设计主要应注意以下几个方面。

一是版式线条。网页中文字、标题、图片等会在页面上组合形成各种线条和形状。正确地处理和搭配好这些线条和形状，才能增强页面的艺术魅力。直线条的艺术效果是流畅、挺拔、规矩、整齐，有轮有廓。直线和矩形在页面上的重复组合可以呈现井井有条、泾渭分明的视觉效果，一般应用于比较庄重、严肃的页面；曲线条的艺术效果是流动、活跃，具有动感。（见图2）曲线和弧形在页面上的重复组合可以呈现流畅、轻快，富有活力的视觉效果，一般用于表现青春、活泼的主题。政府门户网站网页设计如果能以直为主、曲直结合，就可以丰富页面的表现力和内涵，显得庄重而又不刻板，威严而又不冷漠。

图2 曲线板式的例子

二是栏目布局。网页布局有“国”字型、拐角型、标题正文型、左右框架型、上下框架

型、综合框架型、封面型、F1ash型、变化型等多种形式。（见图3）政府门户网站主页一般采用“国”字型布局，即最上面是网站标题图，接下来是网站主体内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的制作单位、联系方式、版权声明等。这是一种适合政府门户网站的常规布局，也是一种安全保守的布局，具有便于呈现大量信息、便于设计实现的优点，但使用实在过多，没有任何新鲜感，如果能在此基础上，适当加以错位或非对称的布局变化，页面会显得更灵活和生动。

图3 典型的“国”字型布局

三是页面尺寸。从页面宽度来看，基于800×600分辨率宽度来设计网页已经过时，在17寸以上宽屏显示器已经普及的今天，个别政府门户网站仍采用这一宽度，会在屏幕左右留下了较大空白，显得小气和局促，窄小的页面也不利于呈现丰富的信息，因此，网页宽度应以1024×768分辨率为设计标准。也可以此分辨率为基准，采用自适应屏幕宽度设计，在各种分辨率条件下都能取得较好的效果。从页面长度来看，我国政府门户网站主页绝大部分采用多页式结构。多页式主页应避免为使主页内容显得丰富，将二级页面的内容提到主页上来，使得页面长度超过三屏，显得过分冗长。单页式主页一般为导航型门户网站采用，因为主页呈现的信息量比较少，尤其要注意导航系统的设计，力求周全便捷，避免给用户进一步获取信息带来困难。

四是构图比例。黄金分割比例大约为0.618，可以不精确地表示为3比5（或5比8，8比13??）。黄金分割寓变化于整齐之中。过于强调整齐的形体，容易流于呆板单调;而变化过多的形体，又显得散漫杂乱。黄金分割律中，左右两边长度是不等和变化的，但又符合一定的规律，从这个角度看又是整齐的。它不仅在自然界中随处可见，在建筑、广告、工业设计中也被作为最完美的比例标准。在网页的构图中，有的政府门户网站一味采用对称和居中设计，显得过于呆板，若能有意识地运用黄金分割和视觉中心点来配置页面元素，将大大

增强页面的美感，减少构图比例失调的情况。

五是留白处理。留白是写意国画中常用的艺术手法，它能缓和画面的紧张及复杂度，唤起联想，利于组织严密和突出主题，加强对比，达到画面的均衡（见插图4）著名画家齐白石的《虾趣》就是留白处理的佳作。留白同样也适用于网站的布局设计和图片设计。在给人强烈印象的构成要素的周围留下空白，能扩大和提高视觉效果，有利于视线流动，破除沉闷感。有的政府门户网站网页页面为突出信息量，“寸土必争”，饱满拥挤，给人“堵得慌”的感觉，这就是因为留白处理不当的后果。

插图4 齐白石的《虾趣》

六是视觉流程。视觉流程是一个由总体感知、局部感知到最后印象三个感知阶段组成的心理认知过程。人的视线在一个平面上的流动具有比较固定的认知模式，即从左到右，自上而下，由左上沿着弧线向右下方自然地流动。在打开页面后，如果没有明确目的，浏览者一般会首先快速浏览整个页面，形成初步印象，然后视线会被可视性最强或感兴趣的对象所吸引，并促成点击。在网页设计中，应该遵循“阅读最省力”的原则，要注意视觉流程规律，视觉流速应合理，视线导向应明确，要有意识地引导浏览者视线按流程顺序轻松、省力、愉悦地阅读。依据此原理，在政府门户网站网页布局和版式设计中，应将重大新闻和图片栏目等重要信息，布置在页面靠左上方位置，并依栏目重要程度由上向下、由左至右排列。

4.媒体设计与运用

随着网络多媒体技术的进步，图形、图像、动画、视频、声音等多媒体元素的运用，网页由静到动，由无声到有声，极大地丰富了网页的表现力。多媒体的设计运用与表现效果也成为网页设计要考虑的重要因素。当前，很多政府门户网站在标题图的设计上难以脱离“国

本文来源：https://www.bwwdw.com/article/vse2.html