微信定位

小程序在微信内部的接入和传播非常便捷，用户体验也非常好，可以说APP的一些核心功能都承载在小程序里，比如打车、订餐、骑行产品等。

小程序在设计初期也带有一些数据收集的用途。比如我们之前开发的一些小程序是使用H5网页的，整个流程不受微信生态的掌控，一些数据收集只能提供比较“粗粒度”的数据，比如用户流量数据、一些支付相关的数据。而且如果嵌入H5网页，会存在加载速度的问题，体验会比较慢。小程序的诞生解决了全流程数据收集的问题，解决了之前的用户体验问题。

小程序是如何被用户发现的？

小程序对设计的影响和趋势，以及不同行业小程序设计需要考虑的特点

现在各大公司都注重小程序

设计要求是什么？

现在有很多公司专门做小程序服务，比如有赞、微猫、火客宝等等，可以看到小程序会是未来大部分公司必须考虑的解决方案之一，不同行业的小程序在设计的时候考虑的点也有所不同，我们来分析一下。

小程序的设计思维需要结合小程序设计规范以及对不同行业公司小程序的调研分析。

1.出行-滴滴

滴滴在APP和小程序设计时，充分考虑了平台自身的特点，在目的地操作打车更加简单快捷。在功能选择上，小程序中暴露了更多的核心功能，而一些非必要的入口则没有体现，比如消息、扫一扫、个人中心的一些功能等。用户使用小程序打车时更加专注。

2. 注意事项

印象笔记APP和印象笔记小程序的功能也有很大区别，印象笔记小程序中只展示了“我创建”、“来自分享”、“微信文件”这几个核心入口，而印象笔记小程序更多的是通过微信这个流量入口，让用户及时收藏好友分享的笔记，快速创建笔记。

另外一个很“微信”的功能就是导入微信文件，该功能可以一键将微信聊天记录中的部分文件导入到印象笔记APP中，并及时保存，避免用户的文件过期无法使用。

3. 新闻

36氪主程序与小程序的对比更加明显，在精简版的36氪小程序中，主要信息以更加轻量级的方式呈现，其他入口则直接被忽略，只呈现最重要的核心点，其他“干扰”小程序轻量感的非主要因素则直接被舍弃。

4.知识付费

在主程序和小程序的设计上，更加注重以核心商业内容作为突出小程序主体信息，例如Get小程序在底部导航栏保留了主应用的“商城”和“课程”两个核心入口。

5. 视频

在哔哩哔哩小程序中，将两个核心的主导航类目提取出来，分别是“热门”和“关注系列”，APP对应的分区页面将部分功能提取到了小程序中，APP对应的我的页面只将历史+反馈提取到了小程序中；搜索结果页对应的排序方式和筛选部分被大大“简化”；在微信小程序中，无法对内容进行点赞或评论。

如何设计一个小程序？

设计小程序时应避免的问题

1. 小程序官方设计规则

（我选取了部分内容，更多内容请访问官网）：

强调

流程清晰

小程序设计专区

后面我会讲解如何适配小程序，这也是设计师可以把控的地方。

小程序设计专区

顶部标签栏颜色可自定义。选择自定义颜色时，请确保标签栏标签可用、可见且可操作。

2. 小程序设计应避免的陷阱及设计方法

在适配两端的时候，标题栏位置的文字保持各端标准，端保持靠左，iOS端居中。设计的时候要注意APP右上角的功能和小程序右上角固定入口的冲突（当然我发现有些小程序也是定制的）。

右上角的图标是全局条目。无论您在哪一层页面上，它始终存在。

在做小程序的时候，大家可能会遇到的一个问题是，微信要求商品必须直接进入商品，并且不能在打开小程序的时候弹出获取用户信息的浮层。大家可以发现这里大部分商品并不是提前获取信息，而是采用事后处理的方式（相关建议请看下面链接）。

而且微信的登录方式和APP的登录方式、入口的“权重”也不同，由于小程序是基于微信的，所以登录的时候会调出微信登录弹窗。

APP调用流程：

小程序调用流程：

避免过多的交互，保持小程序的轻量、扁平化。

我们发现大部分产品在设计上都保持了比较扁平、浅层次的风格，以哈喽通为例，我们可以看到APP内的服务入口比较多，但核心的拼车业务在小程序中被精简，底部tab只有两个入口，而APP内则有四个入口。

设计小而美、高质量的小程序有几个关键词：场景、需求、重点、清晰、统一等。

对于作业帮这款产品，我们发现APP里面有很多入口和功能，但在设计作业帮小程序的时候，我们只暴露了最核心的“图片搜索”功能。而且，在小程序的设计上，我们尽量去除了不必要的修饰。比如，APP里面的相机背景是旋转的动画，但在小程序里就换成了静态的图片。

标题栏被“占领”，几种常用的搜索设计技巧：

在拼多多的搜索栏设计中发现，标题栏中搜索入口的位置是保持不变的，进入搜索后需要保持标题位置与微信右上角固定图标的偏移，所以选择了向下的排布。

弹出窗口不应遮挡顶部标题栏和底部标签栏。

我进行研究发现，很多App在设计弹窗的时候，并没有遮挡顶部标题栏小程序的默认操作区域，也没有遮挡底部的Tab Bar。

关于适配问题

这是微信开放社区用户反映的问题：

怎么改编？怎么改编才能更有效率，又能保证内容不被删减？

一个好的方法就是用组件化的方式定义图片内容的有效范围，无论哪个设计师设计，都需要设计在指定的区域内，外面的区域可以用来放置背景色或者扩展图片（可以裁剪的部分）等“不重要的内容”。

为了适配上述那么多的机型，设计师其实只需要对设计稿进行2个尺寸的修改，就基本可以满足主流机型的适配要求。

设计的时候一定要了解对应平台特性：小程序的基础能力

小程序基础能力

官方小程序设计指南：

对于小程序设计，可以使用1x图像设计

这样的适配的好处就是不仅可以满足各种尺寸手机的需求，还可以很好的进行尺寸的拓展，这也是大部分大厂的惯用做法。

抠图批注部分推荐高效分享平台：Blue Lake、

“添加到我的小程序”视觉引导

设计小程序时还需要考虑的一点是，在设计引导气泡时，尽量使用“轻量级”的设计语言来设计气泡。例如，下面看到的气泡效果就使用了两种常用的设计手法，全条形设计和气泡设计。

核心场景APP导流

例如印象笔记可以通过微信小程序保存到印象笔记，从“导入微信文件”选择导入文件后，会实时保存到印象笔记APP中（假设绑定了印象笔记APP）；

爱奇艺在视频播放页面有“用APP打开”按钮

在获取小程序中，通过引导用户打开APP来进行引导用户：

在Keep中，当你想查看更多课程安排时，会有引导提示“下载Keep APP即可体验完整版”

小惊喜：一个很有意思的小交互是，长按右上角的圆形关闭图标时，会出现一个浮层，这个浮层的定义是为了让用户可以快速切换当前打开的小程序。

付款限制

在微信小程序设计中，必须考虑微信一些与“支付”相关的限制。比如，只能购买实体商品，而知识付费、打赏等“虚拟商品”则因为苹果商店的“分成限制”而无法交易。比如，Get小程序中的课程板块不会体现购买入口，而只提供“请下载Get App，免费试听更多好课程”的文字引导，而App内有直接购买入口，点击购买时才会调出App的支付系统。

爱奇艺也是如此，在小程序中，如果用户触发VIP视频，会引导用户打开爱奇艺App，App内的流程也会引导用户进行会员充值，充值也会激活App的支付系统。

总结

接触小程序越多，就会发现小程序是各类产品展示核心产品功能的舞台。说得更简单一点，各家公司都将自己的“核心”业务放在小程序里，希望通过小程序的入口，快速、单一、高效地让用户更纯粹地体验产品的功能和服务，同时也起到引流APP流量的目的。

从设计角度来说，需要了解小程序的特点，比如小程序轻量级、易访问、用完即走的平台定位；在与APP保持品牌、设计语言一致的前提下，需要保证小程序本身的体验一致，这样才能更好地创造出符合用户心理期待的好产品。