首页 > 产品展示

产品设计流程系列:如何进行原型设计(上)

来源:本站 作者: 发表于:2018-11-03 17:37:42  点击:9434
  经历了漫长的产品设计流程,我们终于来到了最后一个环节,也就是根据之前梳理的产品流程来进行产品的界面设计了

  经历了漫长的产品设计流程,我们终于来到了最后一个环节,也就是根据之前梳理的产品流程来进行产品的界面设计了。

  产品经理其实都知道,在这样一个看重颜值的时代,一个赏心悦目的网站(或者移动APP)是多么重要。每一个产品经理,也都希望自己的创造的产品是与众不同的,在茫茫的互联网产品海洋里,能够闪出耀眼的光芒,就好比每个人都希望自己是人群中独一无二的那一个。嗯,这么说来,其实每一个产品经理的内心深处,都有着一颗文艺青年的心灵,也正是拥有了这样一颗感受丰富、细腻的产品之心,才使得我们能够对产品设计的细节有着更为透彻和深入的理解。

  在大公司内部,通常来说不需要产品经理去进行具体的界面交互设计,多数是由产品团队与UED团队合作进行产品原型的设计,出具的交付物是产品原型和页面交互图,而产品经理则需要产出产品需求文档(PRD文档)。但是在绝大多数创业公司团队里面,则没有配置那么豪华的产品设计、交互设计团队,常见的搭配往往是一个产品经理加上一个UI设计师,所以一般都是产品经理自己身兼交互设计的工作职责,输出交互设计稿,也就是产品原型。

  说的简单一点,产品原型是设计方案的表达,是产品经理、交互设计师的重要产出物之一,也是项目团队的其它成员(尤其是设计师、开发人员)的重要参考和评估的依据。

  结合我们前面了解的知识,产品界面原型其实就是页面级别的信息架构、文案设计、及页面和页面之间的交互流程,它是产品功能与内容的示意图。

  所谓低保真原型,其实是对产品较简单的模拟,它只是简单的表述了下产品的外部特征和基本功能构架,很多时候都是用简单的设计工具迅速制作出来,用来表示最初的设计概念和思路。

  当然,低保真原型也会有几个问题,比如交互细节不清楚,容易造成误解等。通常来说,一般只有时间比较紧迫,需求也比较简单的时候,我们才会去产出低保真产品原型。

  高保真产品原型,则是高功能性、高互动性的原型设计,是忠实展示产品功能、界面元素、功能流程的一种表现手段。原型图中无论是功能模块的大小,还是文案设计甚至是所用的图标、图例、交互动作,都使用真实素材,或者说和最终UI设计师的产出非常接近,就算是高保真产品原型了。

  对于刚入门的产品经理,我一直建议有时间的话,还是尽可能多的画高保真原型。因为在一开始产品设计经验不多的情况下,通过设计一些高保真原型,对梳理自己的产品思维、了解产品设计是很有帮助的。对于已经入门很久的同学来说,则看需求的复杂程度和时间安排,比如产品的关键页面是必然要用高保真原型去设计和梳理的。

  设计成品在这里,你也可以理解为是视觉设计师产出的UI设计稿,也就是设计师对你的产品原型进行美化之后得出的作品。设计师会运用一定的设计规范,来将你的原型变成可以让开发进行实现的作品。

  在设计成品出来的那一刻,产品经理需要做的就是和设计师进行PK就好了,我们在这里就不再过多来描述了。

  Axure是产品经理的必备工具,其他的不多说了,去看看招聘网站上关于PM的招聘信息,基本所有职位描述里,都包含了这么一句“熟练使用Axure”,所以你懂的。

  墨刀也是一款原型设计软件,虽然可能功能没有那么完整,相对来说对于一般使用也是足够的,目前分为网页版和客户端,网页版可以直接使用,客户端其实也是网页版的功能,一般来说会下载客户端,使用过程中需要联网。

  很多老牌的产品策划人员、产品经理都使用过它来设计产品原型,算是线框图专业户,比较灵活,Office使用习惯接受程度较高。另一个好处是支持各种平台尺寸设计。有些产品设计团队从原先的Axure 调整至 Visio ,是因为Visio 可以更便捷地输出标准大小的PDF文档,方便在同事之间交流。

  在学习伊始,很多刚刚入门的产品经理就热衷于上网找网络课程学习Axure等工具教程来学,乐此不疲;希望通过精通的工具使用能力展示来为自己求职或在交互学习路上的发展加一把力。然而这并不是重点,工具只是用来承载我们思想和内容的一个载体,所以没有必要把太多的时间消耗在掌握工具技巧上,产品设计的内容才是真正需要用心去考量和思索的。

  通过上面的介绍,其实我们已经了解了,一个好的产品原型可以让其他人迅速理解我们想要做什么事情,减少团队沟通成本,并确保接下来要推进的事情没有什么误会。

  产品经理在将原型图画好之后,往往会特别欣喜,恨不得立马就让全体团队成员看到自己的设计成果。但是,这时候的原型图通常是不完整的,很多场景、因素缺少考虑,小到一个按钮的位置,字段展示、大到功能的流程设计、逻辑设计。如果你就轻易把这么一份不完整的原型交付给技术,不但技术会喷你,搞不好用户也来喷你,甚至Boss也来喷你。所以,打磨好产品原型,尽量考虑各种场景、因素,设计原型时尽量细化分析,让所有人从原型就能看到你的态度,是一件非常重要的事情。

  什么是界面元素,比如文字,下拉框,按钮,图标、图片等等这些都属于界面元素。我们在运用原型设计工具(如axure、墨刀、visio等)设计产品原型的时候,需要明确界面上的元素是什么,如何展现,鼠标移动或者点击上去是怎样的效果。

  这一点往往也是非常多创业团队和新手产品经理容易忽视的。比如一个直播列表界面,上面有三个tab,分别是关注直播、热门直播、最新直播,那么最新直播是基于怎样的数据逻辑获取的,你就需要在你的原型设计上进行说明了。当然,最新直播的数据获取逻辑是比较简单的,也许你不和研发人员说明清楚,他们也能知道是按时间倒序排列;但如果碰到稍微复杂一点的数据逻辑呢,就比如刚刚说的关注直播的数据获取,是获取关注的机构的直播呢,还是获取个人的直播呢,这都是需要说明清楚的。

  一个原型界面上可以进行操作元素的有哪些,哪个可以点击,哪个可以选择,操作后出现怎样的反馈,比如弹出浮层?进入新页面?或是跳出新页面?还是给一个怎样的提示? 这些也是需要在原型设计里面说清楚的。

  这三个点是一份完整的原型设计基本需要包含的东西,再配合上之前画好的产品结构脑图和流程图,就基本可以与开发进行轻松愉快的交流了。只有这样,开发者才能明确这个原型设计的开发需求,而不是让开发工程师自己去猜,去揣测数据逻辑、算法应该是什么样的。

  通常来说,产品经理往往不会写的那么详细,能够覆盖到前面四个部分便已经算是一份基本合格的产品需求文档了。

  产品描述介绍了产品的整体逻辑流程,概括性的描述产品需求、产品版本规划、产品整体的框架结构以及功能列表。产品整体流程与产品框架都需要使用相应的图表展现方式

  功能需求这部分需详细描述产品所涉及的各个功能点。将整体框架拆成数个独立的功能点,分别描述每个功能点的逻辑流程图、界面、字段说明以及业务说明。统一采用Use Case的方式进行描述。

  嗯,我们已经看到了常规的产品需求文档长什么样了。有一次和一个朋友聊天,说起他们公司的产品需求文档,是一份长达200多页的word形式的产品需求文档,其实这样的文档看起来相当费劲,也不容易更新同步;

  很多开发人员和产品经理之间产生的矛盾,其实都是因为这份又臭又长的产品需求文档。因为无论是谁,都不喜欢看这么长的文字,开发人员其实根本不需要这份文字式的需求告白书,他们喜欢“看图”,这种文字式的需求文档应该是产品经理脑中的思路,而不应该直接把思路描述成文字转交出来。其实我个人也不喜欢这样的风格,沟通成本太高,所以对于创业公司而言,还是尽可能简单直接有效最好。 做好如上几点,对于大部分产品沟通场景来说,应该就可以满足。

  作者:壹百度(微信公众号:倒退集),在线教育企业服务领域产品经理,创业公司Team Leader。常常自诩是文艺青年和极客青年的结合体,在宅与不宅之间可以自由切换,曾主导多款重量级产品的产品策划和设计工作。

  我觉得墨刀更适合运营那些快速做个简单原型当需求用的工具。比较复杂的交互起来,感觉还是axure比较靠谱

  当你不理解别人的时候,可以试着再包容一点,我觉得这也是产品经理的一种特质:不能仅仅理解自己,而不了解他人

  可惜我是一个不包容的UE,我了解和理解我的用户,就是因为我了解,我所了解的设计们会去提及墨刀的一般都是我们说的比较low的。提到原型的文章,个人认为最好还是不要出现简单拙劣的产品。最后谢谢您的建议,可能对于我而言,不包容某些东西,才能更好的服务于我的用户。

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、招聘、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里分享知识、招聘人才,与你一起成长。