百度智能小程序設(shè)計指南-頁面布局
- 威海自媒體運營與推廣 威海百度智能小程序運營
- 2361
基礎(chǔ)布局
基于寬度 750px（iPhone 6）輸出視覺方案，我們在布局智能小程序信息時，為信息內(nèi)容區(qū)至少留出左右邊距 34px（17pt），限制內(nèi)容寬度以獲得最佳的可讀性。
正確
內(nèi)容左右邊距應(yīng)至少留出34px。
錯誤
邊距過寬，頁面元素過于集中。
錯誤
邊距過窄，頁面元素過于分散。
透明框架布局適配
當開發(fā)者使用小程序的原生頂部導(dǎo)航欄時，開發(fā)者只需要在頂部導(dǎo)航欄下方開始布局頁面即可。
智能小程序在基礎(chǔ)庫 2.10.7 及以上版本，可以自定義頂部導(dǎo)航欄，使其只保留框架控制功能區(qū)，后文簡稱為“透明框架”。
1. 默認框架，使用小程序頂部導(dǎo)航欄；
1. 透明框架。
透明框架下，頁面布局從屏幕頂部開始，請注意頁面內(nèi)容應(yīng)布局在安全區(qū)內(nèi)，否則會導(dǎo)致信息閱讀體驗差，或可點擊元素功能不可用。
小程序透明框架的安全區(qū) = 屏幕 -（系統(tǒng)狀態(tài)欄（1） + 框架控制功能區(qū)（2））
正確
頁面元素和功能均在安全區(qū)內(nèi)展現(xiàn)。
錯誤
頁面元素和功能超出安全區(qū)，無法正常使用。
上滑頁面時，為保證元素正常顯示，可以為系統(tǒng)狀態(tài)欄區(qū)域單獨賦予背景顏色。
頁面上滑時，內(nèi)容可能與系統(tǒng)狀態(tài)欄上的內(nèi)容交疊，建議此時為系統(tǒng)狀態(tài)欄加上背景色。
全面屏頂部導(dǎo)航欄適配
原生頂部導(dǎo)航欄適配策略
當開發(fā)者使用小程序的頂部導(dǎo)航欄時，我們會針對不同劉海屏機型進行適配，開發(fā)者只需要在頂部導(dǎo)航欄下方開始布局頁面即可。
自定義頂部導(dǎo)航欄適配
但如果使用自定義頂部導(dǎo)航欄（透明框架），此時開發(fā)者需要自行適配。
左：全面屏iPhone 安全區(qū) = 屏幕 -（系統(tǒng)狀態(tài)欄（1） + 框架控制功能區(qū)（2）+ 底部指示區(qū)（3））
右：全面屏安卓手機 安全區(qū) = 屏幕 -（系統(tǒng)狀態(tài)欄（1） + 框架控制功能區(qū)（2））
全面屏手機的劉海高度等同于系統(tǒng)狀態(tài)欄的高度。
通過系統(tǒng)信息接口getSystemInfoSync獲得系統(tǒng)狀態(tài)欄的高度（statusBarHeight），在全面屏手機頁面布局中增加系統(tǒng)狀態(tài)欄的高度。
正確
正確考慮狀態(tài)欄高度
錯誤
元素被遮擋，顯示不全。
注意：全面屏 iPhone 底部適配
在布局上，全面屏 iPhone 需要格外關(guān)注底部橫條（Home Indicator）的配置。
全面屏 iPhone 的底部橫條默認透明，如開發(fā)者使用小程序底部標簽欄，底部橫條會自動適配底部標簽欄的背景顏色。
1. 默認底部橫條透明；
2. 使用底部標簽欄，自動適配底部橫條。
當開發(fā)者未使用底部標簽欄組件，而是自主開發(fā)底部欄（如購物欄，評論欄），需注意此區(qū)域不可布局可操作元素，避免誤操作。
可以調(diào)用小程序提供的.view_css適配全面屏 iPhone，把底部橫條顏色適配為與底部欄一致。
正確
底部橫條已正確配置，顏色與底部欄一致。
錯誤
底部橫條未正確配置。
來源：百度智能小程序
