互联网产品设计规范-小程序设计规范
2022-03-14 10:55:19 0 举报AI智能生成
互联网产品设计规范-小程序设计规范
作者其他创作
大纲/内容
产品设计
友好，高效，一致的用户体验
友好礼貌
减少干扰
礼貌的展示服务
友好的引导操作
突出重点
快速理解
减少与操作无关因素
避免过多平级操作
区分操作主次
减少用户选择难度
流程明确
避免出现流程外的内容
导航明确
用户在页面中游刃有余地穿梭
顶部导航
tab
2<=x<5
4个确保了点击区域
可用性
可视性
可操作性
底部标签
暂无描述
减少等待，反馈及时
启动页加载
Logo-可操作
加载进度等不可操作
页面下拉刷新加载
微信提供2套样式，无需自行开发。注意用色的辨识
页面内加载
上拉加载
模态加载
页面转菊
局部加载反馈
按钮内加载
时间久的操作，预留取消加载
载入过程中，动画全程跟随
1个页面少于2个加载动画
局部操作结果反馈
微信控件提供完整的操作反馈
页面全局操作结果
1.5s toast
模态对话框
结果页
流程完结页
主要操纵
次要操作引导
异常页面
文案提示
字段变红
便捷
减少输入
使用接口
场景：添加银行卡，使用摄像头自动识别。
必须输入，设置选择题
微信基于移动端的标准控件
统一稳定
交互方式一致
视觉规范
7种常用字号
字体颜色
主要内容黑丝，次要灰色，绿色完成，红色错误
视觉列表规范
标题，小标题高度固定
表单输入视觉规范
按钮使用规则
大按钮
当前页面的即时操作
中按钮
重要程度不高，不鼓励用户操作的
小按钮
内容操作，重复使用
失效按钮
失效，不可点
按钮loading
无法马上反馈
图标使用原则
完成
错误提示
提醒
开发API
网络
发起请求
1个小程序，同时最多只能发起5个网络请求链接。
上传，下载
本地资源上传到开发者服务器，客户端发起一个 HTTPS POST 请求
下载文件资源到本地。客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。
websocket
一个微信小程序同时只能有一个 WebSocket 连接，
如果当前已存在一个 WebSocket 连接，会自动关闭该连接，并重新创建一个 WebSocket 连接
监听WebSocket连接打开事件。
监听WebSocket错误。
通过 WebSocket 连接发送数据，需要先 wx.connectSocket，
并在 wx.onSocketOpen 回调之后才能发送。
监听WebSocket接受到服务器的消息事件。
关闭WebSocket连接。
监听WebSocket关闭。
媒体
图片
本地相册选择or拍摄
预览
获取图片信息
录音
开始录音。当主动调用wx.stopRecord，或者录音超过1分钟时自动结束录音，
返回录音文件的临时文件路径。
主动调用停止录音。
音频播放控制
开始播放语音，同时只允许一个语音文件正在播放，
如果前一个语音文件还没播放完，将中断前一个语音播放。
暂停正在播放的语音。再次调用wx.playVoice播放同一个文件时，会从暂停处开始播放。
如果想从头开始播放，需要先调用 wx.stopVoice。
结束播放录音
音乐播放控制
获取音乐播放状态。
播放音乐，同时只能有一首音乐正在播放。
暂停播放音乐。
控制音乐播放进度。
停止播放音乐。
监听音乐播放。
监听音乐暂停。
监听音乐停止。
文件
保存文件到本地。
获取本地已保存的文件列表
获取本地文件的文件信息
删除本地存储的文件
视频
拍摄视频或从手机相册中选视频，返回视频的临时文件路径。
音频组件控制
通过 audioId 跟一个 audio 组件绑定，通过它可以操作一个 audio 组件。
视频组件控制
通过 videoId 跟一个 video 组件绑定，通过它可以操作一个 video 组件。
数据
数据缓存
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
从本地缓存中异步获取指定 key 对应的内容。
从本地缓存中同步获取指定 key 对应的内容。
异步获取当前storage的相关信息
同步获取当前storage的相关信息
从本地缓存中异步移除指定 key 。
从本地缓存中同步移除指定 key 。
清理本地数据缓存。
同步清理本地数据缓存
地理位置
获取位置
获取当前的地理位置、速度。
查看位置
使用微信内置地图查看位置
设备
网络状态
获取网络类型。
系统信息
获取系统信息。
重力感应
监听重力感应数据，频率：5次/秒
罗盘
监听罗盘数据，频率：5次/秒
拨打电话
界面
交互反馈
显示消息提示框
显示模态弹窗
显示操作菜单
设置导航条
动态设置当前页面的标题。
在当前页面显示导航条加载动画。
隐藏导航条加载动画。
导航
保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
关闭当前页面，跳转到应用内的某个页面。
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。
动画
创建一个动画实例
动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。
样式
旋转
缩放
偏移
倾斜
矩阵变形
动画队列
调用动画操作方法后要调用 step() 来表示一组动画完成，
可以在一组动画中调用任意多个动画方法，
一组动画中的所有动画会同时开始，
一组动画完成后才会进行下一组动画。
step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的配置。
绘图
变形
旋转
变换
清除
绘制
填充文本
画布内容导出图片
开放接口
登陆
调用接口获取登录凭证（code）进而换取用户登录态信息，
包括用户的唯一标识（openid） 及本次登录的 会话密钥（session_key）。
用户数据的加解密通讯需要依赖会话密钥完成。
签名加密
用户信息
获取用户信息
微信支付
模板消息
使用说明
接口说明
获取 access_token
发送模板消息
0 条评论
下一页
