@Wenzel_Hu 在這篇文章中，我們精選了一些網(wǎng)站例子來(lái)帶你體驗(yàn)一場(chǎng)引人深思的網(wǎng)頁(yè)設(shè)計(jì)之旅。當(dāng)然了，這些網(wǎng)站都有些棒呆了的的交互性設(shè)計(jì)，然而，它們的字體選擇、排版風(fēng)格和間隔的使用風(fēng)格才是我們選它們作為本文中的例子的原因。在排版的過(guò)程中，考慮排字和網(wǎng)格結(jié)構(gòu)也是很重要的。
為什么網(wǎng)格結(jié)構(gòu)和排字對(duì)于排版至關(guān)重要
排字和網(wǎng)格結(jié)構(gòu)是讀者和文字之間進(jìn)行有效交互的關(guān)鍵性因素。在Thinking with Type(想想字體!)一文中，Ellen Lupton詳盡地解釋了用網(wǎng)格工作的益處，她特別強(qiáng)調(diào)了網(wǎng)格的便利性，網(wǎng)格在整合文字和圖片之中的作用，以及如何用網(wǎng)格組織一個(gè)復(fù)雜的層次結(jié)構(gòu)。
字體、字號(hào)和一行文字的尺寸之間有著不可分割的聯(lián)系。當(dāng)一個(gè)網(wǎng)站的外觀在不同的設(shè)備上看起來(lái)并不相同時(shí)，優(yōu)秀的設(shè)計(jì)師們需要將閱覽者需要閱讀的量控制在吸引人和可消化的范圍內(nèi)，小心翼翼地維持瀏覽者的興趣。然而，失去瀏覽者的興趣是隨時(shí)有可能發(fā)生的。 比如——出于不同的原因——一長(zhǎng)串的細(xì)小字體可能就是閱讀的災(zāi)難，同時(shí)，擠在一小行的大號(hào)字體同樣會(huì)帶來(lái)困擾。
在下面一個(gè)情形中，不停地?fù)Q行可能會(huì)淹沒(méi)了標(biāo)點(diǎn)符號(hào)，使得讀者不得不回過(guò)頭來(lái)再去看那行小字。在以上兩種情形下，超長(zhǎng)或者超短的一串文字都有可能使得讀者對(duì)它們失去興趣。
這兩張圖片很好地解釋了將特別細(xì)小的字體運(yùn)用于很長(zhǎng)一串文字或極短一串文字的不妥之處——既不方便閱讀，也不吸引閱覽者。(Bright Pink設(shè)計(jì))
重要程度不同的段落需要不同層次的強(qiáng)調(diào)來(lái)引導(dǎo)瀏覽者瀏覽網(wǎng)站，并在期間保持他們的注意力。在相對(duì)同樣重要的段落之間使用同樣的板式就是種很賞心悅目的引導(dǎo)方式，不連續(xù)是會(huì)帶來(lái)困擾的。
當(dāng)同樣重要的段落文字分成多縱列時(shí)，突然毫無(wú)理由地改變段落的橫向?qū)挾染蜁?huì)帶來(lái)混淆。(Bright Pink設(shè)計(jì))
網(wǎng)格結(jié)構(gòu)
在這個(gè)部分，我們挑選的網(wǎng)站將向你展示網(wǎng)格是如何有效地進(jìn)行排版、吸引訪問(wèn)者、使內(nèi)容可讀及構(gòu)造和支持網(wǎng)頁(yè)的層次結(jié)構(gòu)的。
SILKTRICKY
Silktricky的網(wǎng)格結(jié)構(gòu)由六個(gè)縱向的方格組成，將信息拆成有吸引力的幾個(gè)部分。標(biāo)題所采用的排版方式一致：Bookman Light Italic字體較輕的色調(diào)與Futura Condensed Bold的厚重的視覺(jué)沖擊形成了鮮明對(duì)比。
這些字體很好地互為補(bǔ)充，創(chuàng)造了在大小，字形，紋理，厚重上的強(qiáng)烈變化。這種對(duì)比促使著你想要看更多信息，將你的注意力吸引到方格中的描述性的無(wú)襯線文本上。
當(dāng)你點(diǎn)擊按鈕時(shí)，文本會(huì)擴(kuò)展成數(shù)個(gè)段落并延伸兩列，剛剛好使得你目光停留在文本上的同時(shí)也不會(huì)超出網(wǎng)格的范圍。這個(gè)拓展出的段落文字創(chuàng)造了另一種排版方式和色調(diào)，有效的與標(biāo)題做對(duì)比，展現(xiàn)了一種視覺(jué)效果的可喜變化。
PERCUSSION LAB
Percussion Lab(打擊樂(lè)實(shí)驗(yàn)室?)同樣有效地利用了網(wǎng)格。靈活地使用了四個(gè)方格來(lái)展示四位投稿藝術(shù)家的詳細(xì)資料，并且都包含了有關(guān)日期、藝術(shù)家、類型的細(xì)節(jié)信息，很好地融入了層級(jí)結(jié)構(gòu)中。標(biāo)題部分延伸到兩個(gè)方格的寬度并展示了音軌列表和有用的細(xì)節(jié)信息。
靈活地使用了四個(gè)縱向方格得字體，襯線和無(wú)襯線的混合，厚重程度等特性的改變強(qiáng)調(diào)了層級(jí)結(jié)構(gòu)。版式的細(xì)節(jié)和方格結(jié)構(gòu)使得瀏覽者產(chǎn)生并保持興趣。
THE NEW ART GALLERY WALSALL
英國(guó)The New Art Gallery Walsall的網(wǎng)站使用了無(wú)襯線的字體使得網(wǎng)頁(yè)看起來(lái)整潔清楚，有吸引力，但是，字體大小的變化和網(wǎng)格恰如其分的運(yùn)用使得這個(gè)網(wǎng)站使人印象深刻。文本主體內(nèi)容在左邊豎排下來(lái)，而其他的元素，比如超鏈接，占據(jù)了右邊部分。
整潔的字體的使用和大膽的留白反映了這個(gè)美術(shù)館本身的構(gòu)造，其內(nèi)的收藏品和它本身的美感都使得藝術(shù)顯得那么的可近可親。
吸引用戶的字體
文字的實(shí)質(zhì)是最重要的嗎?毫無(wú)疑問(wèn)這是對(duì)的，特別是當(dāng)語(yǔ)言振奮人心或者是強(qiáng)調(diào)作者意圖的時(shí)候。使我們快樂(lè)的文本，或是有爭(zhēng)議的文本本身就足夠吸引人了。
但是能使文本變得更富吸引力的工作還有很多：字體、紋理、風(fēng)格、整個(gè)的外觀和文本布局都對(duì)吸引讀者的注意力起著很重要的作用。字體同樣可凸顯主題的重要、情緒的強(qiáng)度、頁(yè)面的美感或是作品的獨(dú)特性。
Crockett & Jones
Crockett & Jones的網(wǎng)站就是這樣的一個(gè)例子。這個(gè)英國(guó)公司從1876年以來(lái)一直手工制作精美的鞋子，而它的網(wǎng)站也毫無(wú)疑問(wèn)地反映了它對(duì)形象和款型的傳承。品牌名在每個(gè)頁(yè)面上都有出現(xiàn)，并且每個(gè)字母都呼應(yīng)著這種裝飾性的維多利亞時(shí)代的設(shè)計(jì)方式。而微軟雅黑則被用于正文文本來(lái)展現(xiàn)這種傳承、品質(zhì)、風(fēng)格和對(duì)細(xì)節(jié)的專注。
在撰寫(xiě)這段文字的時(shí)候，我想到了Beatrice Warde那篇發(fā)表于1932年的著名的有關(guān)于打印和字體的論文“水晶酒杯”中說(shuō)道：“印刷應(yīng)是無(wú)形的。”她特別強(qiáng)調(diào)了字體——她使用了玻璃杯中的葡萄酒作為隱喻，說(shuō)明打印出來(lái)的文字在任何情況下都不能喧賓奪主——不能掩蓋了文字的意義。Warde說(shuō)，字體應(yīng)當(dāng)補(bǔ)充并加強(qiáng)文意的呈現(xiàn)，促進(jìn)我們的理解和欣賞。
這和Marko Dugonjic在《為閱讀體驗(yàn)而設(shè)計(jì)》一文中的觀點(diǎn)不謀而合，“只有當(dāng)排版經(jīng)過(guò)了深思熟慮時(shí)才能帶來(lái)完美的閱讀體驗(yàn)和信息的有效傳達(dá)。”顯然，Warde的文章早于互聯(lián)網(wǎng)的出現(xiàn)很多年了，但是原則到今日也還是適用的。
字體的結(jié)合
選擇和結(jié)合字體來(lái)凸顯主題總是充滿挑戰(zhàn)的任務(wù)。它需要耐心來(lái)一次次嘗試可能的組合并以視覺(jué)感受來(lái)評(píng)判適合效果好壞。這個(gè)部分的網(wǎng)站混合了精挑細(xì)選、賞心悅目的字體來(lái)強(qiáng)調(diào)主題，吸引讀者并制造驚喜的感覺(jué)。
FOUR SEASONS
在Four Seasons的網(wǎng)站中，將不同的風(fēng)格和厚度的Garamond Italic(加拉蒙斜體)和許多種類的Helvetica字體(著名的無(wú)襯線字體)結(jié)合起來(lái)，達(dá)到了紋理和色調(diào)的顯著對(duì)比。有著粗重豎直筆畫(huà)的Garamond字體和有著不同紋理的Helvetica字體相得益彰。
來(lái)這個(gè)網(wǎng)站體驗(yàn)這種顯著對(duì)比在網(wǎng)站的層級(jí)結(jié)構(gòu)上和在突出Four Seasons品牌的風(fēng)格、品質(zhì)和口碑等方面的應(yīng)用。Garamond字體和Helvetica字體在磅數(shù)和風(fēng)格上的變化，使得它們?cè)诮M織網(wǎng)站的層級(jí)結(jié)構(gòu)的過(guò)程中非常有效。
NOWNESS
在Nowness的標(biāo)題上，CreateThe Group將大小寫(xiě)的Garamond字體和大寫(xiě)的P22 Underground Titling字體優(yōu)雅地結(jié)合起來(lái)，這種結(jié)合流露出古典韻味。Garamond字體優(yōu)雅的筆畫(huà)與P22復(fù)雜的字形有個(gè)討人喜歡的對(duì)比。
CreateThe Group對(duì)于字符間的空格和字體大小的變化十分注意，小心翼翼地控制著色調(diào)和層級(jí)結(jié)構(gòu)并使標(biāo)題有型。
BARCAMP OMAHA
由Grain和Mortar設(shè)計(jì)的Barcamp Omaha網(wǎng)站很好地描述了它所說(shuō)的“非傳統(tǒng)會(huì)議”——一種非正式的聆聽(tīng)他人和社交的場(chǎng)合。通過(guò)大量圖片的串聯(lián)，網(wǎng)站將三種精挑細(xì)選的、對(duì)比強(qiáng)烈的字體結(jié)合在一起，其中有兩種很明顯是他們選來(lái)用作標(biāo)題的。
這兩種字體——一種粗的、稍濃縮的無(wú)襯線大寫(xiě)字體和另一種全大寫(xiě)的無(wú)襯線字體——有著微微復(fù)古之感，通常會(huì)令人將它聯(lián)系到美國(guó)大學(xué)的美學(xué)論(???)。文本被放置在數(shù)個(gè)小框框里，然而，字體的變化和厚度及顏色的改變突出了細(xì)節(jié)并加強(qiáng)了層級(jí)結(jié)構(gòu)。
WARHOL INITIATIVE
由Toky設(shè)計(jì)的Warhol Initiative網(wǎng)站在排版十分大膽。壓縮過(guò)的標(biāo)題文字可能會(huì)不利于閱讀，強(qiáng)勁的豎直筆畫(huà)結(jié)合著小型的字母可能——在某些場(chǎng)合下——會(huì)影響可讀性。這里，Toky將一種無(wú)襯線字體強(qiáng)烈的壓縮，和展現(xiàn)了他的卓越技術(shù)和勇氣。
字母之間的間距和恰當(dāng)?shù)淖帜复笮∈沟瞄喿x變得容易。字體的紋理被這種壓縮的形式很好地加強(qiáng)了，使得讀者能夠快速閱覽標(biāo)題并且將注意力放在后面的細(xì)節(jié)上。這種壓縮后的字體非常適合于加強(qiáng)Warhol的風(fēng)格。
COMBADI
由Radial設(shè)計(jì)的Combadi網(wǎng)站可能在這部分的幾個(gè)網(wǎng)站中尤為醒目。它的網(wǎng)格結(jié)構(gòu)由12豎格組成并且在不同的網(wǎng)頁(yè)中有不同的構(gòu)造方式。然而，字體的結(jié)合才是這種設(shè)計(jì)的真正引人注目之處。Brandon Grotesque字體和Museo Slab字體很好地突出了層次結(jié)構(gòu)。
Museo Slab字體被用于主體文本，橫向的寬度、短小的上升筆劃和下降筆畫(huà)還有字符間距都使得閱讀變得十分容易。作者同樣通過(guò)改變顏色來(lái)使得文字和品牌的顏色相呼應(yīng)。Brandon Grotesque字體則與之相補(bǔ)，用于二級(jí)標(biāo)題、導(dǎo)航等。
ARIA
由Un.titled設(shè)計(jì)的Aria的在線商店使用了優(yōu)雅的襯線文字。意大利體的標(biāo)題中的“v”和“w”這兩個(gè)字母尤其特別，象征Aria產(chǎn)品設(shè)計(jì)的獨(dú)特之處。文本文字有限的色調(diào)變化導(dǎo)致了獨(dú)特的排版風(fēng)格。為了充分把握層次之間微妙的差異，網(wǎng)站采用了文字大小及斜體的變化。
間隙、行距和字符間間隙
為了使文本看起來(lái)有吸引力且清晰可讀，字間的間隙是非常重要的。即使你選到了理想的字體，也可能由于間隙的不恰當(dāng)而使得整個(gè)設(shè)計(jì)功虧一簣。這個(gè)部分的網(wǎng)站將向你展示的是通過(guò)充分考量決定的間隙的使用，不僅可以使得設(shè)計(jì)更有吸引力，同樣也會(huì)使得讀者閱讀起來(lái)更加舒適。
STL DESIGNWEEK
STL DesignWeek的設(shè)計(jì)通常棱角分明而且采用不易察覺(jué)的細(xì)線和字母間隙來(lái)突出重點(diǎn)。這種無(wú)襯線字體被設(shè)計(jì)成擁有合適的大小，弧形的橫向筆畫(huà)和略寬的字符間距的樣子。行間距同樣很寬，加強(qiáng)了輕盈之感并且引導(dǎo)讀者一行行地閱讀下去，構(gòu)成完美的閱讀體驗(yàn)。
THE BEETLE
DDB Tribal設(shè)計(jì)了The Beetle的網(wǎng)站，這家網(wǎng)站專注于大眾甲殼蟲(chóng)汽車的精神理念的傳承。甲殼蟲(chóng)汽車的特性——可靠、有效被完美地由字體所呈現(xiàn)出來(lái)。從排版上來(lái)說(shuō)，這個(gè)網(wǎng)站十分簡(jiǎn)單：字體僅限于兩種不同磅數(shù)的Futura字體。
清晰簡(jiǎn)練的字體十分凸顯，細(xì)致的字母和行間距仿佛訴說(shuō)著甲殼蟲(chóng)樸素的歷史。標(biāo)題文字被賦予了額外的空間，似乎是要稍稍加強(qiáng)一下它與其它文本之間的色調(diào)差異，并強(qiáng)調(diào)品牌形象的獨(dú)特性質(zhì)。總的來(lái)說(shuō)，標(biāo)題引導(dǎo)讀者們閱讀每一行文本，使得閱讀甲殼蟲(chóng)的歷史成為一種享受。
I LOVE TYPOGRAPHY
如果你對(duì)I Love Typography(我愛(ài)排版)這個(gè)網(wǎng)站并不熟悉的話，真的需要好好地去看看，喜歡字體的人都會(huì)在這找到些有趣的東西。整個(gè)網(wǎng)站在不同的文章中換著花樣地使用字體，而且你會(huì)知道它們用了哪幾種字體，包括FF Basic Gothic Web Pro，Le Monde Journal STD還有Le Monde Sans STD神馬的。
排版十分地優(yōu)雅，但是標(biāo)題和字符間空隙也加強(qiáng)了精致和精煉的感覺(jué)。每一篇文章的標(biāo)題都采用了一種磅數(shù)小的無(wú)襯線字體，同時(shí)字符間隙和單詞之間的間隙同樣有著完美的感覺(jué)。
I Love Typography采取了一種謹(jǐn)慎的方式展開(kāi)文章內(nèi)容。
字體大小的變化
字體大小的變化常常用于指明優(yōu)先級(jí)和層級(jí)順序。最通用的方式之一就是將標(biāo)題設(shè)置成大大的、粗粗的樣子而將主體(body)部分的字號(hào)設(shè)置得小一些、輕盈一些。然而以下的例子或許會(huì)使你耳目一新……
DESIGN WALLER GREEK: THE FINAL FOUR
字體大小的變化是創(chuàng)造結(jié)構(gòu)和強(qiáng)調(diào)優(yōu)先級(jí)的完美方法，而且也是在能選用的字體受限制時(shí)的一種解決方案。Design Waller Creek的“Final Four”部門的比賽頁(yè)就通過(guò)調(diào)整大小來(lái)強(qiáng)調(diào)層級(jí)結(jié)構(gòu)。(請(qǐng)看正文部分)四行大一些的文字組成了一段陳述式的說(shuō)明，后面跟著用著相同字體的、小一些的長(zhǎng)串文字，之后的標(biāo)題又回復(fù)了陳述說(shuō)明文字的大小——可能顯得沒(méi)那么厚重，后面的又是字號(hào)變小了的一串要點(diǎn)(points)。
這里的色調(diào)同樣也是值得注意的。文章被主要設(shè)計(jì)成灰色，但是作為段落指示的使用Slab Serif字體的標(biāo)題卻在色調(diào)上與正文部分相近。
CARAVUS
由Toky設(shè)計(jì)的Caravus網(wǎng)頁(yè)的排版有許多值得贊許的地方，但是這里字體大小的變化應(yīng)該得到特別的注意。文本有著分明的結(jié)構(gòu)層次，厚重感和大小的變化都被應(yīng)用于明確的位置：大的、輕盈的、無(wú)襯線的字體被用于標(biāo)題文字，同時(shí)，小得多的、也更加粗重的字體被用于正文文本。
這是在典型的結(jié)構(gòu)層次之外的嘗試，通常我們都會(huì)將大而粗的字體用于標(biāo)題而不是相反。通覽整個(gè)網(wǎng)站，引用、統(tǒng)計(jì)和其他重要信息都是通過(guò)使用文字大小的對(duì)比凸顯出來(lái)的，而通常我們都會(huì)采用使用亮色的方式來(lái)做。你可以稱之為這是“化字為圖”(原諒小編對(duì)type as image的無(wú)力吧!嗷嗷嗷!)，很好地抓住了注意力，同時(shí)也用一種新穎的方式加強(qiáng)了層級(jí)結(jié)構(gòu)。
在大多數(shù)情形下，視覺(jué)效果是評(píng)判的第一標(biāo)準(zhǔn)，而在這里結(jié)構(gòu)層次就很好地通過(guò)大小、顏色的變化將紋理及色調(diào)的對(duì)比凸顯出了。
結(jié)論
我們展示的所有網(wǎng)站的設(shè)計(jì)者們都小心地選擇和使用字體來(lái)凸顯它們想表達(dá)的信息或品牌價(jià)值。這些設(shè)計(jì)成就了網(wǎng)頁(yè)的層次結(jié)構(gòu)和吸引力， 并且通過(guò)文字與圖像的結(jié)合，及顏色與排版的使用，更加使得這些網(wǎng)頁(yè)令人過(guò)目難忘。
我們一直專注于排版和組織網(wǎng)頁(yè)內(nèi)容，我們希望這篇文章能拓寬你的視野，并且你的注意力轉(zhuǎn)移到有效排版的部分細(xì)節(jié)問(wèn)題上去。或許這篇文章能促使你繼續(xù)你自己的設(shè)計(jì)探險(xiǎn)之旅。從Beatrice Warden的時(shí)代至今，新的技術(shù)已經(jīng)使得我們能夠更加便利地嘗試各種排版的可能方式，并且新的字體能夠使得我們?cè)趥鬟_(dá)信息的同時(shí)保持對(duì)讀者的吸引力。