产品新手 - 为什么我要开发这款原型笔记 App?

2016-09-28 17:07:00

我做iOS开发，呆过两家公司，摸爬滚打三年工作经验，没有遇到过心仪的产品经理，随着工作时间久了，多多少少也听闻一些八卦，就会觉得外面的产品经理，也差不多都这样吧。

作为开发人员，两耳不闻窗外事，一心只想把自己的代码撸到最好，不过想达到这点，并不简单，过硬的技术是一方面，另一方面就是与你共事的同事，原型图、效果图、接口设计这些都可能会让你最终的代码一团糟。最重要的是原型图，产品经理作为团队领头人，从他手上出来的原型图就是一个方向，团队里的UI，研发，测试等都指望着原型，一旦表达不清，出现歧义，研发的结果就会出现很大的偏差，不仅可能会背离产品方向，还会影响节奏和效率。

客户端开发环节很注重细节，开发人员能触碰到产品的所有地方和所有细节，所有的交互他是第一个体验，我觉得不能忽视他们的意见，他们的感受不能不在乎。而原型图和效果图往往是细节控制不够好的环节，尤其是一些新手同事，你在原型图上不经意的点缀，可能需要开发人员多花好几倍的时间去实现，而你的不经意对产品本身却没有一点意义的，也许是我不理解你的想法，但是我也想理解，我也想跟你交流，但是我公司的原型图，开发人员是接触不到的，原型图先是交到设计人员手上，设计人员按照原型图做效果图，等开发人员看到效果图的时候，你只能照着做了，没有回转的余地，可能直到你离开公司，你也不一定能认识那个做原型的人。这是我们公司的一种开发模式，如果原型图本身没有问题，这种模式当然可行。

可以说解决原型问题，就能很大程度上解决开发中的很多令人头疼的问题，所以这时候，一名心仪的产品经理是很重要的。

一、开发过程

也正是这样的一个环境，让我有了想做这款应用的想法，既然没有心仪的产品经理来解救我，那我就试着自救吧，我开始慢慢尝试，因为有本职工作，所以只能利用下班时间和周末来做开发。

我脑海里的画面是一张白纸，白纸旁边有个小箱子，里面装着多种控件元素，有空白页面、图片、文字标签、按钮、导航、网页、地图等等，你可以把他们摆到白纸上去，可以通过拉扯来改变他们的大小。这是最初的想法，我只给你一张干净的空白页面和一些控件元素，你能利用这些做出什么样的原型图，就取决于你的想象力了。

这个画面看上去很简单，但实现起来是要考虑到很多地方。第一个最基本的功能就是让控件动起来，可拖动位置和改变大小。

Default-控件拖动

第二个基本功能就是对控件的操作，背景颜色、透明度、边框、添加子视图、绑定事件。我需要设计一个控件系统和控件对应的功能系统，然后来管理他们的权限，因为每个控件都有不同的操作权限。

Default-一些控件

Default-控件操作

我并不满足在一屏幕的空间里画原型，空间相对太窄，因为产品的情况会多种多样，对应的界面排版也会不同，比如微信朋友圈，不同种类的信息和不同的情况呈现出来的界面都不尽相同，这个时候一屏幕是远远不够的，并且真实的App超出屏幕的内容都是可以滑动看到的，这个功能很重要，也接近真实App的交互方式。

Default-不止一屏空间

一般在做原型图的时候，会有很多可复用的模块，于是我让一些控件可以添加子视图，成为一个小组件，方便整体拖动、复制。

Default-组件

所有的交互以接近真实App的交互为目标，让大部分控件可以添加事件，响应事件有真实App里常见的页面跳转和弹框，后续会增加更多样的交互方式。输入框可输入文字，地图不再是一张默认图片，网页可以自己设置网页链接地址。

Default-绑定事件

接下来要做的就是导航方式，在选择风格的时候，可以选择空白页面、底部导航和侧边栏导航，都是常见App里面的导航方式，这里的交互方式与真实App一模一样。

Default-选择风格

预览和编辑，编辑的时候可添加、删除、修改原型图，预览的时候生成一个原型小程序，激活所有的交互，同时具有出色的使用体验。

Default-预览/编辑

到这里软件开发基本就到这了，剩下的是一些细节优化。找了设计朋友帮忙做了图标，因为产品定位在工具，所以在设计上下的功夫就比较少了，简简单单就可以了，我追求产品极简，最终的效果我也比较满意。随后我建了个QQ群，写了篇关于产品的介绍软文，在简书上发布，吸引了60多人，这批作为内测用户，他们给了我一些意见和建议，很感谢他们。在慢慢优化之后，在9月13号上架了AppStore。

二、给App取名—Default

default在程序语言里面的意思是如果前面的条件都不满足就执行default，所以如果你不满意从前使用的原型工具，那就使用Default吧。

Default能让初级产品经理和即将进入这个行业的朋友们了解到一些常识性的东西，能保证画出来的原型图更加严谨，逻辑清晰，层次分明。我希望原型图不要是随随便便画出来的，画原型是为了更加透彻、更加系统的了解自己的产品，在画原型的过程中，偶尔会有一些若有所悟的启发，这更需要产品经理的专注和认真，原型图是为了更好的表达你的产品思路，这个过程其实并不追求快速，而是讲究精细准确。

三、Default-可生成原型小程序

Default不需要你写一句代码即可生成可交互的原型图，它符合人们追求自由自在的生活态度，你能在任何时候任何地点做原型，随时输出你脑海里的“产品模型”，但又无需坐在电脑面前。实现了无需设计开发介入即可出现一个真实的产品原型小程序，除了不具备网络数据功能。Default要做的就是这样一件事情——产品经理的掌上原型笔记。