兼顧視覺和速度 網頁字體設計奇幻之旅

　　(Shavaughn Haack著 Timmliu & Charrywang譯 Sevenshao校正 查看原文 轉載請注明出處)

　　第一印象通常就是一種持續印象。不管你是否意識到，你的版式能夠幫助用戶在他們甚至還沒有開始讀一個字或者點擊一個按鈕之前建立一個體驗。版式不僅僅是講述一個故事，它告訴用戶是這個網站的幕後以及這個背後的人是做什麼的。對於字體的處理創造了一種氛圍，同時也會像聲音的音調一樣引起回想。

　　你需要問一問你自己，你想要表達什麼以及你想要怎麼去表達它?想一想用戶：當頁面加載的時候你想讓他們有什麼樣的感受和體驗?版式建立一個交流的模式，同時，也表達了一個網站的個性。字體的選擇將會決定人們對你的網站的反饋。

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

　　精致的字體使用實例

　　Matt Luckhurst

　　這個網頁色彩斑斓也很有趣。首先映入眼簾的是活潑的襯線字母，接下來，　看起來很隨意分散的字母拼寫出Matt的名字。懸停效果顯示每個項目的示例圖片，這種做法非常有效，幾乎是跳出字母的限制。這個網站顯示了字體可以作為平面元素合並在設計中。混合在一起的五彩有襯線字母打破了經典，可能我們能夠從襯線字體中更清醒的找到創意。

　　Playful

　　Wow,這個網站確實很幽默!這個網站的調調不是僅僅根據字體的特征而設計的，而是通過它們的排版方式。它打破了我們的常規交流的順序。通常你會在印刷海報中看到軸對稱的排版，那通常給人印象深刻。在這個網站上，字體的選擇並不是非常的有個性的裝飾性或者是很好玩的裝飾性字體，它就是用的非常簡單的無襯線字體。非常棒的背景圖案觸覺體驗，它引導閱讀的方向，以及用戶閱讀網站的文字時頭部從一邊到另一邊的運動。

　　Atelier

　　這個網站的所有地方都值得關注。整個頁面由不同的元素組合在一起有一種動感。網站的logo是用的一種寬的但是很優雅的字體，建立了一種設計基調。運動的感覺是由一條傾斜的線來建立的，這根傾斜的直線跟logo中的首字母“A”的傾斜保持一致，創建了這個網站的節奏。滑動的預覽圖深深的抓住你的眼球，圖片很大讓你感覺到無拘無束。然而，這個網站的背景圖片居然有：2560*5350像素，2.4MB，哎喲!

　　Cirp

　　這個為葡萄園設計的網站非常的獨特和創新，設計的就像一個老式的海報。這個美麗的網站設計成功的找到了一種葡萄酒的感覺。我喜歡”Russian River”後面的陰影會跟隨著你的鼠標的移動而運動從而在一個另外的靜態頁面創造出動感。這個地方最主要的缺點就是，從某中意義上說，文字是作為圖像而嵌入到網站上的，可能會讓文字無法復制和粘貼。還有，當然類似的設計被創造出來需要不少於3.4 MB和43次HTTP請求。

　　max Di Capua

　　這裡的布局和排版混合在一起是通過一套模板的系統建立的，通常是幾個部分重疊在一起。這種布局的方法很清新因為它不死板，並且非常容易改變。排版也是同樣的感覺，因為他們都有很大的間距，不管是大量的文字還是稠密的文字。標題和說明性文字，以一種很容易閱讀的無襯線字體出現在作品的旁邊。

　　Rijksmuseum

　　一種很常見的字體的巨大的字母在整個屏幕范圍之內，還延伸到整個頁面。使得“Rijksmuseum”看起來比現實中的大很多。主頁就通過循環漂亮的圖片來展示博物館的內容。主導航也很有意思：當你點擊的時候，它會下滑然後讓你選擇子目錄。整個網站的體積只有955KB以及31次HTTP請求 ——優化做的很棒。

　　I shot Him

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

　　Banger’s

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

　　Caava Design

　　Caava Design使用無襯線字體使這個網站有著整潔干淨的美感。“Good design is Good business(好的設計帶來好的商業價值)”使用很大的字號，非常明顯和容易閱讀，下面是斜體的介紹。整個網站的字體都是有目的的使用，而且不需要很吵鬧，同時網站的內容又不至於比整個的文件遜色。然而，那些很小的文字可能太小而不太適合閱讀。而且排版的網格間距是很凌亂的。字號的強烈對比同時也會讓用戶在閱讀整個網站的時候失去信心。再次，整個視覺與5.7MB,90次HTTP的請求不太相符。

　　The Black Sparrow

　　這個網站看起來顯得有點復古，大量的字體都使這個網站顯得折中主義，有一種很淳樸的感覺。這個小酒吧休閒室的主題是基於Chaeles Bukowski的小說，結合一些文學的元素和古老的打字機字體的標志。我喜歡它的導航條，當你的鼠標懸停在上面的時候，那些小圖標轉動的方式。這個網站真有一種20世紀三十年代的感覺，那些麻雀的插圖讓這種感覺更加強烈。然而，在空間允許的情況下，字號有一點偏小而不太容易閱讀。

　　Nocturnal

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

　　Marie Guillaumet

　　手寫的字體讓這個個人網站看起來非常的漂亮和有個性。同時也給人一種設計師的整個身體都投入在這個作品的過程中。一種強烈的個性化和獨特性的感覺伴隨著設計師，轉過來就是她的作品。手寫的字體同時也跟手繪的圖標，增加的字母很搭，幾乎就感覺是我們在盯著她的視覺日記，了解設計師個人的一部分，這些就會慢慢地帶來潛在的客戶。