關于APP開發的(de)文字排版問題

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

 

 

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

 

一、字體和(hé)字号

字體分(fēn)爲襯線體(serif)與非襯線體(sans serif)。簡單的(de)說，襯線體（serif)就是帶有襯線的(de)字體，筆畫(huà)粗細不同并帶有額外的(de)裝飾，開始和(hé)結尾有明(míng)顯的(de)筆觸(如下(xià)圖)。常用(yòng)的(de)英文襯線體有Times New Roman和(hé)Georgia，中文即是我們在windows下(xià)最常見的(de)中易宋體。

與襯線體相反，無襯線裝飾，筆畫(huà)粗細無明(míng)顯查差異的(de)字體就是非襯線體（sans serif）。Arial、Helvetica、Verdanad都是我們熟悉的(de)英文非襯線體，中文有微軟雅黑(hēi)和(hé)mac下(xià)默認的(de)中文-華文細黑(hēi)。

 

二、行長(cháng)

我們随手拿起一本書(shū)或者一份報紙，數一數每行的(de)文字，一般情況下(xià)都不會超過40個(gè)漢字。這(zhè)是因爲如果每行文字過長(cháng)，讀者會不停的(de)轉動脖子，感到疲憊的(de)同時(shí)也(yě)會降低閱讀效率;目光(guāng)從行尾移至下(xià)一行首，也(yě)很容易串行，影(yǐng)響讀者浏覽文章(zhāng)的(de)節奏。這(zhè)點同樣适用(yòng)于網頁上的(de)文章(zhāng)閱讀。由于顯示器是橫向的(de)，我們更要注意劃分(fēn)閱讀區(qū)域。

文本寬度控制在450-700px爲宜，此範圍内參照(zhào)字号大(dà)小;

英文每行80-100個(gè)字母(空格算(suàn)一個(gè)字母)爲宜;

中文每行30-40個(gè)漢字爲宜。

 

三、間距

通(tōng)過設置間距，我們就可(kě)以控制文字的(de)密度。如果每行間距太小，與文字過長(cháng)一樣，讀者浏覽文章(zhāng)時(shí)也(yě)容易串行;如果行距過寬，閱讀時(shí)就會感覺文章(zhāng)不夠連貫。

間距沒有固定的(de)值，通(tōng)常是根據字體大(dà)小來(lái)定義的(de)。在word裏我們常看到雙倍行距、單倍行距和(hé)1.5倍行距的(de)選項。網頁上行距的(de)單位常用(yòng)em來(lái)表示，不管是中文網站還(hái)是英文網站，大(dà)家多(duō)喜歡用(yòng)1.5em-1.8em的(de)行距。以1.6em的(de)行距爲例，字号16px的(de)字，行距就是25.6px。

 

四、背景

白色是全頻(pín)光(guāng)，全放射光(guāng)對(duì)人(rén)眼睛的(de)最有刺激，所以很多(duō)印刷品讀物(wù)的(de)紙張都選用(yòng)乳白色或者淡黃(huáng)色的(de)紙張。由于顯示器本身就發光(guāng)，所以同是純白色背景的(de)文字，在電腦(nǎo)上比在紙上閱讀會使眼睛更容易疲乏，另有研究表明(míng)：在電腦(nǎo)上閱讀隻有在紙上閱讀速度的(de)78%，閱讀效率大(dà)大(dà)減低。因此，爲了(le)提高(gāo)頁面浏覽的(de)舒适度和(hé)效率，越來(lái)越多(duō)的(de)頁面采用(yòng)淺灰色和(hé)淡黃(huáng)色做(zuò)爲頁面背景。

 

另外，印刷品以文字爲主的(de)出版物(wù)往往會采用(yòng)低光(guāng)澤度的(de)紙張，也(yě)是因爲光(guāng)澤度高(gāo)的(de)紙張反射度高(gāo)，導緻閱讀質量下(xià)降，容易使人(rén)視覺疲勞。頁面背景仿造低光(guāng)澤度的(de)紙張(紙張紋理(lǐ))也(yě)能否提高(gāo)閱讀的(de)舒适度呢(ne)?

 

實際工作中，我們需要思考的(de)更多(duō)，浏覽環境、設備、網站特點、用(yòng)戶人(rén)群、個(gè)人(rén)偏好等等都需要設計師根據具體情況來(lái)把握界面文字的(de)展示效果。爲用(yòng)戶帶來(lái)更好的(de)體驗感受。