newheader
手机登录
账密登录
验证码图片
登录
还没有账号? 马上注册
手机登录
账密登录
验证码图片
忘记密码?
登录
还没有账号? 马上注册
欢迎注册陪学网账号
已经有账号? 马上登录
移动端APP原型设计进行曲:分三步走
陪学
2017-12-19 12:33:08
586
0
画原型是产品经理的必备技能,那么我们应该怎样去做好原型设计呢?文章以移动端APP原型设计为例,讲一下原型设计应该怎样去做:定保真;画页面;加交互。

       画原型是产品经理的必备技能,那么我们应该怎样去做好原型设计呢?文章以移动端APP原型设计为例,讲一下原型设计应该怎样去做:定保真;画页面;加交互。希望通过这篇文章,对产品新手能够有所帮助,能够有规范的去进行原型设计,而不是跟着感觉走。虽然说不一定适合所有的移动端APP团队,但是对于大多数团队来讲,应该还是有借鉴意义的。 

       这里要说一下的是,我们将的是移动端APP原型设计方法,是方法论,适用于所有的原型软件,并不局限于Axure RP。 

1、定保真。

       正式画App原型之前,需要明确“原型该画到什么程度”。因为它决定了产品经理的工作量多少以及产品上线的质量。 原型画到什么程度,一般取决于上级的要求,或者延续团队之前的习惯。当然也可以根据团队实际能力以及上线要求来优化原型交付标准。 不建议大家按照所谓的高保真、中保真、低保真原型来理解。看上去划分很专业,实际概念不清晰。所以我明确了他们的概念,方便大家理解其中的差异。 低保真=黑白线框图,无交互;中保真=黑白线框图,带主要交互;高保真=配色线框图,带全部交互。一般来说低保真原型就能够满足设计和开发需求。如果给甲方看可以使用中保真原型。高保真原型除了装B很少用到。 

2、画页面。

       画页面是画原型的必备工作,比如需要提前确定页面的尺寸和位置,不过新手容易忽视关键步骤。 建议使用375×667来画APP原型页面,能够上下兼容目前主流的所有屏幕分辨率。如果你的手机是Android,那么使用360×640也可以。其他尺寸画页面会影响视觉设计师画出有一定误差的视觉稿。 至于位置更少有产品经理关注,但是它影响着你在手机上预览原型的展示区域。像墨刀、xiaopu、justmind默认帮你把位置设为(0,0),而Axure,mockplus是无限画布需要我们手动设置。不设置的后果就是手机上预览原型的时候很难看到页面内容。 确定页面尺寸和位置后,接下来就是用原型软件画出一个个页面。 不是特别建议大家在原型阶段就把页面中的元素进行配色,会妨碍了视觉设计师的发挥。当然如果你想提升自己对视觉的感觉,请配色之后只输出黑白线框图交付给视觉设计师(Axure是支持这样的功能)。 

3、加交互。

       如果你只画了所有页面,就交付给设计和开发,那么无疑是低保真原型。建议加上主要交互,以中保真原型的标准交付给大家。 所谓的主要交互,首先是指页面之间的跳转。这个做起来很简单,但是能够展示整个产品的页面关系。能够让设计和开发快速的评估整个版本大概需要多少工作量。 其次,可以把APP中的下导航、上导航、常见toast、弹层一并画出来,方便让大家了解页面内的交互体验。如果提前做成APP部件库然后快速调用,效率就特别高。 不建议100%的把所有交互画出来,部分交互特别复杂会浪费很多时间,还不如直接写文字逻辑表述。 

       这个就是我们在进行移动端APP原型设计的三个步骤:定保真、画页面、加交互。 很多新手产品经理往往只知道第二步“画页面”,往往忽视定保真和加交互的重要性。希望这篇文章能够对大家有所帮助,改变这样的观念。


文章作者:浪子,业务型PM,浪子PRD文档51prd.com,公众号langzisay。

长按二维码或加微信pexuepexue
进陪学产品交流群回复:资料分享
免费获取资料:每日更新 免费课程、学习资料、报告、招聘面试
标签:
登录 后参与讨论
发表
全部评论
没有更多评论了
newfooter
陪学网专注于产品管理类课程的开发与制作,
志在为产品经理、交互设计、平面设计、需求人员分享最新、最好的产品类课程。
陪学网:陪伴学习、陪伴成长
粤ICP备18075915号