編輯導語：據閱讀調查報道，移動閱讀成為了主流。手機百度作為億級使用者每天閱讀文章、獲取資訊的產品，內容的閱讀體驗尤為重要。本篇作者就對圖文閱讀體驗最佳化進行了探索，與你分享，一起來看一下。
根據2020年中國新聞出版研究院第十七次全國國民閱讀調查，國民數字化閱讀方式的接觸率79。3%，其中手機閱讀接觸率達76。1%，移動閱讀成為主流。
手機百度作為億級使用者每天閱讀文章、獲取資訊的產品，內容的閱讀體驗尤為重要。
一、研究思路
從紙質閱讀到螢幕閱讀，透過理解使用者從紙質到螢幕閱讀行為的轉變，我們從傳統中文排印經驗中吸取對字型、間距、標點的處理方式，跨越平面與UI不同終端的設計規範和實現手段。在UI設計的語境中調整中文排版策略，最佳化手機百度圖文閱讀場景設計，提升手百使用者的閱讀體驗。
二、螢幕閱讀與紙質閱讀不同
人的閱讀習慣會根據閱讀環境而改變，包括文字的書寫格式、文字的媒介、語言符號等。基於螢幕的閱讀行為，往往表現瞭如下特徵：很少人會一字一句閱讀頁面，更多的是在瀏覽、關鍵詞確認、非線性閱讀、有選擇性的閱讀。
三、設計差異點
UI設計與書籍排版不同之處在於：
螢幕上可以實現更多的互動功能，增強了閱讀的沉浸感和互動體驗。
UI設計不可控因素更多。平面排版紙張和內容固定可控，可以保證設計的精準展示。但在UI設計中，想讓頁面達到和原本設計一模一樣的效果幾乎是不可能的，顯示螢幕尺寸的碎片化、內容的靈活可變，都讓最後的展示效果多了很多不可預期。這就是為什麼會有很多排版優秀的印刷品設計，但UI中優秀的排版設計卻特別少。
因此，針對螢幕閱讀的設計要注意：
不能照搬文字排版規則，更要充分考慮螢幕與內容的靈活可變，確保設計方案可實際落地。
四、明確設計目標
本次設計改版主要針對手機百度——圖文落地頁部分，希望透過最佳化文字展現、內容排版提升閱讀體驗。
CEA閱讀體驗模型將使用者的閱讀體驗分為舒適、效率、吸引三個緯度。
舒適（Comfort）：視覺負擔低，資訊適量，看著不累、沒有資訊壓迫感。
效率（Efficiency）：重點資訊突出，直觀性強，容易識別。
吸引（Attraction）：頁面設計美觀，有吸引力。
基於此模型，此次最佳化方案中我們確定的設計目標是：
最佳化內容可讀性、提升閱讀效率、提升頁面美觀度。
五、最佳化內容可讀性
1。 選擇屏顯友好字型
屏顯字型與印刷用字型最大的不同在於，屏顯字型受限於解析度，無法做到印刷字型那麼多細節的設計。目前屏顯漢字的設計方式一般是：
1）從字型的結構入手，擴大中宮的設計，字形設計看起來舒適放鬆，提升辨識度，相較於中宮內縮的字型，呈現現代的明亮感。
2）字形簡潔，平直少細節的筆畫有助於提高字型本身的辨識。
遍歷手百使用者常用手機的預設字型，系統預設字型都是使用屏顯友好字型。
2。 選擇字重更全的字型
與紙質閱讀相比，使用者在在螢幕閱讀中，會經常進行掃讀、關鍵詞確認，而不是像在紙質書上一字一句的讀。
目前我們提供給作者的能夠做重點資訊區別的方式包括：文字加粗、風格化二級標題。但我們發現目前在一些安卓手機上，一些字型在增加字重後出現沾粘情況，不能保證可讀性。
字重，即字形的重量，字重的等級用來標明同一字型家族不同粗細筆畫的字形。
但通常一個特定的字型家族僅會包含少數的可用重量。若一個指定的字重不存在時，CSS會就近匹配其他字重：較重的字重對映到更重的重量、較輕的字重會對映到更輕的重量。
目前落地頁程式碼中字型的設定，安卓使用的第一順位的字型字重僅2檔字重，所以在小字場景和解析度較低的安卓機型上，會匹配到更粗的字重，出現文字沾粘的情況。
我們調整了font-family中的字型適配順位，在安卓端優先適配字重更全的字型，保證安卓端加粗字型的展現，最佳化內容可讀性。
六、提升閱讀效率
1。 最佳化字間距和行間距
閱讀場景下，文字的間距是影響閱讀效率的關鍵。文字的間距包括兩部分，第一是橫向字與字的間距；其次是縱向行與行的間距。
根據當前現狀，再結合行業設計經驗，我們選擇了字號與行高倍數組合的一系列方案，進行了眼動實驗和使用者訪談，確定使用者可接受的行間距為1。50-1。70的範圍，再透過對比不同機型下的螢幕顯示效果，以及不同檔位字型顯示效果、閱讀效率，最後確定了圖文落地頁正文文字在當前方案基礎上縮字間距為0，擴大行間距1。70倍行號的設計方案。
2。 段落間距適配字號
圖文落地頁的定位是長文閱讀場景，作者發文長度的中位數是600-700字的範圍，以目前使用者使用量最多的iPhone11舉例，600-700字的文章長度為2屏（純文字，無圖情況）。
對於長文閱讀，使用者往往是缺乏耐心的。為讓使用者減少對長文的“畏懼感”，調整文章段落間距，一篇長文透過合理的分段，成為一段一段的短文，每結束一段短文，使用者都有機會進行休息並獲得滿足感。
出於屏效考慮，當前圖文落地頁段落間距不論使用者使用哪一檔字號，都為一個固定值。所以在調大字號的模式下，段落間距小，使用者難以區分；在小字模式下，段落間距又太大，降低了屏效。
最佳化段落間距的設定，段落間距應隨著字號的變化對應做出變大或變小的調整。調整後的最大字號與最小字號段落間距都更合適，閱讀節奏更好。
3。 頁面美觀，提升吸引力
書籍排版中“微觀字型排印”中一直都關注字距、行距、標點符號等排版調整，這些排印規則大部分源於文字本身的規律，排版風格和規範，並不隨著設計潮流而輕易改變，是需要在所有媒介上都應遵循的規則。但是現在的UI排版中幾乎都沒有遵循，這也是我們經常覺得UI頁面上的中文排版看起來不精緻的原因。
透過學習W3C《中文排版需求》《中華人民共和國國家標準-標點符號的用法》等中文排版規範文件中對標點等微觀排版的調整思路，並結合UI場景落地，希望從細節處提升頁面美觀度和吸引力。
4。 最佳化標題，突出內容
在標點使用規範中對標題中標點符號的使用有嚴格的定義：
標題的作用是概括表明文章內容，一般標題中除書名號、引號等表示專用名詞的符號外，不應該出現標點符號，題中停頓可用空格表示。如確實因需要表明語意而必須使用標點符號時，應使用同號的半形標點，標題末尾除問號或歎號外，一般不使用其他標點符號。
但在實際UI介面中，我們無法在生產端對作者使用的不規範標點符號進行逐一的確認、修正。UI需要的是展示規則，保證多種內容最後都能有良好的視覺呈現。
在不修改作者不規範標點使用的前提下，最佳化標題中標點符號的寬度：將標題中引號、書名號使用半形標點；連續標點將前一位標點使用半形標點，其餘標點不變，目的是在保持標題基本閱讀節奏感的同時，減少標點在標題中的佔位，突出標題內容。
5。 標點首尾禁則
在中文排版規則中，為了保持閱讀順暢、體例一致，多數標點符號的位置有限制，通常一個標點符號依其性質，禁止出現在行首或行尾。這項規則自活字排版時代開始通行。在中文排版裡面這項標點規則叫“標點首尾禁則”。
如何執行這種標點規避，平面排版中處理遵守“先推入，後推出”原則，即不希望標點符號出現在行首時，應在已經標點擠壓的基礎上再次檢查是否有機會將其擠到前一行，如沒有擠壓機會再從前一行取最後一個字至下一行。前行多出來的空間需按照優先順序拉伸，最後沒有拉伸機會再按平均拉大字距的方式處理。
但“先推入，後推出”原則在UI場景中實現難度太大，意味著在判斷每個標點位置的時候，還需要進行多次邏輯判斷，技術成本太高。因此我們以效率優先，將“先推入，後推出”原則修改為“推出式標點避頭尾”，即從上一行推出一個字排在下行的行首，避免行首、行末出現禁排的標點符號。
雖然由“先推入，後推出”退階為“僅推出式標點避頭尾”，但整體文章還是避免了標點出現在行首尾情況，遵循了中文排版基礎規範。
6。 連續標點擠壓
中文的標點符號通常佔1個字元寬度，便於識別、配置和排版，但當頁面中連續出現2個及以上的標點符號的時候，文章上會出現一塊空白，這些空洞會使在閱讀時候增加文字間距，使文字過於跳躍，增加讀者理解內容的時間，造成腦眼勞累；同時會造成版心灰度的不均衡，影響視覺美感。
標點符號字面分為“可調整”和“不可調整”兩類，“可調整”的標點符號標點本身在字面左、字面右、字面居中，可縮減掉標點不佔位部分的空間。
不可調整的標點包括：半字連線號、間隔號、分隔號，因為這幾個標點固定半個字寬。
在《中文排版標準》裡面說明：
當文中出現連續標點符號排列時，為了使文字更加緊湊、易讀，應該對標點符號的寬度進行調整。如果兩個符號佔用2個字寬，應當縮減成1。5個字寬。在此原則上，允許排版風格進一步調整讓兩個符號只佔1個字寬。擠壓方向應該是標點符號緊靠內容，擠壓掉離內容遠的空間。
根據這一原則，我們在程式碼中設定當連續出現兩個及以上的標點時，擠壓第二位及以後的標點為半形，縮減連續標點時的佔位，減少閱讀時候的視覺跳躍，減少文章中出現的“空洞”。
7。 完整設計方案
回顧整個設計方案，包括了3個部分：
對比屏顯字型與印刷字型，結合字型的字重，最佳化字型家族選擇範圍與展示順位，最佳化內容可讀性。
透過眼動實驗、可用性測試調整字間距、行間距和段落間距，最佳化閱讀節奏，提升閱讀效率。
學習W3C《中文排版標準》等規範，吸取中文排印優良傳統，透過對內容中標點符號等微觀細緻的調整。使正文區頁面能夠保持字距均勻，版面齊整、灰度均衡。從標點細節提升頁面美觀度和吸引力。
七、專案總結
此次設計改版透過對字型、間距、標點，從宏觀、微觀兩個層面的排版規則最佳化圖文落地頁內容的排版展現，提升圖文的閱讀體驗。其中特別是微觀排版細則，從傳統中文排印學中吸取經驗，在新的終端、新的場景落地傳統優秀的排版細則。這也是在UI設計中長期缺乏的。
作為一款每天幾億使用者使用的中文資訊產品，我們有責任有義務去重拾優秀的排印傳統，提升中文閱讀體驗。
基於目前的技術等限制，我們這次的嘗試能實現的排版調整也是有限的，在未來我們也會更全面、系統學習排版規範，不斷提升螢幕閱讀的使用者體驗，在螢幕閱讀體驗中產生不遜色於紙質閱讀的良好體驗。
參考資料
《新聞類APP該如何選擇屏顯字型？》［E］。https：//dy。163。com/article/FAMEIHEN053862DE。html
第十七次全國國民閱讀調查成果釋出［E］。http：//www。nppa。gov。cn/nppa/contents/280/45906。shtml
《第一代中文屏顯宋體》［E］。https：//mp。weixin。qq。com/s/B7_8VOVBVnQixmze5-7dJA
《螢幕字型與印刷字型設計上有什麼區別？什麼字型最適合螢幕閱讀？》［E］。https：//www。zhihu。com/question/35107221/answer/72522641
《螢幕解析率（PPI）越來越高，襯線體是否會成為電子裝置的主要介面字型？》［E］。https：//www。zhihu。com/question/24769323
《中文排版需求》［J/OL］。https：//www。w3。org/TR/clreq/#introduction
《孔雀計劃：中文字型排印的思路》［EB/OL］。https：//www。thetype。com/kongque/
《排版基礎知識（第四版）》［M］。北京：印刷出版社，2011。12
《當代排版技術概論》［M］。北京：印刷出版社，1994。6
《深入瞭解font-weight》［E］。https：//aotu。io/notes/2016/11/08/css3fontweight/
作者：百度MEUX，百度移動生態使用者體驗設計中心，負責百度移動生態體系的使用者/商業產品的全鏈路體驗設計
本文由 @百度MEUX 原創釋出於人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議
