編輯導(dǎo)語：據(jù)閱讀調(diào)查報道，移動閱讀成為了主流。手機百度作為億級用戶每天閱讀文章、獲取資訊的產(chǎn)品，內(nèi)容的閱讀體驗尤為重要。本篇作者就對圖文閱讀體驗優(yōu)化進行了探索，與你分享，一起來看一下。

根據(jù)2020年中國新聞出版研究院第十七次全國國民閱讀調(diào)查，國民數(shù)字化閱讀方式的接觸率79.3%，其中手機閱讀接觸率達76.1%，移動閱讀成為主流。

手機百度作為億級用戶每天閱讀文章、獲取資訊的產(chǎn)品，內(nèi)容的閱讀體驗尤為重要。

一、研究思路

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

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

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

三、設(shè)計差異點

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

1. 屏幕上可以實現(xiàn)更多的交互功能，增強了閱讀的沉浸感和交互體驗。
2. UI設(shè)計不可控因素更多。平面排版紙張和內(nèi)容固定可控，可以保證設(shè)計的精準展示。但在UI設(shè)計中，想讓頁面達到和原本設(shè)計一模一樣的效果幾乎是不可能的，顯示屏幕尺寸的碎片化、內(nèi)容的靈活可變，都讓最后的展示效果多了很多不可預(yù)期。這就是為什么會有很多排版優(yōu)秀的印刷品設(shè)計，但UI中優(yōu)秀的排版設(shè)計卻特別少。

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

四、明確設(shè)計目標(biāo)

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

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

1. 舒適（Comfort)：視覺負擔(dān)低，信息適量，看著不累、沒有信息壓迫感。
2. 效率（Efficiency）：重點信息突出，直觀性強，容易識別。
3. 吸引（Attraction）：頁面設(shè)計美觀，有吸引力。

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

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

1. 選擇屏顯友好字體

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

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

2）字形簡潔，平直少細節(jié)的筆畫有助于提高字體本身的辨識。

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

2. 選擇字重更全的字體

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

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

字重，即字形的重量，字重的等級用來標(biāo)明同一字體家族不同粗細筆畫的字形。

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

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

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

六、提升閱讀效率

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

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

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

2. 段落間距適配字號

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

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

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

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

3. 頁面美觀，提升吸引力

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

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

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

在標(biāo)點使用規(guī)范中對標(biāo)題中標(biāo)點符號的使用有嚴格的定義：

標(biāo)題的作用是概括表明文章內(nèi)容，一般標(biāo)題中除書名號、引號等表示專用名詞的符號外，不應(yīng)該出現(xiàn)標(biāo)點符號，題中停頓可用空格表示。如確實因需要表明語意而必須使用標(biāo)點符號時，應(yīng)使用同號的半角標(biāo)點，標(biāo)題末尾除問號或嘆號外，一般不使用其他標(biāo)點符號。

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

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

5. 標(biāo)點首尾禁則

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

如何執(zhí)行這種標(biāo)點規(guī)避，平面排版中處理遵守“先推入，后推出”原則，即不希望標(biāo)點符號出現(xiàn)在行首時，應(yīng)在已經(jīng)標(biāo)點擠壓的基礎(chǔ)上再次檢查是否有機會將其擠到前一行，如沒有擠壓機會再從前一行取最后一個字至下一行。前行多出來的空間需按照優(yōu)先順序拉伸，最后沒有拉伸機會再按平均拉大字距的方式處理。

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

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

6. 連續(xù)標(biāo)點擠壓

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

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

不可調(diào)整的標(biāo)點包括：半字連接號、間隔號、分隔號，因為這幾個標(biāo)點固定半個字寬。

在《中文排版標(biāo)準》里面說明：

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

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

7. 完整設(shè)計方案

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

1. 對比屏顯字體與印刷字體，結(jié)合字體的字重，優(yōu)化字體家族選擇范圍與展示順位，優(yōu)化內(nèi)容可讀性。
2. 通過眼動實驗、可用性測試調(diào)整字間距、行間距和段落間距，優(yōu)化閱讀節(jié)奏，提升閱讀效率。
3. 學(xué)習(xí)W3C《中文排版標(biāo)準》等規(guī)范，吸取中文排印優(yōu)良傳統(tǒng)，通過對內(nèi)容中標(biāo)點符號等微觀細致的調(diào)整。使正文區(qū)頁面能夠保持字距均勻，版面齊整、灰度均衡。從標(biāo)點細節(jié)提升頁面美觀度和吸引力。

七、項目總結(jié)

此次設(shè)計改版通過對字體、間距、標(biāo)點，從宏觀、微觀兩個層面的排版規(guī)則優(yōu)化圖文落地頁內(nèi)容的排版展現(xiàn)，提升圖文的閱讀體驗。其中特別是微觀排版細則，從傳統(tǒng)中文排印學(xué)中吸取經(jīng)驗，在新的終端、新的場景落地傳統(tǒng)優(yōu)秀的排版細則。這也是在UI設(shè)計中長期缺乏的。

作為一款每天幾億用戶使用的中文資訊產(chǎn)品，我們有責(zé)任有義務(wù)去重拾優(yōu)秀的排印傳統(tǒng)，提升中文閱讀體驗。

基于目前的技術(shù)等限制，我們這次的嘗試能實現(xiàn)的排版調(diào)整也是有限的，在未來我們也會更全面、系統(tǒng)學(xué)習(xí)排版規(guī)范，不斷提升屏幕閱讀的用戶體驗，在屏幕閱讀體驗中產(chǎn)生不遜色于紙質(zhì)閱讀的良好體驗。

參考資料

1. 《新聞類APP該如何選擇屏顯字體？》[E].https://dy.163.com/article/FAMEIHEN053862DE.html
2. 第十七次全國國民閱讀調(diào)查成果發(fā)布[E].http://www.nppa.gov.cn/nppa/contents/280/45906.shtml
3. 《第一代中文屏顯宋體》[E].https://mp.weixin.qq.com/s/B7_8VOVBVnQixmze5-7dJA
4. 《屏幕字體與印刷字體設(shè)計上有什么區(qū)別？什么字體最適合屏幕閱讀？》[E].https://www.zhihu.com/question/35107221/answer/72522641
5. 《屏幕解析率（PPI）越來越高，襯線體是否會成為電子設(shè)備的主要界面字體？》[E].https://www.zhihu.com/question/24769323
6. 《中文排版需求》[J/OL].https://www.w3.org/TR/clreq/#introduction
7. 《孔雀計劃：中文字體排印的思路》[EB/OL].https://www.thetype.com/kongque/
8. 《排版基礎(chǔ)知識（第四版）》[M].北京：印刷出版社，2011.12
9. 《當(dāng)代排版技術(shù)概論》[M].北京：印刷出版社，1994.6
10. 《深入了解font-weight》[E].https://aotu.io/notes/2016/11/08/css3fontweight/

作者：百度MEUX，百度移動生態(tài)用戶體驗設(shè)計中心，負責(zé)百度移動生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗設(shè)計

本文由 @百度MEUX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議