字形合一，網(wǎng)頁設(shè)計(jì)中的圖文配

前言

　　有人說，中文網(wǎng)頁設(shè)計(jì)其實(shí)沒有字體設(shè)計(jì)這一環(huán)節(jié)，因?yàn)樵诰W(wǎng)頁中能用到的中文字體非常有限，能用的也只有黑體、宋體、微軟雅黑等，這給中文網(wǎng)頁的美感帶來了折損。相比英文對字體的斟酌，網(wǎng)頁上的中文字體顯得太隨意。

　　當(dāng)然，這種說法有一定的正確性，但我們應(yīng)該換個(gè)角度看。中文的網(wǎng)頁中的字體的確是局限在這幾款字體中，但不代表中文網(wǎng)頁就沒有字體設(shè)計(jì)這一環(huán)節(jié)。

　　認(rèn)識網(wǎng)頁設(shè)計(jì)中的“字”

首先，我們簡單將網(wǎng)頁里的文字分為可替換和不可替換兩個(gè)部分。 　　可替換的文字也就是能通過后臺管理進(jìn)行編輯的文字，例如博客文章、產(chǎn)品說明等。不可替換的文字是在網(wǎng)頁制作過程中所定下的，后臺管理并不提供文字的編輯條件，通過網(wǎng)頁代碼才能修改，例如導(dǎo)航、Banner等。不可替換的文字并非完全不能修改，只是修改一次會(huì)耗費(fèi)一定的成本，因此修改的間隔時(shí)長，比如導(dǎo)航的修改需要經(jīng)過代碼，而Banner里的文字的修改也需要重新設(shè)計(jì)Banner圖片。 　　可替換的文字只能使用網(wǎng)頁所允許給定的字體，因此中文字體的選擇面較窄。但不可替換的文字則可以通過圖片等方式展示，將其制作成透明背景的圖片，這時(shí)，字體的使用和排版都是靈活的，設(shè)計(jì)師就會(huì)有足夠的創(chuàng)作自由度。 　　下面這個(gè)設(shè)計(jì)中所使用的字體就經(jīng)過了一定的設(shè)計(jì)，字體更換并不十分容易

這里所謂的與圖片的搭配，也是指的這類可以經(jīng)過設(shè)計(jì)的文字。 　　字形的觀察 　　字體首先是一種圖形，然后再是可承載信息的文字，因此，當(dāng)你挑選一款字體來搭配圖片的時(shí)候，你需要集中去觀察文字的形態(tài)特征是否和圖片協(xié)調(diào)。 　　在挑選字體之前，首先觀察圖片里的形態(tài)特征。如果配圖是以插畫的方式呈現(xiàn)，那么插畫里的風(fēng)格細(xì)節(jié)，以及此類風(fēng)格所表達(dá)出的年代感和空間氛圍，都提供給你挑選與其所搭配字體的依據(jù)。比如英文中的無襯線體通常較為現(xiàn)代，而襯線體較為古典。 　　下面的頁面中的配圖經(jīng)過曲線造型，因此，與此搭配的文字采用了Adelle無襯線體，可以看出字體中的圓弧處理和配圖中曲線的流轉(zhuǎn)造型相呼應(yīng)。

如下設(shè)計(jì)里的配圖都是零散的矩形，因此與此相應(yīng)采用的字體為graphik，這個(gè)字體的特點(diǎn)也是表現(xiàn)出非常清晰的幾何邊緣。

　以上的字形所帶來的形態(tài)特征與配圖相呼應(yīng)即是一個(gè)能讓圖文實(shí)現(xiàn)完美搭配的方式之一，此外，我們知道一些特殊的風(fēng)格化字體也能表達(dá)出特別的氛圍。 　　例如下圖中的機(jī)器看上去非常有80年代的機(jī)械感，而這種造型也營造一種技術(shù)世界里的懷舊感，因此像素文字最適合與此相搭配。

　從這幾款英文字體的實(shí)例圖文配中，我們需要配以對“形”的觀察解構(gòu)能力。也同時(shí)需要對字體所承載的風(fēng)格特征作出一定的歸類。非但英文需要精挑細(xì)選，中文也需要認(rèn)真的斟酌，而不能以期待偶遇一款好看的字體，以好看為目的進(jìn)行設(shè)計(jì)，最終結(jié)果都是失敗之作。 　　字體還可以經(jīng)過一定的設(shè)計(jì)，在原有的字體基礎(chǔ)上進(jìn)行一定的“變形”，這當(dāng)然就更不能頻繁更換。根據(jù)主題而進(jìn)行一定的“微調(diào)”，讓氛圍表達(dá)得更加豐滿立體。 　　如將圓圓的字母中空的部分填實(shí)增加了可愛感，與配圖的角色形象也非常搭配。

轉(zhuǎn)載自：絲路教程網(wǎng)