城市门户网站设计浅析

1网站导航设计

1.1以城市信息为主导的导航设置

如何在有限宽度的显示屏上构建合理的信息框架，让浏览者对网站提供的巨量信息感到有条理；如何建立包括主导航条（浏览深度）、关键词搜索（精准浏览）、顶条导航（任务导向）的导航系统等。通过导航系统的建立，进行信息分级，可使巨量信息在一个页面里建立起层次合理的章节目录，以引导浏览者便捷地找到所需信息。伦敦城市门户网站导航系统设计，它包含了主导航条、关键词搜索和顶条导航，主次分明，功能分区明确。主导航条用了4种不同颜色的斜线起伏相连，以等线体作为分类小标题的字体，标题内容分别指向城市的4种功能，即“介绍、服务、商业、资讯”。

浏览者通过主导航条的指引，在对应的下拉菜单中，可以详细地了解到各类信息，这样就能对伦敦城市有较全面整体的认识。主导航条右侧的＂Findit！＂及醒目的红色放大镜图标，是导航系统中的关键词搜索功能，通过输入关键字词，可以直接找到网站内所有与之相关的信息。顶条导航设置在网站顶端，用较小文字标示，分别指向“在线工作、站内信息按照标题的首字母顺序检索、网上商城、文化活动、招聘工作、新闻中心、联系我们、登录注册”等关于整个伦敦城市的各个方面的信息。在这个部分，不仅提供了方便市民购买、支付的功能，还有序地把整个城市的文化教育活动、工作就业等大量的服务信息进行了高度概括。如顶条导航里＂Doitonline＂对应的页面中，会有＂Applyforit，Findit，Payforit＂等选项，选择＂Payforit＂就可以在线缴纳房租、水电、税款等；点击＂Contactus＂，显示的不仅是伦敦市政府的联系方式，还有伦敦市近45个其他职能部门的联系方式。

主导航旨在帮助浏览者对城市信息作全面了解；顶条导航旨在帮助浏览者解决具体任务及解答问题；关键词搜索旨在快速、精准地帮助浏览者获得信息。国内网站的导航系统分类繁杂，主导航条与顶条导航主次不分、内容重复，主导航条的分类有时高达10个类别以上。如上海城市门户网站导航系统设计，见图2，主导航条设置了13个类别；关键词搜索设置在主导航条下方，细分“网站群检索、站内检索、一般搜索、高级搜索”4个选项；顶条导航设置了8个类别，每个类别下方有显露式的下拉索引，达20项以上。浏览者在分类过多、主次不分的导航系统中，要逐个阅读、筛选来寻找自己需要的信息。如何将繁杂的城市信息进行合理分类、概括，不仅能提高网站的易用性，建立清晰的信息架构，还能减少用户的选择难度，提高查找效率。不管城市的大小，其门户网站作为对内、对外展示城市和提供城市信息的基本功能是不变的。有效地把城市的主要功能作为主导航条，将具体任务的解决及查询设置到顶条导航的方法是值得大家仔细研究的。

1.2以城市内、外用户群为主导的导航设置

以用户群角度作为分类标准的导航设计，也是一种值得借鉴的方法。如日本金泽城市门户网站设计，见图3，设计师基于网络人群自助式点击的需求，在首页设置了城市居民和旅游观光客的不同入口。这样的信息架构不是从城市功能、城市信息分类出发，而是基于城市对内、对外的用户群来进行构建。像这种对用户群进行快速分流引导的设计方法，有利于用户过滤掉不必要的信息。

2网站视觉元素设计

在进行城市门户网站视觉设计之前，应该对该城市进行基础调研，包括是否有该城市的视觉识别体系，以及该城市拥有的自然地理、文化历史、产业资源等信息，找出符合当地城市定位及文化特征的图形、文字和色彩等视觉元素，从而使城市门户网站的设计达到与地域文化相一致的、特色鲜明的视觉整体效果。

2.1图标与图片设计

对于以大量信息内容为主的城市门户网站来说，善用图标与图片的设计，不仅可以活跃版面、营造生动的网页形象，还能有效地配合文字信息达到视觉强化的作用。图标设计在现代设计中起着举足轻重的作用，它以形象简洁的图形设计跨越语言、文字障碍，具有国际通用性的特点。如巴黎城市门户网站首页设计，设计师在顶条导航上采用了图标设计，图标下方辅以文字说明，作为网站鲜明的视觉符号，避免了大量的文字导航，运用形象的图标象征导航的内容，使分类引导的信息更形象、更直观，或许不懂法语的人，也能通过图标辅助找到相应的栏目和页面。多彩的图标导航设计与简洁的网站标志相结合，体现了巴黎作为国际大都会、时尚之都的城市特色。图片分为矢量图片和摄影图片，矢量图片富有装饰美感，摄影图片具有真实可靠等特点。在选择图片时，应根据网站内容进行挑选。在进行图片的编排组合时，有效地将图片与文字进行搭配，处理好图片大小，形成浏览视觉重点，从而有序指引浏览者，是提高网站可读性的重要设计方法。如图4中，大小图片的有序排列，既便于信息分类，又使视觉有了集中点。

2.2色彩设计

网页的色彩包括网站的标准色、图片的主色、页面的背景色和边框色等。色彩本身是客观的，但色彩的出现总能引起人们的一系列心理活动。人们的联想、风俗、生活经历往往会给色彩注入不同的情感内涵，并由此引发出对不同颜色的好感或厌恶，从而使色彩具有了明显的情感象征性。。巴塞罗那城市门户网站，设计师以巴塞罗那城市建筑中典型的蓝色和橙色作为网站的标准色，不仅与主页图片的色调一致，而且在主导航条的设计上也以蓝色和橙色加以区别，使得主导航条的分类更加清晰。柏林城市门户网站见图5b，网站以蓝色为主色调，红色为点缀色，整体统一。多伦多城市门户网站见图5c，网站以深蓝色为主色调，以低纯度的蓝色、紫色、黄色、绿色为辅助色，作为各主导航分类标题的背景色。良好的网站色彩设计，不仅能体现该城市的人文气息、活跃网页视觉效果，还能通过色彩的面积对比、色调对比，使得导航系统更具条理性，实现功能引导的作用。

2.3网站标志与文字设计

网站标志是城市门户网站的第一视觉元素，在首页中占据着重要的视觉位置，是城市形象的直观反映。有的网站标志是以该市的市徽进行延展设计，从而形成一致的城市视觉形象；有的则为适应网络文化而重新设计。国外城市门户网站标志设计。不管是延用还是重新设计，网站标志都应该与网站页面的整体视觉风格保持一致。文字是网页设计元素中信息传达的主角，是信息传播的基本载体，同时也是最具创意的设计元素。不同的标题需要选择能够准确传达其特性的字体。不同的字体，其风格与内涵不同。一般而言，网站正文的小标题字体应选择黑体，正文内容选择宋体，这样可以提高网站的可读性。良好的网站设计，不仅需要建立简洁、清晰、明了的导航系统，还要善于运用图标、色彩、标志、文字等视觉元素，才能起到强化导航系统、展示城市文化的作用。（本文来自于《包装工程》杂志。《包装工程》杂志简介详见。）

3结语

一个优秀的城市门户网站将有助于城市品牌形象的推广，是城市软实力的综合展示平台之一。目前，我国的城市门户网站还存在很多问题，如文字堆积、导航分类不明确、界面不美观等，更少有体现城市文化内涵的网站。在进行城市门户网站的设计工作时，设计师团队需协同该城市政府各部门达成一致的网站功能定位，继而建立合理的信息架构及网站导航，以符合城市形象的视觉设计来营造具有城市特色、导航清晰、便捷易用的城市门户网站。

作者：张毅 郑露 单位：广东工业大学