编辑导读：小程序以其轻量级的操作和技术难度，承担了大部分基础功能，深受商家喜爱。如今，小程序的应用越来越广泛。如何设计它的规格？笔者对此进行分析，希望对你有所帮助。
最近遇到一些关于微信小程序规范优化的事情。完成整个规范优化后，觉得有些关键点很适合产品生，就赶紧整理了一下。
首先，这个小程序规范比较适合产品岗。有些设计规范我觉得没必要细说，更多的是产品设计和保证用户体验的案例。话不多说，干货。
00-1010
一、加载样式
全球页面加载，微信提供官方加载样式，安卓和ios也会有相应的适配样式。
还有一种常见的模态加载样式是全局加载，但一般建议谨慎使用，因为它无法明确告知用户进度。
看完以上两种加载方式，需要注意的是，同一页面一定不能有多个加载动画，这样会对用户造成一定的混淆。
00-1010对于优先级较高的页面，我们通常更倾向于减少用户的等待时间，所以会在一些首页或者重要页面进行优化。
该模块先显示静态数据，先显示缓存数据，显示0不缓存，显示异步更新后动态区域的占用位图。需要考虑大部分场景下动态区域的内容是否显示以上三点，稍微解释一下。通常一个页面会有静态模块，可以先显示，不需要加载时间；第二点是数据在页面中的加载形式；第三点中的位图很好理解，但是我们在使用位图时，需要考虑动态区域是否为空。如果加载后动态区为空，实际效果相当于通知用户这里有加载内容，加载模块后没有任务信息。这种设计也是不可取的。
00-1010局部加载很好理解。通常对于一些标签类别固定的列表页面，我们会给出局部区域的加载提示。而且，不仅仅是页面的加载，在操作过程中的一些页面，我们也可以使用按钮的部分加载样式进行提示。
00-1010页面过渡的场景下，基本有动态效果和非动态效果两种形式。非动态效果基本是页面之间的跳转，动态效果场景基本是进入和切出的样式。
img_width="1080" img_height="1096" alt="小程序规范怎么设计？干货整理看这里" inline="0">
针对小程序跳转webview的页面，微信有固定的进度条样式，无需进行开发。
为了便捷设计，我们有时候会有页面跳转页面的设计，针对跳转到导航页，一般不建议这样设计。常规的用户使用习惯都是右滑返回，如果跳转导航页右滑则会出现直接退出小程序的情况。
三、热区点击
微信规范文档中有特意介绍热区设计，为了避免一些点击误操作，我们通常需要设计合理的热区面积，既不要过小也不要过于密集。
常规需要注意的热区一般就是带文字的icon以及表单页，避免不规范的热区设计。
四、异常情况
常规的异常处理，大多数产品应该比较熟悉。类似于缺省页面提示规范一致，异常页面不是死胡同等等，在此特别介绍下表单的报错形式。
针对异常表单的报错，微信官方其实有推荐的样式。顶不告知报错原因同时标识错误信息。
之所以单独把这个样式拿出来，是因为日常工作中看到太多同学设计的样式，导致报错样式五花八门。
五、常规要点
除了以上这些设计规范要点，微信官方有自己的一套设计口诀。
友好礼貌-重点突出；流程明确；
清晰明确-导航明确，来去自如；减少等待，反馈及时；异常可控，有路可退；
便捷优雅-减少输入；避免误操作；利用接口提高性能；
统一稳定
以上这些点基本是比较常规的，需要我们增加敏感度去感知我们的产品所缺失的体验。看几个案例就能更清晰的感知：
上述这种页面基本就是没有明确的意图，同时在用户的流程上增加了过多的干扰。
第二种比较常见的就是一些分享、转发的操作，我们通常会忽略操作完成后的提示，这种其实就属于没有反馈及时。
除了以上这些，再给大家推荐一些常规的设计规范，希望可以给你带来帮助。
1.微信小程序设计指南
https://developers.weixin.qq.com/miniprogram/design/
2.支付宝小程序设计规范
https://docs.alipay.com/mini/design
3.蚂蚁设计
https://design.alipay.com/#ds
作者：红尘；公众号：都市摆渡人
本文由 @都市摆渡人 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/242529.html
