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

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

一、图标

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

原则

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

2、系统图标设计原则：

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

3、状态图标：主要用于结果页的状态显示。

二、颜色

1、字体颜色

2、背景色

3、分割线颜色

三、按钮 Button

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

按钮用于开始一个即时操作，提交表单中的一组输入数据。

1、定义 & 原则：

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

主按钮：一个页面中只能出现一个主按钮，表示当前最主要的用户转化点。

次按钮：一个页面中可以有多个次按钮，作为当前场景的补充操作。

辅助按钮：位于列表右侧的操作按钮，通过按钮的形式更强烈的引导用户点击列表。

2、视觉样式

大按钮

大按钮出现主要目的为鼓励用户进行操作行为的按钮。按钮文字需上下左右居中。

大按钮高度固定为 94px(47pt)，圆角为10px(5pt)。

注意页面主按钮在一个页面内只能出现一次。

小按钮

小按钮用于页面内某项内容或是选项的操作/选择， 同时可以被重复使用。

按钮文字需上下左右居中。

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

按钮内文字与边框间距为 30px(15pt)，文字不够放则左右延伸宽度。

3、案例示意

按钮一般需要和页面内容一起呈现才有意义。

主按钮

辅助按钮

四、多选框 Checkbox

多选控件让用户可以同时选择多个元素。

定义 & 原则

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

五、文本输入框 InputItem

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

1、定义 & 原则

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

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

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

如果输入的数据内容为敏感信息，应该进行脱敏处理，如：密码、手机号等。

2、视觉样式

标签、图标、辅助输入按钮不同的部件组成了多种样式的输入框。

3、案例

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

六、选择器 Picker

选择器提供一组预设的数据，让用户通过选择完成输入或者设置。

定义 & 原则

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

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

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

日期选择器

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

七、单选框 Radio

单选控件让用户选择一个元素

定义 & 原则

单选控件一般出现在列表的右侧，出现一个对勾表示当前选中的选项。

八、搜索栏 Searchbar

搜索栏让用户可以在大量的信息中快速找到自己想要的内容。

定义 & 原则

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

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

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

九、滑动开关 Switch

开关是将两种状态可视化表达的一种控件。

定义 & 原则

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

十、小程序标题栏

小程序会有一个通用的顶部标题栏，对于平台内的小程序有一定的要求和限制

用法

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

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

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

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

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

十一、底部标签栏 Tab bar

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

类型

用法

选项数量：

选项卡栏可以包含任意数量的选项卡，但可见选项卡的数量根据设备大小和方向而有所不同。当前提供了常用的3~5个选项。如果某些选项卡由于水平空间有限而无法显示，则最终的可见选项卡将成为“更多”选项卡，这会在单独的屏幕上显示列表中的其他选项卡。

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

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

选项卡提示：

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

十二、数字金额字体

支付宝小程序所有数字金额字体均使用AlipayNumber-Regular字体，如图：

AlipayNumber-Regular字体下载地址（复制链接到浏览器打开即可下载）：

https://gw.alipayobjects.com/os/skylark-tools/public/files/35a48f033ead33f9f76c2619c166e90d.zip​gw.alipayobjects.com

十二、小程序GUI源文件下载

官方提供了一套组件库，帮助设计师进行快速设计：

Sketch组件库：

小程序通用.sketch​pan.baidu.com

提取码：v597

Photoshop组件库：

小程序组件psd.zip​pan.baidu.com

提取码：v597

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

文章来自：支付宝开放平台 (https://opendocs.alipay.com/mini/design）

UI严选——#越努力，越幸运#