老码农花3分钟给老爸做了个生日祝福的APP,他是怎么做到的呢?

1. 前言(从生日祝福说起)

农历8月11号是我老爸的生日,作为一个孝子,一个老码农的我除了送老爸皮鞋,衣服这些传统的礼物。这次我还想来点不一样的,给老爸来个surprise。因为我本身是一个程序员,买鞋子,买衣服还是远远不能够体现我们专业特色。所以这次我想整个活了,给老爸做个生日祝福的APP。话不多说,说干就干!!!

2. 明确计划和目标(不积跬步无以至千里)

从事互联网工作的小伙伴们都知道,一款软件从想法到最终落地有很多流程。我的这个小程序的落地自然也不例外。下图是一个标准的APP设计开发流程。
在这里插入图片描述

该流程一共分为六步:

  1. 编写需求文档:编写需求文档就是将客户的需求以文字的形式记录下来。通常是记录在Excel或者Word文档中,用于明确需求的细节。
  2. 画原型图:画原型图是就是将需求文档可视化的表现出来,应用到这里就是这个APP需要哪些页面,每个页面需要哪些内容,以及页面与页面之间的交互如何,都需要通过原型图表示出来。
  3. 画设计图:设计图就是在原型图上更进一步了,设计图可以真实的展现产品的效果,设计图是对前端开发必不可少的一个参考。
  4. APP开发:需求明确了,接下来的流程就是进入到APP开发阶段,开发阶段主要就是通过编码的方式将产品的需求实现。
  5. APP测试:开发完成之后接下来就进入了环节
  6. APP发布:开发和测试都顺利完成之后,这个APP就可以发布上线了。

万事开头难,我想一步步来实现这个APP。所以本文只涉及流程中的前两步:先明确需求,把APP的原型图弄出来。

  1. 编写需求文档:

    相册功能:要有多张温馨的照片,展示家庭的甜蜜时刻,相册的照片可以实现自动播放的效果,并且可以播放音乐,生日快乐。
    主页功能:要有一个主界面,主界面的主题就是欢乐喜庆,可以有大大的生日快乐的标识。

  2. 画原型图
    我不是专业的产品经理,原型图画的少,所以我咨询了下我做产品经理的朋友们,让他们推荐下他们常用的画原型图的软件,令我没想到的是,他们竟然一致推荐我使用 摹客RP 这款软件,这着实让我有点以外,因为平时他们的之间的共识比较少。
    在这里插入图片描述

他们说摹客RP软件的特点就是快速简单,内置丰富的组件和图标,可以用它来快速搭建原型图,同时它有海量资源库和模板库可以一键同步。另外它还有强大的交互能力,可以直观的展示产品体验。

抱着试试看的态度,我正式开启了我的摹客RP的体验之旅,打开界面一看:摹客RP,重新定义原型设计 。这口号一看就挺牛逼的,看来群众的眼睛是雪亮的。

在这里插入图片描述

3. 实战开始(梦想要一步步实现)

3.1. 完备的文档

菜鸟上手体验,首先要做的事情就是学习软件的使用,摹客RP提供了完整的使用教程供新手使用,这里有图文教程,有视频教程,有专题更有海量的例子。这些教程通俗易懂,新手一看就能上手。它的图文教程非常的详细,详细到每个控件的具体使用上,而视频教程则更多的侧重于快速上手实战上,推荐新手直接看视频。

在这里插入图片描述

3.2. 绘制主页(漂亮的主页让人耳目一新)

首先,我们需要创建一个项目,创建好项目之后,就可以在该项目里面添加页面了。

主页主要就是一个生日快乐的背景图以及一个跳转到相册的按钮。点击该按钮之后即可跳转到相册页面。这里在进入相册的按钮上添加交互,点击该按钮之后就可以跳转到相册页面,设置那叫一个简单。

在这里插入图片描述

3.3. 绘制相册页(张张照片送祝福)

相册的功能主要就是多张图片轮播的效果。这里的页面由一个主页面和多个辅助画板组成。相册页通过容器组件+辅助画板来实现轮播的效果。容器组件主要就是用来存储辅助画板,辅助画板是用于存放需要轮播的画面,相册画板如下图所示:

在这里插入图片描述

3.4. 最终的效果(点点效果,一片孝心)

下图展示了该APP最终的实现效果。页面简洁明了,操作简单方便。在这里插入图片描述

4. 总结

本文通过摹客RP演示了一个简单的APP原型图的制作过程。

这也是我第一次使用摹客RP,其实在使用摹客RP之前我内心还是有点忐忑的。因为在此之前我只是个没有画过原型图的老码农。但是当我真正使用起摹客RP之后,我感觉摹客RP真的太好用了,可以说有手就能画原型图。它的特点就是快速简单,这得益于它有丰富全面,简单易懂的教程;它有清晰明了的界面,它有非常的强大的交互功能。它实实在在的可以助力每一个新手迅速上手原型图设计。

摹客RP海量的资源库和模板库更是可以助力产品经理等专业人士找到灵感以及快速实现其想法。摹客RP还支持团队协作,支持多人同时编辑。总体而言,摹客RP值得每个小伙伴上手体验一波。

有的小伙伴可能会担心数据安全问题,其实这完全不用担心啦,因为摹客支持企业私有部署,支持功能定制,更可以享受摹客的专属服务。

猜你喜欢

转载自blog.csdn.net/u014534808/article/details/126676621