邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

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

热门文章

Mockplus是什么?

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

了解更多

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

Anne 2018-06-02 02:12:35 阅读:17089


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


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


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

微信小程序原型模板分享


一、微信小程序现状


微信小程序于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


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


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


交互步骤拆解


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


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


Mockplus原型交互设置


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


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


原型交互设置步骤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打开查看并修改,欢迎大家前来交流以及批评指正。(点击查看更多小程序原型设计模板

原型工具难上手、速度慢?试试Mockplus!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:727533832 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶