發(fā)布日期:2014-02-13
如果網(wǎng)頁(yè)設(shè)計(jì)依賴(lài)于字體的設(shè)計(jì),那我們還需要學(xué)習(xí)其他的東西么?——你所需要的只是理解字體設(shè)計(jì)的各個(gè)元素。

字體設(shè)計(jì)(維基百科注解為字體排印學(xué))當(dāng)然不僅僅只是選擇字體。隨著@font-face技術(shù)和一些如Typekit,Webtype, Fontdeck, 以及 Google Web fonts等服務(wù)的改進(jìn),你的字體設(shè)計(jì)功力也不會(huì)提高。你可以很輕易的在你余生中只用一款字體創(chuàng)造出漂亮的設(shè)計(jì)——在過(guò)去設(shè)計(jì)師們也不得不這么做,那時(shí)還沒(méi)有Photoshop作幫助,越多的字體只會(huì)讓事情更糟糕,因?yàn)閯?chuàng)造力和審美感是不能受到過(guò)多選擇的干擾的。
更 多的玩具代表著更多樂(lè)趣,對(duì)吧?如果你選擇了這條路,但就要準(zhǔn)備為此而付出全部。我很樂(lè)意看到不同的字體被使用,也佩服那些能成功在自己網(wǎng)站上使用新字體 的人。不過(guò),我也遇到很多不大好的方案(比如Myspace)。Typekit可以幫助你提前預(yù)覽改變后的字體效果,這樣對(duì)網(wǎng)頁(yè)設(shè)計(jì)的幫助是巨大的。
下面不是我刻薄,對(duì)于大多數(shù)網(wǎng)頁(yè)來(lái)說(shuō)你應(yīng)該知道的——試試翻看所有你喜歡的網(wǎng)頁(yè)設(shè)計(jì),去掉圖片,然后想象只有文本和留白的網(wǎng)頁(yè)會(huì)是怎樣的?當(dāng)一個(gè)設(shè)計(jì)師說(shuō)“文字就是一種交互設(shè)計(jì)”,這句話不是虛構(gòu),下面來(lái)看看這個(gè)叫iA site的網(wǎng)站:

信息架構(gòu)師都基于優(yōu)秀的排版
A Working Library是我最喜歡的設(shè)計(jì)之一,這個(gè)網(wǎng)頁(yè)以純文本的方式來(lái)展示界面,留白如齊白石水墨,恰到好處,文字排版也十分得體。

A Working Libraryby Mandy Brown.
有些人或許會(huì)認(rèn)為這樣的設(shè)計(jì)呆板而乏味,他們更傾向于使用流行的風(fēng)格。到了最后你設(shè)計(jì)的注意力會(huì)被這些多余的視覺(jué)效果分散掉,所以?shī)呉廊灰呀?jīng)歷放在最初那95%上面,就像你現(xiàn)在閱讀的文章便做得很好,不需要依靠圖片仍然能展示漂亮的視覺(jué)設(shè)計(jì)效果。
沒(méi)你想象中難
你完全可以做出一個(gè)不依靠任何圖片搭配的一流網(wǎng)頁(yè)。雖然聽(tīng)起來(lái)有點(diǎn)天馬行空,但這確實(shí)是可行的。我也并不是說(shuō)本應(yīng)該如此,但如果我們能巧妙的使用字體設(shè)計(jì)和留白便能做到美觀得體,那將來(lái)加入圖片、視頻這些元素時(shí),不是更錦上添花了嗎?
在使用圖像時(shí)我不是想說(shuō)那些真正要表達(dá)什么的圖像,就如圖標(biāo),但圖像在這里就是為了引人注目。有時(shí)一張圖勝過(guò)千言萬(wàn)語(yǔ),所以最好使用圖片(但你仍然需要考慮使用留白)。這里有兩個(gè)以上的美好網(wǎng)站的例子,它們都將重點(diǎn)放在文字設(shè)計(jì)上以實(shí)現(xiàn)整個(gè)設(shè)計(jì)。第一個(gè)網(wǎng)站是Blake Allen Design,第二個(gè)是The Harriet Series(這兩個(gè)網(wǎng)站都是使用圖像來(lái)表達(dá)他們的文字設(shè)計(jì),你要認(rèn)識(shí)到這一點(diǎn))
當(dāng)使用圖片時(shí),我并不想定一個(gè)什么樣的標(biāo)準(zhǔn)比如它要代表著類(lèi)似icon性質(zhì)的效果,但圖片就是用來(lái)展示的,有時(shí)一張圖勝過(guò)千言萬(wàn)語(yǔ)時(shí)便可考慮使用了(當(dāng)然還是要注意留白)。
以下是兩個(gè)優(yōu)秀網(wǎng)站設(shè)計(jì)的實(shí)例,它們都把重點(diǎn)放在文字設(shè)計(jì)上來(lái)實(shí)現(xiàn)整個(gè)設(shè)計(jì)效果。第一個(gè)網(wǎng)站是Blake Allen Design,第二個(gè)是The Harriet Series(這兩個(gè)網(wǎng)站都是使用圖片來(lái)實(shí)現(xiàn)他們的文字設(shè)計(jì),你懂我意思就好):

Blake Allen Design 使用圖片, 但有著美觀的字體。

The Harriet Seriesby OkayType.
上面的兩個(gè)設(shè)計(jì)之所以讓我感興趣,是因?yàn)槲淖衷O(shè)計(jì)并不單是指引你獨(dú)自完成這個(gè)過(guò)程,它是在用自己的風(fēng)格做著這件事。你能感覺(jué)到文字設(shè)計(jì)就是設(shè)計(jì)者個(gè)人情緒的 表達(dá)。Blake Allen使用Helvetica體來(lái)使他的網(wǎng)頁(yè)滿是瑞士風(fēng)格式的清新、有序的框架。而在另一方面,Harriet Series的網(wǎng)站則顯得有一點(diǎn)頑皮,也更具探索性。這就是文字排版所造就的組織合理的混亂之美。
除了上面的特例,99%的設(shè)計(jì)師,最好還是乖乖學(xué)會(huì)文字設(shè)計(jì),如果你不能領(lǐng)會(huì),那日后的設(shè)計(jì)便沒(méi)有了根基。不用去擔(dān)心缺少流行元素會(huì)怎么影響你的效果,你應(yīng)該擔(dān)心的是如何組織好網(wǎng)頁(yè)的框架,一旦你克服了這關(guān),后面添磚加瓦的事情就簡(jiǎn)單了。
Clear是 一款節(jié)約風(fēng)格的iOS日常管理應(yīng)用。圍繞它的觸控是使用手勢(shì)來(lái)控制界面,你會(huì)發(fā)現(xiàn)單是文字設(shè)計(jì)就足以解決一切并讓你享受著這款應(yīng)用。當(dāng)然這是使用了 Helvetica字體的效果,如果是使用了字間距不合理的Comic Sans字體呢?杰出的文字設(shè)計(jì)并不一定以很美好的方式引人注目,而這并不意味著 它也要以這樣負(fù)面的方式突出它的劣勢(shì)。

Art of the Menu是菜單設(shè)計(jì)網(wǎng)站的典范

The Art of the Menu網(wǎng)站在強(qiáng)調(diào)字體設(shè)計(jì)在菜單設(shè)計(jì)領(lǐng)域重要性做出了很大貢獻(xiàn)。當(dāng)一些餐館那么樂(lè)衷于在菜單上加入各種圖片和插頁(yè)來(lái)吸引顧客眼球時(shí),卻并沒(méi)有考慮到合理的文字設(shè)計(jì)結(jié)構(gòu)讓顧客更舒適的瀏覽菜單,這是一大敗筆。
作為一個(gè)設(shè)計(jì)師,你實(shí)在沒(méi)有理由去為自己辯解不需要一個(gè)看得過(guò)去的設(shè)計(jì)。當(dāng)你連最基本的框架都沒(méi)法搭建好,后面在加什么其他的設(shè)計(jì)元素只會(huì)讓你的設(shè)計(jì)更糟 糕。太多的設(shè)計(jì)師都在嘗試用沒(méi)有用的花俏物來(lái)掩飾他們的設(shè)計(jì)缺陷,但實(shí)際和火上澆油沒(méi)兩樣。如果一個(gè)設(shè)計(jì)你看著是不順眼的,那就代表用戶體驗(yàn)不好,無(wú)論再 加入多少圖片、聲效、顏色都是徒勞。
上一篇:經(jīng)過(guò)數(shù)年發(fā)展 2014年有5大云計(jì)算趨勢(shì)
下一篇:沒(méi)有了
創(chuàng)建網(wǎng)站 如此簡(jiǎn)單
專(zhuān)屬為客戶提供最有價(jià)值的互聯(lián)網(wǎng)設(shè)計(jì)方案
策略+創(chuàng)意+設(shè)計(jì)+服務(wù)!
網(wǎng)站策劃 >
網(wǎng)站調(diào)研和競(jìng)爭(zhēng)分析
網(wǎng)站的策劃和定位
網(wǎng)頁(yè)設(shè)計(jì) >
網(wǎng)站頁(yè)面?zhèn)€性化設(shè)計(jì)
W3C標(biāo)準(zhǔn)化前端交互技術(shù)開(kāi)發(fā)
視覺(jué)還原 >
定制化HTML頁(yè)面嵌套
內(nèi)容管理系統(tǒng)定制開(kāi)發(fā)
優(yōu)化推廣 >
SEO搜索引擎優(yōu)化
SEM搜索引擎營(yíng)銷(xiāo)
媒體營(yíng)銷(xiāo) >
MMM移動(dòng)媒體營(yíng)銷(xiāo)
社會(huì)化媒體活動(dòng)策劃
我們的實(shí)力
營(yíng)銷(xiāo)中心
服務(wù)內(nèi)容
案例展示