小程序产品设计规范详解

这是Kevin的第 805 篇原创，

持续日更，做产品经理的创业斜杠青年。

上周PMTalk小程序的3.0正式上线，也是在产品经理圈内的第一个专业垂直小程序。

点击即可查看小程序

业务总是比产品先行一步

做产品经理同学应该知道，业务一定会产品先行。

当每次需求调研下来完成的产品设计，再经过一段研发时间后，业务早已逐渐在发生变化。

在没有产品上线前， 业务会逐渐趋向于标准化、精简、效率。

比如PMTalk在没有报名系统上线前，用问卷+excel的方式统计用户报名信息。在系统研发中，我们逐渐归纳出了要使用的必要字段、和重要的信息收集内版块。

小程序的迭代

所以一个自研的互联网产品，必定需要不断迭代。同时业务本身也在继续发展，产品经理要抽象出通用、标准化的能力。

和其他产品形态的产品设计不同，微信小程序本身是有一套规范的，所以不管产品怎么迭代，都有最基础的理论可循。

最近我亲自带班的21天小程序产品经理也即将开营了。如果你还没有报名又想学习小程序的产品设计可以直接在文章底部报名，小班制只限30人。

小程序的产品设计规范

在这里我将罗列出我在小程序工作中所要注意的tips。

1.顶部导航栏

小程序允许在不同状态下为开发者提供对应的功能导航栏，比如用户在使用录音/话筒权限、在使用地理位置、和普通访问状态下都有对应导航栏展示。

同时微信提供了灰色、深色的导航栏

导航栏的各种状态

在小程序里如何增加一级页面、二级页面的辨别度，通过在二级页面增加返回按钮即可。

小程序的一二级页面

同样小程序的导航栏是可以和页面链接做到沉浸式体验。许多产品经理容易忽略这一点，导致小程序少了一些转化率提升的可能。比如在腾讯文档、闲品会、知乎下4个小程序导航栏都配合沉浸式。

小程序的沉浸式设计

小程序和app的导航栏也是产品新人容易混淆的，比如会直接把app的UI设计图直接套用给小程序。

但小程序上的每个页面都需要定义导航栏标题，app则不需要。这就导致了部分app页面不能在小程序上通用。

小程序与app导航栏区别

2.搜索设计

小程序的搜索样式可以用官方自带组件，也能自定义。下面是小程序常见的搜索，我搜索了来自网上朋友整理的案例

要注意小程序的搜索，在用户输入状态加入单独的落地页，而不是直接和app一样在当前搜索组件中输入内容。

如下是某小程序搜索操作，点击输入框弹出搜索页面

但是app搜索设计，尽量是在当前页完成，由于客户端本身原生下的高性能，可以通过当前输入实时反馈出搜索结果。

3.小程序弹窗

小程序有自带的弹窗规范，单选、双选等。但也可以通过自定义的方式修改弹窗样式。

但无论哪一种，简单的选项、返回，建议用微信自带的官方组件。

4.小程序按钮

小程序的按钮也有点击前、点击中、点击炫富状态区分。注意对应的色值、和交互时间。

5.小程序底部导航栏

小程序的底部按钮弹窗不超过4个，app则可以做到5个。但在小程序里5个就显得特别臃肿了。

6.小程序的开发者区域

小程序刚上线的时候，许多产品经理都想做沉浸式页面。但实际上能够使用的开发者区域如上图所示，就这么大。

7.小程序的loading

小程序的loading也是和app不同，每次加载小程序都有对应的loading动画。

这个动画需要icon定义，当然现在支持小程序和app一样出现广告开屏页。

同时小程序的加载名次也要记住。模态加载是不能更改的，下拉刷新可以变化

告知用户即将加载的页面，减少用户等待焦虑感。我们称呼为懒加载

8.小程序矩阵

随着第一个小程序上线后，如果你的app有多个主功能。可以将每个主功能单独开发为一个小程序，形成小程序矩阵。比如上面的墨迹天气、嘀嘀打车、麦当劳都是采用这种方式提升用户打开小程序的体验，增加拉新。

21天小程序产品经理课表

报名入口

报名后添加企业微信，领取任务、操作手册

（备注：第九期）