一、图标
图标是图形界面中的重要组成部分，具有高度浓缩并快速传达、便于记忆的特性。为让用户能更容易辨识图标信息且达成图标设计的一致性，支付宝提供统一风格的 icon设计原则。 原则
1、设计原则：需形状鲜明，将信息化繁为简；采用几何形状、设计对称、且一致的图标来进行设计。
2、系统图标设计原则：
圆角：广泛使用圆角，避免突兀和锯齿感。以放大 36x36px 尺寸的图标为例，线条结构 3px，外圆角弧度为 4px。
3、状态图标：主要用于结果页的状态显示。
二、颜色
1、字体颜色
三、按钮 Button
用户在和你的应用交互的过程中，经常需要输入、编辑、删除某些信息。多样化且有针对性的输入组件可以帮助用户快速明确的完成任务，提升产品的用户体验。
按钮用于开始一个即时操作，提交表单中的一组输入数据。
1、定义 & 原则：
按钮作为页面中的主要行动点，引导用户进行相应的主要操作。行动按钮应该醒目突出，有吸引用户点击的冲动，并且在用户进行相应的点击操作后有相应的反馈。 主按钮：一个页面中只能出现一个主按钮，表示当前最主要的用户转化点。 次按钮：一个页面中可以有多个次按钮，作为当前场景的补充操作。 辅助按钮：位于列表右侧的操作按钮，通过按钮的形式更强烈的引导用户点击列表。 2、视觉样式
大按钮：大按钮出现主要目的为鼓励用户进行操作行为的按钮。按钮文字需上下左右居中。
大按钮高度固定为 94px(47pt)，圆角为10px(5pt)。
注意页面主按钮在一个页面内只能出现一次。
小按钮：小按钮用于页面内某项内容或是选项的操作/选择， 同时可以被重复使用。
按钮文字需上下左右居中。
小按钮高度固定为 60px(30pt)，最小宽度为 112px(56pt)，边框粗为 2px(1pt)，圆角为 6px(3pt)。
按钮内文字与边框间距为 30px(15pt)，文字不够放则左右延伸宽度。
四、多选框 Checkbox
多选控件让用户可以同时选择多个元素。
定义 & 原则
多选控件一般出现在需要编辑的列表中，当用户选择完成以后统一对选中的元素进行编辑处理。多选分为选中和未选中两种状态。 五、文本输入框 InputItem 最简单的输入组件就是文本输入框，它允许用户通过键盘、选择器等组件录入单行的数据。 1、定义 & 原则
单行输入框都有信息输入长度的限制，通常最多 15 个字符。你还可以有针对性的限制输入框可输入的信息类型，如，中文、英文、数字、邮箱地址等； 激活不同类型的输入框的同时，需要弹出相应类型的键盘：文字键盘、英文键盘、数字键盘、邮箱键盘等；这样有利于提高用户的输入效率。 输入框一般有“标签区”、“输入区”、“辅助操作区”三个部分组成。“标签区”有字数限制，最多 4 个字；“输入区”一般会设置“暗提示”；“辅助操作区”可以放辅助输入的操作按钮，或者更详细的输入说明按钮。 如果输入的数据内容为敏感信息，应该进行脱敏处理，如：密码、手机号等。 2、视觉样式
标签、图标、辅助输入按钮不同的部件组成了多种样式的输入框。
六、选择器 Picker
选择器提供一组预设的数据，让用户通过选择完成输入或者设置。
定义 & 原则
通过点击页面中的某个输入框会触发选择器，选择器出现的时候应该在页面上盖上一层半透明的蒙层，让用户聚焦到选择器的选择上。 选择器中的数据最好是有一定逻辑关系的，符合用户预期的。因为选择中可能一下子不能展示全部数据，需要用户滑动选择，符合用户预期的逻辑顺序能帮助用户快速找到想要的选型。 选择器可以设置多列数据的组合选择，一列、两列、三列，最多四列，但是最长列的文字不能超过宽度限制。 日期选择器
时间选择器可以让用户快速选择某个时间，从年、月、日到小时、分钟、秒，都可以设置。
七、单选框 Radio
单选控件让用户选择一个元素
定义 & 原则
单选控件一般出现在列表的右侧，出现一个对勾表示当前选中的选项。
八、搜索栏 Searchbar
搜索栏让用户可以在大量的信息中快速找到自己想要的内容。
定义 & 原则
搜索栏一般位于 NavBar 下方，点击激活的时候唤起系统键盘，通过『取消』按钮退出激活状态。 如果默认展示输入框，可以提供暗提示文案，帮助用户输入，如：关键词、搜索美食。 在搜索栏下方，可提供有用的标签文案，帮助用户通过点击直接完成输入，如：最近搜索的内容。 九、滑动开关 Switch 开关是将两种状态可视化表达的一种控件。 定义 & 原则
开关控件只能在列表中使用，所以开关只能在列表中出现；用来表示两个互斥的选项。
十、小程序标题栏 小程序会有一个通用的顶部标题栏，对于平台内的小程序有一定的要求和限制 用法
导航区：通常只有一个操作，即返回上一级界面(二级页面会出现) 标题区：页面标题可以定义，但需控制长度，超出长度则会省略。缺省则默认显示小程序/内容模块的名称(可以不显示) 操作区：关闭小程序会将小程序默认进入后台最小化；更多会引出针对当前小程序的操作(不允许自定义功能) 背景自定义：小程序导航允许自定义背景颜色 更多菜单：小程序更多提供了推荐、收藏、添加到桌面等功能，帮助用户分享和保存路径(不允许自定义)； 十一、底部标签栏 Tab bar 应用屏幕底部会显示一个标签栏，并提供在应用的不同部分之间快速切换的功能。标签栏在所有屏幕方向上保持相同的高度，并在显示键盘时隐藏。 类型
用法
选项数量： 选项卡栏可以包含任意数量的选项卡，但可见选项卡的数量根据设备大小和方向而有所不同。当前提供了常用的3~5个选项。如果某些选项卡由于水平空间有限而无法显示，则最终的可见选项卡将成为“更多”选项卡，这会在单独的屏幕上显示列表中的其他选项卡。 当其功能不可用时，不要删除或禁用选项卡： 如果选项卡在某些情况下可用，但在其他情况下不可用，则应用程序的界面变得不稳定和不可预测。确保始终启用所有选项卡，并解释在选项卡对应页面内容描述不可用的原因。 选项卡提示： 您可以在选项卡上显示提示 - 包含白色文本和数字或感叹号的红色椭圆，以指示新信息与该视图或模式相关联。 十二、数字金额字体 支付宝小程序所有数字金额字体均使用AlipayNumber-Regular字体。
