校園網(wǎng)站中的文字設(shè)計

牛婷婷

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

關(guān)鍵詞 校園網(wǎng)站;網(wǎng)站設(shè)計;文字編排

中圖分類號:TP393.18 文獻(xiàn)標(biāo)識碼: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

校園網(wǎng)站是教師、學(xué)生、學(xué)校之間相互交流的重要平臺,也是學(xué)校宣傳的重要陣地。網(wǎng)站的觀賞性由布局、圖片、動畫、色彩等很多要素控制,而文字往往是被忽略的要素。而在網(wǎng)站的設(shè)計中,文字具有功能性和藝術(shù)性的雙重使命。

外觀設(shè)計上,校園網(wǎng)站的設(shè)計可以借鑒優(yōu)秀的商業(yè)網(wǎng)站和個人網(wǎng)站。筆者挖掘一些經(jīng)典的商業(yè)及個人網(wǎng)站,分析這些網(wǎng)站中文字設(shè)計的可取之處,與大家分享,為校園網(wǎng)站的設(shè)計帶來靈感,從“文字”開始,打造美麗的校園網(wǎng)站。

1 標(biāo)題及裝飾性文字的設(shè)計

與商業(yè)及個人網(wǎng)站相同,校園網(wǎng)站也需要合適的標(biāo)題及裝飾性文字,以增加網(wǎng)頁的視覺表現(xiàn)力。在商業(yè)及個人網(wǎng)站中,標(biāo)題及裝飾性文字的設(shè)計是非常講究的,其中文字設(shè)計的技巧是相通的。

1.1 字體的組合與搭配在同一個網(wǎng)頁中往往使用類似的字體,來使整個網(wǎng)頁的設(shè)計在變化中又協(xié)調(diào)統(tǒng)一。

在流域雜志網(wǎng)站的首頁中(圖1),導(dǎo)航使用方正老宋體,這種字體是宋體的變形,把宋體的筆畫加粗。這種比較古典的字體與網(wǎng)頁的古典風(fēng)格很和諧,老宋體與正文中的宋體是類似字體的搭配。

校園網(wǎng)站一般都不需要太張揚(yáng)個性,而需要給人以信任和親近感。所以校園網(wǎng)站中比較適合用類似字體搭配的方法。例如方正粗倩體和方正粗活意體,方正粗倩體和方正細(xì)倩體,方正稚藝體和華康少女體等,都是比較類似的字體,可以在同一個網(wǎng)頁中搭配使用。

1.2 字號的組合與搭配作為具有裝飾作用的文字來講,字號的不同也就是文字的大小差異會帶來很多意想不到的變化。

根據(jù)人的視覺特征,較大的文字會有擴(kuò)散感而不易于理解整體含義,相反較小的文字,特別是某一單詞或詞組會給人一種整體的感覺。不同字號的文字組合在一起會給畫面帶來空間感,產(chǎn)生近大遠(yuǎn)小的錯覺。

在body design國外個人網(wǎng)站中(圖2),很容易看出來,在背景圖片中的較大的文字BODY-S只起標(biāo)志性的裝飾作用,而左上角較小的文字和網(wǎng)址反而更能引人注意;網(wǎng)頁背景中凌亂放置的大小不一的文字產(chǎn)生縱深的空間感,這就是不同字號文字的組合與搭配帶來的富有變化的視覺感受。

這是裝飾校園網(wǎng)站的很有用的方法,比較淺淡的大字體的文字作為背景,和小字體的內(nèi)文交相輝映,在內(nèi)容和形式上都比較容易協(xié)調(diào)。也起到打破死板的方塊格局,使畫面具有空間感的作用。

1.3 文字色彩的組合與搭配文字的色彩搭配與其他藝術(shù)設(shè)計中的色彩搭配原則基本是相通的,在校園網(wǎng)站中,一般比較常用的就是協(xié)調(diào)色的搭配和對比色的搭配。

在潤妍洗發(fā)水宣傳網(wǎng)站中(圖3),黑色背景上的白色文字與白色背景上的灰色、黑色文字形成強(qiáng)烈的對比與反差,畫面中的S形曲線,將畫面一分為二成為寫實、寫意2部分,黑色部分色彩分明,白色和灰色色彩柔和,使用的是協(xié)調(diào)色的搭配。

在校園網(wǎng)站中,協(xié)調(diào)色是比較常用的,比較容易被人接受,當(dāng)然同時也會顯得比較平淡,所以在大片的協(xié)調(diào)色中加入少量的對比色是完美的結(jié)合。

2 文字群體的編排

文字群體在整個網(wǎng)站中起到傳遞信息的關(guān)鍵作用。

2.1 文字群體的類型網(wǎng)站的文字群體大致分為3類:1)一個段落;2)一個篇幅;3)一個區(qū)域。也就是指多行文字。這些文字一般都用宋體,字號也比較小,使用與背景色對比比較強(qiáng)烈的色彩,而且為了方便瀏覽著打印,一般不能用白色。

區(qū)域中的文字都是某個欄目的標(biāo)題或這個欄目中新發(fā)表的文章,可以鏈接到下一個內(nèi)容頁面;段落群體文字是介紹性的簡短文字,可以在畫面中錯落有致地排列;篇幅群體文字,一般是網(wǎng)站的最低層次頁面,也就是沒有下一層鏈接。這種文字以內(nèi)容為主,不注重形式。但行距應(yīng)大一些,使整體有明顯的行間隔,這樣比較有利于閱讀。

這3種文字群體的類型在每個校園網(wǎng)站中都會同時出現(xiàn),因此它們之間是有密切聯(lián)系的,需要做到整體的一致,也要突出它們的不同特點。

2.2 文字群體的對齊方式網(wǎng)頁中文字群體的對齊方式一般分為4類:左對齊,兩端對齊,居中對齊,右對齊。在校園網(wǎng)站中,左對齊和兩端對齊比較常用,因為這2種對齊方式與報紙雜志中文字的對齊方式一致,比較符合人們的閱讀習(xí)慣。也正因為此,這2種對齊方式也是最傳統(tǒng)的,不太能體現(xiàn)特色和個性。相反,居中對齊和右對齊不太常用。正因為用得比較少,也就顯得比較有特色和新意,但最好在字?jǐn)?shù)比較少的文字群體中使用。

在柯維計算機(jī)有限公司網(wǎng)站中(圖4),文字群體都采用左對齊的方法,頁面顯得自然、簡潔,給人以不講究形式而注重內(nèi)容的感覺。網(wǎng)頁中黑色的主調(diào)和其本身是計算機(jī)有限公司,使網(wǎng)站具有現(xiàn)代、簡約的風(fēng)格。在校園網(wǎng)站中,大篇幅的文字比較適合用這種方法。

在清豪仙野別墅的網(wǎng)站中(圖5),文字群體都采用兩端對齊的對齊方法。這種對齊方式的文字群體看起來有整體感,4條邊都像用刀切過一樣,給人以嚴(yán)謹(jǐn)、精確的感覺。在這個網(wǎng)站中,由于整體頁面圖片比較多,排列位置不拘一格,采用兩端對齊方式的群體文字就避免了畫面凌亂,平衡了畫面布局和構(gòu)圖。在校園網(wǎng)站中,區(qū)域文字和以圖片作為背景的頁面比較適合使用兩端對齊的方法。

桂芳園蜜月島網(wǎng)站(圖6)中的文字都是居中排布,在網(wǎng)頁的正文中一般不采取這種對齊方式,而在一些表達(dá)理念和抒發(fā)感情的小段落文字中運(yùn)用這種對齊方式。運(yùn)用這種對齊方式時,為了不妨礙閱讀,往往要用比較大的行距。這種對齊方式在校園網(wǎng)站中并不常用,但在宣傳學(xué)校教育理念或?qū)W校風(fēng)采的頁面上可以使用居中對齊的方法,字句間鏗鏘有力,值得信賴。

2.3 文字群體在界面中的排布文字群體的排布通常分為3種類型:橫排、豎排和斜排。由于FrontPage、Dreamweaver等早期常用的網(wǎng)頁編輯軟件不支持豎排和斜排文字的格式,所以絕大多數(shù)文字群體都是橫排。但隨著Flash網(wǎng)站的興起,由于Flash中文字的排布比較自由,網(wǎng)站中豎排和斜排的文字群體也就多起來。但在校園網(wǎng)站中,還是橫排占主流地位,這也是前面只介紹橫排文字的對齊方式的原因;豎排文字適合古典韻味的網(wǎng)站,在校園網(wǎng)站中一般不用;有時為了使畫面活潑跳動,打破矩形的構(gòu)圖,校園網(wǎng)站也可采用斜排的文字。

在森馬服飾有限公司網(wǎng)站中(圖7),有一部分斜排的文字。在以橫排為主體的網(wǎng)頁中,一部分斜排的文字確實會讓人耳目一新。一般適合時尚青春、活潑童真的網(wǎng)站風(fēng)格,所以在校園網(wǎng)站供學(xué)生瀏覽的網(wǎng)頁可以大膽嘗試使用體現(xiàn)動感、跳躍的斜排文字。

3 結(jié)論

網(wǎng)站的設(shè)計制作是一項既包含技術(shù)性,又包含藝術(shù)性的工作。特別是校園網(wǎng)站的建設(shè)既要有完善的功能、健康的內(nèi)容,又要有陶冶情操的美麗頁面。因此,在網(wǎng)頁的藝術(shù)設(shè)計中,有選擇地借鑒優(yōu)秀的商業(yè)和個人網(wǎng)站是很有必要的。借鑒并不是照搬,而是要學(xué)到先進(jìn)的設(shè)計理念,選擇適合的融入到校園網(wǎng)站的設(shè)計中。

參考文獻(xiàn)

[1]顧群業(yè).網(wǎng)頁藝術(shù)設(shè)計[M].濟(jì)南,山東美術(shù)出版社,2002

[2]張秦.外國網(wǎng)頁設(shè)計前線[M].長沙:湖南美術(shù)出版社,2003

[3]王令中.視覺藝術(shù)心理:美術(shù)形式的視覺效應(yīng)與心理分析[M].北京:人民美術(shù)出版社,2005