百度智能小程序設(shè)計(jì)指南-閱讀排版

閱讀視線流

中國用戶在數(shù)字內(nèi)容瀏覽中普遍遵循“從左往右、從上往下”的閱讀視線流習(xí)慣，這一認(rèn)知慣性源于傳統(tǒng)文本閱讀的長期熏陶。在智能小程序的信息架構(gòu)與視覺排版中，需將核心內(nèi)容、關(guān)鍵入口及用戶最關(guān)注的信息優(yōu)先布局在屏幕左上側(cè)區(qū)域，以符合用戶視線移動(dòng)的自然路徑，降低信息獲取的認(rèn)知負(fù)荷，確保用戶在首次接觸頁面時(shí)能快速捕捉重點(diǎn)。

認(rèn)真沉浸閱讀（Z型）

針對(duì)需要深度理解、沉浸式閱讀的內(nèi)容模塊，如文章詳情、產(chǎn)品說明等，應(yīng)構(gòu)建Z型視線流模式。具體而言，文本內(nèi)容從左側(cè)起始邊界向右水平延伸完成一行閱讀后，視線自然下移至下一行左側(cè)，重復(fù)此水平移動(dòng)與垂直下移的循環(huán)過程，形成連貫的Z型軌跡。為強(qiáng)化該視線流，可通過設(shè)置合理的行間距（建議1.5-1.8倍行高）、段落留白及居中對(duì)齊的標(biāo)題，確保用戶視線在水平移動(dòng)后能準(zhǔn)確定位至下一行起始位置，避免因排版密集導(dǎo)致視線跳躍，保障深度閱讀的流暢性。

快速掃視瀏覽（鋸齒型）

針對(duì)以快速獲取關(guān)鍵信息為目的的瀏覽場(chǎng)景，如資訊列表、商品卡片等，宜采用鋸齒型視線流設(shè)計(jì)。用戶視線從上至下垂直掃描標(biāo)題、標(biāo)簽等高優(yōu)先級(jí)元素，當(dāng)發(fā)現(xiàn)感興趣的內(nèi)容時(shí)，視線從左向右水平移動(dòng)閱讀詳情描述。此模式下，可通過加粗標(biāo)題、圖標(biāo)引導(dǎo)、左對(duì)齊文本等方式強(qiáng)化垂直掃描時(shí)的信息識(shí)別效率，同時(shí)控制詳情文本長度，確保用戶在橫向移動(dòng)時(shí)能快速完成信息獲取，實(shí)現(xiàn)高效瀏覽。

注意事項(xiàng)

需特別注意的是，傳統(tǒng)中文豎向排版雖在特定文化場(chǎng)景中具有藝術(shù)價(jià)值，但在長文本閱讀場(chǎng)景下，其視線移動(dòng)路徑較長（需頻繁上下移動(dòng)），易造成視覺疲勞，閱讀效率顯著低于橫向排版。因此，除書法展示、詩詞賞析等特殊文化內(nèi)容外，小程序內(nèi)的文本內(nèi)容應(yīng)優(yōu)先采用橫向排版，確保信息傳遞的高效性。排版設(shè)計(jì)中應(yīng)嚴(yán)格避免橫豎排版混用的方式，例如同一頁面內(nèi)部分區(qū)域橫向排版、部分區(qū)域豎向排版。這種混用會(huì)導(dǎo)致用戶視線路徑零碎、方向混亂，增加認(rèn)知解碼成本，嚴(yán)重影響閱讀連貫性，不符合用戶對(duì)數(shù)字內(nèi)容的閱讀習(xí)慣，需堅(jiān)決杜絕。

字體規(guī)范

在字體呈現(xiàn)層面，當(dāng)用戶手機(jī)系統(tǒng)未設(shè)置自定義字體時(shí)，百度智能小程序?qū)⒆裱榷ǖ淖煮w響應(yīng)優(yōu)先級(jí)確保文本正常顯示。開發(fā)者可在小程序默認(rèn)字體庫基礎(chǔ)上，通過添加自定義字體庫實(shí)現(xiàn)品牌字體或特殊場(chǎng)景字體的應(yīng)用。具體而言，若開發(fā)者指定使用自定義字體（如“楷體”），當(dāng)用戶終端設(shè)備支持該字體時(shí)，將優(yōu)先展示自定義字體；若用戶終端無此字體，則按預(yù)設(shè)優(yōu)先級(jí)依次切換至備用字體，直至系統(tǒng)默認(rèn)字體——iOS平臺(tái)為“蘋方-簡(jiǎn)”，安卓平臺(tái)為“Droid Sans”，確保字體加載的容錯(cuò)性與用戶體驗(yàn)的一致性。

字號(hào)設(shè)計(jì)

字號(hào)設(shè)計(jì)是建立頁面信息層級(jí)的核心手段，需通過不同字號(hào)區(qū)分主次信息，同時(shí)為保障整體頁面可讀性，單個(gè)模塊內(nèi)的字號(hào)種類建議不超過3種。智能小程序提供多檔基礎(chǔ)字號(hào)用于布局適配，開發(fā)者應(yīng)根據(jù)內(nèi)容場(chǎng)景選擇合適字號(hào)：常規(guī)閱讀文本建議采用17pt及以上字號(hào)，確保長時(shí)間閱讀的舒適度；可點(diǎn)擊的文本按鈕、標(biāo)簽等交互元素建議采用12pt及以上字號(hào)，兼顧可點(diǎn)擊性與視覺識(shí)別度。字號(hào)選擇還需結(jié)合屏幕尺寸適配原則，在高清屏幕上適當(dāng)增大字號(hào)，保證不同設(shè)備下的閱讀清晰度。

顏色應(yīng)用

文本顏色的應(yīng)用需基于信息層級(jí)與使用場(chǎng)景進(jìn)行規(guī)范定義，以構(gòu)建清晰的視覺引導(dǎo)體系。核心信息可采用黑色（#000000），次要信息使用深灰色（#333333），輔助信息適用中灰色（#999999），附屬信息則采用淺灰色（#CCCCCC）。在功能場(chǎng)景中，藍(lán)色（#1890FF）常用于文字鏈接或表達(dá)操作完成狀態(tài)，傳遞引導(dǎo)性與正向反饋；紅色（#FF4D4F）則適用于警告、錯(cuò)誤等需用戶立即注意的場(chǎng)景，通過高對(duì)比度強(qiáng)化警示效果。顏色應(yīng)用需確保與背景的對(duì)比度符合無障礙標(biāo)準(zhǔn)，避免低對(duì)比度導(dǎo)致的閱讀障礙。