APP開(kāi)發(fā)時(shí)文字排版是常見(jiàn)的頁(yè)面，用戶用手機(jī)閱讀，獲取信息，比如閱讀到大量的新聞及各類文章，特別是網(wǎng)絡(luò)小說(shuō)，這些頁(yè)面展示的主體就是通篇大段的文字。對(duì)于這種看似簡(jiǎn)單的文字堆砌的頁(yè)面，有人覺(jué)得不需要什么設(shè)計(jì)。其實(shí)恰恰相反，這樣的閱讀頁(yè)面，是用戶長(zhǎng)時(shí)間停留的頁(yè)面，設(shè)計(jì)的好與壞直接影響到用戶閱讀的體驗(yàn)。

 

 

那么，在APP開(kāi)發(fā)時(shí)，信息展示頁(yè)面的文字排版應(yīng)該注意哪些問(wèn)題呢？是習(xí)慣性的使用宋體字或者微軟雅黑?是直接設(shè)為12px或者14px的字號(hào)?你有考慮過(guò)文字排布與閱讀效率的關(guān)系嗎?你的頁(yè)面背景會(huì)影響到用戶的瀏覽舒適度嗎?讓我們從以下幾個(gè)元素具體分析。

 

一、字體和字號(hào)

字體分為襯線體(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ì)黑。

 

二、行長(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里我們常看到雙倍行距、單倍行距和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è)面背景。

 

另外，印刷品以文字為主的出版物往往會(huì)采用低光澤度的紙張，也是因?yàn)楣鉂啥雀叩募垙埛瓷涠雀撸瑢?dǎo)致閱讀質(zhì)量下降，容易使人視覺(jué)疲勞。頁(yè)面背景仿造低光澤度的紙張(紙張紋理)也能否提高閱讀的舒適度呢?

 

實(shí)際工作中，我們需要思考的更多，瀏覽環(huán)境、設(shè)備、網(wǎng)站特點(diǎn)、用戶人群、個(gè)人偏好等等都需要設(shè)計(jì)師根據(jù)具體情況來(lái)把握界面文字的展示效果。為用戶帶來(lái)更好的體驗(yàn)感受。