小程序学习总结

1 基础规范：

1.1 2个 ≤ 底部导航 ≤ 4个（确保点击区域）。

image.png

1.2 操作成功提醒/20字左右的文案提示，都可以设置1.5秒自动消失，用户体验最佳。

image.png

1.3 表单类页面：减少密集输入，合理设计可分步操作，能选择的尽量不要输入。

image.png

1.4 搜索类交互：建议设计搜索历史快捷选项，减少键盘输入进而提升用户体验。

image.png

1.5 点击类控件，其操作区域，建议设计物理尺寸为7mm~9mm之间，用户体验最佳。

image.png

1.6 视觉规范：

1.6.1 字号使用场景规范：

image.png

1.6.2 字体颜色规范：

image.png

主内容 Black 黑色，次要内容 Grey 灰色；时间戳与表单缺省值 Light 灰色；大段的说明内容而且属于主要内容用 Semi 黑。

image.png

蓝色为链接用色，绿色为完成字样色，红色为出错用色 Press 与 Disable 状态分别降低透明度为20%与10%。

image.png

1.6.3 列表

image.png

1.6.4 表单输入

image.png

1.6.5 按钮

image.png image.png image.png image.png

1.6.6 图标

image.png image.png

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 可达性高（对比网站）

参考国人操作习惯，输入域名访问操作方式相对复杂