最近在做一个小程序相关的项目，所以想写一篇比较全面，实用的文章，帮助越来越火的小程序和设计师们。

本文大约需要 10 分钟才能读完。它充满了有用的信息，所以请耐心阅读。

目录

1. 小程序发展历程

2.为什么叫小程序？它和苹果应用有什么区别？

3. 小程序的特点和优势

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

6. 如何设计小程序？设计小程序时应避免的问题

7.设计的时候一定要了解相应的平台特性

8. 设计小程序时，使用 1x 图像设计

9. 剪下并标记一些推荐的高效共享平台

10.“添加到我的小程序”视觉指南

11、核心场景APP导流

12. 付款限制

13. 总结

1. 小程序发展历程

2.为什么叫小程序？它和苹果应用有什么区别？

微信小程序是小程序的一种，英文名为Mini，是一款无需下载安装即可使用的应用程序，实现了“应用触手可及”的梦想，用户可以通过扫一扫或搜索打开应用。

小程序可以通过一套设计来适配两端，比如iOS和的改版都是独立设计的，分别适配两端的用户体验，而小程序就不同，只需要设计一套设计稿然后适配就可以了，省去了很多复杂的适配工作，比如端（据我了解市面上手机大概有3000款左右，可想而知适配相对iOS要复杂一些）。

小程序是无需下载安装，随时可以使用的应用，实现了“触手可及”的应用梦想，用户只需扫一扫、搜索即可打开，体现了“用了就走”的理念，用户不用在意安装太多应用，应用无处不在，随时可用，却无需安装或卸载。

3. 小程序的特点和优势

3.1 小程序特点

基于小程序轻量级、用得起、弃得掉的平台定位，它是触手可及、用得起、弃得掉的。

3.2. 小程序的优势

4.2.服务号：主要用于服务交互（类似银行、114，提供服务查询），认证前后每月可发送4条群发消息；

4.3. 小程序：新开放能力，支持开发者快速开发小程序。

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

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

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

1. 任务栏，发现-历史列表

2.群聊、单聊、消息

4.开发链接（公众号、其他小程序、APP

5. 扫描二维码获取

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

现在各大公司对于小程序的设计要求是怎样的？

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

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

旅行-滴滴

在设计滴滴APP和小程序的时候，就考虑到了平台的特点，使得操作目的地叫车更加简单、快捷。

在功能选择上，小程序中暴露更多核心功能，一些非必要入口并未体现，如消息、扫一扫、个人中心部分功能等，用户使用小程序叫车时更加专注

笔记-印象笔记

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

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

新闻-36氪

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

· 付费知识类目-获取

在主程序与小程序的设计上，核心商业内容更倾向于作为小程序来凸显主要信息，例如Get小程序在底部导航栏保留了主应用的“商城”与“课程”两个核心入口。

·视频-

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

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

6.1 官方小程序设计规则（我选取了部分内容，更多内容请访问官网）

#%E5%AF%BC%E8%88%AA%E6%98%8E%E7%A1%AE%EF%BC%8C%E6%9D%A5%E5%8E%BB%E8%87%AA%E5%A6%82

6.1.1. 焦点

6.1.2. 清晰的流程

6.1.3. 小程序可设计区域

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

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

6.2.1. 两端适配时

标题栏文字遵循各个终端的标准， 终端文字保持靠左，iOS 终端文字居中，设计时要注意 APP 右上角功能与小程序右上角固定入口的冲突（当然我发现部分 小程序也进行了定制）

右上角的图标是全局入口点。无论您在哪个级别的页面上，它始终存在。

6.2.2. 制作小程序时

我遇到的一个问题是微信要求商品直接进入商品，而不是打开小程序时弹出浮层获取用户信息。你可以发现这里大部分商品不是前置获取，而是后置获取（相关建议请看下面链接）

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

例如APP调用流程

小程序调用流程

6.2.3. 避免过深的交互，保持小程序轻量扁平化！

我们发现大部分产品在设计上都保持了比较扁平、浅层次的风格，比如哈喽，当初推出的时候，我们发现APP里面的服务入口比较多，但核心的拼车业务在小程序里被精简，底部tab只有2个入口，而APP里面有4个入口。

在作业帮这款产品中，我们发现APP内有很多入口和功能，但在设计作业帮小程序时，只暴露了最核心的“图片搜索”。而且，在小程序的设计上，

我们尽量去掉不必要的修改，比如在APP中相机背景是旋转的动画，但在小程序中就换成了静态图片。

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

在拼多多的搜索栏设计中发现，标题栏中保留了搜索入口位置，进入搜索后需要保留标题位置和微信右上角固定图标错开，所以选择了向下的排布。

6.2.5. 弹窗尽量不要遮挡顶部标题栏和底部标签栏

我进行研究发现，很多App在设计弹窗时，并没有遮挡顶部标题栏或者底部标签栏这个默认操作区域。

6.2.6. 关于适配问题

解决方案 1 是留出空间并用颜色填充。

方案二是设计几种方案，适配几种主流机型

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

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

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

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

小程序基础能力

API

如微信登录、支付、生物认证等开放接口能力以及位置、数据、记录

音频、视频等基本接口功能

成分

各类小程序组件

表单、导航、地图、媒体、画布和广告等组件功能

插件

完整的小程序插件

可以是前端组件，也可以是具备独立服务能力的功能模块，也可以是

是第三方提供的完整服务，比如腾讯视频插件等。

8. 设计小程序时，使用 1x 图像设计

这样适配的好处是可以满足多种尺寸手机的需求。

在尺寸上也是可以进行扩大的，这也是大部分大厂商的惯用做法。

这里有些例子：

9. 剪下并标记一些推荐的高效共享平台

10.“添加到我的小程序”视觉指南

设计小程序时还需要考虑的一点就是引导气泡的设计。尽量使用“轻量级”的设计语言来设计气泡，比如下面展示的气泡效果。

采用两种常用的设计技术：全条设计和气泡设计。

11、核心场景APP导流

比如可以使用微信小程序“保存到印象笔记”，选择“导入微信文件”导入文件后，会及时保存到印象笔记APP中（前提是绑定了印象笔记APP）；

爱奇艺视频播放页面有“使用APP打开”提示

在获取小程序中，引导用户打开APP

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

12. 付款限制

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

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

13. 总结

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

从设计角度来看

要了解小程序的特点，比如其轻量级、易访问、一次性的平台定位；在与APP保持品牌、设计语言一致的同时，要保证小程序的体验与小程序本身一致，这样才能更好地创造出符合用户心理期待的好产品。