百度智能小程序应该如何布局更美观?小程序布局方法(1)
搜外网
百度智能小程序 2019-03-21 00:30:13 字数:981

百度智能小程序是百度在2018年新开发的重点项目,在2019年百度将投入更多到百度智能小程序里,有望一举超越微信小程序和支付宝小程序。如果等百度智能小程序火爆全国再去做肯定是晚了,所以从现在开始就要开始动手,勇敢吃螃蟹的人才能获得最好的红利!

在以前的文章里,我们讲过百度智能小程序是什么、怎样做好百度智能小程序体验设计、百度智能小程序接入自然搜索的步骤,今天我们就来讲讲百度智能小程序应该如何布局。


页面布局


基础布局

iPhone 6手机作为主流机型,他的尺寸为宽度750px,我们可以以iPhone 6手机为标准模板输出视觉方案。

在布局百度智能小程序的信息时,必须要为信息和内容区域留出至少左右边距离34px(17pt),以获得更美观的界面和可读性。


正确案例

内容页面的左右边距应留出至少34px(17pt)的距离。

1-1.png


错误案例

边距过宽,不适合阅读和美观度。

1-2.png


错误案例

边距过窄,不适合阅读和美观度。

1-3.png


透明框架布局适配


1. 小程序框架

开发者如果要使用百度智能小程序的原生的顶部导航栏,只需要在顶部导航栏下方进行布局页面即可,不用其他的操作。

百度App v11.1及以上版本的百度智能小程序,还可以自定义顶部的导航栏,使顶部导航栏只保留框架控制的功能区,这种功能也叫做透明框架,后文也会提到。

2.png


图1是默认框架。

图2是透明框架。

在透明框架的情况下,页面布局从屏幕顶部开始。

3.png

百度智能小程序的透明框架的安全区 = 屏幕 -(系统状态栏(1) + 框架控制功能区(2)),大家根据图片看即可。


正确案例

页面的元素以及功能都在安全区内展现。

4-1.png


错误案例

页面元素和功能超出安全区,用户看着会感觉少了一部分或者很别扭。

4-2.png


2. 小游戏框架

由于小游戏框架没有系统状态栏,布局时只需要考虑避让框架控制功能区。

6.png


左图:竖屏小游戏框架的安全区 = 屏幕 - 框架控制功能区(1);

右图:横屏小游戏框架的安全区 = 屏幕 - 框架控制功能区(1)。


正确案例

页面元素全都在安全区内展现。

1-12.png


错误案例

页面元素超出安全区,用户在使用的时候会少看到很多东西,影响用户体验。

32.png


本篇是系列文章,请点击查看接下来的文章:

百度智能小程序应该如何布局更美观?小程序布局方法(2)

百度智能小程序应该如何布局更美观?小程序布局方法(3)

百度智能小程序应该如何布局更美观?小程序布局方法(4)

百度智能小程序应该如何布局更美观?小程序布局方法(5)


0人参与回答
  • 未添加任何数据~~


提示信息

联系电话:
1585150508*
QQ交谈:
小编
站长微信:
站长邮箱: service@qingjiuzhubei.com
186.53msRequest Duration2MBMemory UsageGET zixun/detail/{id?}.htmlRouteAuth status
    • Booting (9.91ms)
    • Application (178.82ms)
      6 templates were rendered
      • site.zixun.detail (resources/views/site/zixun/detail.blade.php)8blade
        Params
        0
        prevArticle
        1
        nextArticle
        2
        newDetail
        3
        comment
        4
        hotnews
        5
        t
        6
        d
        7
        k
      • layouts.site.layout (resources/views/layouts/site/layout.blade.php)18blade
        Params
        0
        obLevel
        1
        __env
        2
        app
        3
        device
        4
        isMobile
        5
        errors
        6
        prevArticle
        7
        nextArticle
        8
        newDetail
        9
        comment
        10
        hotnews
        11
        t
        12
        d
        13
        k
        14
        __empty_1
        15
        __currentLoopData
        16
        loop
        17
        hotnewsVal
      • layouts.site.top (resources/views/layouts/site/top.blade.php)18blade
        Params
        0
        obLevel
        1
        __env
        2
        app
        3
        device
        4
        isMobile
        5
        errors
        6
        prevArticle
        7
        nextArticle
        8
        newDetail
        9
        comment
        10
        hotnews
        11
        t
        12
        d
        13
        k
        14
        __empty_1
        15
        __currentLoopData
        16
        loop
        17
        hotnewsVal
      • layouts.site.bottom (resources/views/layouts/site/bottom.blade.php)18blade
        Params
        0
        obLevel
        1
        __env
        2
        app
        3
        device
        4
        isMobile
        5
        errors
        6
        prevArticle
        7
        nextArticle
        8
        newDetail
        9
        comment
        10
        hotnews
        11
        t
        12
        d
        13
        k
        14
        __empty_1
        15
        __currentLoopData
        16
        loop
        17
        hotnewsVal
      • common.upgrade_vip (resources/views/common/upgrade_vip.blade.php)18blade
        Params
        0
        obLevel
        1
        __env
        2
        app
        3
        device
        4
        isMobile
        5
        errors
        6
        prevArticle
        7
        nextArticle
        8
        newDetail
        9
        comment
        10
        hotnews
        11
        t
        12
        d
        13
        k
        14
        __empty_1
        15
        __currentLoopData
        16
        loop
        17
        hotnewsVal
      • kefu.kefu (resources/views/kefu/kefu.blade.php)18blade
        Params
        0
        obLevel
        1
        __env
        2
        app
        3
        device
        4
        isMobile
        5
        errors
        6
        prevArticle
        7
        nextArticle
        8
        newDetail
        9
        comment
        10
        hotnews
        11
        t
        12
        d
        13
        k
        14
        __empty_1
        15
        __currentLoopData
        16
        loop
        17
        hotnewsVal
      uri
      GET zixun/detail/{id?}.html
      middleware
      web
      controller
      App\Http\Controllers\Site\ZixunController@detail
      namespace
      App\Http\Controllers
      prefix
      /zixun
      where
      as
      zixunDetail
      file
      app/Http/Controllers/Site/ZixunController.php:105-132
      7 statements were executed164.11ms
      • select * from `news` where `news`.`id` = '26369' and `news`.`deleted_at` is null limit 11.65ms/app/Http/Controllers/Site/ZixunController.php:109zzshuju
        Metadata
        Bindings
        • 0. 26369
        Hints
        • Use SELECT * only if you need all columns from table
        • LIMIT without ORDER BY causes non-deterministic results, depending on the query execution plan
        Backtrace
        • 14. /app/Http/Controllers/Site/ZixunController.php:109
        • 22. /vendor/silber/page-cache/src/Middleware/CacheResponse.php:38
        • 56. /public/index.php:53
      • select * from `new_cates` where `new_cates`.`id` in ('139') and `new_cates`.`deleted_at` is null390μs/app/Http/Controllers/Site/ZixunController.php:109zzshuju
        Metadata
        Bindings
        • 0. 139
        Hints
        • Use SELECT * only if you need all columns from table
        Backtrace
        • 19. /app/Http/Controllers/Site/ZixunController.php:109
        • 27. /vendor/silber/page-cache/src/Middleware/CacheResponse.php:38
        • 61. /public/index.php:53
      • select * from `news` where `news`.`deleted_at` is null order by `browse` desc limit 10152.59ms/app/Http/Controllers/Site/ZixunController.php:110zzshuju
        Metadata
        Hints
        • Use SELECT * only if you need all columns from table
        Backtrace
        • 12. /app/Http/Controllers/Site/ZixunController.php:110
        • 20. /vendor/silber/page-cache/src/Middleware/CacheResponse.php:38
        • 54. /public/index.php:53
      • update `news` set `browse` = `browse` + 1, `updated_at` = '2025-05-14 21:38:40' where `id` = '26369' and `news`.`deleted_at` is null4.08ms/app/Http/Model/News/News.php:170zzshuju
        Metadata
        Bindings
        • 0. 2025-05-14 21:38:40
        • 1. 26369
        Backtrace
        • 12. /app/Http/Model/News/News.php:170
        • 13. /app/Http/Controllers/Site/ZixunController.php:111
        • 21. /vendor/silber/page-cache/src/Middleware/CacheResponse.php:38
        • 55. /public/index.php:53
      • select * from `news` where `id` < '26369' and `newscate_id` = '139' and `news`.`deleted_at` is null order by `id` desc limit 14.46ms/app/Http/Controllers/Site/ZixunController.php:115zzshuju
        Metadata
        Bindings
        • 0. 26369
        • 1. 139
        Hints
        • Use SELECT * only if you need all columns from table
        Backtrace
        • 13. /app/Http/Controllers/Site/ZixunController.php:115
        • 21. /vendor/silber/page-cache/src/Middleware/CacheResponse.php:38
        • 55. /public/index.php:53
      • select * from `news` where `id` > '26369' and `newscate_id` = '139' and `news`.`deleted_at` is null order by `id` asc limit 1600μs/app/Http/Controllers/Site/ZixunController.php:116zzshuju
        Metadata
        Bindings
        • 0. 26369
        • 1. 139
        Hints
        • Use SELECT * only if you need all columns from table
        Backtrace
        • 13. /app/Http/Controllers/Site/ZixunController.php:116
        • 21. /vendor/silber/page-cache/src/Middleware/CacheResponse.php:38
        • 55. /public/index.php:53
      • select * from `comments` where `news_id` = '26369'340μs/app/Http/Controllers/Site/ZixunController.php:117zzshuju
        Metadata
        Bindings
        • 0. 26369
        Hints
        • Use SELECT * only if you need all columns from table
        Backtrace
        • 12. /app/Http/Controllers/Site/ZixunController.php:117
        • 20. /vendor/silber/page-cache/src/Middleware/CacheResponse.php:38
        • 54. /public/index.php:53
        web
        array:2 [ "name" => "Guest" "user" => array:1 [ "guest" => true ] ]
        api
        array:2 [ "name" => "Guest" "user" => array:1 [ "guest" => true ] ]
          _token
          xMmM7wBPv3aD36gsqBUDBQmkuvEzV92oFXl81tDB
          _previous
          array:1 [ "url" => "http://data.winndoo.cn/zixun/detail/26369.html" ]
          PHPDEBUGBAR_STACK_DATA
          []
          format
          html
          content_type
          text/html; charset=UTF-8
          status_text
          OK
          status_code
          200
          request_query
          []
          request_request
          []
          request_headers
          array:10 [ "accept-encoding" => array:1 [ 0 => "gzip, deflate" ] "accept" => array:1 [ ...
          request_server
          array:33 [ "USER" => "apache" "HOME" => "/usr/share/httpd" "HTTP_ACCEPT_ENCODING" => "gzip, de...
          request_cookies
          []
          response_headers
          array:5 [ "cache-control" => array:1 [ 0 => "no-cache, private" ] "date" => array:1 [ ...
          path_info
          /zixun/detail/26369.html
          session_attributes
          array:3 [ "_token" => "xMmM7wBPv3aD36gsqBUDBQmkuvEzV92oFXl81tDB" "_previous" => array:1 [ "u...