百度智能小程序应该如何布局更美观？小程序布局方法（3）

百度智能小程序 2019-03-21 00:30:09 字数：733

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

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

阅读排版

阅读视线流

“从左往右，从上往下”是中国用户在阅读浏览内容的习惯，所以在信息排版时，应该把最主要的信息内容放在屏幕左上侧。

认真沉浸阅读(Z型)

就是我们平时阅读书籍和内容的阅读习惯

快速扫视浏览(锯齿型)

从上至下垂直扫描，只扫描大的重点和感兴趣的内容

注意需要注意的是，传统中文的竖向排版虽然挺好看的，但是阅读效率极其低下，请各位开发者谨慎使用。

错误案例

正文内容杂乱，横版竖排版混合使用，观众阅读视线不知道该放在哪里

字体

如果用户手机系统未自定义字体，那么百度智能小程序应该按照下图展示字体的优先级：

为了字体可以更加美观，可以在小程序的默认字体库里增加自定义的字体。

图1案例：当开发者使用“楷体”时候，如果用户的手机有楷体字体，则会显示楷体字体。

图2案例：当开发者使用“楷体”时候，如果用户的手机无楷体字体，则会显示默认字体。

字号

常用字号贴在下图，各位开发者可以酌情选用

颜色

常用颜色贴在下图，各位开发者可以酌情选用

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

百度智能小程序应该如何布局更美观？小程序布局方法（1）

百度智能小程序应该如何布局更美观？小程序布局方法（2）

百度智能小程序应该如何布局更美观？小程序布局方法（4）

百度智能小程序应该如何布局更美观？小程序布局方法（5）

上一篇：百度智能小程序应该如何布局更美观？小程序布局方法（4）

下一篇：百度智能小程序应该如何布局更美观？小程序布局方法（2）

0人参与回答

未添加任何数据~~

热点相关推荐

快捷栏目

Messages Timeline Exceptions Views6 Route Queries7 Mails Auth Gate Session Request

586.16ms2MBGET zixun/detail/{id?}.html

Booting (14.46ms)
Application (574.84ms)

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

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


obLevel
__env
app
device
isMobile
errors
prevArticle
nextArticle
newDetail
comment
hotnews
t
d
k
__empty_1
__currentLoopData
loop
hotnewsVal

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


obLevel
__env
app
device
isMobile
errors
prevArticle
nextArticle
newDetail
comment
hotnews
t
d
k
__empty_1
__currentLoopData
loop
hotnewsVal

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


obLevel
__env
app
device
isMobile
errors
prevArticle
nextArticle
newDetail
comment
hotnews
t
d
k
__empty_1
__currentLoopData
loop
hotnewsVal

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


obLevel
__env
app
device
isMobile
errors
prevArticle
nextArticle
newDetail
comment
hotnews
t
d
k
__empty_1
__currentLoopData
loop
hotnewsVal

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


obLevel
__env
app
device
isMobile
errors
prevArticle
nextArticle
newDetail
comment
hotnews
t
d
k
__empty_1
__currentLoopData
loop
hotnewsVal

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 executed561.57ms

select * from `news` where `news`.`id` = '26367' and `news`.`deleted_at` is null limit 12.22ms/app/Http/Controllers/Site/ZixunController.php:109zzshuju

Metadata
Bindings	0. 26367
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 null460μ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 10544.14ms/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:56:40' where `id` = '26367' and `news`.`deleted_at` is null

7.33ms/app/Http/Model/News/News.php:170zzshuju

Metadata
Bindings	0. 2025-05-14 21:56:40 1. 26367
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` < '26367' and `newscate_id` = '139' and `news`.`deleted_at` is null order by `id` desc limit 1

6.26ms/app/Http/Controllers/Site/ZixunController.php:115zzshuju

Metadata
Bindings	0. 26367 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` > '26367' and `newscate_id` = '139' and `news`.`deleted_at` is null order by `id` asc limit 1

720μs/app/Http/Controllers/Site/ZixunController.php:116zzshuju

Metadata
Bindings	0. 26367 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` = '26367'440μs/app/Http/Controllers/Site/ZixunController.php:117zzshuju

Metadata
Bindings	0. 26367
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: Crc7fR8GfWG1A1oFe99dHN8EGQYZPlbvpwJdVvZr
_previous: array:1 [ "url" => "http://data.winndoo.cn/zixun/detail/26367.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/26367.html
session_attributes: array:3 [ "_token" => "Crc7fR8GfWG1A1oFe99dHN8EGQYZPlbvpwJdVvZr" "_previous" => array:1 [ "u...

热点相关推荐

快捷栏目

提示信息