信息网站网页设计分析

信息网站网页设计分析

摘要:

本文针对农业信息网站网页设计中影响视觉传达的各构成要素及其审美需求进行了阐述与解析,并结合人们在浏览网页信息时的视觉习惯,重点探讨了实现网页信息与视觉综合要素合理、有效表达的方法与技巧,为增强农业信息网站信息的有效性传播,加快农业信息化进程提供可借鉴的指导和应用依据。

关键词:

网页设计;视觉信息;传达;有效性

1农业信息网站网页设计中的视觉信息传达

数字信息时代,网络作为一种媒体形式,突破了传统媒介信息传达的时空、地域限制,网页作为网络的载体,综合了文字、图形、声音、动画、视频等多种视觉信息,为人们提供了一个更为便捷的信息获得与交流的平台。伴随互联网在农业上应用的迅猛发展,农业网站特别是农业科技网站的建立,对宣传、展示、推广农业新成果、新品种、新技术,传播农业科技知识,促进科技成果转化,实现知识与科技创新及科技与经济有机结合均具有重要作用[1]。然而,目前除去少数一些大型专业网站设计制作比较考究之外,农业信息网站普遍在网页设计、布局安排、美工等方面存在一定差距,常常表现出网页视觉表达较单一、链接繁琐、设计欠缺美感、图片引入过多过大影响页面显示和文件下载速度等问题,网站自身的功能性并没有得到很好的体现,严重阻碍了信息的有效性传播。为有效解决以上问题,可以考虑依据各自农业信息网站的主旨,将网页各视觉要素合理、有序地整合并统一在网页中,构建出具有一定视觉效果的web页面和应用程序,以适应受众视觉流向的心理和生理特点,实现农业信息准确、有效的表达。

2影响网站视觉信息传达的构成要素

2.1文字的编排与设计

文字是伴随网页出现至今一直存在的设计元素,它作为信息传达的主要手段,是构成网页的主体要素,完成了网页中的主要信息描述[2]。文字表现的水平直接影响到整个网页的质量,在网页中主要以标题文字、信息文字、链接文字等形式体现。文字的编排与设计,重点在于要服从信息内容的性质及特点的要求,即风格要与网站性质相一致。同时,还要兼顾文本编辑的整体视觉效果,力求清晰易读,避免繁杂零乱。具体实现上可以从字体的样式、大小、行距、字间距上多做尝试。以吉林省农业科学院为依托建立的网站主要包含科研类研究机构网站和科普类农技服务网站两大类。两者性质上的不同,在网页文字编排上也有所差别。以改版的“吉林省农业科学院院网”(www.jaas.com.cn,简称“院网”)和“农友网”为例,“院网”的字体造型规整有序,基本选用标准的黑体和宋体,具有庄重和规范的特质,而“农友网”的字体选择与文字造型相比则更为多样化,明快跳跃,给人以生机和活力。

2.2图片的编排与设计

图片是比文字更为直观和抽象的视觉表达要素,它与文字的结合更加大了所能提供的信息量,图片的引入也起到页面美化作用。在网页中,图片主要以Logo图形、广告Banner、导航栏、文本图片、按钮和图标以及装饰图形图像等形式体现。图片的编排与设计同样要求所选图片与网站主题有效结合。与此同时,图片的位置、面积、数量、形式及方向等也直接关系到网页的视觉传达[2]。因此,应考虑图片在整体编辑策划中的作用,达到既赏心悦目,又重点突出、和谐统一。具体进行图片的选取与设计时,通常会优先引入与网站主题直接相关的图片(标识性建筑、地域风貌、民俗风情、名优产品等),此外,还会搜集能够与网站主题产生引申联想的抽象类图片作为素材备用,以便统筹安排,有利于整体风格的统一。以“农业部农产品质量安全风险评估实验室”网站平台首界面设计为例,首先,页面Banner处引入一张富于美感的瓜果谷物类图片引出农产品安全类主题;而在左栏导航处,则选取了一系列抽象类办公素材图片与标题文字相结合来完成整体“实验室下属”相关栏目分类链接图标的创作,既简明直观,又达到了整体风格的统一。

2.3多媒体的设计与运用

网页中表现多媒体的元素主要是音频、视频、动画,它们具有很强的说明力和视觉冲击力,在表现方式上也更加生动和便利,除了可以加强视线在视觉传达领域的注意力,其在引导视线方面也发挥着更大的能动性,使浏览者能够以最快捷的途径,最有效的感知方式获取视觉信息[3]。网页中多媒体的运用,首先要注意选取的视频或动画必须符合网站主题,同时还要根据网站实际掌握好文字与多媒体的分配比例关系,切忌喧宾夺主,使二者相辅相成,以产生丰富变化的网页效果。已投入使用的“吉林农民远程科技培训”平台,在建站过程中考虑到其主旨是以自身优势媒体资源为基础,搭建集教育培训、科学普及和信息传播等综合服务于一体的公共服务平台。因此,在具体网页设计时,充分利用多媒体元素在信息传达上的巨大优势,页面中大篇幅将农业生产、科谱生活与工艺民俗等信息内容以音频和视频的形式表现出来,用户通过首界面突显的播放窗口或信息标题链接,即可实现农业视频、音频节目点播。与此同时,结合资讯动态、专家专栏、专家答疑等精炼的图文信息内容,最终实现了农业技术资源、培训资源的网上,再结合基于互联网的远程培训、在线学习和咨询答疑等功能,更有利于用户对信息的理解和接受。

2.4色彩的搭配与运用

色彩作为一种传达设计意图的基本视觉要素,在网页设计中起着至关重要的作用。通过色彩本质表现及其象征性可以传达出不同的文化理念和内容特质,具有明显的视觉效果,辅助网页设计完成不同主题的塑造表达。网页中的色彩包含文字色彩、图形色彩、背景色彩等。色彩在设计运用上同样要适用于网页的主题和内容,并注重整体的和谐统一。合理搭配与运用网页中的色彩元素,主要体现在三个方面:首先是整体页面主色调的确定,通常根据网站自身的主题选定一种或两种颜色作为主体色,利于网站主题的表达;其次是起突出重点、调和缓冲的辅助色的搭配与选用,要充分考虑其与主体色间的均衡关系;最后是增加空间感的背景色的设置等,其中包括色彩的纯度、明度及色相等因素。只有将这些起到不同功能的色彩元素平衡统一起来,避免出现色彩零乱、纷杂、不和谐的不良现象,才能达到给受众以良好体验的视觉效果。以所建的科研、科普类农业信息网站为例,在整体色彩运用上,多采用象征农业的绿色和象征科技的蓝色作为主色调,同时辅以象征土地与收获的黄色来进行搭配,用以传达“以农为本、科技兴农”这一设计理念。

3网页设计中的视觉流程

网页设计的视觉流程是视线随网页中的各构成元素在空间沿一定轨迹运动的过程,其形成是由人类的视觉特性所决定的[3]。人们在浏览网页时有一种很自然的习惯,一般遵循先上后下,先左后右,从中心到四周,从明到暗,从虚到实等的视觉顺序。心理学的研究也表明,同一个平面上视觉影响力上方强于下方,左侧强于右侧,由此可见,网页界面的左上部或中上部才是我们真正所关注的“最佳视域”(图1)。此外,依据先左后右,先上后下的视觉习惯,一个标准的网页给我们带来的自然视觉流程是从左上方到右下方的一个弧形曲线。在这个弧形曲线上,视觉优势从上到下依次递减。网页设计中,灵活而合理地运用视觉流程和最佳视域,利用线条与导向的作用,合理地安排主次信息,组织好自然流畅的视觉导向,直接影响到传播者传达信息的准确与有效性。因此,网页的设计在立足于信息传达的同时,亦要符合人们视觉流向的心理和生理的特点,使浏览者以合理的顺序、有效的感知方式,清新、流畅、快捷地接受最佳的信息。在具体设计与实际应用中,结合现吉林省农业科学院院网首页设计实例,网站下设一级栏目24个,整体可归纳为要闻信息、科研学术、组织机构、农技信息、数据资源及风貌展示几大板块。进行栏目布局时,首先在页面的最佳视域处集中设置了近期最受关注的、更新频率较快的要闻类和能够反映院所科研与学术进展情况的栏目,然后将组织机构、农技信息、数据资源及风貌展示等板块内容参照视觉优势弧形曲线逐级递减的趋势,依初始设定栏目重要程度的不同作相应设置。在此基础上,增加引导性的线条与图标,增设视频播放与图文动态特效,对页面加以丰满和修饰,以达到提高整体版面完整性与可视性的目的。

4提高网页视觉信息传达有效性的方法

4.1处理好网页效果与显示速度的关系

网页显示速度的快慢是网页设计中需要考虑的基本要素之一。简洁的网页结构可以使浏览器更快地完成各种数据的读取工作并进行排版显示,在具体操作中首先检查网页在构造上是否过于复杂,尽量使用简洁的表格设计和减少表格的套用。另外还要在保证图像清晰度的同时力求将图像压缩到最小程度。在强调速度的同时,也并非摒弃了设计的重要性,“速度至上”的信条会使设计陷入盲目,而无视下载速度的做法也同样有欠考虑。因此,平衡效果与速度二者的关系,制作出具有等待价值的网页是解决问题的关键。

4.2设立良好的网站导航系统

合理清晰的网站导航系统可以有效解决网页设计的非线性浏览问题,是最直接、最有效帮助用户浏览网站的途径。绘制导航结构图有利于设计者理清各网页内容之间的关系,把握好网站的整体结构。然后对各个分类版块进行科学、系统的规划与设计,以有限清晰的链接组织建立起包括站点索引、查询功能、服务指南、网站地图等在内的导航系统[5]。当用户浏览每个页面时,能够清晰醒目的提示本页面所在位置,并且提供返回主页面和网站其它各页面的链接以及历史浏览的导航服务。

4.3综合高效地运用多媒体技术

多媒体技术中的媒体是全面的综合性的信息资源,它结合了文字、图形、图像、动画、声音、视频等多种形式的信息,生动逼真的音画效果、色彩和谐的动态视频、灵活便捷的交互手段是其具有的基本特征[4]。它极大的改变了浏览者获取信息的传统方法,人们不仅可以通过文字信息,还可以通过听到的声音和看到的影像来了解感兴趣的对象,参与或改变信息的演示。随着网络技术的发展、计算机性能的提升以及跨平台多媒体文件格式的推广,必将促使合理的综合运用多媒体元素来设计农业信息网页成为潮流与趋势,以满足和丰富浏览者对农业网络信息传输质量提出的更高要求[6]。

4.4提高基于用户体验的交互性与参与性

以用户体验为基础进行的人机交互设计,可以充分考虑用户的知识背景、使用经验以及操作过程中的感受,能够充分调动用户的参与性,促进用户在网络环境下对信息的获取由被动发展到主动,从而实现其个性化需求[4]。在农业信息网站交互设计中,可以通过网上直播农业新闻、新政,有利于及时做好农业政策的宣传和解疑工作;通过开设专家咨询栏目,与专家直接进行交流,可以切实解决用户生产生活中的各类实际问题;通过网上调查、意见征询等栏目,能够更充分地征集用户的意见和建议等。人性化的互动设计,简洁直观的交互界面,让用户在不知不觉中参与完成操作并感觉有所收获,才能提高农业信息网站的用户满意度和保持网站的持续生命力。

5结束语

网页设计作为一门包含艺术设计和技术设计的综合性工程,要充分考虑受众对象这一重要因素,系统掌握网页的视觉传达效果原理,熟练运用先进的设计技术,使网页的设计效果得以良好控制,最终实现网页美学特色和信息技术的综合应用。

作者:丛媛媛 时英华 赵娜 单位:吉林省农业科学院农业经济与信息研究所

参考文献

[1]于平福,刘凯龙.基于ASP的农业网站动态网页的设计研究[J].科技情报开发与经济,2004,(12):259-260.

[2]刁学栋,吴彬.网页设计的视觉信息传达分析[J].中国教育信息化,2006,(19):71-72.

[3]吴乃群,史耀军.网页界面设计中视觉传达的解读[J].艺术研究,2007,(3),69-70.

[4]严卿方.网页设计之视觉传达分析[J].贵州大学学报,2009,(4):56-58.

[5]赵红梅.网页设计中信息传递和视觉表达相结合的理念分析[J].黑龙江科技信息,2012,(22),92.

[6]董海斌.平面视觉元素在网页设计中的应用研究[D].西安:西安理工大学,2008