恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

支付宝小程序设计规范(内附PSD+Sketch源文件)

好文转载 分类: 规范/资料 版权: 原作者: 支付宝开放平台 举报
2240 68 14 1
2020-02-29
18.4

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


如需要学习微信小程序设计规范,请戳蓝色链接查看《微信小程序设计规范(附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

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

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

Sketch组件库:小程序通用.sketch
Photoshop组件库小程序组件psd.zip


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


Powered by Froala Editor

微信公众号:UI严选

小小方方

微信公众号:UI严选

6673粉丝/19关注

身经百战人气明星助人为乐分享帝lv.1砖家
最全面的移动端 UI组件设计详解:下篇C4D 动效设计作品01

你确定要举报支付宝小程序设计规范(内附PSD+Sketch源文件)

如果查出恶意举报,十天内禁止提交任何举报申请。

0/200

上传证据: 超过10M的附件请使用网盘地址

点击上传附件

对谁可见:

全部设计师
  • 全部设计师
  • 推荐设计师和认证设计师

您确认要推荐?

该作品发布时间:2020年02月29日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录
//

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN