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