1 基础规范:
1.1 2个 ≤ 底部导航 ≤ 4个(确保点击区域)。
1.2 操作成功提醒/20字左右的文案提示,都可以设置1.5秒自动消失,用户体验最佳。
1.3 表单类页面:减少密集输入,合理设计可分步操作,能选择的尽量不要输入。
1.4 搜索类交互:建议设计搜索历史快捷选项,减少键盘输入进而提升用户体验。
1.5 点击类控件,其操作区域,建议设计物理尺寸为7mm~9mm之间,用户体验最佳。
1.6 视觉规范:
1.6.1 字号使用场景规范:
1.6.2 字体颜色规范:
主内容 Black 黑色,次要内容 Grey 灰色;时间戳与表单缺省值 Light 灰色;大段的说明内容而且属于主要内容用 Semi 黑。
蓝色为链接用色,绿色为完成字样色,红色为出错用色 Press 与 Disable 状态分别降低透明度为20%与10%。
1.6.3 列表
1.6.4 表单输入
1.6.5 按钮
1.6.6 图标
1.7 页面路径纵向最多设计5层
小程序页面纵向只有5层,超出时点击页面无任何反馈,页面冻结。所以要严格控制页面的层级数量
1.8 兼顾开发调试测试方便
页面步骤类交互,尽量设计交互的可逆性
1.9 注意不能设计有诱导用户分享类功能
这类过不了审核,同时可能会被封号
2 小程序限制的功能点总结:
- 不支持分享推文链接
- 不可分享到朋友圈
- 不能长按识别二维码
- 不能从小程序跳转至APP;(但是存在特例:如果从APP分享小程序到微信打开,是可以从微信的小程序唤醒APP)
3 小程序对比网站&app的优势:
3.1 开发成本低、效率快(对比app)
app的开发需要ios和安卓的工程师以及后台工程师,有些混合开发还需要H5前端的开发人员
3.2 获取用户成本低(对比app)
app推广难,忠诚度低
微信用户基数大,小程序不需要下载,门槛很低,用户使用目标明确
3.3 推广优势大(对比app)
小程序可以在微信内分享,分享到朋友圈,微信群等,其他人可以打开直接进入程序中,扩散速度呈几何式
3.4 使用门槛低(对比app)
微信小程序在UI和操作流程上对比app更加统一
3.5 可达性高(对比网站)
参考国人操作习惯,输入域名访问操作方式相对复杂