【附源文件】5款精美小程序原型设计模板,触手可得

我是创始人李岩:很抱歉!给自己产品做个广告,点击进来看看。  

微信小程序于2017年1月9日凌晨正式上线。经过一年多的发展,小程序的用户规模已突破4.7亿(数据来源于 QuestMobile微信小程序洞察报告 ),其商业价值也是日益凸显。因此,越来越多的开发者投入到小程序的怀抱。说到开发, 小程序原型设计 就必不可少,通过可交互的原型,我们可以快速的呈现自己的产品概念和构想。


与传统的APP相比较,我对小程序的评价是:“麻雀虽小,五脏俱全”。它仅仅保留了应用APP中最主要的核心功能,真正做到了小且精。因此,我们在做设计时,也会与APP的设计大相径庭。

首先,我们来一起看看下面这两款应用,具体聊聊APP与小程序设计的异同。

商城类

每日新鲜的APP和微信小程序的界面对比。



首先,小程序给人的第一感觉就是界面非常简洁,这也非常符合小程序的设计要求。其中小程序界面中直接以悬浮图标的形式取代了APP界面中以大卡片形式展现的新人专享红包,其它的以卡片形式展现的储值红包、扶贫助困、每日签到功能,直接在小程序中去掉了。此外,小程序中直接去掉了APP界面中的“会员”底部菜单页面。还有一个比较大的区别是:在APP中,通过水平滚动商品,可以直接切换到不同类别的商品,而小程序中只能通过点击上方的商品分类切换到不同商品。

小红书的APP和微信小程序的界面对比。


从我看来,小程序界面是极其简洁的,非常符合大众审美。在APP中底部有5个菜单(首页-商城-拍照-消息-我),在小程序中直接删减为3个(首页-商城-我的)。在APP商城页,以实物图标的形式将商品分为不同类别。然而,在小程序中,无任何引导和功能分区,用户只能看到及搜索商品,商品通过卡片竖排列的形式展示。这一设计,给人的感觉非常清爽,毫不臃肿。

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

1.轻设计

总的来说,小程序与App相比较,都化繁为简,只突出其核心功能。

2.是否应该使用水平滚动

目前大部分小程序不采用这种方式,但是也有像豆瓣评分(见下方原型实例)这样的小程序在使用。

3.统一性

从上面两款应用来看,小程序的色彩、图标和App内是保持一致的。小程序中应减少banner图以及实物图标的使用,这样有利于实现页面简化和色彩统一。

4.底部导航栏

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

下面给大家推荐几款小编使用简单快速的国产原型工具-Mockplus,做出的超实用小程序原型设计模板,只要你能做到灵活复用,就可以快速的设计出属于自己的一款小程序。

1. 交通-车来了精准实时公交

这款软件被誉为“公交神器”,可帮助用户实时查看公交位置。打开这款小程序就能定位个人所在地点,显示附近的公交到站信息,并可将某个站点,某个公交,还能在“最近使用”中查看你近来看过的公交线路。

动态图:

【附源文件】5款精美小程序原型设计模板,触手可得

在线演示:https://run.mockplus.cn/3LQjKEwH9FCkWy2P/index.html

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

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

这个原型的主要页面有:图标页面、按钮页面、表单页面、提示信息页面等。其主要是参考 微信小程序设计指南 制作的,里面的组件可以灵活复用。

动态图:

【附源文件】5款精美小程序原型设计模板,触手可得

在线演示:http://run.mockplus.cn/k4WVQNbIykANKTgi/index.html


3. 社区-豆瓣评分

这款小程序提供电影查询与评分公示,包括上映影片的影讯查询。无需登录和注册。

动态图:

【附源文件】5款精美小程序原型设计模板,触手可得

在线演示:https://run.mockplus.cn/o6mg2vDUgUd8nEIF/index.html

模板里包含了电影、我的、电影详情、评分展示等核心页面。


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

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

动态图:

【附源文件】5款精美小程序原型设计模板,触手可得

演示地址:http://run.mockplus.cn/k4WVQNbIykANKTgi/index.html


5. 出行-携程旅游

进入小程序之后,用户可根据酒店、机票、火车票和汽车票来进入对应导航,然后就可以根据自己所在城市和需要抵达的城市来查询酒店、机票、火车票以及汽车票。

动态图:

【附源文件】5款精美小程序原型设计模板,触手可得

演示地址:http://run.mockplus.cn/iFts2dbHDujjtvl8/index.html

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

以上小程序原型设计模板都可以通过下载Mockplus打开查看并修改,欢迎大家前来交流以及批评指正。

随意打赏

小程序开发
提交建议
微信扫一扫,分享给好友吧。