小程序设计指南
B端小程序体系
在小程序生态中，B端产品同C端产品不同，衡量范畴也不应仅局限在功能易用、体验流畅等传统用户产品体验维度上。转化到B端视角，还需要考量商业利益，分析内容或服务供给者与分发平台之间合作流程、合作意愿，以及分发平台的生态健康度。+补图： 从流程操作层、规则秩序层和资源能力层分析B端小程序体系建立。微信小程序的原理和层级
原理
小程序的编码方式实际上是使用前端的语言进行编写的，从理解的角度，小程序可以认为是运行在微信的浏览器容器中，遵从了一套从设计到组件的WeUI规范的Web程序。我们称微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能。为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。运行机制
⚫启动【冷启动】用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动，即冷启动。 小程序没有重启的概念。
【热启动】假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台。
🔵前台/后台
【前台】当用户进入微信或再次打开小程序，小程序会从后台进入前台。
【后台】当用户点击右上角胶囊按钮关闭小程序，或者按了设备 Home 键离开微信时，小程序并没有直接销毁，而是进入了后台状态。
🔴销毁
- 当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）小程序会被微信主动销毁。
- 当小程序占用系统资源过高，可能会被系统销毁或被微信客户端主动回收。
更新机制
启用时不自动更新新版本发布之后，用户可能打开历史旧版本，无法影响所有现网用户，在24h之内会下发到全部用户。
启用时自动更新
小程序每次冷启动，都会检查是否有更新版本，若有，则异步下载并同时安装包，在下次冷启动才应用新版本；也可以实现立即启用新版本。
层级
设计基础
（设计底层注意事项)小程序菜单和导航
官方提供两种深浅配色方案，开发者可控制除右上角官方小程序胶囊之外的区域。
顶菜单导航
顶部菜单导航，为用户提供清晰的位置指向，作用可以等同于面包屑，图示绿色区域可以根据品牌调性自行拓展设计。
通过自定义页头，适当添加品牌底色，增加品牌logo提高产品认知度：
可以考虑对新手用户提供[添加到我的小程序]toast引导功能
底部标签导航
官方规定Bottom Tabbar数量为2-5个，一个页面最多组Bottom Tabbar。比如飞猪会在当前选中态中融入品牌形象，其他品牌(如马蜂窝、大众点评、饿了么、京东)首页图标选择使用logo或形象。
⚠️温馨提示：小程序默认二级页面没有底部bar，但可根据需要自行加入底bar，但要注意和一级默认底bar的层级量级区别顶部标签导航
顶部标签分页栏颜色可自定义，需要保持可用性、可视性和可操作性。
支持左右滚动形式，可以适当增加底色、结合品牌特征做局部视觉元素的添加。
页脚
可以在页脚透传品牌信息，增加品牌影响力和传播度。在feed中可以增加状态提示，提升交互细腻度。
小程序加载
启动页加载
可以展现品牌特征，官方提供无需开发（不可修改）
页面下拉刷新加载
官方提供标准下拉刷新能力，较为完善，无需自行开发（也可修改，可能会破坏体验不建议）
页面内加载反馈
可自定义加载样式，结合产品特征透传品牌信息，尽量保持简洁。
模态加载
覆盖整个页面，建议谨慎使用。
局部加载反馈
有针对性，用户干扰较小的加载方式，可以在任何局部进行反馈。
全局加载反馈
页面级加载，一般在顶部标题栏展示，非模态。
注意事项
- 若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。
- 载入过程中,应保持动画效果 ; 无动画效果的加载很容易让人产生该界面已经卡死的错觉。
- 不要在同一个页面同时使用超过1个加载动画。
反馈Toast
适用于轻量提示，1.5s后自动消失，不打断用户流程，影响较小，可提供图标或文字形提示
模
干扰度较高，会打断用户当前进程，可用于重要提示或错误通知等，可附带下一步操作指引等。
结果页
适用于表单操作，或者强烈引导用户查看结果的情况。
提示状态
如消息
更多
搜索
搜索可设计的自由度较高，可以根据场景适当提供历史记录和模糊搜索功能，减少用户输入成本，避免不必要的键盘输入。
表单组件
小程序支持大部分基础组件，按钮、单选、多选、滑块、输入框等。在移动场景下，应该避免大量输入，造成用户心理负担，可以适当把输入替换为选择减少操作。充分利用微信开放的小程序接口(如地理位置)提高用户输入效率和准确性。
上图以ios为例小程序适配
小程序尺寸单位叫rpx，可以根据屏幕宽度进行自适应。在 750*1334 的设计稿里，1px = 1rpx。在小程序里宽度都是 750rpx，高度就通过那个宽高比获得，涉及具体数值的高度的需要通过这个比例计算。
小程序数据
通过“小程序数据助手”可以查看常规数据，特殊数据需要单独埋点。常规数据：数据概况、访问基础分析（用户趋势、来源分析、留存分析、时长分析、页面详情）、实时统计和用户画像（年龄性别、省份城市、终端机型）｜☕️THANK YOU FOR YOUR TIME.