智能小程序设计规范

智能小程序设计规范

智能连接人与信息、人与服务、人与万物的开放生态， 依托以百度App为代表的全域流量，通过百度AI开放式赋能， 精准连接用户，无需下载安装便可享受智慧超前的使用体验。

布局

布局指南

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

在布局时，请重点考虑：

1. 通过合理布局，表达不同信息权重：

用户浏览内容的顺序是“从上往下，从左往右”，因此，在布局信息时，我们应该把主要的信息/操作放在屏幕的上半部分和左侧；此外，更大的文字字号、更抢眼的颜色也能起到权重表达辅助，具体请参考文字章节 。

2. 为可点击操作控件设置合适的点击热区：

考虑到用户手指操作精准度，我们建议可点击操作的响应点击的热区大于等于88x88px（44pt），最小不能小于72x72px（36pt），且点击间不重叠。

文字

智能小程序文字使用规则与百度App保持一致

智能小程序内文字常用字号为48，36，32，28，26(px)，使用场景具体如下：

图片

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

我们在设计智能小程序时，需要使用清晰的图片，模糊像素感的图片会降低页面的整体质感。自定义配置：图片尺寸，轮播图组图片数量（最少2张，最多5张）和自动切换时间（默认3s）。

图标

图标能辅助信息的表达，建议按场景优化选用合适的通用图标样式

应使用几何图形进行图标绘制，图标风格应简洁、辨识性强、统一

更多图标源文件请下载百度App智能小程序UIKIT

智能小程序提供了不同场景使用的组件，其视觉样式及交互模式与百度App保持一致

智能小程序常用内容组件样式如下（非全集），更多组件类型和详情说明请参考组件章节，相关的视觉资源请下载百度App智能小程序UIKIT。

措辞

设计文案时，语气应友好、谦逊、可靠、积极，并专注聚集于用户

1. 称谓说明

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

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

注1：避免在同一内容中混合使用“你”和“我”，以免造成用户困扰，如：“在我的订单中修改你的地址”

注2：措辞应让用户的注意力放在操作上，而不是强调应用自身“我们”的功劳，如“我们猜你喜欢”，“我们即将为你播放下一段视频”

2. 符号说明

使用中文标点符号，如“，”“。”，而不是”,””.”

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

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

3. 用词说明

考虑到用户的多样性，在不影响信息传达的前提下，使用中文表达。

用词应面向用户，避免行业专用术语、缩写或生造概念，如：“Tab栏”，“Feed流”，“服务器数据异常”等

为保证句子简洁，适当地省略常见短语，如“收藏成功”更优于“你已将此网页成功收藏至收藏中心”