六⼤步骤分解产品原型设计过程
本教程将从整体和局部实例两个部分来讲解原型设计的步骤。产品的原型设计⼀般是基于⽂档的形式所表达出来的形象设计,想要把产品原型设计做好其实并不容易,想把原型做得⽐⽂档好更不容易,这⾥会结合⼀些产品原型设计的⽅法以及技巧来介绍原型设计的步骤,希望可以帮到有需要的朋友。
设计原型也是讲究⽅法步骤的,⼀是要提升原型设计的合理性,避免出现头重脚轻的保真程度不⼀致的情况;⼆是要减少原型设计所占⽤的时间,⼤家各⾃的⼯作时间都是很宝贵的,不可能在原型设计上投⼊过多的时间,因此掌握⼀些原型设计的⽅法和技巧相当必要。在产品的整体研发流程中,需求分析部分结束后,就应该形成明确的产品需求了,⽽此时要做的,是需要把这些产品需求表达出来,从表达效果来看,原型要好于⽂档的形式。
产品的原型设计实现⼀般区分整体和局部,整体上更多考虑信息架构的设计,如功能结构、导航、菜单、布局排版等⽅⾯的,局部上更多考虑功能上的,如按钮点击、反馈、页⾯切换、局部模块的整体展⽰等。从设计实现的⾓度来看,由总到分逐渐细化的过程是⽐较适合的。下⾯从整体和局部实例两个部分来讲解原型设计的步骤。
第⼀、确定产品的整体结构
不管是哪种⼯作,由总到分逐渐细化的过程通常都是最好的⽅法,就⽐如现在盖房⼦时的地基和框架结构,整个结构决定了将来的房型样⼦,及房⼦是否稳固。⽽产品的结构设计则决定了产品未来的功能导航结构。⼀般来讲,我们在做需求分析的时候,都会把⼏个主要的功能点抓出来,这⼏个功能点就可以浓缩⼀下形成产品的初步功能结构。⽐如要做⼀个合同管理的功能,要求实现合同信息管理,合同履约管理,合同统计报表等功能,这⾥列出来的核⼼功能点就是主要结构。再⽐如我们要做⼀个会员管理的功能,注册和登录是必不可少的功能点,那么就可以将其列为会员管理下的两个基本结构。其实每个产品最终确定下来的⼀级导航栏⾥⾯的各个栏⽬就是产品的功能结构。
第⼆、确定产品的布局排版
确定产品的整体结构之后,⼀般都会先对页⾯进⾏布局设计的考虑,然后再考虑对每⼀个产品页⾯进
⾏元素的排版。通常我们做的时候,都会遵循⼀些已有产品总结出来的布局结构,⽐如三⾏三列布局,三⾏两列布局等,再如左导航右内容的形式,左内容右导航的形式等,这些都是⼤的布局结构,是整体页⾯的布局排版。
细分到具体页⾯内容的时候,就需要对每⼀个内容块的展⽰位置进⾏布局,如企业⽹站⾸页的⼀般内容有图⽚新闻,通知通告,公司新闻,产品介绍,产品展⽰等等,我们需要对这些内容块进⾏⼀定的设计布局,这⾥的布局结构取决于设计⼈员对内容编排的把握,不同的布局会产⽣不同的效果。如电⼦商务⽹站,对内容块和⼴告块的布局排版就⾮常讲究,因为不⼀样的布局,所带来的⽤户点击量和转化率是不⼀样的。这种情况下,即对某⼀类产品的布局把握不好的时候,可以参照已有成熟产品的内容布局,因为它们已经有运营数据在⽀撑。
第三、确定产品的功能模块
功能模块是指数据说明、可执⾏语句等程序元素的集合,它是指单独命名的可通过名字来访问的过程、函数、⼦程序或宏调⽤。功能模块化是将程序划分成若⼲个功能模块,每个功能模块完成了⼀个⼦功能,再软件结构图⽰把这些功能模块总起来组成⼀个整体。以满⾜所要求的整个系统的功能。功能模块化的根据是,如果⼀个问题有多个问题组合⽽成,那么这个组合问题的复杂程度将⼤于分别考虑这个问题时的复杂程度之和。
确定产品的布局排版就相当于决定了某个产品功能模块的放置位置,接着就可以⼀块⼀块的确定原型设计内容,使其接近于最终产品的展⽰样式。这个时候就要⽤到原型设计的实例了,⽐如图⽚新闻,我们可以⽤幻灯⽚效果来做,⽐如产品展⽰,我们可以⽤跑马灯效果来做,具体采⽤什么样的交互效果来实现功能块要求展⽰的内容,取决于产品设计⼈员的把握、⽤户的需求及⽤户体验,其中⽤户体验是⽐较⼤的⼀块,就拿幻灯⽚效果来说,是否需要设计数字导航键,是否需要⾃动播放,是否需要设计缩略图等等,这些都需要仔细考虑之后再做决定,这个可以在设计产品时候多多讨论沟通,多看看别⼈的设计效果。譬如电⼦商务⽹站⾸页的Banner图⽚轮播效果,就是幻灯⽚效果,各⼤电商⽹站的设计⼤同⼩异,就完全可以借鉴参考。
按照以上三个步骤⼀步步坐下来的话,其实产品的低保真原型就出来了,⽐较简单的产品,可以直接
拿着低保真原型去做演⽰和写PRD ⽂档,虽然这样的原型不带任何交互效果,但基本上还是可以说清楚产品功能的,结合细化之后的⽂档进⾏说明。然后我们所⾯对的通常都不是简单的产品,因此最起码要到中保真程度原型,结合交互的效果来达到我们的设计⽬的。
要细化这样的交互设计,就需要在产品功能模块的原型设计上更进⼀步,把每个功能模块的原型完善,补充交互设计和基本的内容排版样式,通常可以按照如下的步骤进⾏设计:
第四、结合原型设计⼯具的特性,确定功能模块实现的原理
其实原理就是要让你⾃⼰明⽩这个东西到底是怎么做出来的,要怎么去做。因为每个实例原型都是⼀个单独的功能模块或交互效果,当你通过某款原型设计⼯具去实现的时候,都会有相应的实现原理。如果这个都不明⽩的话,后⾯就⽆从下⼿了。因此做实例原型之前,原型设计⼯具的使⽤基础很重要,必须对⼯具已经有了⼀定的熟悉和了解,否则对着⼀个实现要求,没有任何想法,脑⼦⼀⽚空⽩,这样肯定是做不出东西来的。这个需要⼀个过程来培养,多看看别⼈设计的原型,弄清楚⼈家是怎么做,然后尝试着⾃⼰做⼀遍,最后想想有没有可以改进的地⽅。
实践是检验真理的唯⼀标准,只有动⼿实际操作得多了,才能⾃然⽽然的会有感觉了,等到你看到⼀些简单的功能要求,只要看⼀下需求,就知道怎么⽤⼯具去画原型的时候,基本上就差不多了,当然对于⼀些复杂的功能,还是要好好理清思路的。因此,在做实例原型之前,⼀定要想清楚怎么去做,然后
才开始动⼯,选择相应的组件把框架搭建出来。
第五、对每个功能模块进⾏相对详细的交互设计
确定功能模块实现的原理,我们就要对每个功能模块进⾏相对详细的交互设计。基础的准备⼯作包含添加组件元素,设置组件排版布局,设置组件属性(命名、⼤⼩、⽅位、颜⾊、⽂本等)。基础⼯作都做完了之后,就可以开始做交互设计了。
从⽤户⾓度来说,交互设计是⼀种如何让产品易⽤,有效⽽让⼈愉悦的技术,它致⼒于了解⽬标⽤户和他们的期望,了解⽤户在同产品交互时彼此的⾏为,了解"⼈"本⾝的⼼理和⾏为特点,同时,还包括了解各种有效的交互⽅式,并对它们进⾏增强和扩充。交互设计还涉及到多个学科,以及和多领域多背景⼈员的沟通。
这⾥的设计包括组件⾃⾝的可变效果,如⿏标移⼊、移出、悬停等;交互的事件,如⿏标单击的触发事件、⿏标的移⼊移出触发事件等;逻辑的设定,包括判断逻辑,跳转逻辑,反馈逻辑等。这部分对你的逻辑思维能⼒有⽐较⾼的要求,特别是做⽐较复杂的交互效果,思路⼀定要清晰,否则判断的条件⼀多,就很容易乱掉。⽽且在交互设计过程当中所⽤到的很多逻辑,最终都需要体现到你的PRD⽂档当中,因此不管是设计前的分析,还是设计后的总结,都是很考验逻辑能⼒的,要能够将产品的功能模块从前到后串联起来,这⾥推荐⼤家在设计原型之前,把对应的原型模块的操作流程图先画出来,理清思
路,当然⼀定要结合实际产品下实际⽤户的操作场景去设计,切忌盲⽬主观的想当然。不然可能把⼯作进⾏到⼀半就因为灵感的缺失⽽不能继续下去,最后只能抛弃整个⽅案,这样的话对时间和精⼒都是⾮常⼤的损失。
第六、交互效果的反复调试
确定功能模块实现的原理,也对每个功能模块进⾏相对详细的交互设计,那么我们就想看到真实的交互效果。很多交互效果都不是⼀次性设置之后就能成功的,特别是复杂的交互效果,都需要做多次的效果尝试,反复的进⾏修改调整,最后才达到最终的效果。这个过程⼀定要有耐⼼,慢⼯出细活,思路是对的,想法也有可⾏性,那就⼀定能把效果做出来,哪怕最终真的没有将效果做出来,也可以反过来思考,是⾃⼰对⼯具的特性不了解造成的,还是⾃⼰的知识⽔平局限性。
这个部分之所以要把交互效果调试正确,其主要⽬的就是为了在原型演⽰的时候降低沟通成本,⼀个动态的交互效果,你要⽤⽂档去描述的时候可能需要⼀页的⽂字,还不确定所有的参与⼈都能看懂,但⽤原型去描述可能只需要1秒钟,⼤家看起来很直观,⼀下⼦就能明⽩是什么样的效果。在整个调试的过程能让你学到很多东西,所以说要多动⼿,动⼿就是为了去学这些个过程。这⾥说明⼀点,有些需要重复设置或者类似设置的地⽅,先调试⼀个点,这个点调试通过了,你就很清楚了,剩下的点设计起来就很快了。
结语:
以上是产品原型设计过程六⼤步骤,按照这个步骤的话,再进⾏产品的原型设计会简单很多。对于产品⼈员来说,做原型不应该成为负担,⽽是要将它变成得⼼应⼿的沟通⼯具,沟通成本是⽆法估量的巨⼤,如何降低沟通成本是产品整个研发周期⾥⾯都需要考虑的问题,⽽产品的需求是源头,源头把握住
了,后期就会通畅很多,这也是做原型设计最重要的⽬的。⽽学习原型设计最为核⼼的点就是多动⼿,只看是学不会的,⼀定要动⼿操作,多练就会了,再加上产品的设计思路,产品的雏形就是这么产⽣的。
产品的原型设计所起到的不仅是沟通的作⽤,更有体现之效。通过内容和结构展⽰,以及粗略布局,能够说明⽤户将如何与产品进⾏交互,体现开发者及UI设计师的idea,体现⽤户所期望看到的内容,体现内容相对优先级等等。产品原型设计对于设计师来说也是⼀个⾮常好的学习过程。
>页面设计用什么软件做
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论