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

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

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

平台: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查看排名。

如何基于功能快速画原型?_第1张图片

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


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


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

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

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

如何基于功能快速画原型?_第2张图片

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

用户页面分析(举例):

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

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

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

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

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

......

客服页面分析(举例):

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

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

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

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

....

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

如何基于功能快速画原型?_第3张图片

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


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


三、工具的快捷功能:

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

如何基于功能快速画原型?_第4张图片

母版有三种行为:

(修改其他地方,母版也修改)任意位置:你可以移动到不同页面的任何位置。

(修改其他地方,母版也修改)固定位置:母版位置为(0,0),你移动至任何页面位置都固定位(0,0)

(修改其他地方,母版不修改)脱离模板:你修改移动的母版后,母版不修改,可以移动至任意位置。

如何基于功能快速画原型?_第5张图片

2、快速的对齐。

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

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

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

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

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

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

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

如何基于功能快速画原型?_第6张图片

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

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

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

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

5、常用的图标库。

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

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

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


总结:提前准备,熟悉快捷操作和快捷键。


四、正式的原型制作,并和业务方的博弈。(哈哈)

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

B端

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

2、列表的字段:哪些字段是业务方真正需要的,那些不是?(和业务接触时可能已经确认过,但是最好这时再次确认)

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

....

C端

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

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

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

.....

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

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

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

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


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


六、总结自己。

我会总结以下几点(可以不形成文字):

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

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

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

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


我写的很差,有任何错误请及时指出,大家一起成长~么么哒

下期我会写,我是怎么了解产品经理和自己的行业的~


这两天看的很全的微信UI知道:https://weui.io/

功能和设计提现需求,多分析微信!

铁头

16.10.16

你可能感兴趣的:(如何基于功能快速画原型?)