百度智能小程序應該如何布局更美觀?小程序布局方法(2)

1670次閱讀

百度智能小程序是百度在2018年新開發(fā)的重點項目,在2019年百度將投入更多到百度智能小程序里,有望一舉超越微信小程序和支付寶小程序。如果等百度智能小程序火爆全國再去做肯定是晚了,所以從現(xiàn)在開始就要開始動手,勇敢吃螃蟹的人才能獲得最好的紅利!

在以前的文章里,我們講過百度智能小程序是什么、怎樣做好百度智能小程序體驗設計、百度智能小程序接入自然搜索的步驟,今天我們就來講講百度智能小程序應該如何布局。


全面屏適配


1. 小程序框架

劉海手機已經(jīng)成為現(xiàn)如今手機的主流趨勢,開發(fā)者只要在頂部導航欄的下方布局頁面即可,百度智能小程序官方會針對不同劉海屏幕的機型進行適配,方便開發(fā)者的開發(fā)。

8.png


但是百度智能小程序只能針對普通版本進行適配,如果使用透明框架的開發(fā)者,則需要自行適配。

9.png

左圖:劉海iPhone的安全區(qū) = 屏幕 -(系統(tǒng)狀態(tài)欄(1) + 框架控制功能區(qū)(2)+ 底部指示區(qū)(3))

一般劉海iPhone劉海高度為44pt,我們可以參考這個數(shù)值。

右圖:劉海安卓手機的安全區(qū) = 屏幕 -(系統(tǒng)狀態(tài)欄(1) + 框架控制功能區(qū)(2))

一般劉海安卓手機的劉海高度=系統(tǒng)狀態(tài)欄高度,我們可以參考這個數(shù)值。


正確案例

正確考慮狀態(tài)欄高度,頁面的元素以及功能都在安全區(qū)內(nèi)展現(xiàn)。

10-1.png


錯誤案例

頁面元素和功能超出安全區(qū),導致元素重疊,用戶看著會感覺少了一部分或者很別扭。

10-2.png


2. 小游戲框架


豎屏小游戲

11.png


左圖:劉海iPhone的安全區(qū) = 屏幕 -(頂部劉海區(qū)(1) + 框架控制功能區(qū)(2)+ 底部指示區(qū)(3))

右圖:劉海安卓手機的安全區(qū) = 屏幕 -(頂部劉海區(qū)(1) + 框架控制功能區(qū)(2))


橫屏小游戲

12.png

左圖:劉海iPhone的安全區(qū) = 屏幕 -(頂部劉海區(qū)(1) + 框架控制功能區(qū)(2)+ 底部指示區(qū)(3))

右圖:劉海安卓手機的安全區(qū) = 屏幕 -(頂部劉海區(qū)(1) + 框架控制功能區(qū)(2))


3. 注意:劉海iPhone底部適配

劉海iPhone的底部橫條默認透明,高度為34pt,如開發(fā)者使用劉海iPhone百度智能小程序的底部標簽欄,需要格外關注底部橫條的配置,只有自動適配后底部標簽欄才會出現(xiàn)背景顏色。

13.png13.png


左圖:默認底部橫條透明

右圖:使用底部標簽欄,自動適配底部橫條

開發(fā)者可以自行按照喜歡的樣式來調(diào)配和使用。

當開發(fā)者未使用底部標簽欄組件,而是選擇自主開發(fā),千萬要注意這個區(qū)域?qū)儆诓豢刹季值强刹僮鞯脑亍?/p>


正確案例

底部橫條進行了正確配置,顏色與底部欄一致,頁面十分美觀。

14-1.png


錯誤案例

底部橫條未進行正確配置,用戶會感覺很別扭。

14-2.png


本篇是系列文章,請點擊查看接下來的文章:

百度智能小程序應該如何布局更美觀?小程序布局方法(1)

百度智能小程序應該如何布局更美觀?小程序布局方法(3)

百度智能小程序應該如何布局更美觀?小程序布局方法(4)

百度智能小程序應該如何布局更美觀?小程序布局方法(5)


閱讀本文的人還可以閱讀:

怎樣做好百度智能小程序體驗設計(1)

百度智能小程序在搜索引擎里的展現(xiàn)方式是怎樣的?

百度智能小程序是什么?百度智能小程序注冊方法

百度智能小程序值得做嗎?怎么找百度智能小程序二維碼?

本文由夫唯團隊編輯,如發(fā)現(xiàn)錯誤,歡迎通過客服微信反饋。

夫唯于2024年12月停止百度SEO研究和培訓。道別信: 夫唯:再見了百度SEO!

2025年1月正式啟動Google SEO培訓課程,一千零一夜帶領大家一起出海。

感興趣的同學,請?zhí)砑诱猩头∧⑿牛簊eowhy2021。 微信掃碼添加客服人員

我們的目標:讓大家獨立站出海不再“望洋興嘆”。

国产综合亚洲欧洲区精品无码,欧美一级免费一区二区,精品一级片高清无码,亚洲成片在线无码看 www.sucaiwu.net
Processed in 1.627592 Second , 602 querys.