排版知識(shí),三個(gè)提升閱讀體驗(yàn)的排版小技巧(4)

來(lái)源:優(yōu)設(shè)網(wǎng) 作者:陳子木 學(xué)習(xí):4274人次

如果你想讓你的排版擁有更令人愉悅的閱讀體驗(yàn),其實(shí)只需要有針對(duì)性地對(duì)三個(gè)方面進(jìn)行調(diào)整就可以了。這些技巧不僅可以運(yùn)用于設(shè)計(jì)領(lǐng)域,哪怕你用在文本文檔排版上都能收到奇效!

當(dāng)然,這些方法可能名字看起來(lái)稍顯復(fù)雜,但是理解和使用非常方便。

排版知識(shí),三個(gè)提升閱讀體驗(yàn)的排版小技巧_m.theoat.com.cn

出于演示的目的,我選擇了一個(gè)無(wú)樣式的頁(yè)面,它來(lái)自Anthony Burgess 的 A Clockwork Orange。

重要提示:每一種英文字體都是不同的,如果你感覺(jué)不對(duì)勁,最好重新選擇一種字體來(lái)匹配,中文也是一樣的道理。最重要的是,你得為讀者創(chuàng)造舒適的閱讀體驗(yàn)。

技巧1——創(chuàng)造排版的層次感,讓頁(yè)面結(jié)構(gòu)更加清晰

排版的層次感通常指的是頁(yè)面中文本排列構(gòu)建出的視覺(jué)層次。

排版知識(shí),三個(gè)提升閱讀體驗(yàn)的排版小技巧_m.theoat.com.cn

腦補(bǔ)一下你看過(guò)的那些圖書(shū)。書(shū)中,主標(biāo)題(章節(jié)標(biāo)題)看起來(lái)比副標(biāo)題(子標(biāo)題)更重要,而主標(biāo)題和副標(biāo)題明顯比正文部分更顯眼。當(dāng)你在制作Word 文檔的時(shí)候,多數(shù)時(shí)候也遵循著相同的原理。

頁(yè)面中所有字體尺寸應(yīng)該是基于正文字體來(lái)進(jìn)行選擇,因?yàn)檎氖怯脩粼诿總(gè)頁(yè)面中閱讀最多的部分。如果基于正文來(lái)選取其他部分的字體大小呢?下面有一些基本的規(guī)則:

·1、正文字體:調(diào)整字體大小,知道感覺(jué)看起來(lái)非常舒服為止。對(duì)于這篇文章,我們將字體尺寸調(diào)整為22pt。

·2、標(biāo)題字體:通常將正文字體放大到180%~200%,在案例中,字體尺寸應(yīng)為40pt~44pt。

·3、副標(biāo)題字體:副標(biāo)題字體通常為正文字體的130%~150%,也就是說(shuō),這篇文章的副標(biāo)題尺寸應(yīng)為29pt~33pt。

按照這樣的方式調(diào)整之后,效果如下:

排版知識(shí),三個(gè)提升閱讀體驗(yàn)的排版小技巧_m.theoat.com.cn

補(bǔ)充思考

下面的這些層級(jí)并不是文章的必須部分,但是有必要考慮:

·1、三級(jí)標(biāo)題:通常是正文大小的100%~125%,案例中字體應(yīng)為22pt~28pt

·2、注釋和小字體文本:正文字體的70%~75%,案例中應(yīng)為15pt~17pt

技巧2——控制縱向間距,使排版更易讀

通過(guò)調(diào)整行間距和段間距,讓用戶更容易掃讀文字。段間距讓用戶能夠更好地識(shí)別內(nèi)容塊和意群,行間距控制好則可以讓大腦更輕松識(shí)別文字內(nèi)容——這也符合我們的閱讀習(xí)慣。

排版知識(shí),三個(gè)提升閱讀體驗(yàn)的排版小技巧_m.theoat.com.cn

段間距

設(shè)置段間距非常簡(jiǎn)單,但是它和連按兩次回車(chē)再起一段是兩回事。一般而言,段間距應(yīng)該和正文字體行高相等,但是如果你連續(xù)按兩次回車(chē),那么這個(gè)間隔的高度等于行高+行間隙x2。如果正文字體為16pt,么段間距最好是16pt或者1em。

·在設(shè)計(jì)應(yīng)用和CSS的時(shí)候,將段落的margin-bottom屬性設(shè)置為16px或者1em

·在Word或者Pages文檔中,在“段落后”的值設(shè)置為正文尺寸的值即可

排版知識(shí),三個(gè)提升閱讀體驗(yàn)的排版小技巧_m.theoat.com.cn

行距

行距應(yīng)該控制在正文尺寸的120%~160%(兩行底部之間的距離),同時(shí),文本字體越小,兩行之間的行間距應(yīng)該越大,確保字與行呼吸的空間。

如果正文文本的尺寸是22pt,那么你的行高應(yīng)該控制在26pt~35pt之間。

·在CSS樣式中,你可以使用em來(lái)控制尺寸,不過(guò)你需要稍加調(diào)整,確保它看起來(lái)舒服

·在Word文檔或者Pages文檔中,行高是以倍數(shù)來(lái)表示的,120%的行高在這里應(yīng)該設(shè)置為1.2

排版知識(shí),三個(gè)提升閱讀體驗(yàn)的排版小技巧_m.theoat.com.cn

技巧3——調(diào)整每行文本,確保閱讀體驗(yàn)

調(diào)整每行文本的長(zhǎng)度,讓用戶更好地閱讀。太長(zhǎng)的行難以閱讀,太短的話單獨(dú)每行倒是容易閱讀,但是需要視線頻繁地左右掃視。英文文本每行理想的字符數(shù)是65~75,作為閱讀的參考標(biāo)準(zhǔn),應(yīng)該以正文的行寬來(lái)作為參考,而不是標(biāo)題和副標(biāo)題的長(zhǎng)度。

排版知識(shí),三個(gè)提升閱讀體驗(yàn)的排版小技巧_m.theoat.com.cn

提示:70個(gè)字符放在一行里,應(yīng)該有多長(zhǎng)?將英文大小寫(xiě)字字母和數(shù)字寫(xiě)在一行,就差不多有這么長(zhǎng),可以拿來(lái)做參考:

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789

當(dāng)你確定了65~75個(gè)字符的長(zhǎng)度之后,適當(dāng)?shù)亟档托袑捴钡竭@個(gè)寬度范疇,然后進(jìn)行二次調(diào)整,直至寬度令你感到舒適。值得一提的是,在中文排版中,也可以采用類(lèi)似的處理方法,通常在Word 文檔中,使用5號(hào)字,一行32個(gè)字,能確保比較舒適的閱讀體驗(yàn)。

排版知識(shí),三個(gè)提升閱讀體驗(yàn)的排版小技巧_m.theoat.com.cn

一般這個(gè)寬度會(huì)相對(duì)更窄一點(diǎn),使得每行更易于閱讀。

最終結(jié)果

一旦你遵循上述的步驟來(lái)處理,你的文本內(nèi)容的可讀性會(huì)得到極大的改善,如同下圖所示:

排版知識(shí),三個(gè)提升閱讀體驗(yàn)的排版小技巧_m.theoat.com.cn

排版設(shè)置完全是一個(gè)常規(guī)技能,遵循簡(jiǎn)單的原則能讓文本的可讀性更好。但是這個(gè)技能所包含的規(guī)則相對(duì)簡(jiǎn)單可行,但是并不能覆蓋全部的排版需求,比如在移動(dòng)端閱讀,尤其是第三個(gè)技巧。但是他們依然非常有意義,因?yàn)樗鼈冋宫F(xiàn)了一些排版設(shè)計(jì)用戶體驗(yàn)的基本規(guī)則,你可以稍加調(diào)整,應(yīng)用于更加廣闊的領(lǐng)域。

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無(wú)評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!