微信小程序于2017年1月9日凌晨正式上线，经过一年多的发展，小程序用户规模已超过4.7亿（数据来自微信小程序洞察报告），其商业价值日益凸显，因此越来越多的开发者开始拥抱小程序。在开发过程中，小程序原型设计必不可少，通过可交互的原型，我们可以快速的将自己的产品概念和想法呈现出来。

相比传统APP，我对小程序的评价是：“虽小，但该有的功能都有。”它只保留了APP最重要的核心功能，真正做到了小而精致。因此，我们在设计的时候，会和APP的设计有很大的不同。

首先我们来看看下面两个应用，具体说一下APP与小程序设计的异同。

商城每日生鲜APP与微信小程序界面对比

首先小程序给人的第一印象就是界面非常简洁，这也符合小程序的设计要求。小程序界面直接把APP界面中以大卡片形式展示的新人专属红包用悬浮图标代替。其他以卡片形式展示的储值红包、扶贫、日常签到等功能，在小程序中直接被移除。此外，APP界面中的“会员”底部菜单页，在小程序中也被直接移除。另一个很大的不同是，在APP中，可以通过横向滚动直接切换不同品类的商品，而在小程序中，只能通过点击上方的商品分类来切换不同的商品。

小红书APP与微信小程序界面对比

在我看来，小程序的界面极其简洁，非常符合大众审美。在APP中，底部有5个菜单（首页-商城-图片-留言-我），在小程序中直接精简为3个（首页-商城-我）。在APP商城页面，商品以实体图标的形式分为不同的类别。但在小程序中，没有任何引导和功能分区，用户只能看到和搜索商品，商品以竖式卡片的形式展示。这样的设计给人的感觉非常清爽，一点也不臃肿。

通过以上两个应用的分析，我们可以对小程序的设计规范做出总结。

1.灯光设计

总体来说，与应用程序相比，小程序简化了功能，只突出核心功能。

2. 应该使用水平滚动吗？

目前大部分小程序并不采用这种方式，但有些小程序如豆瓣评分（见下面的原型示例）正在使用。

3. 团结

从以上两款应用来看，小程序的配色、图标与App内保持一致，小程序中应减少图片、实体图标的使用，有利于实现页面简化、色彩统一。

4. 底部导航栏

小程序底部导航栏一般配置2-5个项目，我们可以更多使用顶部导航栏和悬浮按钮。

这里给大家推荐几个超实用的小程序原型设计模板，使用简单快捷的原型设计工具--小程序原型设计模板。只要你能灵活复用它们，就能快速设计出属于自己的小程序。

1. 交通 - 准确、实时的公交信息

这款软件被称为“公共交通工具”，可以帮助用户实时查看公共交通的位置。打开这个小程序可以定位你的位置，显示附近的公交车到站信息，并在“最近使用”中选择车站、公交车，并查看你最近到过的公交路线。

模板包含附近路线、最近使用、收藏、路线规划等核心页面。

动态图片：

在线演示

2.社交-微信原型组件分享-WeUI

本原型主要的页面有：图标页面、按钮页面、表单页面、提示信息页面等，主要参考了微信小程序设计指南来制作，其中的组件可以灵活复用。

动态图片：

在线演示

3. 社区-豆瓣评分

该小程序提供电影搜索及评分功能，包括已上映电影的电影信息搜索，无需登录注册，模板包含电影、我的、电影详情、评分展示等核心页面。

动态图片：

在线演示

4.微信官方-小程序示例

主要页面：小程序组件列表页、小程序接口列表页、小程序组件页面、小程序接口页面等。

动态图片：

在线演示

5.旅行-携程旅行

用户进入小程序后，可以根据酒店、机票、火车票、汽车票进入相应的导航，然后根据自己所在的城市和需要到达的城市搜索酒店、机票、火车票、汽车票。

动态图片：

在线演示

模板包含小程序入口页、首页、酒店列表页、微信登录页、预订页等。

以上小程序原型设计模板均可下载、打开、查看、修改，欢迎大家交流。

设计+协作，就够了！

免费使用