字體排版是網(wǎng)頁設(shè)計的基礎(chǔ)
字體排版是網(wǎng)頁設(shè)計的基礎(chǔ),如果網(wǎng)頁設(shè)計依賴于字體的設(shè)計,那我們還需要學(xué)習(xí)其他的東西么?
——你所需要的只是理解字體設(shè)計的各個元素。
字體設(shè)計(維基百科注解為字體排印學(xué))當(dāng)然不僅僅只是選擇字體。隨著@font-face技術(shù)和一些如Typekit,Webtype, Fontdeck, 以及 Google Web fonts等服務(wù)的改進(jìn),你的字體設(shè)計功力也不會提高。你可以很輕易的在你余生中只用一款字體創(chuàng)造出漂亮的設(shè)計——在過去設(shè)計師們也不得不這么做,那時還沒有Photoshop作幫助,越多的字體只會讓事情更糟糕,因為創(chuàng)造力和審美感是不能受到過多選擇的干擾的。
更多的玩具代表著更多樂趣,對吧?如果你選擇了這條路,但就要準(zhǔn)備為此而付出全部。我很樂意看到不同的字體被使用,也佩服那些能成功在自己網(wǎng)站上使用新字體的人們。不過,我也遇到很多不大好的方案(比如Myspace)。Typekit可以幫助你提前預(yù)覽改變后的字體效果,這樣對網(wǎng)頁設(shè)計的幫助是巨大的。
下面不是我刻薄,對于大多數(shù)網(wǎng)頁來說你應(yīng)該知道的——試試翻看所有你喜歡的網(wǎng)頁設(shè)計,去掉圖片,然后想象只有文本和留白的網(wǎng)頁會是怎樣的?當(dāng)一個設(shè)計師說“文字就是一種交互設(shè)計”,這句話不是虛構(gòu),下面來看看這個叫iA site的網(wǎng)站:
信息架構(gòu)師都基于優(yōu)秀的排版
A Working Library是我最喜歡的設(shè)計之一,這個網(wǎng)頁以純文本的方式來展示界面,留白如齊白石水墨,恰到好處,文字排版也十分得體。
A Working Library by Mandy Brown.
有些人或許會認(rèn)為這樣的設(shè)計呆板且乏味,他們更傾向于使用流行的風(fēng)格。但到了最后,你設(shè)計的注意力會被這些多余的視覺效果分散掉,所以妳依然要把精力集中在最初那95%上面,就像你現(xiàn)在閱讀的文章便做得很好,不需要依靠圖片仍然能展示漂亮的視覺設(shè)計效果。
沒你想象中的難
你完全可以做出一個不依靠任何圖片搭配的一流網(wǎng)頁。雖然聽起來有點天馬行空,但這確實是可行的。我也并不是說本應(yīng)該如此,但如果我們能巧妙的使用字體設(shè)計和留白便能做到美觀得體,那將來此基礎(chǔ)上加入圖片、視頻這些元素時,不是更錦上添花了嗎?
在使用圖像時我不是想說那些真正要表達(dá)什么的圖像,就如圖標(biāo),但圖片在這里就是為了引人注目。有時一張圖勝過千言萬語,所以最好使用圖片(但你仍然需要考慮使用留白)。這里有兩個以上的美好網(wǎng)站的例子,它們都將重點放在文字設(shè)計上以實現(xiàn)整個設(shè)計。第一個網(wǎng)站是Blake Allen Design ,第二個是The Harriet Series(這兩個網(wǎng)站都是使用圖像來表達(dá)他們的文字設(shè)計,你要認(rèn)識到這一點)
當(dāng)使用圖片時,我并不想定一個什么樣的標(biāo)準(zhǔn)比如它要代表著類似icon性質(zhì)的效果,但圖片就是用來展示的,有時一張圖勝過千言萬語時便可考慮使用了(當(dāng)然還是要注意留白)。
以下是兩個優(yōu)秀網(wǎng)站設(shè)計的實例,它們都把重點放在文字設(shè)計上來實現(xiàn)整個設(shè)計效果。第一個網(wǎng)站是Blake Allen Design ,第二個是The Harriet Series(這兩個網(wǎng)站都是使用圖片來實現(xiàn)他們的文字設(shè)計,但你懂我意思就好):
Blake Allen Design 使用圖片, 但有著美觀的字體。
The Harriet Series by OkayType.
上面的兩個設(shè)計之所以讓我感興趣,是因為文字設(shè)計并不單是指引你獨自完成這個過程,它是在用自己的風(fēng)格做著這件事。你能感覺到文字設(shè)計就是設(shè)計者個人情緒的表達(dá)。Blake Allen使用Helvetica體來使他的網(wǎng)頁滿是瑞士風(fēng)格式的清新、有序的框架。而在另一方面,Harriet Series的網(wǎng)站則顯得有一點頑皮,也更具探索性。這就是文字排版所造就的組織合理的變化美感。
除了上面的特例,其余99%的設(shè)計師,最好還是乖乖學(xué)會文字設(shè)計,如果你不能領(lǐng)會,那日后的設(shè)計便沒有了根基。不用去擔(dān)心缺少流行元素會怎么影響你的效果,你應(yīng)該擔(dān)心的是如何組織好網(wǎng)頁的框架,一旦你克服了這關(guān),后面添磚加瓦的事情就簡單了。
Clear是一款節(jié)約風(fēng)格的iOS日常管理應(yīng)用。圍繞它的觸控是使用手勢來控制界面,你會發(fā)現(xiàn)單是文字設(shè)計就足以解決一切并讓你享受著這款應(yīng)用。當(dāng)然這是使用了Helvetica字體的效果,如果是使用了字間距不合理的Comic Sans字體呢?優(yōu)秀的文字設(shè)計并不一定以很美好的方式引人注目,而這并不意味著它也要以這樣負(fù)面的方式突出它的劣勢。
Art of the Menu 是菜單設(shè)計網(wǎng)站的典范
The Art of the Menu 網(wǎng)站在強(qiáng)調(diào)字體設(shè)計在菜單設(shè)計領(lǐng)域重要性做出了很大貢獻(xiàn)。當(dāng)一些餐館那么樂衷于在菜單上加入各種圖片和插頁來吸引顧客眼球時,卻并沒有考慮到合理的文字設(shè)計結(jié)構(gòu)讓顧客更舒適的瀏覽菜單,這是一大敗筆。
作為一個設(shè)計師,你實在沒有理由去為自己辯解不需要一個看得過去的設(shè)計。當(dāng)你連最基本的框架都沒法搭建好,后面在加什么其他的設(shè)計元素只會讓你的設(shè)計更糟糕。太多的設(shè)計師都在嘗試用沒有用的花俏物來掩飾他們的設(shè)計缺陷,但實際和火上澆油沒兩樣。如果一個設(shè)計你看著是不順眼的,那就代表用戶體驗不好,無論再加入多少圖片、聲效、顏色都是徒勞。
本文地址:http://likemindfilms.com/tutorial/di1169.html