閱讀(11.9k) 書簽贊(0) 我要糾錯

響應式排版快速指南

2018-02-24 15:39 更新

原文出處：http://www.uisdc.com/responsive-typography-quick-tutorial

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

下面我會給你們展示響應式排版的重要性，以及如何簡單地實踐它。

排版不是件小事
配置你的內(nèi)容
垂直排版的韻律感
等比縮小
移動設備上的垂直排版韻律
設置全新的韻律
總結(jié)

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

排版不是件小事

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

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

配置你的內(nèi)容

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

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

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

垂直排版的韻律感

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

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

在我的設計中，文章段落的字號和行高分別是18px/1.77 （也就是32px）。我參照黃金比例來調(diào)整標題的字號，也就是說H1現(xiàn)在是3ems（54px）。下面是我定義的不同字號節(jié)點，所有這些都會被應用在同樣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)

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

等比縮小

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

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

移動設備上的垂直排版韻律

如果你在意產(chǎn)品的移動體驗那你必須要首先著意排版。在那樣一個狹窄的320px寬度的空間里，所有諸如材質(zhì)、漸變等裝飾性都應該靠邊站。我并不是說那些不重要，它們只是沒有文本內(nèi)容的優(yōu)先級那么高罷了。要記住優(yōu)化排版的顯示是創(chuàng)建良好閱讀體驗的第一步。