把握5元素,讓文字閱讀更舒適
來(lái)源:中科服 發(fā)布時(shí)間:2015-06-01 文章分類:行業(yè)動(dòng)態(tài)
分享:
讓我們從以下5個(gè)元素具體分析。
字體、字號(hào)
字體和字號(hào)這兩個(gè)元素必須捏在一起說(shuō)。
字體分為襯線體(serif)與非襯線體(sans serif)。簡(jiǎn)單的說(shuō),襯線體(serif)就是帶有襯線的字體,筆畫粗細(xì)不同并帶有額外的裝飾,開(kāi)始和結(jié)尾有明顯的筆觸(如下圖)。常用的英文襯線體有Times New Roman和Georgia,中文即是我們?cè)趙indows下最常見(jiàn)的中易宋體。
與襯線體相反,無(wú)襯線裝飾,筆畫粗細(xì)無(wú)明顯查差異的字體就是非襯線體(sans serif)。Arial、Helvetica、Verdanad都是我們熟悉的英文非襯線體,中文有微軟雅黑和mac下默認(rèn)的中文-華文細(xì)黑。
在過(guò)去,普遍認(rèn)為有筆觸裝飾的襯線體,可提高辨識(shí)度和閱讀效率,更適合做為閱讀的字體。多用于報(bào)紙、書籍等印刷品的正文。非襯線體飽滿醒目,常用做標(biāo)題或者用于較短的段落。
很長(zhǎng)一段時(shí)間里,在互聯(lián)網(wǎng)上我們會(huì)注意這樣的一個(gè)現(xiàn)象,國(guó)外網(wǎng)站大部分以非襯線體為主,而中文網(wǎng)站基本就是宋體。其實(shí)不難理解,襯線字體筆畫有粗細(xì)之分,很小字的情況下細(xì)筆畫就被弱化,受限于電腦的分辨率,10-12px的襯線字體在顯示器上是相當(dāng)難辨認(rèn)的(見(jiàn)下圖);同字號(hào)的非襯線體筆畫簡(jiǎn)潔而飽滿,更適于做網(wǎng)頁(yè)字體。windows下,中文宋體小字點(diǎn)陣的特性,12px、14px的字號(hào)顯示仍然相當(dāng)清晰美觀,便于閱讀。這也就是為什么大多網(wǎng)頁(yè)設(shè)計(jì)制作人員容易機(jī)械性的選用特定字號(hào)或英文或中文的字體。
如今隨著顯示器越來(lái)越大,分辨率越來(lái)越高,經(jīng)常會(huì)覺(jué)得看12px的文字有點(diǎn)吃力,做為設(shè)計(jì)師也會(huì)不自覺(jué)的開(kāi)始大量使用14px的字體,而且越來(lái)越多的網(wǎng)站開(kāi)始使用15、16px甚至18px以上的字號(hào)做正文文字。大字號(hào)的使用,對(duì)英文字體來(lái)講,襯線體的高辨識(shí)度和流暢閱讀的優(yōu)勢(shì)就體現(xiàn)出來(lái)了。中文宋體在顯示14號(hào)以上字體時(shí),單線條大字總是看上去有些單薄不那么協(xié)調(diào),特別是這款點(diǎn)陣字在ClearType 強(qiáng)制平滑顯示狀態(tài)下尤其顯得模糊不清。微軟雅黑就是微軟在這個(gè)字體顯示問(wèn)題上的解決方案。
行長(zhǎng)
我們隨手拿起一本書或者一份報(bào)紙,數(shù)一數(shù)每行的文字,一般情況下都不會(huì)超過(guò)40個(gè)漢字。這是因?yàn)槿绻啃形淖诌^(guò)長(zhǎng),讀者會(huì)不停的轉(zhuǎn)動(dòng)脖子,感到疲憊的同時(shí)也會(huì)降低閱讀效率;目光從行尾移至下一行首,也很容易串行,影響讀者瀏覽文章的節(jié)奏。這點(diǎn)同樣適用于網(wǎng)頁(yè)上的文章閱讀。由于顯示器是橫向的,我們更要注意劃分閱讀區(qū)域。
文本寬度控制在450-700px為宜,此范圍內(nèi)參照字號(hào)大??;
英文每行80-100個(gè)字母(空格算一個(gè)字母)為宜;
中文每行30-40個(gè)漢字為宜。
間距
通過(guò)設(shè)置間距,我們就可以控制文字的密度。如果每行間距太小,與文字過(guò)長(zhǎng)一樣,讀者瀏覽文章時(shí)也容易串行;如果行距過(guò)寬,閱讀時(shí)就會(huì)感覺(jué)文章不夠連貫。
間距沒(méi)有固定的值,通常是根據(jù)字體大小來(lái)定義的。在word里我們??吹诫p倍行距、單倍行距和1.5倍行距的選項(xiàng)。網(wǎng)頁(yè)上行距的單位常用em來(lái)表示,不管是中文網(wǎng)站還是英文網(wǎng)站,大家多喜歡用1.5em-1.8em的行距。以1.6em的行距為例,字號(hào)16px的字,行距就是25.6px。
背景
白色是全頻光,全放射光對(duì)人眼睛的最有刺激,所以很多印刷品讀物的紙張都選用乳白色或者淡黃色的紙張。由于顯示器本身就發(fā)光,所以同是純白色背景的文字,在電腦上比在紙上閱讀會(huì)使眼睛更容易疲乏,另有研究表明:在電腦上閱讀只有在紙上閱讀速度的78%,閱讀效率大大減低。因此,為了提高頁(yè)面瀏覽的舒適度和效率,越來(lái)越多的頁(yè)面采用淺灰色和淡黃色做為頁(yè)面背景。