百度小程序设计要求5个方面特别注意

在百度智能小程序的设计上，百度官方提出了5个要求，对于这些要求，运营者一定要特别注意，并且尽可能地按照要求来设计。

布局：重视排版视觉优先

很多时候，用户进入一款百度智能小程序的第一感受的来源，除了页面内容之外，更多的还是来自页面的布局排版。因此，运营者在设计百度智能小程序时一定要重视排版布局，优先考虑内容的视觉感受。

在布局排版方面，有几个方面需要特别注意。首先是内容边距。运营者需要为百度智能小程序选择合适的内容边距，该边距不宜过宽或过窄。为百度智能小程序内容边距的正确和错误示例。

其次是内容的排版方式。运营者应该考虑用户的视觉浏览习惯。通常来说，用户都是“从上往下，从左往右”浏览信息的，对此，运营者在设计百度智能小程序时可以尽可能地把主要的、重要的内容放置在屏幕的左侧。

另外，为了更好地迎合用户的阅读习惯，在内容的排版方向上，运营者应尽可能地避免采用竖向排版和横竖排版混用的排版方式。

避免采用竖向排版和横竖排版混用

接着是字号的选择。百度智能小程序官方对于各场景的字号选择有着明确的要求。所示为百度智能小程序字号设计标准，运营者可以根据该标准选择合适的字号。

最后是字体颜色的选择。和字号的选择一样，百度智能小程序官方对字体颜色的选择同样有着相对严格的标准。所示为百度智能小程序字体颜色的设计标准，运营者可以根据实际情况选择合适的字体颜色。

百度智能小程序字号设计标准

许多运营者都清楚一个道理，那就是“一图胜千言”。相比于文字，图片往往更能快速吸引用户，并且也更容易在用户心中建立一个可视化的鲜明形象。因此，在百度智能小程序的设计中，图片的选择就显得尤为重要了。

运营者在选择图片时，首先要做到的就是使用清晰的图片，让用户可以清晰获知图片的内容；其次，不同类型的图片，在百度智能小程序中呈现的方式有所不同，运营者需要根据各类型的显示方式选择合适的图片。图3-13所示为百度智能小程序正常加载状态下各类图片的显示效果。

图表可以在运营者的内容表达上起辅助作用，让用户更好地理解相关信息。在百度智能小程序中，各类图标的选择都有着严格的标准。运营者在设计百度智能小程序的过程中，只需根据该标准选择合适的图标即可。

措辞：称谓用词都需讲究

在百度智能小程序的措辞上，主要有3个方面需要特别注意，即称谓、用词和标点。接下来分别进行解读。

1．称谓

在称谓上，百度智能小程序应该尽可能地采用第二人称的“你”来称呼用户，这样做的好处就在于能够拉近与用户之间的距离，让用户感觉运营者好像是在和自己说话似的。

除了第二人称之外，有时候运营者也需要使用到第一人称，用以强调用户对内容或操作的知情权及操作权。例如，在电商类百度智能小程序中，运营者可能需要设置“我的订单”版块，用以呈现用户的订单情况。

虽然第一人称和第二人称可能运营者都需要用到，但是运营者仍需避免因为混用而给用户造成困扰。例如，“在我的订单中修改你的地址”这种称谓的混用便很容易让用户疑惑。

2．用词

从用词方面来看，百度智能小程序面对的是国内用户，因此，文字应该尽可能地用中文进行表达。而在文字的具体呈现上，运营者应该考虑到百度智能小程序面对的大部分受众只是普通用户，在用词上应该选择普通用户能够看懂的表达。为百度智能小程序表达用词的正确和错误示例。

3．标点

标点符号看上去有些无关大雅，但是它却能直观地向用户传达运营者的表达意图。在使用标题符号时，运营者需要注意3点，具体如下。

①要使用中文全角标点符号。

②疑问句结尾时应该使用“？”。

③感叹用“！”表示，但是因为其表达的语气比较强烈，所以运营者应尽可能地避免在错误提醒时使用“！”。百度智能小程度标点符号的正确和错误示例。

组件：参考标准正确设置

百度智能小程序官网中为运营者提供了参考的标准，在开发百度智能小程序的过程中，运营者只需根据标准进行正确设置即可。接下来对顶部导航栏、底部标签栏、按钮、列表、输入、反馈提示和提示框的参考标准分别进行说明。

1．顶部导航栏

百度智能小程序的顶部导航栏的框架由官方统一提供，用以指示当前位置，起到页面导航的作用。它始终在屏幕顶部，不会随着页面滚动而隐藏。百度智能小程序的顶部导航栏由4部分构成，为顶部导航栏的元素解构示意图。

2．底部标签栏

底部标签栏通常用于首页视图导航的切换。当然，除了首页之外，在一些其他页面中可能也会设置底部标签栏。底部标签栏位于页面底部，和顶部导航栏相同，它是不随页面滚动而隐藏的。百度智能小程序底部标签栏由两部分构成，为底部标签栏的元素解构示意图。

3．按钮

在百度智能小程序中主要有两类按钮，一类是大按钮，另一类是小按钮。下面对这两类按钮的参照标准分别进行解读。

大按钮的高度固定为88px（44pt），圆角大小固定为8px（4pt）。运营者在自定义按钮文字时，应该尽可能地将文字长度控制在8个字符之内，因为字符太多会影响整体的观感。而各类大按钮的设置也有着一定的标准，所示为各类大按钮的设置标准。

小按钮高度固定为56px（28pt），宽度最小114px（57pt），圆角大小固定为6px（3pt）。当小按钮内的文字较多时，运营者可以通过适度拉伸宽度的方式，增加小按钮的观感。百度智能小程序官方提供了各类小程序的设置标准。

4．列表

列表是由多个等宽列表项组成，并按一定规律排列的连续条目序列，支持上下垂直滚动和响应点击操作。根据列表的内容排列情况，列表可以分为单行列表和双行列表两类，这两类列表的设置标准

5．输入

百度智能小程序的输入设计主要包括3个方面的内容，即输入表单、文本输入框和键盘。接下来分别进行说明。

百度智能小程序的输入表单由一系列文本输入框组成，支持上下垂直滚动，用户输入信息并确认后，表单将提交输入结果。为百度智能小程序的输入表单示例图。

文本输入框即可供用户输入文本内容的框型组件。在百度智能小程序中，输入的文本内容类型不同，其显示的效果也会有所差异。为不同文本内容的输入显示效果。

输入键盘方面，百度智能小程序为运营者提供了两种类别的键盘组件，一种是默认键盘，另一种是纯数字键盘。在设计百度智能小程序的输入键盘时，运营者只需根据需求进行选择即可。

6．反馈提示

反馈提示用于向用户提供其行为的简洁的结果反馈。它既不会阻塞用户后续行为，也不要求用户响应操作，在同步用户展现信息一定时间（可设置，不建议超过7s）后便自动消失。在连续反馈的场景中，新的反馈提示会被优先展现。

在反馈提示设计的过程中，运营者需要重点把握两个方面的内容，一是反馈图标，二是提示文案。

在图文Toast中，反馈图标默认存在并设定为Success。反馈图标应该将结果清楚地呈现给用户。当开发者不需要图标时，可去掉图标，使用纯文Toast。为百度智能小程度反馈图标的正确和错误示例。

反馈提示的提示文案对字数有一定的要求，在图文Toast中，最多显示7个中文汉字，当中文汉字超过7个时，提示文案将显示不完全。所以，在设计提示文案时，应尽可能地将字数控制在7个之内。所示为百度智能小程序提示文案的正确和错误示例。

7．提示框

提示框主要用以告知用户接下来的操作的信息，可以起到提醒、帮助用户确认操作的作用。需要说明的是，因为提示框是在原界面的基础上直接弹出来的，它的出现会打断用户的当前操作。所以，如无必要，运营者应该减少提示框的设置。提示框由5部分构成，所示为提示框的元素解构图。

而在提示框的设置方面，需要注意两点。一是标题。提示框的标题应该尽可能地简短清晰。百度智能小程序提示框标题的正确和错误示例

二是内容。提示框的内容应该是对标题的补充，而不只是一味地重复标题的内容。为百度智能小程序提示框内容的正确和错误示例。