@勵(lì)定洲?：無(wú)論是對(duì)于印刷、網(wǎng)站或是電視廣告來(lái)說(shuō)，排版都是我們用來(lái)溝通信息的主要方式。排版之重要性我想已無(wú)須贅述。然而，“理解”和“實(shí)踐”還是相差十萬(wàn)八千里的，特別是在網(wǎng)頁(yè)設(shè)計(jì)中，“一個(gè)字號(hào)走天下”的想法可以歇歇了。我們或許都聽(tīng)說(shuō)過(guò)響應(yīng)式網(wǎng)站，但我想你們中可能很少有人知道什么是響應(yīng)式排版吧。

下面我會(huì)給你們展示響應(yīng)式排版的重要性，以及如何簡(jiǎn)單地實(shí)踐它。

此文對(duì)這篇?《經(jīng)驗(yàn)分享：響應(yīng)式排版中的基礎(chǔ)知識(shí)》?做了手把手的實(shí)例補(bǔ)充，建議一起看。

排版不是件小事

排版是設(shè)計(jì)中非常基礎(chǔ)但又無(wú)比重要的一環(huán)，這點(diǎn)我想大家都認(rèn)同。在網(wǎng)頁(yè)設(shè)計(jì)中，排版早些年的日子比較苦逼，或者說(shuō)其很難得到與之重要性相匹配的待遇——和很多其它的設(shè)計(jì)元素一樣，那時(shí)我們并不具備在網(wǎng)頁(yè)中完整表現(xiàn)它們的技術(shù)。但幸運(yùn)的是，我們走過(guò)來(lái)了。

排版能幫助我們溝通信息，這可不是一件小事。優(yōu)秀的排版能有助于溝通的過(guò)程明晰、高效。可讀性是所有設(shè)計(jì)都需要面對(duì)的大課題。那么現(xiàn)在，我們就來(lái)親手實(shí)踐下。

配置你的內(nèi)容

下面你可以看到一張只顯示文字的圖片。這是我從維基百科上隨意復(fù)制黏貼過(guò)來(lái)的一段文字，然后把它放到HTML文檔里顯示出來(lái)。

這看起來(lái)很簡(jiǎn)陋，而且難以閱讀。上面的這張截圖顯示的是瀏覽器默認(rèn)的16px Times New Roman字體。既然這樣，我們就先試試看把它升級(jí)到18px的PT Serif字體（Google出品）。

然后我們需要對(duì)每一行的字符數(shù)量做下調(diào)整。在桌面端，每一行的字符量應(yīng)該在60到75之間。于是我把整個(gè)文本的寬度調(diào)整到580px。你自己對(duì)比看看上下兩張圖就知道孰優(yōu)孰劣了。不過(guò)別掉以輕心，一切才剛剛開(kāi)始。

垂直排版的韻律感

在我們當(dāng)前的設(shè)計(jì)中，可以看到其垂直方向的韻律依然還是瀏覽器默認(rèn)的狀態(tài)，而不同瀏覽器上的顯示是不同的。這可不行，我們需要搞清楚到底什么才是合適的行高、邊距以及字號(hào)。在之前提到過(guò)我把默認(rèn)的文本大小改成了18px，那么對(duì)于我來(lái)說(shuō)，它就是1em。

我想大家作為2015年的網(wǎng)頁(yè)設(shè)計(jì)師應(yīng)該都明白em是什么東西吧，有一堆工具可以幫助你來(lái)進(jìn)行此類(lèi)換算。Pascal Cauhepe的Vertical Rhythm Tool是我最喜歡的工具之一，另外再推薦個(gè)Tuomas Jomppanen 和Ville Vanninen開(kāi)發(fā)的Gridlover，也很好用~

在我的設(shè)計(jì)中，文章段落的字號(hào)和行高分別是18px/1.77 （也就是32px）。我參照黃金比例來(lái)調(diào)整標(biāo)題的字號(hào)，也就是說(shuō)H1現(xiàn)在是3ems（54px）。下面是我定義的不同字號(hào)節(jié)點(diǎn)，所有這些都會(huì)被應(yīng)用在同樣32px行高的基線柵格里：

字體大小

P 18px (1em)

H1 54px (3em)

H2 45px (2.5em)

H3 36px (2em)

H4 32px (1.75em)

H5 27px (1.5em)

H6 18px (1em)

簡(jiǎn)單吧？很容易就可以搞明白怎么整這縱向的柵格了。然后下一步就可以考慮水平方向的柵格如何定義。

等比縮小

很多時(shí)候我們?cè)诳v向排版的韻律確定后就會(huì)迫不及待地去折騰顏色、柵格甚至布局。搞清楚柵格系統(tǒng)里的節(jié)點(diǎn)確實(shí)重要，但是你不能因此無(wú)視響應(yīng)式排版，根據(jù)屏幕尺寸調(diào)整垂直排版的韻律感同樣需要琢磨。在移動(dòng)設(shè)備上使用與桌面端一模一樣的字號(hào)和字距就和使用同一套柵格一樣荒謬。無(wú)線端和桌面端的區(qū)別極大，其上的閱讀體驗(yàn)也大不相同。

iA在2012年時(shí)寫(xiě)的一篇“Responsive Typography: the Basics”中提到了使用手機(jī)和電腦進(jìn)行閱讀時(shí)眼睛與設(shè)備之間的距離是不同的，而這正是對(duì)閱讀體驗(yàn)造成影響的本因。從下面這張圖片可以看到，在移動(dòng)設(shè)備上，18px的字號(hào)顯然太大了些。它就像把所有東西一下放大的同時(shí)卻沒(méi)有提供有助于閱讀體驗(yàn)的視覺(jué)平衡。

移動(dòng)設(shè)備上的垂直排版韻律

如果你在意產(chǎn)品的移動(dòng)體驗(yàn)?zāi)悄惚仨氁紫戎馀虐妗Ｔ谀菢右粋€(gè)狹窄的320px寬度的空間里，所有諸如材質(zhì)、漸變等裝飾性都應(yīng)該靠邊站。我并不是說(shuō)那些不重要，它們只是沒(méi)有文本內(nèi)容的優(yōu)先級(jí)那么高罷了。要記住優(yōu)化排版的顯示是創(chuàng)建良好閱讀體驗(yàn)的第一步。

第一步，正如我之前說(shuō)的那樣，先把字號(hào)縮小了再說(shuō)。與電腦屏幕相比，我們通常會(huì)把手機(jī)拿得離臉更近，這意味著即便我們用14px的字號(hào)也完全能看得很清楚。在移動(dòng)設(shè)備上，每一行35-40個(gè)字符是較合適的。

設(shè)置全新的韻律

字號(hào)：桌面 字號(hào)： 移動(dòng)

P 18px (1em) 14px(1em)

H1 54px (3em) 35px(2.5em)

H2 45px (2.5em) 31px(2.25em)

H3 36px (2em) 24px(2em)

H4 32px (1.75em) 21px(1.5em)

H5 27px (1.5em) 18px(1.25em)

H6 18px (1em) 14px(1em)

OK，現(xiàn)在你可以把改好的上圖和之前的桌面版本對(duì)比一下。另外，我把行高改成了22px，看起來(lái)還是蠻順眼的。如果這個(gè)字體本身再細(xì)一些或許我會(huì)考慮20px的行高，但目前來(lái)看，至少對(duì)于PT Serif而言，22px的行高對(duì)我來(lái)說(shuō)是最合適的。

Jason Pamental在Typecast發(fā)表過(guò)一篇關(guān)于響應(yīng)式排版的文章：“A More Modern Scale for Web Typography.”如果你英文湊合的話(huà)強(qiáng)烈建議讀一讀。他在文中提到了等比縮放排版于不同節(jié)點(diǎn)的重要性，同時(shí)還有三條關(guān)于排版的要點(diǎn)。

“搞清楚人們是如何閱讀的；能愜意地掃讀某一行文字然后在輕松跳回下一行開(kāi)頭；快速理解不同文章之間各個(gè)標(biāo)題的優(yōu)先級(jí)和重要性。”

當(dāng)排版能做到這三點(diǎn)時(shí)，閱讀體驗(yàn)就會(huì)讓人滿(mǎn)意。

總結(jié)

排版的重要性不言而喻，千萬(wàn)不要在不同設(shè)備上使用同一套字號(hào)及字距。你要知道你看手機(jī)的方式和看筆記本、臺(tái)式顯示器大不相同。為響應(yīng)式設(shè)計(jì)適配不同的垂直排版韻律是很重要的，若能迎合用戶(hù)的潛在需求，那你就可以創(chuàng)建更好的用戶(hù)體驗(yàn)。最后重申一遍：排版不是小事，不要掉以輕心！

【不會(huì)摳細(xì)節(jié)的設(shè)計(jì)師不是好產(chǎn)品汪】

讓網(wǎng)頁(yè)更上檔次的細(xì)節(jié)全總結(jié)！
《讓頁(yè)面更上檔次！網(wǎng)頁(yè)設(shè)計(jì)細(xì)節(jié)大總結(jié)》

新手最需要的提升品質(zhì)感技巧！
《認(rèn)真你就贏了！如何從四個(gè)細(xì)節(jié)提升設(shè)計(jì)的品質(zhì)感？》

用戶(hù)登錄也有大量細(xì)節(jié)！
《細(xì)節(jié)決定成敗！提高用戶(hù)登錄體驗(yàn)的5個(gè)細(xì)節(jié)》

原文地址：designmodo
譯者：@勵(lì)定洲

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量102萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com