设计规范

字体

当用户手机系统未自定义字体时，小程序遵循以下字体展现响应优先级：

开发者可以在小程序默认字体库的基础上，增加自定义字体库。

开发者使用自定义字体“楷体”; 当用户手机有此自定义字体时，显示自定义“楷体”。

开发者使用自定义字体“楷体”；用户手机无楷体时，按下一优先级字体显示，保底情况为显示系统默认字体：（1）iOS-苹方-简；（2）安卓-Droid Sans；

字号

请合理使用不同字号来区分页面的主次信息，与为了达到整体页面信息最佳可读性，单个模块字号选择不建议超过 3 种。
智能小程序提供以下几档基础字号用于页面布局，建议按场景使用适合的字号，常用场景字号建议如下：

注：建议阅读文本使用17pt及以上，可点击文本按钮使用12pt及以上。

正文内容区规范

1.正文标题：正文内容区规范 字号 72px ，行距 36px ，中粗体。

2.正文文字：字号 57px ，行距 33px ，中粗体。

3.列表文字：列表标题字号 57px ，字色 #000000 ；辅助信息字号 36px ，字色 #999999 。

4.信息来源：作者头像大小 105x105px ；名称字号 48px ，字色 #000000 ；发布时间等辅助信息字号 36px ，字色 #999999 。

视频区规范

横向视频 资源展示可以使用小程序 video 视频组件，宽 ：高 = 16：9 。
竖向视频 资源展示最低高度 ≥ 屏幕宽度 ；最高高度 ≤ 屏幕高度 * 78% 。

1.标题文字：字号 57px ，行距 24px ，中粗体，字色 #000000 。

2.辅助信息区：字号 36px ，行距 18px ，字色 #999999 。

3.作者信息区： 作者头像大小 105x105px ；名称字号 48px ，字色 #000000 ；辅助信息字号 36px ，字色 #999999 ；辅助信息与名称间距 21px 。

相关推荐区规范

排版样式：可采用大图样式或者左文右图列表样式，视频封面尺寸为 16：9 。
列表文字：列表标题字号 51px ，字色 #000000 ；辅助信息字号 36px ，字色 #999999 。

颜色

建议按使用场景定义文本颜色，常用场景文本颜色建议如下：

1.主要信息#000000，次要信息#333333，辅助信息使用#999999，附属信息使用#CCCCCC。

2.蓝色用于文字链接或表达提醒和完成，红色用于警告和出错场景。

为方便小程序开发团队的视觉设计师进行小程序设计，小程序团队提供常用的视觉设计组件资源。

附：百度小程序组件源文件sketch

链接: https://pan.baidu.com/s/1tmVOcXuOsa0IGCtiljhJng  密码: 0nf6

按钮

按钮允许用户点击，并触发对应的操作。

大按钮

大按钮高度固定为 88px，圆角大小固定 8px。
自定义配置：按钮文案（建议不超过 8 个中文字符）。

小按钮

小按钮高度固定为 56px，宽度最小 114px，圆角大小固定 6px。
按钮内边距最小 30px，文字较长时，按钮可按所需宽度拉伸适配。

悬浮按钮

开发者可以在智能小程序页面放置悬浮按钮，为了减少对内容遮挡和用户阅读体验的影响，我们建议使用 88px 的悬浮按钮。

1. 视觉组件库中的设计示例；

2. 替换图标时，新图标大小建议占悬浮按钮整体宽度的50%；
   

3. 功能名称无法用图标表达，可以使用文字表达，不建议超过8个中文字符。
   

   
   

图片图标

图片

图片比文字更吸引用户，能丰富页面内容。

请使用清晰的图片，像素低的图片会降低页面的整体质感。

图标

使用图标风格应简洁、辨识性强，建议按场景绘制或内容分类入口。

智能小程序常用图标库

1. 彩色图标，多应用于页面中的重点内容分类入口（金刚位）；

2. 单色图标，多应用于框架或基础页面的功能。

列表

列表是由多个等宽列表项组成的、按一定规律的连续条目排列，支持上下垂直滚动。
列表条目整体响应点击操作；右侧带选择控件的列表，控件区点击优先响应相应功能。

LOGO 输出

小程序 LOGO 将在开发者平台、百度 App、小程序页面内以圆形外观展现；请使用清晰、合适大小的 LOGO 切图，以保证在界面展现上的美观和完整。

输出规格

输出原则

1. 小程序 LOGO 输出需保证主体元素的完整性，不能被前端圆形容器裁切

2. 小程序 LOGO 为单体元素，元素在图片整体尺寸中的占比建议在 70%以上，最好不超过 80%

1.设计建议：LOGO的主体元素在方形或圆形参考线内；

2.前端展现效果：能在圆形轮廓中展现完全。

如小程序 LOGO 为“图形+文字”的上下组合，或左右组合形式，应至少预留整体图片的 20%作为出血区

阅读排版

阅读视线流

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

页面布局

基础布局

基于宽度 750px（iPhone 6）输出视觉方案，我们在布局智能小程序信息时，为信息内容区至少留出左右边距 34px（17pt），限制内容宽度以获得最佳的可读性。

自定义顶部导航栏

基础库 2.10.7 及以上版本的智能小程序，支持自定义顶部导航栏，使其只保留框架控制功能区。

使用自定义导航栏前，请了解透明框架的页面布局基础，此时原生顶部导航栏中的容器、框架内部导航功能区、页面标题均不展示，开发者可自定义当前页面的顶部导航栏。

建议，在使用自定义导航栏时，通过系统信息接口 getSystemInfoSync 获得系统状态栏的高度（statusBarHeight），并为系统状态栏配置与自定义导航栏背景一致的颜色。

自定义导航栏的元素建议与控制功能区对齐，且与原生顶部导航栏（navigationBarHeight）高度水平居中对齐。

当访问小程序首页时，自定义导航栏默认展现右侧菜单与关闭功能。访问小程序其他页面（非首页）时，除展现菜单与关闭外，左上角还会展现返回功能，用于返回上一页面，不支持隐藏或调整位置，因此设置自定义功能时请合理避让。自定义功能所需图标，建议使用 Smart UI 官方设计资产，保证图标设计的一致性。

个性定制

黑色元素

默认顶部导航栏元素为黑，状态栏颜色跟随；容器背景默认为白色，但可被配置。

自定义配置容器背景颜色时，请重点关注信息的可识别性和整体阅读舒适度。

白色元素

顶部导航栏元素配置为白时，状态栏颜色跟随；容器背景可被配置。

自定义配置容器背景颜色时，请重点关注信息的可识别性和整体阅读舒适度。

用户体验设计

措辞

称谓说明

• 大多数情况下，使用第二人称“你”称呼用户，就像直接和用户说话一样，如：“展示你的个性”。

• 某些情况下，可能会使用第一人称“我”，以强调用户对内容/操作的知情和操作权，如：“我的订单”。

  
  

避免在同一内容中混合使用“你”和“我”，以免造成用户困扰，如：“在我的订单中修改你的地址”。
措辞应让用户的注意力放在操作上，而不是强调应用自身“我们”的功劳，如避免使用：“我们猜你喜欢”，“我们即将为你播放下一段视频”。

用词说明

• 考虑面向的主要是普通用户，在不影响信息传达的前提下，尽量使用中文表达。

• 设计文案时，语气应友好、谦逊、可靠、积极，并专注聚集于用户。避免行业专用术语、缩写或生造概念，如：“Tab 栏”，“Feed 流”，“服务器数据异常”等。

• 为保证句子简洁，可使用短语，如“收藏成功”更优于“你已将此网页成功收藏至收藏中心”。

  
  

标点符号

• 使用中文全角标点符号，如“，”“。”，而不是”,”；

• 疑问句结尾时，请使用“？”，如：“确认不再收听吗？”；

• 感叹号“！”语气过于强烈，必须慎用，尤其不要在错误提示时使用。

引导关注

引导关注组件可帮助开发者提示和引导用户进行“关注小程序”这一操作。用户通过引导关注组件“关注小程序”后，可以在“百度 App - 我的”中找到我的小程序。

气泡引导

气泡引导是一种轻量引导组件，固定指向小程序框架的菜单入口。
它既不会阻塞用户后续行为，也不要求用户响应操作，在一定时间内向用户展现信息，便自动消失。
引导内容为“关注小程序，下次使用更便捷”，暂不支持开发者自定义。

展现策略

用户无操作，则 5s 后自动消失；用户点击菜单，或者切换页面，气泡引导马上消失。

交互设计

顶部导航栏

顶部导航栏始终固定在屏幕顶部，不随页面滚动隐藏。
智能小程序会自动继承小程序首页顶部导航栏的配置，但每个页面均可配置其顶部导航栏。即同一智能小程序中，不但可同时存在原生顶部导航栏和自定义导航栏，也可为每个页面定制不同的样式。 

原生顶部导航栏

原生顶部导航栏默认由智能小程序框架统一提供，用于控制整体小程序，指示当前位置及辅助小程序内部页面导航。

内部页面“页面标题”名称放中间，导航功能区处于标题左侧，小程序框架控制功能区居两端。

1.容器
2.内部页面导航功能区
3.页面标题（可选）
4.框架控制功能区

1. 容器

容器承载了顶部导航栏的功能，为其明确了导航区域。
顶部导航栏容器默认背景白色，开发者也可以配置相应的颜色。

普通手机（1）和iPhone X（2）的页面布局都从顶部导航栏窗口底部开始。
iOS状态栏会随着顶部导航栏元素和容器背景自动改变颜色。

2. 内部页面导航功能区

当用户处于小程序首页时，此区域不展现任何功能。 

其他页面下，根据场景展现：1. 返回：用于返回上一页面； 2. 回首页：用于返回小程序首页。

3. 页面标题

页面标题用于辅助和指示用户当前的位置，它通常描述当前页面 / 功能名称，或当前智能小程序的名称。
顶部导航栏默认展现页面标题，开发者也可以选择将其隐藏。
当标题过长时自动截断，但截断可能会导致用户误解。为保证主流机型显示，建议页面标题不超过 8 个中文字符。

4. 框架控制功能区

此区域为所有的小程序统一提供：

 1.菜单：呼出菜单面板，内含夜间模式、分享等；

 2.关闭：关闭并退出当前小程序；

 3.返回：仅当非首页时由框架统一提供。

透明框架布局适配

当开发者使用小程序的原生顶部导航栏时，开发者只需要在顶部导航栏下方开始布局页面即可。
智能小程序在基础库 2.10.7 及以上版本，可以自定义顶部导航栏，使其只保留框架控制功能区，后文简称为“透明框架”。

1. 默认框架，使用小程序顶部导航栏；    2.透明框架。

透明框架下，页面布局从屏幕顶部开始，请注意页面内容应布局在安全区内，否则会导致信息阅读体验差，或可点击元素功能不可用。

小程序透明框架的安全区 = 屏幕 -（系统状态栏（1） + 框架控制功能区（2））

上滑页面时，为保证元素正常显示，可以为系统状态栏区域单独赋予背景颜色。

底部标签栏（ tabBar ）

底部标签栏通常用于首页横向视图导航的切换，它始终固定在屏幕底部，不随页面滚动隐藏。

元素解构

容器

标签导航栏容器可以放置2-5个标签选项，每个标签栏对应展现其相应的分类内容。

 容器颜色默认显示白色，开发者也可以配置相应的颜色，配置时请注意整体页面效果，设计侧建议可以参考后文的个性定制章节。

全面屏顶部导航栏适配

原生顶部导航栏适配策略

当开发者使用小程序的顶部导航栏时，我们会针对不同刘海屏机型进行适配，开发者只需要在顶部导航栏下方开始布局页面即可。

自定义顶部导航栏适配

但如果使用自定义顶部导航栏（透明框架），此时开发者需要自行适配。

左：全面屏iPhone 安全区 = 屏幕 -（系统状态栏（1） + 框架控制功能区（2）+ 底部指示区（3））
右：全面屏安卓手机 安全区 = 屏幕 -（系统状态栏（1） + 框架控制功能区（2））

全面屏手机的刘海高度等同于系统状态栏的高度。
通过系统信息接口getSystemInfoSync获得系统状态栏的高度（statusBarHeight），在全面屏手机页面布局中增加系统状态栏的高度。

注意：全面屏 iPhone 底部适配

在布局上，全面屏 iPhone 需要格外关注底部横条（Home Indicator）的配置。
全面屏 iPhone 的底部横条默认透明，如开发者使用小程序底部标签栏，底部横条会自动适配底部标签栏的背景颜色。

1. 默认底部横条透明；    2. 使用底部标签栏，自动适配底部横条。

当开发者未使用底部标签栏组件，而是自主开发底部栏（如购物栏，评论栏），需注意此区域不可布局可操作元素，避免误操作。
可以调用小程序提供的.view_css适配全面屏 iPhone，把底部横条颜色适配为与底部栏一致。

模态对话框

提示框用于同步用户重要信息，并要求用户对此进行确认，或执行特定操作以决策下一步骤。作为模态组件，提示框出现时，蒙层覆盖原界面，以聚焦用户注意力于提示框上，原页面功能均无法使用；除非用户对其进行操作，提示框并不会自动消失。
综上，请谨慎使用提示框，因为它们会分散用户的注意力，并且打断用户的任务路径。

元素解构

智能小程序提供统一提示框，开发者可以配置其标题、内容及操作按钮的数量（1-2 个）和按钮文字颜色。

1.容器    2.标题（可选，可配）    3.内容（可配）    4.操作按钮（可配）    5.蒙层

标题

提示框的标题默认存在，用于明确提示的类型或主题，建议精简表达，控制在 8 个中文字符内。
如提示的内容简单，开发者可以选择去掉标题。

内容

内容通常作为标题的补充信息，旨在告知状态、信息和解决方法，表达精简。当表达为陈述词，且只有一句时，句尾不必以句号结尾；措辞时，不可使用强硬语气和标点符号“！”，减少压迫感。

对话框内容应精简，并控制在50汉字以内，但当内容说明不可避免需要详细说明时，提示框支持用户在内容区内上下滑动查看详细信息。此时。提示框标题、底部按钮，蒙层及背后的页面元素不会跟随滑动。

用户可以在此区域（1）内上下滑动查看更多内容。

操作区

支持 1-2 项操作，默认情况下为双操作按钮，左侧为“取消”（可选），右侧为“确定”。
按钮文案文字颜色和内容均可配，最多支持 4 个中文字符。

1.双操作按钮（默认）     2.单操作按钮

双操作按钮

对话框提供 2 种操作按钮时，必须一个是确定性操作，另一个是取消性或关闭性操作。要关闭对话框，需选择其中一个操作。操作文案使用规范请参见措辞章节。用户应该通过标题和按钮就能大致明白提示框的含义，最好在用词上有所呼应，如标题为“新版内测邀请”，确认按钮为“立即体验”。

单操作按钮

提示框用于同步用户重要信息时并仅要求其确认知晓，其操作区通常为单操作按钮。
根据场景不同，我们建议整体考虑按钮文案，最多可支持 4 个中文字符。

个性定制

提示框中，可个性定制样式的只有操作区的按钮文案颜色。
如默认样式所示，我们将“确认”按钮使用更高调的蓝色，“取消”按钮使用黑色，以在视觉展现上有主次之分，引导用户操作。若两个按钮都同等重要，也可以使用同一颜色，此时没有主次之分。

对于不可逆的重要操作，建议其按钮使用红色，警告用户此操作的重要性。

开发者还可以在按钮文字颜色上适合使用品牌色。但请注意，过多颜色并存，可能会影响用户判断。

用色上除了注意按钮主次展现、品牌外，还需要考虑是否与行业常用于特殊状态的颜色冲突，如红色、浅灰色等。

底部操作菜单

操作菜单用于显示用户操作某个控件时，出现选项列表。

元素解构

智能小程序提供统一操作面板，开发者可以配置其操作选项的数量（1-6 个）和文字颜色。

1. 容器     2.操作选项（可配）    3.取消    4.蒙层

操作选项

支持配置 1-6 项操作，操作文案建议精简表达，控制在 10 个中文字符内，用户应该通过操作文案能够快速理解选项的含义。

个性定制

操作菜单中，可个性定制样式的只有操作选项的文案颜色，且所有选项（除“取消”）统一配色。

用色上除了注意按钮主次展现、品牌外，还需要考虑是否与行业常用于特殊状态的颜色冲突，如红色、浅灰色等。

为方便小程序开发团队的视觉设计师进行小程序设计，小程序团队提供常用的视觉设计组件资源。

附：百度小程序组件源文件sketch

链接: https://pan.baidu.com/s/1tmVOcXuOsa0IGCtiljhJng  密码: 0nf6