網(wǎng)頁(yè)字體設(shè)計(jì)奇幻之旅

第一印象通常就是一種持續(xù)印象。不管你是否意識(shí)到，你的版式能夠幫助用戶在他們甚至還沒有開始讀一個(gè)字或者點(diǎn)擊一個(gè)按鈕之前建立一個(gè)體驗(yàn)。版式不僅僅是講述一個(gè)故事，它告訴用戶是這個(gè)網(wǎng)站的幕后以及這個(gè)背后的人是做什么的。對(duì)于字體的處理創(chuàng)造了一種氛圍，同時(shí)也會(huì)像聲音的音調(diào)一樣引起回想。

你需要問一問你自己，你想要表達(dá)什么以及你想要怎么去表達(dá)它？想一想用戶：當(dāng)頁(yè)面加載的時(shí)候你想讓他們有什么樣的感受和體驗(yàn)？版式建立一個(gè)交流的模式，同時(shí)，也表達(dá)了一個(gè)網(wǎng)站的個(gè)性。字體的選擇將會(huì)決定人們對(duì)你的網(wǎng)站的反饋。

以下的網(wǎng)站有著非常明顯的個(gè)性，大部分都是通過版式來建立的。誠(chéng)然，有時(shí)候他們并不是很完美（不幸的是，性能常常是個(gè)問題），但是他們通過字體來吸引用戶來產(chǎn)生興趣。好的網(wǎng)頁(yè)版式不僅僅只是一個(gè)美好的視覺處理，同時(shí)也要注意速度。很多設(shè)計(jì)師徹底忽視了性能。請(qǐng)注意：這些網(wǎng)站沒有在老的瀏覽器或者移動(dòng)設(shè)備上做過測(cè)試。當(dāng)然這不是這篇文章的主旨。相反的，我們將會(huì)近距離的觀察有趣的版式處理以及字體的創(chuàng)新使用。

精致的字體使用實(shí)例1-19

（1）Matt Luckhurst

這個(gè)網(wǎng)頁(yè)色彩斑斕也很有趣。首先映入眼簾的是活潑的襯線字母，接下來，　看起來很隨意分散的字母拼寫出Matt的名字。懸停效果顯示每個(gè)項(xiàng)目的示例圖片，這種做法非常有效，幾乎是跳出字母的限制。這個(gè)網(wǎng)站顯示了字體可以作為平面元素合并在設(shè)計(jì)中?；旌显谝黄鸬奈宀视幸r線字母打破了經(jīng)典，可能我們能夠從襯線字體中更清醒的找到創(chuàng)意。

（2）Playful

Wow,這個(gè)網(wǎng)站確實(shí)很幽默！這個(gè)網(wǎng)站的調(diào)調(diào)不是僅僅根據(jù)字體的特征而設(shè)計(jì)的，而是通過它們的排版方式。它打破了我們的常規(guī)交流的順序。通常你會(huì)在印刷海報(bào)中看到軸對(duì)稱的排版，那通常給人印象深刻。在這個(gè)網(wǎng)站上，字體的選擇并不是非常的有個(gè)性的裝飾性或者是很好玩的裝飾性字體，它就是用的非常簡(jiǎn)單的無(wú)襯線字體。非常棒的背景圖案觸覺體驗(yàn)，它引導(dǎo)閱讀的方向，以及用戶閱讀網(wǎng)站的文字時(shí)頭部從一邊到另一邊的運(yùn)動(dòng)。

（3）Atelier

這個(gè)網(wǎng)站的所有地方都值得關(guān)注。整個(gè)頁(yè)面由不同的元素組合在一起有一種動(dòng)感。網(wǎng)站的logo是用的一種寬的但是很優(yōu)雅的字體，建立了一種設(shè)計(jì)基調(diào)。運(yùn)動(dòng)的感覺是由一條傾斜的線來建立的，這根傾斜的直線跟logo中的首字母“A”的傾斜保持一致，創(chuàng)建了這個(gè)網(wǎng)站的節(jié)奏?；瑒?dòng)的預(yù)覽圖深深的抓住你的眼球，圖片很大讓你感覺到無(wú)拘無(wú)束。然而，這個(gè)網(wǎng)站的背景圖片居然有：2560*5350像素，2.4MB，哎喲！

（4）Cirp

這個(gè)為葡萄園設(shè)計(jì)的網(wǎng)站非常的獨(dú)特和創(chuàng)新，設(shè)計(jì)的就像一個(gè)老式的海報(bào)。這個(gè)美麗的網(wǎng)站設(shè)計(jì)成功的找到了一種葡萄酒的感覺。我喜歡”Russian River”后面的陰影會(huì)跟隨著你的鼠標(biāo)的移動(dòng)而運(yùn)動(dòng)從而在一個(gè)另外的靜態(tài)頁(yè)面創(chuàng)造出動(dòng)感。這個(gè)地方最主要的缺點(diǎn)就是，從某中意義上說，文字是作為圖像而嵌入到網(wǎng)站上的，可能會(huì)讓文字無(wú)法復(fù)制和粘貼。還有，當(dāng)然類似的設(shè)計(jì)被創(chuàng)造出來需要不少于3.4 MB和43次HTTP請(qǐng)求。

（5）max Di Capua

這里的布局和排版混合在一起是通過一套模板的系統(tǒng)建立的，通常是幾個(gè)部分重疊在一起。這種布局的方法很清新因?yàn)樗凰腊?，并且非常容易改變。排版也是同樣的感覺，因?yàn)樗麄兌加泻艽蟮拈g距，不管是大量的文字還是稠密的文字。標(biāo)題和說明性文字，以一種很容易閱讀的無(wú)襯線字體出現(xiàn)在作品的旁邊。

（6）Rijksmuseum

一種很常見的字體的巨大的字母在整個(gè)屏幕范圍之內(nèi)，還延伸到整個(gè)頁(yè)面。使得“Rijksmuseum”看起來比現(xiàn)實(shí)中的大很多。主頁(yè)就通過循環(huán)漂亮的圖片來展示博物館的內(nèi)容。主導(dǎo)航也很有意思：當(dāng)你點(diǎn)擊的時(shí)候，它會(huì)下滑然后讓你選擇子目錄。整個(gè)網(wǎng)站的體積只有955KB以及31次HTTP請(qǐng)求——優(yōu)化做的很棒。

（7）I shot Him

這個(gè)設(shè)計(jì)工作室的網(wǎng)站以一張寫著歡迎你的照片來向你問候，這很新鮮。用戶馬上就有了一種置身于這些設(shè)計(jì)師工作室的感覺。有一種陌生感，但是同時(shí)也感受到很真實(shí)可靠。字體是焦點(diǎn)，但是不至于太吵或者太壓抑。我非常喜歡他們這種從完美的電腦中走出來展示他們自己獨(dú)特的一面的方式。盡管這個(gè)網(wǎng)頁(yè)沒有你期待的交互那么好，這個(gè)工作室的個(gè)性就在這張照片上完美的顯示出來了，那就是有深度，有實(shí)質(zhì)。手寫的字體讓這個(gè)網(wǎng)站看起來很有個(gè)性，也讓用戶為這個(gè)工作室的設(shè)計(jì)產(chǎn)生了一個(gè)心理預(yù)期。這個(gè)網(wǎng)站除了歡迎語(yǔ)之外的所有字體處理方式都強(qiáng)化了輕松但有創(chuàng)造力，文字簡(jiǎn)短但是直達(dá)目的。另外一個(gè)很有趣的地方就是導(dǎo)航：它藏在登陸頁(yè)面，但是鼠標(biāo)懸停在一個(gè)圖標(biāo)上的時(shí)候可以看到它們。當(dāng)你滑到底端，導(dǎo)航仍然固定顯示在頂部。

（8）Banger’s

這個(gè)網(wǎng)站有很多的字符。Banger’s是一個(gè)腳踏實(shí)地的專注于啤酒和香腸的小飯館。它的故事看起來就像是畫在一個(gè)灰色的卡片箱子上，他們的食物就是通過這個(gè)箱子來盛裝運(yùn)輸?shù)?。它的?biāo)志看起來就像是手繪的標(biāo)記，很獨(dú)特，似乎不很完美，但是其他的一切都看起來跟它搭配在一起很協(xié)調(diào)。固定的導(dǎo)航欄在你上下滑動(dòng)的時(shí)候使用起來很不錯(cuò)，懸停的效果（標(biāo)題變成紅色）非常的簡(jiǎn)單有效。字體對(duì)整個(gè)視覺識(shí)別起到了很大的貢獻(xiàn)，同時(shí)圖形也很棒，但是性能不是特別好。最大的缺點(diǎn)是主頁(yè)就有7.2MB，254次HTTP請(qǐng)求。老實(shí)說，真有點(diǎn)不能接受。

（9）Caava Design

Caava Design使用無(wú)襯線字體使這個(gè)網(wǎng)站有著整潔干凈的美感?！癎ood design is Good business(好的設(shè)計(jì)帶來好的商業(yè)價(jià)值)”使用很大的字號(hào)，非常明顯和容易閱讀，下面是斜體的介紹。整個(gè)網(wǎng)站的字體都是有目的的使用，而且不需要很吵鬧，同時(shí)網(wǎng)站的內(nèi)容又不至于比整個(gè)的文件遜色。然而，那些很小的文字可能太小而不太適合閱讀。而且排版的網(wǎng)格間距是很凌亂的。字號(hào)的強(qiáng)烈對(duì)比同時(shí)也會(huì)讓用戶在閱讀整個(gè)網(wǎng)站的時(shí)候失去信心。再次，整個(gè)視覺與5.7MB,90次HTTP的請(qǐng)求不太相符。

（10）The Black Sparrow

這個(gè)網(wǎng)站看起來顯得有點(diǎn)復(fù)古，大量的字體都使這個(gè)網(wǎng)站顯得折中主義，有一種很淳樸的感覺。這個(gè)小酒吧休閑室的主題是基于Chaeles Bukowski的小說，結(jié)合一些文學(xué)的元素和古老的打字機(jī)字體的標(biāo)志。我喜歡它的導(dǎo)航條，當(dāng)你的鼠標(biāo)懸停在上面的時(shí)候，那些小圖標(biāo)轉(zhuǎn)動(dòng)的方式。這個(gè)網(wǎng)站真有一種20世紀(jì)三十年代的感覺，那些麻雀的插圖讓這種感覺更加強(qiáng)烈。然而，在空間允許的情況下，字號(hào)有一點(diǎn)偏小而不太容易閱讀。

（11）Nocturnal

漂亮而且厚重的襯線字體在這里看起來簡(jiǎn)潔，干凈，比較大而且容易閱讀。網(wǎng)站的設(shè)置非常的寬敞，使得整個(gè)網(wǎng)站有很大的呼吸空間。簡(jiǎn)單，整齊的布局以及對(duì)于字體的處理讓用戶能夠很快對(duì)這個(gè)設(shè)計(jì)師的作品有一個(gè)全面的簡(jiǎn)單印象。這個(gè)網(wǎng)站作為一個(gè)設(shè)計(jì)作品集的展示非常有效率。它沒有做什么特殊的事情，僅僅是專注于藝術(shù)家的作品。有時(shí)候，這些其實(shí)就是最需要展示的。

（12）Marie Guillaumet

手寫的字體讓這個(gè)個(gè)人網(wǎng)站看起來非常的漂亮和有個(gè)性。同時(shí)也給人一種設(shè)計(jì)師的整個(gè)身體都投入在這個(gè)作品的過程中。一種強(qiáng)烈的個(gè)性化和獨(dú)特性的感覺伴隨著設(shè)計(jì)師，轉(zhuǎn)過來就是她的作品。手寫的字體同時(shí)也跟手繪的圖標(biāo)，增加的字母很搭，幾乎就感覺是我們?cè)诙⒅囊曈X日記，了解設(shè)計(jì)師個(gè)人的一部分，這些就會(huì)慢慢地帶來潛在的客戶。

（13）Vintage Hope

這個(gè)網(wǎng)站的標(biāo)題看起來就像是用一只很粗的畫筆畫的很粗的痕跡。字體驚人的粗同時(shí)很具有表現(xiàn)力。背景是一種很漂亮的照片。它給用戶一種非常開放和自由的感覺，同時(shí)描繪出了這個(gè)組織的特征。Vintage Hope 通過外借古老的瓷器為馬拉維的不幸的人們籌款，整個(gè)視覺看起來是激動(dòng)的，高興的和積極的。同時(shí)網(wǎng)站只有1MB和40次HTTP請(qǐng)求，這是令人傾佩的。

（14）Browser Awareness Day

這個(gè)網(wǎng)站加載下來，用戶能夠被指引使用，使得網(wǎng)站有趣，快，安全。在每一邊每一個(gè)關(guān)鍵字都使用裝飾性的字體。每一個(gè)字母很明顯的創(chuàng)意，這就抓住了用戶的注意力，引誘用戶往下滑動(dòng)看到更多內(nèi)容。右邊的小標(biāo)簽使用了一種很有喜劇色彩的書寫字體，添加在這個(gè)很滑稽的網(wǎng)站上。讓你滑到底端的時(shí)候，同樣的具有喜劇色彩的書寫字體也伴隨著另一種很有趣的字體被用在網(wǎng)站上。

（15）Rob Edwards

這個(gè)網(wǎng)站的字體很漂亮。這也是設(shè)計(jì)的一部分，同時(shí)也給訪問者建立了一個(gè)對(duì)這個(gè)設(shè)計(jì)師的作品的心理預(yù)期?！癏i there”非常的巨大，抓住了用戶的注意力。其他的裝飾性的馬戲團(tuán)式字體非常吸引人眼球也很有趣。你不會(huì)每天看到這些，它作為一種介紹是非常的有效。剩下的整個(gè)網(wǎng)站的感覺有一點(diǎn)點(diǎn)位置不合適，尤其是在空間和對(duì)比度上。

（16）82nd&Fifth

這個(gè)網(wǎng)站全部是關(guān)于視覺的，它的排版也證明了這一點(diǎn)。使用的無(wú)襯線字體非常的美觀簡(jiǎn)潔和輕量，為標(biāo)題設(shè)置的背景的顏色塊顯得非常的精致。對(duì)于這個(gè)網(wǎng)站來說，字體不是關(guān)注的焦點(diǎn)，而是強(qiáng)大的照片支持。整個(gè)網(wǎng)站顯得非常的有活力，當(dāng)你往下滑動(dòng)的時(shí)候，一些小的塊塊會(huì)加載下來。這個(gè)網(wǎng)站也有一個(gè)明顯可看見的導(dǎo)航欄，當(dāng)鼠標(biāo)懸停在上面的時(shí)候，一個(gè)黑色的導(dǎo)航條就先露出來整個(gè)菜單。整個(gè)網(wǎng)站跟它展示的藝術(shù)作品的每一部分都很貼切。缺點(diǎn)是有6.4MB和120次HTTP請(qǐng)求。

（17）ECC Lighting&Furniture

不論你是否喜歡，Helvetica都占據(jù)了這個(gè)網(wǎng)站的主要舞臺(tái)。網(wǎng)站的分類按鈕非常寬大，牢牢的抓住了用戶的注意力。這個(gè)網(wǎng)站的平面設(shè)計(jì)非常的經(jīng)典，干凈，極簡(jiǎn)主義。網(wǎng)站右上方豎直的導(dǎo)航條的文字創(chuàng)造了一種很強(qiáng)的趣味效果，但是仍然能夠讓用戶將注意力放在主要分類導(dǎo)航上。只有當(dāng)鼠標(biāo)懸停在圖片區(qū)域的時(shí)候才顯示這一點(diǎn)做得非常有趣。

（18）Marianne Brandt

當(dāng)你聽到這個(gè)名字“Marianne brandt”的時(shí)候你期待什么？你怎樣將它轉(zhuǎn)換為一個(gè)網(wǎng)站？通常情況下，一種包豪斯的水準(zhǔn)專注于功能就是關(guān)鍵。這個(gè)網(wǎng)站真的很有包豪斯的風(fēng)味，扁平的色彩以及Futura字體。整個(gè)的審美就是極簡(jiǎn)主義，干凈但是絕對(duì)不呆板。

捕獲我的注意力的是“thanks/Danke（謝謝的英文和德文）”這塊。你設(shè)定了哪種語(yǔ)言決定了哪種“感謝”顯示為紅色。這是一個(gè)很棒的創(chuàng)意對(duì)于那些支持多種語(yǔ)言的網(wǎng)站。不同的選擇提醒我不同區(qū)域的不同色塊，這是以一種很好的方式去將網(wǎng)站的信息進(jìn)行分類。顏色，幾何造型，以及整個(gè)字體都全部是包豪斯主義。

（19）Nate Navasca

這個(gè)網(wǎng)站對(duì)于字體和樣式的選擇上顯得有點(diǎn)傳統(tǒng)。用一個(gè)粗的無(wú)襯線體作為標(biāo)題，一種襯線字體作為內(nèi)容文字。如果它沒有壞，為啥要修呢，你說對(duì)吧? 設(shè)計(jì)師專注于網(wǎng)站的功能和簡(jiǎn)單，而且它的確非常的好用。

結(jié)論

這不僅僅關(guān)乎你說什么，而是你怎么說，是吧？根據(jù)你的目的，我們可以嘗試更多，在排版上也更有創(chuàng)意。我們可以大膽的使用大字號(hào)，粗體，或是新奇獨(dú)特的手寫體。我們應(yīng)該始終記得字體要有可讀性，因?yàn)槿绻麤]有人能閱讀的話，這樣的字體就沒什么可以炫耀的。如果設(shè)定了韻律和風(fēng)格，字體可以做出如此多的設(shè)計(jì)。

    漂亮的字體和大片區(qū)域的背景圖片很容易讓人分心。但我們也不能忽略性能。自定義的網(wǎng)頁(yè)字體會(huì)降低加載速度，所以讓我們找方法來解決這件事。

    最后，如果你探索到了更有趣的對(duì)字體極為講究的網(wǎng)站，一定要聯(lián)系Typewolf和Font in Use。