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