如何基于功能快速画原型?

2016-10-17 11:17:00

实现声明，我没有任何说别人慢的意思，是基于自己的工作体验写的。写的不好的地方，请多多指点

在前面两篇文章，我自己整理了下注册&登录需要注意的事项和规则，功能也进行了部分的规划，接下来，正式开始被认定为产品人必会的技能：画原型。

平台：windows 10（mac没用过，软件使用是一样）
软件：Axure 8.0.0.3303（使用墨刀什么的都可以）
优质设计网站：dribbble & UI中国

一、软件的选用，选择适合自己的。

市面上关于原型的软件已经出现了爆发性的增长，有很多针对PC、移动特质的软件。

Axure：老牌正统软件，使用体验中规中矩，但是功能十分完善。

墨刀：倾向于移动APP的原型，可以在20分钟内建立APP原型。

Mockplus：国产团队，相当于Axure的升级版，提供了更快速的原型云分享。

justinmind：远洋团队，制作移动APP的交互非常迅速，可以快速完成带有交互的原型。

其他的就不一一列举了，可以前往http://next.36kr.com/posts/collections/1查看排名。

我最终选择了Axure8，因为公司团队内都是用这一款软件，在修改、同步上可以具备统一性；其次，因为自己对Axure8比较熟练，制作起来更加得心应手。

总结：记住原型软件只是工具，没必要过分纠结哪一款，适合你就是最好的。

二、定义项目的页面层级，输出页面脑图。

确定了这一期的功能结构后，很多产品经理就直接开始进入到了原型设计和流程设计这一步（比如我就是这样），这导致自己在原型设计时，考虑的内容过多导致原型设计缓慢，同时任何页面上的变更都会导致原型的修改，时间成本和思考成本提高，会影响项目本身的进度。这就是在前期做页面层级的意义，解决没必要的重复思考。

使用拼多多的客服页面来举例。

在分析时，我标注了功能的使用者，这样在之后整理功能时，可以更加快速的定位页面的功能展现对象。

用户页面分析（举例）：

1、注册&登录页面一定是要有的，他保障了用户进入咨询流程的区分。

2、会话页面一定是要有的，他保证了客户和客服消息有双方可见的展现。

3、功能选择页面一定是有的，这保证了在单一页面的简洁性。

4、图片发送页面一定是要有的，这保证了售后服务的服务快速定位。

5、商品选择页面不一定有，产品限制了不能发送店铺所有的商品。

......

客服页面分析（举例）：

1、用户列表页面一定是有的，这保证了定位用户问题。

2、会话页面一定是有的，这对应了用户的会话页面。

3、设置页面一定是有的，这保证了电商部分属性的功能：快捷回复、自动回复等。

4、聊天记录页面一定是有的，这保证了之后的问题追溯。

....

之后，开始输出脑图，以用户界面的一个页面举例：

拼多多对自己产品的定义是：功能必须轻快，所以，在用户端，功能和页面都很轻，不像淘宝可以发送短视频等，这保障了整个APP的体验一致性。

总结：理清楚功能的关联、使用对象、页面面向的对象，可以逐步整理大体框架，也可以细节整理到位置。

三、工具的快捷功能：

1、重复页面或者功能，采用母版的形式，如网站的导航等。

母版有三种行为：

（修改其他地方，母版也修改）任意位置：你可以移动到不同页面的任何位置。

（修改其他地方，母版也修改）固定位置：母版位置为（0,0），你移动至任何页面位置都固定位（0,0）

（修改其他地方，母版不修改）脱离模板：你修改移动的母版后，母版不修改，可以移动至任意位置。

2、快速的对齐。

对齐功能看起来很轻松，但是这个操作在制作列表这样的功能时，多占据大量时间。

只需要记住最常用最基础的四个个快捷键：

选中原件居中对齐：Ctrl+alt+C

选中原件上线对齐：Ctrl+alt+M

选中原件水平分布：Ctrl+shift+H

选中原件垂直分布：Ctrl+shift+U

3、类似页面的快速处理。

右键你的页面导航中你想做的页面，复制页面即可。

4、基础交互的提前定义。

在一个原型中，我定义为：交互原型。里面有很多基本上用得上的小交互，轮播、隐藏、显示、动态面板切换、中继器（很少用）、优质的导航、页面模版、按钮的移入/移出等。

在之后的制作原型中，你可以快速的建立具有一定交互的原型，而且只需要很小的改动就可以完成。这一步，我还在进行中。

5、常用的图标库。

在一个原型中，可以将这个图标库放到交互原型中，手动设计常用的图标和空间，如按钮、列表、图形、icon等。这样，在之后原型制作时，你不需要每换一种颜色就去找图标，只需要在你的原型中复制过来，更改颜色就行，连大小可能都不需要更改。

但是四、五两步只有在需要交互和颜色时才能真正有用。如果，你习惯了将不用的操作分开画原型，这两步可以暂时忽略。

6、工具的常用功能只有几项，请多练习。没有合适的联系，即使给了模版，依然制作起来很耗时。

总结：提前准备，熟悉快捷操作和快捷键。

四、正式的原型制作，并和业务方的博弈。（哈哈）

在原型的制作中期，当基本的框架已经完成时，请及时和业务方确认，让你的业务方和你一起评估原型的合理性，有几点：

B端

1、列表项的默认展示：全部、审核、通过、驳回，四个状态，打开列表时默认展示哪一个列表项。

2、列表的字段：哪些字段是业务方真正需要的，那些不是？（和业务接触时可能已经确认过，但是最好这时再次确认）

3、功能的摆放和权限使用。

....

C端

1、哪些功能是可以省略的？如部分注册功能，会填写QQ、手机号、微信号、邮箱等，联系方式选择两个靠谱的就可以，用户端产品越简洁越好，越能快速完成越好，厌倦率越低越好。

2、关键操作的反馈：如签到，成功状态一定要以大篇幅展示，给予用户一种完成的成就感。

3、流程引导的强度：如注册后引导关注公众号，跳转页面、浮窗、弹窗、同页面状态转换等几种方式，对用户的干扰程度是完全不同的。

.....

总结：确定自己在双方理解的正确方向上做出了正确的选择和设计。

五、最后关于功能、关于设计。

功能的可实现性，一定要在原型设计时再次评估。因为在制作原型，一时灵感带来的功能变化，可能导致整个技术底层的改变，千万不要在评审时才将自己觉得比较难的功能放出来讨论，这基本会让你的需求修改和被定义为：“不懂技术的产品”。

设计的实用性，一定要在整个过程把控设计的页面、体验，一定要把按钮功能告知设计，他们对于体验和页面的可用性比你更加专业。原型，是指建议摆放位置和大小！但是，当你的设计与原型设计有很大的争吵时，请说出原型设计的好处或者找出同类竞品相似的设计，否则，按照设计的来（这过程，一定要多层交涉，设计&产品总监最好拉进来，他们的建议是解决方法之一，同时，你也可以学习到非常多的细节）。

总结：让对应领域更专业的人处理对应领域的事，不要让建议变成你的固执。

六、总结自己。

我会总结以下几点（可以不形成文字）：

1、原型修改了几次，修改了什么，为什么修改。

2、第一次为什么要这样做，最后为什么那样做。

3、重新打开第一次做的，告诉自己做的是对的，只是不适合。

4、贴上你的功能和流程标签，成为你脑中的项目，说到任何细节都能说出口。