互联网产品设计规范-小程序设计规范
2022-03-14 10:55:19 0 举报AI智能生成
登录查看完整内容
互联网产品设计规范-小程序设计规范
作者其他创作
大纲/内容
友好，高效，一致的用户体验
减少干扰
礼貌的展示服务
友好的引导操作
友好礼貌
快速理解
减少与操作无关因素
减少用户选择难度
区分操作主次
避免过多平级操作
突出重点
避免出现流程外的内容
流程明确
用户在页面中游刃有余地穿梭
顶部导航
4个确保了点击区域
2<=x<5
可用性
可视性
可操作性
tab
暂无描述
底部标签
导航明确
Logo-可操作
加载进度等不可操作
启动页加载
微信提供2套样式，无需自行开发。注意用色的辨识
页面下拉刷新加载
上拉加载
页面内加载
页面转菊
模态加载
按钮内加载
时间久的操作，预留取消加载
载入过程中，动画全程跟随
1个页面少于2个加载动画
局部加载反馈
微信控件提供完整的操作反馈
局部操作结果反馈
1.5s toast
模态对话框
主要操纵
次要操作引导
流程完结页
结果页
文案提示
字段变红
异常页面
页面全局操作结果
减少等待，反馈及时
场景：添加银行卡，使用摄像头自动识别。
使用接口
减少输入
必须输入，设置选择题
微信基于移动端的标准控件
便捷
交互方式一致
统一稳定
7种常用字号
主要内容黑丝，次要灰色，绿色完成，红色错误
字体颜色
视觉规范
标题，小标题高度固定
视觉列表规范
表单输入视觉规范
当前页面的即时操作
大按钮
重要程度不高，不鼓励用户操作的
中按钮
内容操作，重复使用
小按钮
失效，不可点
失效按钮
无法马上反馈
按钮loading
按钮使用规则
完成
错误提示
提醒
图标使用原则
产品设计
1个小程序，同时最多只能发起5个网络请求链接。
发起请求
本地资源上传到开发者服务器，客户端发起一个 HTTPS POST 请求
下载文件资源到本地。客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。
上传，下载
一个微信小程序同时只能有一个 WebSocket 连接，如果当前已存在一个 WebSocket 连接，会自动关闭该连接，并重新创建一个 WebSocket 连接
监听WebSocket连接打开事件。
监听WebSocket错误。
通过 WebSocket 连接发送数据，需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后才能发送。
监听WebSocket接受到服务器的消息事件。
关闭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
发送模板消息
接口说明
模板消息
开放接口
开发API
小程序
0 条评论
回复 删除
下一页
