之前写了：

1. 为什么我们需要全栈工程师（全栈工程师系列1）
   

这一篇讲讲产品原型设计，后面的博文我完全用这个实战案例来讲。

目标：提供亲子国际化相关活动/产品的发布、交易平台，如参观大使馆活动、参观国际学校活动、普吉岛营地项目、美国高中游学项目等。

核心价值：最全、最及时的发布亲子国际化教育、旅游、文化等方面的内容，方便家长报名参加。

竞争者分析：目前的亲子活动平台，如父母邦等

是做平台还是做内容：考虑到平台得有点自己独特的内容，故二者同时做。

产品名称：两小童，取自宋朝杨万里的《舟过安仁》：一叶扁舟两小童，收篙停棹坐船中。

商标注册：已申请

微信服务号：已申请

域名：twolittlebaby.com ，已申请

那些看似重要但是前期多余的功能：国际商品的展示和销售

然后我们来开始设计我们的APP（网站略），先自行补补UI/UX的区别（http://www.webdesignerdepot.com/2012/06/ui-vs-ux-whats-the-difference/ ），所以我们这里应该主要是UI prototyping design，那为GUI和UI的区别是什么呢？参考这里：http://stackoverflow.com/questions/3191844/what-is-the-difference-between-gui-and-ui，那你可能还听说过线框（wireframe），那和prototype 什么区别呢？这里（http://community.protoshare.com/2010/12/wireframes-prototypes-is-there-really-a-difference/  ）给出答案，简单来说wireframe是静态页面，prototype包含了动画等动态内容。有些朋友还听说mockup，那和prototype什么区别呢？这里给出答案https://designmodo.com/wireframing-prototyping-mockuping/，用一张图展示他们的区别：

简单来讲，mockup是指都开发了个半成品了，是真的哟，只是还没完全实现完，而prototype只是看起来很像，但是是假的。设计领域分的好细哟（Jobs先生也有类似偏执狂）。所以这阶段的工作，我们就叫产品原型设计吧，英文名叫GUI prototyping，说出这几个字，保证专业的交互设计师也对你肃然起敬，说小伙子不错，说话很专业，be professional。

工欲善其事，必先利其器，我们看看原型设计的工具，好的通常都要收点费用的https://blog.prototypr.io/the-7-best-prototyping-tools-for-ui-and-ux-designers-in-2016-701263ae65e8#.m6g8y4e8v，还有这里：http://www.cnblogs.com/wawahaha/p/3461585.html，Axure呢，做手机的效果有点费劲，综合（学习的难易程度/模板的丰富性）比较了三个：Pencil，Balsamiq Mockups 3，Mockplus，最后选择了Mockplus。

这是用Mockplus做的3张效果图：

结论：用Mockplus做原型图还是很好用的，但是确实需要一个学习时间，大概熟悉的话，应该>4小时的学习时间，但这绝对是值得的，因为需求的明晰是项目成功的一半。

参考：

1. http://stackoverflow.com/questions/295589/what-program-should-i-use-to-mock-up-guis

2. http://www.cnblogs.com/wawahaha/p/3461585.html

3. https://en.wikipedia.org/wiki/Website_wireframe

4. https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399

5. Paper Prototyping: The Fast and Easy Way to Defineand Refine User Interfaces，http://wireframe.vn/books/Morgan%20Kaufmann%20Paper%20Prototyping%20The%20Fast%20And%20Easy%20Way%20To%20Design%20And%20Refine%20User%20Interfaces%20Ebook-Lib.pdf， 或者百度云盘： http://pan.baidu.com/s/1slcqfzn  

6. https://designmodo.com/wireframing-prototyping-mockuping/

7. http://community.protoshare.com/2010/12/wireframes-prototypes-is-there-really-a-difference/

8. http://www.mockplus.com/blog/post/146-top-20-ux-design-blogs-and-resources-you-should-follow-in-2016

9. http://www.creativebloq.com/wireframes/top-wireframing-tools-11121302

10. http://stackoverflow.com/questions/295589/what-program-should-i-use-to-mock-up-guis

Pencil软件的模板:

1. https://www.edrawsoft.com/share.php

2. https://nathanielw.github.io/pencil-stencils/

3. http://rudylattae.github.io/evoluspencil-pretotype-template/

加我私人微信，交流技术。