返回上一页

「小程序模板上线」“十分钟设计小程序” 墨刀独家教程



机智有学识又高瞻远瞩的墨墨姐发现各种群都在讨论如何制作、设计小程序,于是呢,墨刀做了一个阳光普照的举动。我们做了最有代表性的小程序原型模板。



目前进入墨刀的应用新建页,已经可以看到新建模板区中的小程序模板啦。
通过使用小程序模板,真的可以让你十分钟设计一个小程序哦!


今天的文章会给大家带来以下惊喜:
  1. 做第一批走在时代前端的人:马上查看并使用小程序模板快速设计小程序。
  2. 向大师一样设计:用敏捷开发的理论快速摸清小程序设计的步骤。
  3. 贡献自己的优秀作品赢得上榜奖励:让自己的作品成为官方模板。

有点鸡冻是不是?墨墨姐已经看到你的星星眼了!话不多说,进入正题。




墨刀上线了哪些小程序?未来关于小程序的规划是什么?


并不是所有 App 都适合制作小程序的。


经过研究试用以及对小程序理念的分析,墨墨姐和墨刀的小伙伴挑选了 5 类共 10 个热门小程序,墨刀会把它们做成模板:


  1. 生活购物:美团外卖、有赞精选;

  2. 视频类:开眼、腾讯视频;
  3. 金融类:自选股、微众银行;
  4. 交通类:滴滴出行、携程;
  5. 阅读:今日头条、好奇心日报;

今天上线的就是最高频的两个:美团外卖 和 有赞精选。


  • 模板试用范围:电商、O2O、服务商城、商品交易及展示类小程序及 App 设计。



小程序解决就是这类实体商家的线上需求,从线下入口进入或是由线上高频需求驱动,通过小程序来达到便捷交易的目的。从视觉展示层面来说,美团采用列表方式来一次性展示更多商品信息,而有赞精选则通过瀑布流方式着重展示所推荐的商品,让用户聚焦单一商品信息。


扫描上方二维码即可预览小程序模板


是不是很像真实的小程序?每个模板都是使用墨刀内置组件制作的,也就是说你可以随意调节所有细节,也可以通过复制的方式,快速得到通用页面。

如何从 0 - 1 设计一个小程序?这些模板的复用程度如何?

下面我们就以相对较为复杂的美团外卖为例,为大家介绍使用墨刀来快速设计小程序的方法。


  • 美团外卖:18个核心页面,涉及到商品列表展示、购物车及订单管理。




制作小程序第一步:


从用户触达开始思考,用最短路径完成单一任务流程。



制作从核心页面入手延展至其他相关页面,如首页、单品页、中转页,在制作核心页面时就开始思考哪些部分是可以复用的,哪些是起到导航作用的,将他们制作成母版,保存以供复用。

第二步:
使用丰富的内置组件,拖拽制作核心页面




墨刀的设计面板足够大,小伙伴们可以把你的草图、照片或者截图放在设计面板右侧进行参考或临摹,会大大节省时间。灵活利用辅助线网格标尺可以让原型更加精致。

第三步:擅用组合,完成其他页面的布局设计。



我们会发现在设计中有些模块复用次数很多,利用组合(箭头方向)功能快速复制使用,方便高效。

第四步:页面逻辑连线,选择页面跳转手势。
选择需要点击的位置,连线到你想跳转的页面。想要转场动画,直接选择「从下方弹入」即可。
有的朋友会吐槽说设计的时候连线太多会妨碍设计,墨刀有隐藏链接线的功能,就是上图工具栏中圈中的眼睛 icon ,点击一下,整个世界都清新了。




第五步:运行,和设计人员及开发人员沟通、改动细节。



此时你已经得到一个可以演示的高仿真原型 demo 了,有时你需要和运营人员及技术讨论一下,你可以把相关人员拉进项目组,在运行页面就可以和其他成员讨论细节了。打点评论的方式让你更聚焦设计细节,同事的留言会以通知的方式让你及时知晓和反馈。

便签式需求文档

相信机智的你已经看到了黄色的便签,把需要注意的部分用便签标注出来放置在原型两侧,用最简洁的方式告知其他协作人员产品逻辑及注意事项,进行敏捷开发。老式繁复冗长的需求文档其实并不适用于小程序开发哟。

相信现在你已经 get 了如何设计或是用墨刀模板改造成自己的小程序了!
现在就进入墨刀官网开始你的十分钟制作小程序之路吧~~~~


墨墨姐,我觉得我做的 App 原型也不错,秒杀你的原型模板耶!

墨刀平台中不乏牛人,墨墨姐希望这些牛人的作品都可以提交上来,我们会为你制作一个高级模板区,不光展示你的作品,还能分享你在制作中的思考和对工具的使用经验技巧。

希望乐于分享的达人们越来越多的涌现出来,下面是优秀作品提交入口,一旦入选,我们会马上带着一系列的福利联系你(4 - 5月份墨刀的发布会也将是你的舞台)。

模板设计师请发送作品到:  y@mockingbot.com

墨刀团队下周将去泰国甲米开“年会”来庆祝全球用户超40万!


大家放心!团队出游期间也会全程为大家提供稳定高效的服务,请尽量使用电邮的方式反馈你的问题和建议哦,我们会在48小时内回复大家,鞠躬!



墨刀联合创始人

墨刀 合伙人

对知识和自我革命永远欲求不满

评论 9