百度智能小程序是百度在2018年新開發(fā)的重點(diǎn)項(xiàng)目,在2019年百度將投入更多到百度智能小程序里,有望一舉超越微信小程序和支付寶小程序。如果等百度智能小程序火爆全國再去做肯定是晚了,所以從現(xiàn)在開始就要開始動(dòng)手,勇敢吃螃蟹的人才能獲得最好的紅利!
在以前的文章里,我們講過百度智能小程序是什么、怎樣做好百度智能小程序體驗(yàn)設(shè)計(jì)、百度智能小程序接入自然搜索的步驟,今天我們就來講講百度智能小程序應(yīng)該如何布局。
全面屏適配
1. 小程序框架
劉海手機(jī)已經(jīng)成為現(xiàn)如今手機(jī)的主流趨勢,開發(fā)者只要在頂部導(dǎo)航欄的下方布局頁面即可,百度智能小程序官方會(huì)針對不同劉海屏幕的機(jī)型進(jìn)行適配,方便開發(fā)者的開發(fā)。
但是百度智能小程序只能針對普通版本進(jìn)行適配,如果使用透明框架的開發(fā)者,則需要自行適配。
左圖:劉海iPhone的安全區(qū) = 屏幕 -(系統(tǒng)狀態(tài)欄(1) + 框架控制功能區(qū)(2)+ 底部指示區(qū)(3))
一般劉海iPhone劉海高度為44pt,我們可以參考這個(gè)數(shù)值。
右圖:劉海安卓手機(jī)的安全區(qū) = 屏幕 -(系統(tǒng)狀態(tài)欄(1) + 框架控制功能區(qū)(2))
一般劉海安卓手機(jī)的劉海高度=系統(tǒng)狀態(tài)欄高度,我們可以參考這個(gè)數(shù)值。
正確案例
正確考慮狀態(tài)欄高度,頁面的元素以及功能都在安全區(qū)內(nèi)展現(xiàn)。
錯(cuò)誤案例
頁面元素和功能超出安全區(qū),導(dǎo)致元素重疊,用戶看著會(huì)感覺少了一部分或者很別扭。
2. 小游戲框架
豎屏小游戲
左圖:劉海iPhone的安全區(qū) = 屏幕 -(頂部劉海區(qū)(1) + 框架控制功能區(qū)(2)+ 底部指示區(qū)(3))
右圖:劉海安卓手機(jī)的安全區(qū) = 屏幕 -(頂部劉海區(qū)(1) + 框架控制功能區(qū)(2))
橫屏小游戲
左圖:劉海iPhone的安全區(qū) = 屏幕 -(頂部劉海區(qū)(1) + 框架控制功能區(qū)(2)+ 底部指示區(qū)(3))
右圖:劉海安卓手機(jī)的安全區(qū) = 屏幕 -(頂部劉海區(qū)(1) + 框架控制功能區(qū)(2))
3. 注意:劉海iPhone底部適配
劉海iPhone的底部橫條默認(rèn)透明,高度為34pt,如開發(fā)者使用劉海iPhone百度智能小程序的底部標(biāo)簽欄,需要格外關(guān)注底部橫條的配置,只有自動(dòng)適配后底部標(biāo)簽欄才會(huì)出現(xiàn)背景顏色。
左圖:默認(rèn)底部橫條透明
右圖:使用底部標(biāo)簽欄,自動(dòng)適配底部橫條
開發(fā)者可以自行按照喜歡的樣式來調(diào)配和使用。
當(dāng)開發(fā)者未使用底部標(biāo)簽欄組件,而是選擇自主開發(fā),千萬要注意這個(gè)區(qū)域?qū)儆诓豢刹季值强刹僮鞯脑亍?/p>
正確案例
底部橫條進(jìn)行了正確配置,顏色與底部欄一致,頁面十分美觀。
錯(cuò)誤案例
底部橫條未進(jìn)行正確配置,用戶會(huì)感覺很別扭。
本篇是系列文章,請點(diǎn)擊查看接下來的文章:
百度智能小程序應(yīng)該如何布局更美觀?小程序布局方法(1)
百度智能小程序應(yīng)該如何布局更美觀?小程序布局方法(3)
百度智能小程序應(yīng)該如何布局更美觀?小程序布局方法(4)
百度智能小程序應(yīng)該如何布局更美觀?小程序布局方法(5)
閱讀本文的人還可以閱讀: