产品设计方法与流程 PPT

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,网,络,产,品,设,计,流,程,工,业,设,计,08,04,班,邓,蓉,蓉,指,导,老,师,苏,莎,1,设计流程概述,：,大多数产品都是由需求部门提出,当项目完成审批流程后,就会交由产品负责人直接和我们,(,目前,UE,还处于起步阶段，大部分设计师主要扮演,UI,及兼任,UE,的职责,),进行沟通,进行可行性评估,经过,N,次讨论后确定结构、风格、功能、并确定开发周期及最终的上线时间。,2,项目负责,：,项目部门基本是,:,需求部门,(,比如,:,产品经理，某频道负责人或主编,),、销售部、程序部,、,UI(,界面设计,),、,UE(,交互及用户体验,),、,UID(,制作,),、,SEO(,搜索引擎优化,),3,设计师要做的,：,UI(,界面设计,),、,UE(,交互及用户体验,),、,UID(,制作,),、,SEO(,搜索引擎优化,),4,产品主要经过以下几个阶段,：,可行性评估,(,用户体验研究员，作调查分析,),产品原型,(,信息建构师，设计产品架构,;,互动设计师，作出互动流程,),产品界面设计,(,视觉设计师和用户界面设计师，作出页面视觉设计,),规范整理、功能实现,产品上线,分析报告、优化方案,(,用户体验研究员，做用户测试确保质量,),5,一、,可行性评估,主要执行人员：,UI,、,UE,、需求部门、程序部,需沟通人员：销售部,6,可行性评估,当产品经理确定基本的思路后,会先会跟我们沟通，并说明这个产品的思路、受众及一些自己的想法,接着会拿来一个结构图来和我们探讨实现方面的可行性。我们也会预备相关资料与其进行沟通，主要会从,数据报告,、,功能性,及,可行性,三方面下手，在探讨的同时会指出功能或结构上的一些问题，并提出改善方案，这步一定得仔细，,UI,、,UE,深入探讨并尽可能考虑到每个实现的细节,待框架打好后,出好的产品很轻易,.,但假如在可行性评估上出现隐患,余下的其它工作也将会碰到诸多问题。,7,主要从以下三方面进行评估,:,数据报告,功能性,可行性,8,数据报告,通过,99Click,、,Netratings,、,Counter,三套系统来进行数据收集，并在分析报告中指出相应的问题。,功能性,站在用户角度上，对方案的结构及功能性进行评估，提出并解决操作上的问题。,可行性,每个产品初期都是感性的，但在不能保证每个功能都能按原有思路进行实现，具体还需要和相关技术 人员进行探讨、碰撞后形成最终的产品思路,。,9,温馨小贴士,：,由于各人思考问题的角度不同,这个环节常碰到大家意见不统一情况，在接触项目过程中，很多产品经理都会将个人喜好溶入到产品设计思路中 。作为设计师，跟据自己的经验判定，假如认为不可取，可以尽最大能力去说服对方，当然前提是把自己的位置摆正，站在中立的角度上去审阅产品。,顺便谈谈沟通，相信大家经常会碰到和产品经理矜持不下的情况，这时用理论及实际案例去说服对方基本是无效的。建议可以采用一对一的方式单独沟通，碰到问题先记下来，放到会后进行单独讨论，人都是要面子的嘛。只要让对方意识到你是在帮他改善问题后，接下来的沟通就会比较轻松。,10,二、,产品原型,主要执行人员,：,UI,、,UE,、需求部门,需沟通人员,：,程序部、销售部,11,在产品原型方面,主要指的是黑白稿或线稿，除了颜色基本采用黑白的形式，最终出的产品原型将会和实际产品没区别。这个环节会拟定出产品页面的宽度,广告的形式,导航基本样式,各内容的区域的表现形式等,当经过可行性评估阶段后,产品经理的思路和设计师也基本达成共识，接下来将进行原型设计，主要分为三个步骤来实现 ：,纸稿,、,线稿，黑白稿,、,原型,12,纸稿,一般情况下结构图都是采用,word,文档描绘，也可以选择笔和纸的方式（主要还是比较方便、易修改，有任何突发的思路只需要擦一下，就可以直接在已有的基础上进行调整），由于之前的讨论没有实物参照，在这个环节你一定会发现更多有趣的问题。,13, ,线稿、黑白稿,当纸稿确定后，则由,UI,或,UE,使用做绘图工具来描绘黑白稿,(,主要使用,Photoshop,来进行这个步骤，跟据个人习惯不同，大家的方式也有所区别，比如淘宝,UED Team,及,Baidu UE,更多的则采用线稿的形式,),。,UI,主要是采用黑白稿，方便界面设计，在结构上也会精确到像素,比如,:,导航高度,40px.,头条采用,20px,黑体,图片规格,:104x85px,页面的各区域的留白为,5px,等等，只有这样才会发现更多细节上的问题，当然到界面设计的同时你也会尝到更多的甜头。,14,完成以上的二个步骤后,产品的基本功能,结构,规范都已经大致成型,.,这时就可以叫上程序部、销售部及需求部门产品经理，在白板上对着黑白稿做最终的讨论。经过二次、三次调整，最终定下完整的产品原型。,15, ,原型,16,三、,界面设计,主要执行人员,：,UI,、,UE,、需求部门,需沟通人员,：,UID,、,SEO,目前产品的雏形已基至的本成型，虽然还没华丽的外衣，但凹凸有至身型已隐约可见。下一步将进入界面设计阶段,.,设计师们也将再次体会到黑白稿给他带来的各种便利,.,17,主要承接部门,UI,UE,UID,SEO,18,19,UI,主要针对首页进行风格设计，并出,3-4,套界面,最终挑选出,2,套左右提交给需求部门,同时也会指出设计师自己最满意的一套，和需求部门进行二,三次碰撞后,最终拿出定稿。,20,UE,UE,则开始针对原型进行操作上的优化调整,召集用户并组织头脑风暴,收集到相关意见后，由,UE,整理出交互及用户体验方面改善意见,并反馈给,UI,及需求部门。,21,UID,UID,即开始着手预备制作方面相关文档,.,并提出实现方面的意见,.,等待效果图最终确定后,则开始相关代码的编制,(CSS DIV,、,AJAX,、,Java),。,22,SEO,SEO,则根据原型提出搜索引擎优化的意见,为制作阶段代码优化做预备,.,这个阶段一定要保证与需求部门沟通到位,当产品界面最终定稿后,建议再组织一次讨论,这次用户面对着是实实在在的产品,所感受会和之前有所不同,.,对产品效果上来说,这次的讨论也会有不少收获。,23,四、,界面设计规范及功能实现,主要执行人员,：,UI,、,UE,、程序、,SEO,需沟通人员,：,UE,、销售,24,设计规范,考虑到在动态实现方面,光凭效果图很难直接的给予表现，这时需要配合使用说明文档及设计规范规范来做辅助。比如按钮及文字链在触发前后的样式,文字间距等。,25, ,代码及程序开发,由,UID,进行页面的代码开发（,CSS DIV,），并需严格参考,SEO,理出的相关规范，针对一些,AJAX,的动态效果还需要程序部人员协助完成，当静态,HTML,完成后即由技术人员进行程序嵌套，并实现预期的功能。,这个阶段由,UI,、,UE,全程跟踪，保证,HTML,和设计稿最大限度相似前提下，对已实现的功能进行测试，并出交互设计改善文档，提交给技术人员。,26,五 、,产品上线,主要执行人员,：需求部门,需沟通人员,：,UI,、,UE,、程序、销售 模板无忧,-MB5U.COM,27,这个阶段主要是内容的添加，主要由相关频道编辑完成，对于软性广告位这块还需要和销售进行协调。完成内容添加后，由需求部门、,UI,、,UE,进行核查，在保证和内容、功能完整后，进行整体上线。,28,六 、,分析报告及优化方案,主要执行人员,：,UE,需沟通人员,：,UE,、,UID,、程序、需求部门、 销售,29,产品上线后，由,UE,进行数据及意见的收集，在二周后出相关改善文档，协调各部门进行优化的工作。,30,