校園網站中的文字設計

牛婷婷

摘要 校園網站是教師與學生彼此之間交流的重要平臺,在信息化校園建設中起著舉足輕重的作用。但是目前在校園網站的設計過程中極易被忽視的一個問題是網站文字編排設計的功能性和藝術性。借鑒一些經典的商業及個人網站,提出校園網站文字編排設計的策略和原則。

關鍵詞 校園網站;網站設計;文字編排

中圖分類號: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