产品设计流程.doc

天极产品设计流程先从沟项目人员说起吧,项目需要沟通的部门基本是:需求部门(比如:产品经理，某频道负责人或主编) 、销售部、程序部。涉及到我这边主要有:UI(界面设计) 、UE(交互及用户体验) 、 UID(制作) 、SEO(搜索引擎优化)。大多数产品都是由需求部门提出,当项目完成审批流程后,就会交由产品负责人直接和我们(目前天极网UE还处于起步阶段，我主要扮演UI及兼任UE的职责)进行沟通,进行可行性评估,经过N次讨论后确定结构、风格、功能、并确定开发周期及最终的上线时间。每个产品主要经过以下几个阶段：1. 可行性评估2. 产品原型3. 产品界面设计4. 规范整理、功能实现5. 产品上线6. 分析报告、优化方案针对每个环节细化，我将拿出近期的ChinaByte产品库项目来做进一步说明 ，相关地址：/demo/p/一可行性评估主要执行人员：UI、UE、需求部门、程序部需沟通人员：销售部当产品经理确定基本的思路后,会先会跟我们沟通，并说明这个产品的思路、受众及一些自己的想法接着会拿来一个结构图来和我们探讨实现方面的可行性。我们也会准备相关资料与其进行沟通，主要会从数据报告、功能性及可行性三方面下手，在探讨的同时会指出功能或结构上的一些问题，并提出改善方案，这步一定得仔细，UI、UE深入探讨并尽可能考虑到每个实现的细节,待框架打好后,出好的产品很容易.但如果在可行性评估上出现隐患,余下的其它工作也将会遇到诸多问题。我们主要从以下三方面进行评估:1. 数据报告通过99Click、Netratings、Counter三套系统来进行数据收集，并在分析报告中指出相应的问题。2. 功能性站在用户角度上，对方案的结构及功能性进行评估，提出并解决操作上的问题。3. 可行性每个产品初期都是感性的，但在不能保证每个功能都能按原有思路进行实现，具体还需要和相关技术 人员进行探讨、碰撞后形成最终的产品思路。由于各人思考问题的角度不同, 这个环节常遇到大家意见不统一情况，在我接触的项目中，很多产品经理都会将个人喜好溶入到产品设计思路中，如颜色用红吧，这样显得比较跳跃，按钮上加下样式，太不吸引人，跟据自己的经验判断，如果认为不可取，会尽最大能力去说服对方，当然前提是把自己的位置摆正，站在中立的角度上去审视产品。顺便谈谈沟通，相信大家经常会遇到和产品经理矜持不下的情况，这时用理论及实际案例去说服对方基本是无效的。建议可以采用一对一的方式单独沟通，遇到问题先记下来，放到会后进行单独讨论，人都是要面子的嘛。只要让对方意识到你是在帮他改善问题后，接下来的沟通就会比较轻松。在之前在做Yesky产品库时自己也经遇到这类问题。总之，说服的方式有很多种.无论是威逼还是利诱,前提一定是我的这种方式是可行的,实用的。二 产品原型主要执行人员：UI、UE、需求部门需沟通人员：程序部、销售部在产品原型方面,主要指的是黑白稿或线稿，除了颜色基本采用黑白的形式，最终出的产品原型将会和实际产品没区别。这个环节会拟定出产品页面的宽度,广告的形式,导航基本样式,各内容的区域的表现形式等当经过可行性评估阶段后,产品经理的思路和自己也基本达成共识，接下来将进行原型设计，我将主要分为三个步骤来实现：1) 纸稿一般情况下结构图都是采用word文档描绘，我选择笔和纸的方式，主要还是比较方便、易修改，有任何突发的思路只需要擦一下，就可以直接在已有的基础上进行调整，由于之前的讨论没有实物参照，在这个环节你一定会发现更多有趣的问题。2)线稿、黑白稿当纸稿确定后，则由UI或UE使用做绘图工具来描绘黑白稿(我主要使用Photoshop来进行这个步骤，跟据个人习惯不同，大家的方式也有所区别，比如淘宝UED Team及Baidu UE更多的则采用线稿的形式)。也许是做UI的原因，我习惯还是采用黑白稿，方便界面设计，在结构上也会精确到像素,比如:导航高度40px.头条采用20px黑体,图片规格:104x85px,页面的各区域的留白为5px等等，只有这样才会发现更多细节上的问题，当然到界面设计的同时你也会尝到更多的甜头。3)原型完成以上的二个步骤后,产品的基本功能,结构,规范都已经大致成型.这时你可以叫上程序部、销售部及需求部门产品经理，在白板上对着黑白稿做最终的讨论。经过二次、三次调整，最终定下完整的产品原型。另外，值得提的一点是，在产品原型未确定前,千万别急着去做界面设计,因为之前的讨论主要会通过白板、Word或纸稿。在原型未确定前，有很多潜在的问题表现不是很直白，比如：窄了、窄了，完了，新闻列表只能放八个字、广告放不下了、数据提不出来，目前没这个接口。如果提前进入界面设计的环节,一但有问题，就意味着重新又需要找产品经理、技术部、销售进行再次沟通，这个步骤是很烦琐的,也会让人很郁闷的。三 产品界面设计主要执行人员：UI、UE、需求部门需沟通人员：UID、SEO目前产品的雏形已基至的本成型，虽然还没华丽的外衣，但凹凸有至身型已隐约可见。下一步将进入界面设计阶段.设计师们也将再次体会到黑白稿给他带来的各种便利.1)UI我的习惯是,主要针对首页进行风格设计，并出3-4套界面,最终挑选出2套左右提交给需求部门,同时也会指出自己最满意一套，和需求部门进行二,三次碰撞后,最终拿出定稿。点击放大更多请访问：/demo/p/2)UEUE则开始针对原型进行操作上的优化调整,召集用户并组织头脑风暴,收集到相关意见后，由UE整理出交互及用户体验方面改善意见,并反馈给UI及需求部门。比如:这个文字需要加下划线、按钮上不要加样式,反而没有点击的欲望了。3)UIDUID即开始着手准备制作方面相关文档.并提出实现方面的意见.等待效果图最终确定后,则开始相关代码的编制(CSS+DIV、AJAX、Java)。4)SEOSEO则根据原型提出搜索引擎优化的意见,为制作阶段代码优化做准备.这个阶段一定要保证与需求部门沟通到位,当产品界面最终定稿后,建议再组织一次讨论,这次用户面对着是实实在在的产品,所感受会和之前有所不同.对产品效果上来说,这次的讨论也会有不少收获。四 界面设计规范及功能实现主要执行人员：UI、UE、程序、SEO需沟通人员：UE、销售1)设计规范考虑到在动态实现方面,光凭效果图很难直接的给予表现，这时需要配合使用说明文档及设计规范规范来做辅助。比如按钮及文字链在触发前后的样式,文字间距。如下图：2)代码及程序开发由UID进行页面的代码开发（CSS+DIV），并需严格参考SEO理出的相关规范，针对一些AJAX的动态效果还需要程序部人员协助完成，当静态HTML完成后即由技术人员进行程序嵌套，并实现预期的功能。这个阶段由UI、UE全程跟踪，保证HTML和设计稿最大限度相似前提下，对已实现的功能进行测试，并出交互设计改善文档，提交给技术人员。五 产品上线主要执行人员：需求部门需沟通人员：UI、UE、程序、销售这个阶段主要是内容的添加，主要由相关频道编辑完成，对于软性广告位这块还需要和销售进行协调。完成内容添加后，由需求部门、UI、UE进行核查，在保证和内容、功能完整后，进行整体上线。六 分析报告及优化方案主要执行人员：UE需沟通人员：UE、UID、程序、需求部门、 销售产品上线后，由UE进行数据及意见的收集，在二周后出相关改善文档，协调各部门进行优化的工作。在产品设计中我基本上都是采用这套流程，也希望和大家同共探讨。这篇文章没啥外链，还是来点吧，推荐看下白鸦的Blog。淘宝产品设计流程Step 1：原型（Prototype）设计的第一个阶段，我们称之为原型设计，主要是设计产品的功能、用户流程、信息架构、交互细节、页面元素等等。如果你觉得听上去这些概念都比较悬的 话，我就用大白话来说：原型设计，就是完全不管产品长得好不好看，只把它要做的事情和怎么做这些事情想清楚，把它怎么和用户交互想清楚，而且把所有这些都 画出来，让人可以直观地看到。至于怎么画出来，那就随你了。用纸笔画，用白板水笔画，用Photoshop画，用Visio画，或者像我们一样用Axure画，都可以。只要把上面提到的这些都事无巨细地表达出来。在原型的交付物（Delivery，也就是某个阶段的产出物）中，最重要也最常见的就是线框图（Wire Frame），这玩意儿不用多解释了，看下面这张图就明白：在画线框图的时候，要把握好细节的刻画程度。有些东西只要画个框就行了，而有些东西需要把文案都设计好。以免你的老板或是需求方揪住角落里的广告banner该有多大这种问题与你纠缠不休，而忽视了最重要的页面主体部分。此外，还要牢记：原型就是用来让人改的。它存在的价值就体现在被修改了几次，被更新了几次，以及它的下一步被少改了几次。Step 2：模型（Mock-up）在原型被大家接受之后，就该关心产品长得好不好看了。 我们以“模型”这个词来统称该步骤的交付物。和原型相比，它关注于产品的视觉设计，包括色彩、风格、图标、插图等等。要清楚的是，这不是一步由“美工”来“美化”的工作。视觉设计师需要对原型设计有深刻的理解，对交互设计和尚未进行的HTML/CSS/JS的 Code都要有充分的了解。如果不能从全局的角度来做视觉设计，则只能是做做把水晶效果改成金属效果这样的“自娱自乐”，而对产品本身没有任何有价值的帮 助。如果原型说：“在这个页面上，A比B重要。”，那他的脑子里就要有十七八种可以表现“A比B重要”的视觉语言可供选择。这是对设计模型的视觉设计师的 基本要求。更高一些的要求，才是视觉设计的“原始功能”。“倒底是选水晶效果还是金属效果？”，“这个按钮选什么颜色好？”等等。这一类的 思考和选择，应着眼于产品的气质、品牌等等，在各种产品间保持一定的统一，在用户心里打下视觉的烙印。其实要做到这一点是很难的，特别是还要满足上一点的 要求。一般来说，如果能90%的把交互设计的成果和品牌形象表达出来，已经是很好的结果了。从我自己来说，就常常很郁闷不能用好的视觉语言来表达自己在原 型设计中的想法，总是做完模型就打个七折:(更更高的要求， 有些问题用交互设计是很难解决的，这时就需要一个有创造能力的视觉师，可以从视觉设计的角度来创造性地解决问题（一时还没想出好的例子，想出来再补上）。总 的来说，模型设计是件非常困难的事情。它的工具是感性的，但设计过程又要求非常理性，必须在各种约束条件中解决问题。而目前能从较高的角度来来看“视觉设 计”的人还不多，大多还停留在“效果”、“风格”等表面议题上。个人以为在“Web标准”和“用户体验”之后，视觉设计是Web设计专业化运动的第三波， 市场的需求已经存在，只差有人推动一下。模型的设计一般来说都是用Photoshop了，下是是个例子（与原型的例子对应）：Step 3：演示版（Demo）这步我就不多说了，Demo就是按照原型和模型用xHTML/CSS/JavaScript等等前端技术实现出来，以便后端的开发工程师可以接手编 码。这个过程让小马、正淳专门起个新帖来详细介绍吧。只提一点，前端开发在有些公司是不放在设计团队的，而我们认为前端开发从很大程度上来说是对用户体验 的提升和保证，开发只是它的一个手段和形式。所以就把这块工作一直留在我们团队，现在看起来这样很棒：）把上述原型、模型转为xHTML/CSS之后就是这个页面了：/collect_list-g,nrxwy2lumhgozsvz2cq3tk6w64-.htmStep 0.5/1.5/2.5/3.5居然还有半个半个的步骤？是的，这是我们的用户研究过程。在各个阶段的前后，我们会根据具体情况选择是否投入精力到用户研究上。用户研究的形式也很 自由：给会员打个电话， 旺旺上随便找人聊聊，到公司来做可用性测试，到会员家中访谈怎么方便怎么实用就怎么做。我们还没有精力放在太多的“学术”性质的理论研究上，对研究方 法也是不拘一格，“能抓老鼠”就行。关键的关键，研究的结果如何表现到产品上，如何吸收单个用户的意见来服务所有用户。在这一点上，我们做得还很不够，积累也很薄，需要向同行们多多学习，也请大家多多指点。最后关于流程，要注意：1. 设计流程的目标，在于保证“无论谁来做这个产品的设计，都能达到80分”；2. “100分”的完美作品，很有可能没有遵循流程，而是天才地融合了创新、传承和执行力的作品；3. “流程”这种东西，只有与环境相匹配才能带来正面的作用。以上是我们UED团队目前的设计流程，也许你也发现了，它和大多数公司的设计流程是差不多的。我们也在不断地修改和发展这个体系，有不足的地方也请大家多指教。如果你借鉴了我们的流程，在工作中发现有什么问题，也请回来告诉我们，谢谢大家！产品从设计到发布的六个阶段产品开发的过程可以看作是整个产品设计环节的最终实现部分，对于非技术人员来说它是一个把理想变成现实的神秘阶段1. 概念阶段（concept）一切从有了一个想法开始！需要做的事情 业务负责人与产品经理沟通商业需求以及产品品牌的定义 产品经理针对这个想法提出自己的问题和需求，并提供解决方法与好处 产品经理从各方面收集信息并制作概念文档 业务负责人、产品经理、产品设计还有视觉设计们做到一起，来一场头脑风暴，证实这个想法并确定实现一个什么样的原型 产品设计负责完成最初的产品原型阶段交付物：概念文档（concept document）或者是概念原型（concept prototype）2. 探索阶段（discover）那个伟大的想法已经得到了证实！需要做的事情： 在获取了多方面的意见之后业务负责人与产品经理进一步沟通商业需求以及产品的定义 产品经理需要分析产品的战略、商业案例、财务计划、应对策略以及执行方案 产品设计需要分析上一个版本的用户反馈和竞争对手的产品近况，将这些信息提交到产品经理那里 产品设计和用户研究小组共同做用户案例分析，理清用户的使用目标并分析用户的使用流程 产品设计、视觉设计和开发负责人预估自己的投入，并将这些信息提交给产品经理 产品经理从市场分析（报告）、产品设计、视觉设计和开发负责人那里收集尽可能详细的信息，用来制作提案（可行性）文档阶段交付物：提案（可行性）文档（Proposal Document）3. 定义阶段（definition）大家的建议已经通过，产品经理来负责制定计划需要做的事情： 业务负责人要确定产品的最终定位（必须的） 产品经理进一步分析产品团队提交过来的各种信息，开始制作产品需求文档 产品经理宣布项目启动 产品设计对产品概念设计进行进一步的完善，细化功能，制作一些具体的用户使用场景 视觉设计开始为产品的视觉表现收集意见、寻找灵感 用户研究小组在概念设计的基础上进行用户使用调研，问卷在白板上模拟用户操作都行 产品对团对概念设计进行评审阶段交付物：需求文档（Product Requirement Document），产品概念设计（Concept Design Meterials）4. 细化阶段（refinement）开始按照需求的定义来细化产品的设计需要做的事情： 业务负责人需要对产品的推广和市场需求进行评估 产品经理需要制定产品的路线图，并确定最终的发布时间和计划 交互与视觉设计进入一个迭代的设计阶段，一次又一次的设计修改，直到最终的设计方案得到确认 产品设计制作产品线框图、完成特性清单，并以 HTML、Flash 或其他的形式拿出产品的最终原型设计 视觉设计配合产品设计细化产品外观的设计 用户研究小组使用现有的原型进行可用性测试阶段交付物：产品线框图（Wireframes）、产品特性清单（Feature List）、最终的原型设计（可以是任何版本的，例如 HTML、Flash或者是专用的原型制作工具）5. 开发阶段（development）产品团队会在这个阶段与开发团队进行融合，双方对需求和设计进行充分的沟通，组成一个强大