小程序UI设计指南

FEVTE编注：更多UI设计欣赏和UI设计作品交流、UI设计学习请访问飞特网UI设计栏目，地址：https://www.fevte.com/shejixinshang/UIsheji/

目录

1.小程序的发展史

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

3.小程序的特点及优势

4小程序与订阅号和公众号在微信中的定位

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

6.如何设计小程序？设计小程序，需要避免的问题点

7.做设计必须要了解所对应的平台特性

8.设计小程序的，使用1倍图设计即可

9.切图标注部分几个推荐的高效共享的平台

10."添加到我的小程序"视觉引导

11. 核心场景APP导流

12. "支付"限制

13.总结

1.小程序的发展史

• 2017 年 1 月 9 日，张小龙在 2017 微信公开课 Pro 上发布的微信小程序正式上线。

• 2017 年 1 月 9 日微信小程序平台正式发布，在业界引起很大的轰动。

• 2018 年 2 月，微信官方发布公告称：已对涉及假货高仿、色情低俗和违规「现金贷」等超过 2000 个微信小程序，进行永久封禁处理。

• 2019 年 8 月 9 日，微信向开发者发布新能力公测与更新公告，微信 PC 版新版本中，支持打开聊天中分享的微信小程序。

  
  

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

微信小程序，小程序的一种，英文名 Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用「触手可及」的梦想，用户扫一扫或搜一下即可打开应用。

小程序能够通过一套设计来适配 2 端的，比如 iOS 与 Android 的改版是分别适配了 2 端使用体验来独立设计完成的，而小程序则不同，只需要设计一套设计稿，然后适配，节省了适配的很多复杂工作，比如安卓端（据我所知目前市面上有大概 3000 种安卓手机，可想而知适配比 iOS 相对要复杂很多）。

小程序是一种不需要下载安装即可随时用的应用，它实现了应用「触手可及」的梦想，用户扫一扫或者搜一下即可打开应用，也体现了「用完即走」的理念，用户不关心是否安装太多应用，应用无处不在，随时可用，但无需安装卸载。

3.小程序的特点及优势

3.1小程序的特点

根据小程序轻量且用完即走的平台定位触手可及、用完即走。

3.2. 小程序的优势

• 出色的用户体验：加载速度快于网页，可达到近乎原生 App 的操作体验和流畅度。

• 更低的开发门槛：一次开发，多端兼容，免除了对各种手机机型的适配。

• 社交分享属性：坐拥微信 10.83 亿用户，基于微信强大的社交关系链，可以在微信内被便捷的传播和获取。

• 更短的服务路径：无需下载，通过线下扫码、社交分享、平台搜索和附近的小程序等能力，缩短了服务路径。

  
  

4.小程序与订阅号和公众号在微信中的定位

4.1、订阅号：主要偏于为用户传达资讯（类似报纸杂志），认证前后都是每天只可以群发一条消息；

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

4.3、小程序：是一种新的开放能力，开发者可以快速的开发一个小程序。

小程序可以在微信内被便捷的获取和传播，同时拥有出色的使用体验。应该说承载了一部分APP的核心功能与小程序中，比如打车、比如订餐、比如自行车骑行类等产品

小程序在设计初期也承载了一些数据收集的目的，比如之前我们开发一些小程序是用H5网页来写，整个环节不受微信生态的控制，而一些数据上的收集，只能是知道一些相对比较"粗颗粒"的数据，比如用户的流量的数据和一些支付相关的数据，而且H5网页嵌入的话，会涉及到一些加载速度问题，体验相对不够流畅，而小程序的诞生则解决了数据全流程收集的问题和解决了之前的用户体验问题

小程序如何被用户发现

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

2.群聊、单聊、消息

3.搜索长按识别小程序码，广告等

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

5.扫码获取

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

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

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

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

·出行类-滴滴

滴滴的APP与小程序设计时，考虑到了平台的特性，更简单快捷的操作目的地进行叫车服务，

在功能选择上更加提供核心功能在小程序露出，一些非必须的入口则没有体现出来，比如消息，扫一扫以及个人中心里的一些功能等，用户在使用小程序叫车时更加的专注

·笔记类-印象笔记

印象笔记APP和印象笔记小程序的功能体现，也是有很大的不同，在印象笔记小程序中，只体现了最核心的几个入口"由我创建""来自分享""微信文件"印象笔记的小程序更多的是通过微信这一流量入口使得用户能够及时的收集来自朋友的分享笔记以及快速创建笔记；

还有一个很"微信"的功能就是导入微信文件功能，此功能能够一键导入微信聊天记录中的一些文件到印象笔记APP中，及时保存防止用户的文件过期无法使用。

·新闻类-36氪

36Kr主程序和小程序对比更加明显，在36氪小程序精简版，则更加轻量化的体现了主要资讯信息，其他的入口则直接忽略体现出来，把最重要的核心点体现了出来，其他非主要的"干扰"小程序轻量化感受的因素都直接放弃体现

·知识付费类-得到

在主程序与小程序的设计中，更多的是偏向于核心商业化部分内容作为小程序突出主要信息，比如得到小程序，在底部导航栏中保留了2个主应用程序中核心的入口"商场"和"课程"

·视频类-哔哩哔哩

在哔哩哔哩小程序中，主要把其核心的两个主导航分类进行了提取，分别是"热门"和"追番"，分区页面对应APP提取了部分功能到小程序中，我的页面对应APP只提取了历史记录+意见反馈到小程序中；搜索结果页对应APP  排序方式和筛选部分进行了大量"简化"；在微信小程序中，不能对内容进行点赞和评价