從紙質(zhì)閱讀到屏幕閱讀，通過(guò)理解用戶從紙質(zhì)到屏幕閱讀行為的轉(zhuǎn)變，我們從傳統(tǒng)中文排印經(jīng)驗(yàn)中吸取對(duì)字體、間距、標(biāo)點(diǎn)的處理方式，跨越平面與UI不同終端的設(shè)計(jì)規(guī)范和實(shí)現(xiàn)手段。在UI設(shè)計(jì)的語(yǔ)境中調(diào)整中文排版策略，優(yōu)化手機(jī)百度圖文閱讀場(chǎng)景設(shè)計(jì)，提升手百用戶的閱讀體驗(yàn)。

· 屏幕閱讀與紙質(zhì)閱讀不同

人的閱讀習(xí)慣會(huì)根據(jù)閱讀環(huán)境而改變，包括文本的書(shū)寫(xiě)格式、文本的媒介、語(yǔ)言符號(hào)等?；谄聊坏拈喿x行為，往往表現(xiàn)了如下特征：很少人會(huì)一字一句閱讀頁(yè)面，更多的是在瀏覽、關(guān)鍵詞確認(rèn)、非線性閱讀、有選擇性的閱讀。

· 設(shè)計(jì)差異點(diǎn)

UI設(shè)計(jì)與書(shū)籍排版不同之處在于：

第一、屏幕上可以實(shí)現(xiàn)更多的交互功能，增強(qiáng)了閱讀的沉浸感和交互體驗(yàn)。

第二、UI設(shè)計(jì)不可控因素更多。平面排版紙張和內(nèi)容固定可控，可以保證設(shè)計(jì)的精準(zhǔn)展示。但在UI設(shè)計(jì)中，想讓頁(yè)面達(dá)到和原本設(shè)計(jì)一模一樣的效果幾乎是不可能的，顯示屏幕尺寸的碎片化、內(nèi)容的靈活可變，都讓最后的展示效果多了很多不可預(yù)期。這就是為什么會(huì)有很多排版優(yōu)秀的印刷品設(shè)計(jì)，但UI中優(yōu)秀的排版設(shè)計(jì)卻特別少。

因此，針對(duì)屏幕閱讀的設(shè)計(jì)要注意：不能照搬文字排版規(guī)則，更要充分考慮屏幕與內(nèi)容的靈活可變，確保設(shè)計(jì)方案可實(shí)際落地。

· 明確設(shè)計(jì)目標(biāo)

本次設(shè)計(jì)改版主要針對(duì)手機(jī)百度——圖文落地頁(yè)部分，希望通過(guò)優(yōu)化文字展現(xiàn)、內(nèi)容排版提升閱讀體驗(yàn)。

CEA閱讀體驗(yàn)?zāi)Ｐ蛯⒂脩舻拈喿x體驗(yàn)分為舒適、效率、吸引三個(gè)緯度。

舒適（Comfort)：視覺(jué)負(fù)擔(dān)低，信息適量，看著不累、沒(méi)有信息壓迫感

效率（Efficiency）：重點(diǎn)信息突出，直觀性強(qiáng)，容易識(shí)別

吸引（Attraction）：頁(yè)面設(shè)計(jì)美觀，有吸引力

基于此模型，此次優(yōu)化方案中我們確定的設(shè)計(jì)目標(biāo)是：優(yōu)化內(nèi)容可讀性；提升閱讀效率；提升頁(yè)面美觀度。

· 優(yōu)化內(nèi)容可讀性

· 選擇屏顯友好字體

屏顯字體與印刷用字體最大的不同在于，屏顯字體受限于分辨率，無(wú)法做到印刷字體那么多細(xì)節(jié)的設(shè)計(jì)。目前屏顯漢字的設(shè)計(jì)方式一般是：

1、從字體的結(jié)構(gòu)入手，擴(kuò)大中宮的設(shè)計(jì)，字形設(shè)計(jì)看起來(lái)舒適放松，提升辨識(shí)度，相較于中宮內(nèi)縮的字體，呈現(xiàn)現(xiàn)代的明亮感。

2、字形簡(jiǎn)潔，平直少細(xì)節(jié)的筆畫(huà)有助于提高字體本身的辨識(shí)。

遍歷手百用戶常用手機(jī)的默認(rèn)字體，系統(tǒng)默認(rèn)字體都是使用屏顯友好字體。

· 選擇字重更全的字體

與紙質(zhì)閱讀相比，用戶在在屏幕閱讀中，會(huì)經(jīng)常進(jìn)行掃讀、關(guān)鍵詞確認(rèn)，而不是像在紙質(zhì)書(shū)上一字一句的讀。

目前我們提供給作者的能夠做重點(diǎn)信息區(qū)別的方式包括：文字加粗、風(fēng)格化二級(jí)標(biāo)題。但我們發(fā)現(xiàn)目前在一些安卓手機(jī)上，一些字體在增加字重后出現(xiàn)沾粘情況，不能保證可讀性。

字重，即字形的重量，字重的等級(jí)用來(lái)標(biāo)明同一字體家族不同粗細(xì)筆畫(huà)的字形。

但通常一個(gè)特定的字體家族僅會(huì)包含少數(shù)的可用重量。若一個(gè)指定的字重不存在時(shí)，CSS會(huì)就近匹配其他字重：較重的字重映射到更重的重量、較輕的字重會(huì)映射到更輕的重量。

目前落地頁(yè)代碼中字體的設(shè)置，安卓使用的第一順位的字體字重僅2檔字重，所以在小字場(chǎng)景和分辨率較低的安卓機(jī)型上，會(huì)匹配到更粗的字重，出現(xiàn)文字沾粘的情況。

我們調(diào)整了font-family中的字體適配順位，在安卓端優(yōu)先適配字重更全的字體，保證安卓端加粗字體的展現(xiàn)，優(yōu)化內(nèi)容可讀性。

· 提升閱讀效率

· 優(yōu)化字間距和行間距

閱讀場(chǎng)景下，文字的間距是影響閱讀效率的關(guān)鍵。文字的間距包括兩部分，第一是橫向字與字的間距；其次是縱向行與行的間距。

根據(jù)當(dāng)前現(xiàn)狀，再結(jié)合行業(yè)設(shè)計(jì)經(jīng)驗(yàn)，我們選擇了字號(hào)與行高倍數(shù)組合的一系列方案，進(jìn)行了眼動(dòng)實(shí)驗(yàn)和用戶訪談，確定用戶可接受的行間距為1.50-1.70的范圍，再通過(guò)對(duì)比不同機(jī)型下的屏幕顯示效果，以及不同檔位字體顯示效果、閱讀效率，最后確定了圖文落地頁(yè)正文文字在當(dāng)前方案基礎(chǔ)上縮字間距為0，擴(kuò)大行間距1.70倍行號(hào)的設(shè)計(jì)方案。

· 段落間距適配字號(hào)

圖文落地頁(yè)的定位是長(zhǎng)文閱讀場(chǎng)景，作者發(fā)文長(zhǎng)度的中位數(shù)是600-700字的范圍，以目前用戶使用量最多的iPhone11舉例，600-700字的文章長(zhǎng)度為2屏（純文字，無(wú)圖情況）。

對(duì)于長(zhǎng)文閱讀，用戶往往是缺乏耐心的。為讓用戶減少對(duì)長(zhǎng)文的“畏懼感”，調(diào)整文章段落間距，一篇長(zhǎng)文通過(guò)合理的分段，成為一段一段的短文，每結(jié)束一段短文，用戶都有機(jī)會(huì)進(jìn)行休息并獲得滿足感。

出于屏效考慮，當(dāng)前圖文落地頁(yè)段落間距不論用戶使用哪一檔字號(hào)，都為一個(gè)固定值。所以在調(diào)大字號(hào)的模式下，段落間距小，用戶難以區(qū)分；在小字模式下，段落間距又太大，降低了屏效。

優(yōu)化段落間距的設(shè)定，段落間距應(yīng)隨著字號(hào)的變化對(duì)應(yīng)做出變大或變小的調(diào)整。調(diào)整后的最大字號(hào)與最小字號(hào)段落間距都更合適，閱讀節(jié)奏更好。

· 頁(yè)面美觀，提升吸引力

書(shū)籍排版中“微觀字體排印”中一直都關(guān)注字距、行距、標(biāo)點(diǎn)符號(hào)等排版調(diào)整，這些排印規(guī)則大部分源于文字本身的規(guī)律，排版風(fēng)格和規(guī)范，并不隨著設(shè)計(jì)潮流而輕易改變，是需要在所有媒介上都應(yīng)遵循的規(guī)則。但是現(xiàn)在的UI排版中幾乎都沒(méi)有遵循，這也是我們經(jīng)常覺(jué)得UI頁(yè)面上的中文排版看起來(lái)不精致的原因。

通過(guò)學(xué)習(xí)W3C《中文排版需求》《中華人民共和國(guó)國(guó)家標(biāo)準(zhǔn)-標(biāo)點(diǎn)符號(hào)的用法》等中文排版規(guī)范文檔中對(duì)標(biāo)點(diǎn)等微觀排版的調(diào)整思路，并結(jié)合UI場(chǎng)景落地，希望從細(xì)節(jié)處提升頁(yè)面美觀度和吸引力。

· 優(yōu)化標(biāo)題，突出內(nèi)容

在標(biāo)點(diǎn)使用規(guī)范中對(duì)標(biāo)題中標(biāo)點(diǎn)符號(hào)的使用有嚴(yán)格的定義：標(biāo)題的作用是概括表明文章內(nèi)容，一般標(biāo)題中除書(shū)名號(hào)、引號(hào)等表示專用名詞的符號(hào)外，不應(yīng)該出現(xiàn)標(biāo)點(diǎn)符號(hào)，題中停頓可用空格表示。如確實(shí)因需要表明語(yǔ)意而必須使用標(biāo)點(diǎn)符號(hào)時(shí)，應(yīng)使用同號(hào)的半角標(biāo)點(diǎn)，標(biāo)題末尾除問(wèn)號(hào)或嘆號(hào)外，一般不使用其他標(biāo)點(diǎn)符號(hào)。

但在實(shí)際UI界面中，我們無(wú)法在生產(chǎn)端對(duì)作者使用的不規(guī)范標(biāo)點(diǎn)符號(hào)進(jìn)行逐一的確認(rèn)、修正。UI需要的是展示規(guī)則，保證多種內(nèi)容最后都能有良好的視覺(jué)呈現(xiàn)。

在不修改作者不規(guī)范標(biāo)點(diǎn)使用的前提下，優(yōu)化標(biāo)題中標(biāo)點(diǎn)符號(hào)的寬度：將標(biāo)題中引號(hào)、書(shū)名號(hào)使用半角標(biāo)點(diǎn)；連續(xù)標(biāo)點(diǎn)將前一位標(biāo)點(diǎn)使用半角標(biāo)點(diǎn)，其余標(biāo)點(diǎn)不變，目的是在保持標(biāo)題基本閱讀節(jié)奏感的同時(shí)，減少標(biāo)點(diǎn)在標(biāo)題中的占位，突出標(biāo)題內(nèi)容。

· 標(biāo)點(diǎn)首尾禁則

在中文排版規(guī)則中，為了保持閱讀順暢、體例一致，多數(shù)標(biāo)點(diǎn)符號(hào)的位置有限制，通常一個(gè)標(biāo)點(diǎn)符號(hào)依其性質(zhì)，禁止出現(xiàn)在行首或行尾。這項(xiàng)規(guī)則自活字排版時(shí)代開(kāi)始通行。在中文排版里面這項(xiàng)標(biāo)點(diǎn)規(guī)則叫“標(biāo)點(diǎn)首尾禁則”。

如何執(zhí)行這種標(biāo)點(diǎn)規(guī)避，平面排版中處理遵守“先推入，后推出”原則，即不希望標(biāo)點(diǎn)符號(hào)出現(xiàn)在行首時(shí)，應(yīng)在已經(jīng)標(biāo)點(diǎn)擠壓的基礎(chǔ)上再次檢查是否有機(jī)會(huì)將其擠到前一行，如沒(méi)有擠壓機(jī)會(huì)再?gòu)那耙恍腥∽詈笠粋€(gè)字至下一行。前行多出來(lái)的空間需按照優(yōu)先順序拉伸，最后沒(méi)有拉伸機(jī)會(huì)再按平均拉大字距的方式處理。

但“先推入，后推出”原則在UI場(chǎng)景中實(shí)現(xiàn)難度太大，意味著在判斷每個(gè)標(biāo)點(diǎn)位置的時(shí)候，還需要進(jìn)行多次邏輯判斷，技術(shù)成本太高。因此我們以效率優(yōu)先，將“先推入，后推出”原則修改為“推出式標(biāo)點(diǎn)避頭尾”，即從上一行推出一個(gè)字排在下行的行首，避免行首、行末出現(xiàn)禁排的標(biāo)點(diǎn)符號(hào)。

雖然由“先推入，后推出”退階為“僅推出式標(biāo)點(diǎn)避頭尾”，但整體文章還是避免了標(biāo)點(diǎn)出現(xiàn)在行首尾情況，遵循了中文排版基礎(chǔ)規(guī)范。

· 連續(xù)標(biāo)點(diǎn)擠壓

中文的標(biāo)點(diǎn)符號(hào)通常占1個(gè)字符寬度，便于識(shí)別、配置和排版，但當(dāng)頁(yè)面中連續(xù)出現(xiàn)2個(gè)及以上的標(biāo)點(diǎn)符號(hào)的時(shí)候，文章上會(huì)出現(xiàn)一塊空白，這些空洞會(huì)使在閱讀時(shí)候增加文字間距，使文字過(guò)于跳躍，增加讀者理解內(nèi)容的時(shí)間，造成腦眼勞累；同時(shí)會(huì)造成版心灰度的不均衡，影響視覺(jué)美感。

標(biāo)點(diǎn)符號(hào)字面分為“可調(diào)整”和“不可調(diào)整”兩類，“可調(diào)整”的標(biāo)點(diǎn)符號(hào)標(biāo)點(diǎn)本身在字面左、字面右、字面居中，可縮減掉標(biāo)點(diǎn)不占位部分的空間。

不可調(diào)整的標(biāo)點(diǎn)包括：半字連接號(hào)、間隔號(hào)、分隔號(hào)，因?yàn)檫@幾個(gè)標(biāo)點(diǎn)固定半個(gè)字寬。

在《中文排版標(biāo)準(zhǔn)》里面說(shuō)明：當(dāng)文中出現(xiàn)連續(xù)標(biāo)點(diǎn)符號(hào)排列時(shí)，為了使文字更加緊湊、易讀，應(yīng)該對(duì)標(biāo)點(diǎn)符號(hào)的寬度進(jìn)行調(diào)整。如果兩個(gè)符號(hào)占用2個(gè)字寬，應(yīng)當(dāng)縮減成1.5個(gè)字寬。在此原則上，允許排版風(fēng)格進(jìn)一步調(diào)整讓兩個(gè)符號(hào)只占1個(gè)字寬。擠壓方向應(yīng)該是標(biāo)點(diǎn)符號(hào)緊靠?jī)?nèi)容，擠壓掉離內(nèi)容遠(yuǎn)的空間。

根據(jù)這一原則，我們?cè)诖a中設(shè)置當(dāng)連續(xù)出現(xiàn)兩個(gè)及以上的標(biāo)點(diǎn)時(shí)，擠壓第二位及以后的標(biāo)點(diǎn)為半角，縮減連續(xù)標(biāo)點(diǎn)時(shí)的占位，減少閱讀時(shí)候的視覺(jué)跳躍，減少文章中出現(xiàn)的“空洞”。

· 完整設(shè)計(jì)方案

回顧整個(gè)設(shè)計(jì)方案，包括了3個(gè)部分：

1、對(duì)比屏顯字體與印刷字體，結(jié)合字體的字重，優(yōu)化字體家族選擇范圍與展示順位，優(yōu)化內(nèi)容可讀性。

2、通過(guò)眼動(dòng)實(shí)驗(yàn)、可用性測(cè)試調(diào)整字間距、行間距和段落間距，優(yōu)化閱讀節(jié)奏，提升閱讀效率。

3、學(xué)習(xí)W3C《中文排版標(biāo)準(zhǔn)》等規(guī)范，吸取中文排印優(yōu)良傳統(tǒng)，通過(guò)對(duì)內(nèi)容中標(biāo)點(diǎn)符號(hào)等微觀細(xì)致的調(diào)整。使正文區(qū)頁(yè)面能夠保持字距均勻，版面齊整、灰度均衡。從標(biāo)點(diǎn)細(xì)節(jié)提升頁(yè)面美觀度和吸引力。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：百度MEUX   來(lái)源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司