小程序已在我们的生活场景中不断应用，在继微信小程序正式推出后，国内互联网巨头都陆续推出了自家的小程序平台，如：支付宝小程序、百度小程序、抖音小程序、头条小程序等；当然每个平台的小程序都有属于自己的设计规范，今天我们来看看支付宝小程序的设计规范。

如需要学习微信小程序设计规范，请戳蓝色链接查看《微信小程序设计规范（附PSD+sketch源文件）》

图标是图形界面中的重要组成部分，具有高度浓缩并快速传达、便于记忆的特性。为让用户能更容易辨识图标信息且达成图标设计的一致性，支付宝提供统一风格的 icon设计原则。

1、设计原则：需形状鲜明，将信息化繁为简；采用几何形状、设计对称、且一致的图标来进行设计。

圆角：广泛使用圆角，避免突兀和锯齿感。以放大 36x36px 尺寸的图标为例，线条结构 3px，外圆角弧度为 4px。

用户在和你的应用交互的过程中，经常需要输入、编辑、删除某些信息。多样化且有针对性的输入组件可以帮助用户快速明确的完成任务，提升产品的用户体验。

按钮作为页面中的主要行动点，引导用户进行相应的主要操作。行动按钮应该醒目突出，有吸引用户点击的冲动，并且在用户进行相应的点击操作后有相应的反馈。

小按钮高度固定为 60px(30pt)，最小宽度为 112px(56pt)，边框粗为 2px(1pt)，圆角为 6px(3pt)。

辅助按钮

多选控件一般出现在需要编辑的列表中，当用户选择完成以后统一对选中的元素进行编辑处理。多选分为选中和未选中两种状态。

最简单的输入组件就是文本输入框，它允许用户通过键盘、选择器等组件录入单行的数据。

单行输入框都有信息输入长度的限制，通常最多 15 个字符。你还可以有针对性的限制输入框可输入的信息类型，如，中文、英文、数字、邮箱地址等；

激活不同类型的输入框的同时，需要弹出相应类型的键盘：文字键盘、英文键盘、数字键盘、邮箱键盘等；这样有利于提高用户的输入效率。

输入框一般有“标签区”、“输入区”、“辅助操作区”三个部分组成。“标签区”有字数限制，最多 4 个字；“输入区”一般会设置“暗提示”；“辅助操作区”可以放辅助输入的操作按钮，或者更详细的输入说明按钮。

根据输入数据类型唤起相应的系统键盘，iOS、Android 系统都为不同类型的信息输入准备了相应的键盘，用户的输入效率会提升很多，相应的用户体验也就提升了。

通过点击页面中的某个输入框会触发选择器，选择器出现的时候应该在页面上盖上一层半透明的蒙层，让用户聚焦到选择器的选择上。

选择器中的数据最好是有一定逻辑关系的，符合用户预期的。因为选择中可能一下子不能展示全部数据，需要用户滑动选择，符合用户预期的逻辑顺序能帮助用户快速找到想要的选型。

选择器可以设置多列数据的组合选择，一列、两列、三列，最多四列，但是最长列的文字不能超过宽度限制。

时间选择器可以让用户快速选择某个时间，从年、月、日到小时、分钟、秒，都可以设置。

搜索栏一般位于 NavBar 下方，点击激活的时候唤起系统键盘，通过『取消』按钮退出激活状态。

如果默认展示输入框，可以提供暗提示文案，帮助用户输入，如：关键词、搜索美食。

在搜索栏下方，可提供有用的标签文案，帮助用户通过点击直接完成输入，如：最近搜索的内容。

定义 & 原则

开关控件只能在列表中使用，所以开关只能在列表中出现；用来表示两个互斥的选项。

导航区：通常只有一个操作，即返回上一级界面（二级页面会出现）

标题区：页面标题可以定义，但需控制长度，超出长度则会省略。缺省则默认显示小程序/内容模块的名称（可以不显示）

操作区：关闭小程序会将小程序默认进入后台最小化；更多会引出针对当前小程序的操作（不允许自定义功能）

背景自定义：小程序导航允许自定义背景颜色

更多菜单：小程序更多提供了推荐、收藏、添加到桌面等功能，帮助用户分享和保存路径（不允许自定义）；

应用屏幕底部会显示一个标签栏，并提供在应用的不同部分之间快速切换的功能。标签栏在所有屏幕方向上保持相同的高度，并在显示键盘时隐藏。

选项数量：

当其功能不可用时，不要删除或禁用选项卡：

如果选项卡在某些情况下可用，但在其他情况下不可用，则应用程序的界面变得不稳定和不可预测。确保始终启用所有选项卡，并解释在选项卡对应页面内容描述不可用的原因。

选项卡提示：

您可以在选项卡上显示提示 - 包含白色文本和数字或感叹号的红色椭圆，以指示新信息与该视图或模式相关联。

下载链接：https://pan.baidu.com/s/15uJk1uvtPgE-lZpX-Bt-EQ    提取码：v597 

Powered by Froala Editor