校园网站中的文字设计

牛婷婷

摘要 校园网站是教师与学生彼此之间交流的重要平台,在信息化校园建设中起着举足轻重的作用。但是目前在校园网站的设计过程中极易被忽视的一个问题是网站文字编排设计的功能性和艺术性。借鉴一些经典的商业及个人网站,提出校园网站文字编排设计的策略和原则。

关键词 校园网站;网站设计;文字编排

中图分类号:TP393.18 文献标识码:B 文章编号:1671-489X(2009)24-0094-02

Discussion about Character Design in Campus Websites//Niu Tingting

Abstract Campus website is an important means for communication between teachers and students and it plays a significant role in constructing the information-oriented campus. However, a problem which is generally neglected in designing a campus website is functionality and artistic value of character-arrangement. This paper puts forward strategies and principles for designing characters in campus websites.

Key words campus website; website design; character arrangement

Authors address Qingdao Agricultural University, Qingdao, Shandong, 266109, China

校园网站是教师、学生、学校之间相互交流的重要平台,也是学校宣传的重要阵地。网站的观赏性由布局、图片、动画、色彩等很多要素控制,而文字往往是被忽略的要素。而在网站的设计中,文字具有功能性和艺术性的双重使命。

外观设计上,校园网站的设计可以借鉴优秀的商业网站和个人网站。笔者挖掘一些经典的商业及个人网站,分析这些网站中文字设计的可取之处,与大家分享,为校园网站的设计带来灵感,从“文字”开始,打造美丽的校园网站。

1 标题及装饰性文字的设计

与商业及个人网站相同,校园网站也需要合适的标题及装饰性文字,以增加网页的视觉表现力。在商业及个人网站中,标题及装饰性文字的设计是非常讲究的,其中文字设计的技巧是相通的。

1.1 字体的组合与搭配在同一个网页中往往使用类似的字体,来使整个网页的设计在变化中又协调统一。

在流域杂志网站的首页中(图1),导航使用方正老宋体,这种字体是宋体的变形,把宋体的笔画加粗。这种比较古典的字体与网页的古典风格很和谐,老宋体与正文中的宋体是类似字体的搭配。

校园网站一般都不需要太张扬个性,而需要给人以信任和亲近感。所以校园网站中比较适合用类似字体搭配的方法。例如方正粗倩体和方正粗活意体,方正粗倩体和方正细倩体,方正稚艺体和华康少女体等,都是比较类似的字体,可以在同一个网页中搭配使用。

1.2 字号的组合与搭配作为具有装饰作用的文字来讲,字号的不同也就是文字的大小差异会带来很多意想不到的变化。

根据人的视觉特征,较大的文字会有扩散感而不易于理解整体含义,相反较小的文字,特别是某一单词或词组会给人一种整体的感觉。不同字号的文字组合在一起会给画面带来空间感,产生近大远小的错觉。

在body design国外个人网站中(图2),很容易看出来,在背景图片中的较大的文字BODY-S只起标志性的装饰作用,而左上角较小的文字和网址反而更能引人注意;网页背景中凌乱放置的大小不一的文字产生纵深的空间感,这就是不同字号文字的组合与搭配带来的富有变化的视觉感受。

这是装饰校园网站的很有用的方法,比较浅淡的大字体的文字作为背景,和小字体的内文交相辉映,在内容和形式上都比较容易协调。也起到打破死板的方块格局,使画面具有空间感的作用。

1.3 文字色彩的组合与搭配文字的色彩搭配与其他艺术设计中的色彩搭配原则基本是相通的,在校园网站中,一般比较常用的就是协调色的搭配和对比色的搭配。

在润妍洗发水宣传网站中(图3),黑色背景上的白色文字与白色背景上的灰色、黑色文字形成强烈的对比与反差,画面中的S形曲线,将画面一分为二成为写实、写意2部分,黑色部分色彩分明,白色和灰色色彩柔和,使用的是协调色的搭配。

在校园网站中,协调色是比较常用的,比较容易被人接受,当然同时也会显得比较平淡,所以在大片的协调色中加入少量的对比色是完美的结合。

2 文字群体的编排

文字群体在整个网站中起到传递信息的关键作用。

2.1 文字群体的类型网站的文字群体大致分为3类:1)一个段落;2)一个篇幅;3)一个区域。也就是指多行文字。这些文字一般都用宋体,字号也比较小,使用与背景色对比比较强烈的色彩,而且为了方便浏览着打印,一般不能用白色。

区域中的文字都是某个栏目的标题或这个栏目中新发表的文章,可以链接到下一个内容页面;段落群体文字是介绍性的简短文字,可以在画面中错落有致地排列;篇幅群体文字,一般是网站的最低层次页面,也就是没有下一层链接。这种文字以内容为主,不注重形式。但行距应大一些,使整体有明显的行间隔,这样比较有利于阅读。

这3种文字群体的类型在每个校园网站中都会同时出现,因此它们之间是有密切联系的,需要做到整体的一致,也要突出它们的不同特点。

2.2 文字群体的对齐方式网页中文字群体的对齐方式一般分为4类:左对齐,两端对齐,居中对齐,右对齐。在校园网站中,左对齐和两端对齐比较常用,因为这2种对齐方式与报纸杂志中文字的对齐方式一致,比较符合人们的阅读习惯。也正因为此,这2种对齐方式也是最传统的,不太能体现特色和个性。相反,居中对齐和右对齐不太常用。正因为用得比较少,也就显得比较有特色和新意,但最好在字数比较少的文字群体中使用。

在柯维计算机有限公司网站中(图4),文字群体都采用左对齐的方法,页面显得自然、简洁,给人以不讲究形式而注重内容的感觉。网页中黑色的主调和其本身是计算机有限公司,使网站具有现代、简约的风格。在校园网站中,大篇幅的文字比较适合用这种方法。

在清豪仙野别墅的网站中(图5),文字群体都采用两端对齐的对齐方法。这种对齐方式的文字群体看起来有整体感,4条边都像用刀切过一样,给人以严谨、精确的感觉。在这个网站中,由于整体页面图片比较多,排列位置不拘一格,采用两端对齐方式的群体文字就避免了画面凌乱,平衡了画面布局和构图。在校园网站中,区域文字和以图片作为背景的页面比较适合使用两端对齐的方法。

桂芳园蜜月岛网站(图6)中的文字都是居中排布,在网页的正文中一般不采取这种对齐方式,而在一些表达理念和抒发感情的小段落文字中运用这种对齐方式。运用这种对齐方式时,为了不妨碍阅读,往往要用比较大的行距。这种对齐方式在校园网站中并不常用,但在宣传学校教育理念或学校风采的页面上可以使用居中对齐的方法,字句间铿锵有力,值得信赖。

2.3 文字群体在界面中的排布文字群体的排布通常分为3种类型:横排、竖排和斜排。由于FrontPage、Dreamweaver等早期常用的网页编辑软件不支持竖排和斜排文字的格式,所以绝大多数文字群体都是横排。但随着Flash网站的兴起,由于Flash中文字的排布比较自由,网站中竖排和斜排的文字群体也就多起来。但在校园网站中,还是横排占主流地位,这也是前面只介绍横排文字的对齐方式的原因;竖排文字适合古典韵味的网站,在校园网站中一般不用;有时为了使画面活泼跳动,打破矩形的构图,校园网站也可采用斜排的文字。

在森马服饰有限公司网站中(图7),有一部分斜排的文字。在以横排为主体的网页中,一部分斜排的文字确实会让人耳目一新。一般适合时尚青春、活泼童真的网站风格,所以在校园网站供学生浏览的网页可以大胆尝试使用体现动感、跳跃的斜排文字。

3 结论

网站的设计制作是一项既包含技术性,又包含艺术性的工作。特别是校园网站的建设既要有完善的功能、健康的内容,又要有陶冶情操的美丽页面。因此,在网页的艺术设计中,有选择地借鉴优秀的商业和个人网站是很有必要的。借鉴并不是照搬,而是要学到先进的设计理念,选择适合的融入到校园网站的设计中。

参考文献

[1]顾群业.网页艺术设计[M].济南,山东美术出版社,2002

[2]张秦.外国网页设计前线[M].长沙:湖南美术出版社,2003

[3]王令中.视觉艺术心理:美术形式的视觉效应与心理分析[M].北京:人民美术出版社,2005