设计协作,用摹客

更好的产品协作设计平台,设计师的利器,产品经理的帮手,工程师的伙伴

文章分类
设计1+2,摹客就够了!

摹客,支持Sketch/PS/XD/Figma/Axure设计稿交付、自动标注切图、全流程协作。助力产品团队高效工作!

立即开启
【友情推荐】uimaker - 专注于ui设计,为ui设计师提供ui设计相关教程、素材及灵感。

了解更多
入门教程 了解更多
成都君德鑫力达科技发展有限公司

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

博客 > APP设计 > “成语猜猜看”“拼多多”“肯德基”微信小程序原型模板分享

“成语猜猜看”“拼多多”“肯德基”微信小程序原型模板分享

Anne
2018-06-02
137914


“小程序的创新,主要表现在从以拥有为中心的用完闲置,转向以使用为中心用完即扔,让用户无论走到哪里,都可以随取随用,而无需回到特定的平台和客户端”

——中国社会科学院信息化研究中心秘书长姜奇平

经过一年多的发展,微信小程序已真正融入我们的生活。在这里给大家分享几款优秀的小程序原型模板,助你分分钟设计自己的小程序。

一、微信小程序现状

微信小程序于2017年1月9日凌晨上线,由2017年12月底,由“跳一跳”在短期内爆发。据QuestMobile数据显示,小程序的用户规模已突破4.7亿(数据来源QuestMobile微信小程序洞察报告)。

二、微信小程序发展

由QuestMobile数据显示,Top100小程序中,手机游戏行业占比最高,其次是生活服务和移动购物。其中50%的小程序并没有自己独立的APP,主要对于功能相对简单、低频刚需的应用场景。

但对于功能复杂,需要沉淀用户行为数据、培养用户粘性的应用场景,则仍然需要开发自己的APP,以实现互补协同发展。

三、微信小程序原型绘制方法

如果从已有app转为小程序,只需要保留核心功能。

如果没有app,可以围绕核心想法确定核心功能,再围绕核心功能细化,确定产品定位,使用场景,需求描述。

把核心需求转化成产品需求,可以利用思维导图,或者用Mockplus的脑图

四、小程序原型分享

Top100小程序中,行业占比比较高的分别是优秀、生活服务、和移动购物。这里分享的小程序原型模板分别是这三个行业,排名靠前的优秀小程序原型。

1、成语猜猜看小程序原型

成语猜猜看,在游戏行业小程序Top10中排行老二,累计活跃用户14703.3万。其原型动图如下:

摹客-成语猜猜看小程序原型

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

模板里包含了首页、开始猜成语、成语接龙、历史成就、全民玩明星、成语消消看等核心页面。成语猜猜看小程序里面的广告,被我去掉了,个人不太喜欢。

模板中的有大量用于填充汉字的格子,用的是“快速格子功能”(点此查看快速格子教程)。成语猜猜看小程序原型中,难点在于成语接龙页面,汉字与填空格子间的交互。

交互步骤拆解


①、选择要填入的空格,点击时格子颜色变深。

对格子自身做交互,触发方式选择“点击时”对形状组件执行“设置颜色”命令,然后右侧属性面板设置颜色和延时。


②、选择下方字体,填入对应格子中

下方字体对上方格子做交互,交互1:点击时,形状组件变成白色,设置方式同上;交互2:点击时对形状执行“设置文本”命令,右侧设置需要显示的文本信息。


③、字体填入后,下方备选字体消失

下方形状组件对自身做交互,交互方式:点击时对形状执行“显示/隐藏”命令,右侧设置需要显示的文本信息。


④、填入字体后,下一要填入汉字的空格颜色变深

下方形状组件对下一空格做交互,触发方式选择“点击时”对形状组件执行“设置颜色”命令,设置同上。

每个汉字平均要做4个交互,这样算下来全部做交互就比较庞大,也容易出错,交互设计时,可以选择2-3个成语示例,旁边加上备注即可。

2、拼多多小程序原型

拼多多,移动购物行业小程序Top10中排行第一,累计活跃用户数23332.12万,其原型动图如下:

摹客-拼多多小程序原型

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

模板里包含了首页、热门、服饰、鞋包、母婴、推荐、搜索等核心页面。电商类普遍有大量的商品展示信息,可以用快速格子+数据填充来实现。

模板中,点击不同菜单切换不同页面,用的是“按钮栏配合内容面板”菜单栏配合内容面实现的(点击查看使用内容面板快速切换内容

3、肯德基小程序原型

肯德基,在生活服务行业小程序Top10中排行第一,累计活跃用户数7271.37万,其原型动图如下:

摹客-肯德基小程序原型

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

模板里包含了首页、我的卡包、我的订单、K金商城、登录、选餐等核心页面。个人比较喜欢“肯德基小程序”,简单,干净。

模板中,地点选择,直接用的是“下拉列表框”组件实现的(点击查看下拉菜单设计技巧

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

上一篇
干货!2018年你值得一看的网页设计作品集赏析

Grace   06/04

Mockplus走进成都工业学院

Jongde   05/30

下一篇
需要帮助?

我是小摹,你的7*12小时产品顾问

立即扫码加入官方微信群

官方热线:19130671449

服务邮箱:service@jongde.com