多侧面剖析网站产品开发流程.docx

/index.php/archives/227多侧面剖析网站产品开发流程01月 21st, 2010 | by 李宋伟 | 从事互联网行业3年多来， 工作涉及面比较广，从SEO、WEB2.0网络推广、网站策划、用户体验、企业整体网络营销服务、企业电子商务应用等各个方面均有所接触和积累一定项目经 验，虽然随着不同项目和项目不同阶段进展所接触领域有所差异，但在这几年中始终贯穿这一条主线：“网站产品设计开发和运营推广”。?从自身项目经历来看，我所做的工作基本完整贯穿整个网站产品开发流程，并且很多项目都是兼顾 不同开发阶段的角色，从产品定位、产品概念成型、功能规划、架构搭建、界面设计（原型demo）均有涉及，甚至还有少量的视觉和前端，当然重点工作还是前 面几个阶段，至于视觉和前端可以说是在项目资源极度匮乏情况下，不得已勉强应付之举。基于亲历这些项目，深切的体验到“用户体验”始 终贯穿产品开发项目的过程，可以说用户体验已经成为产品开发项目不得不遵守的“潜规则”，也是影响产品开发完成后能否得到用户认可、市场认可的重要因素， 结合最近拜读Jesse James Garrett的《/elements/用户体验的要素》，从不同层面对网站产品开发流程做一个总结和分析，如下图：?网站产品 开发流程结合上图分析：（一）网站产品开发阶段（网站前台部分）主要经历：用 户需求和网站目标确定、概念设计、原型设计、界面设计与信息设计、视觉设计、前端开发、用户体验测试、产品交付等过程，当然这些阶段划分有时是模糊的，并 且根据具体项目有可能增加货删减阶段，或修改阶段名称及工作内容。（二）用户体验层次主要结合《用户体验的要素》5层 划分标准，从项目开发中用户体验方面工作的递进和重点划分，即战略层、范围层、结构层、框架层、表现层。其中各层主要工作重点如下：1.战略层：从用户体验方面，确定用户需求和网站目标（这个阶段的用户需求可以通过分析数据或进行 调研得出）；2.范围层：在战略层基础上，根据用户需求和网站目标，确定网站的功能规格和内容 需求，也就是把项目范围做定义，避免项目范围不明确造成无休止的重复返工；3.结构层：根据范围层定义下来的系统规划，对系统各个模块以及各个模块之间交互 流程进行描述和设计，也属于交互设计中的总体设计。4.框架层：在结构层总体设计基础上进行详细设计，制作各个界面和交互响应 DEMO则是框架层的主要工作，也是交互设计中的详细设计阶段，此阶段的交付物即是设计设计的最终依据。5.表现层：根据框架层设计的DEMO进行视觉设计，视觉设计既要把握战略层意 图，突出界面要表达的意思，还要根据框架层DEMO注重提升用户体验和处理视觉效果与用户体验的冲突，因此在表现层视觉设计师既要按照DEMO制作效果 图，还必须把握界面用户体验准则和战略意图。（三）主要交付物：即是，各个网站产品阶段工作成 果的提现，这里列出的是必须产物，根据项目不同有时还有其他不同辅助性文档的产出。1.用户需求、网站目标确定阶段：（此阶段是在项目可行性得到肯定后开始，也代表项目正式进入开发阶 段）主要交付物是BRD、MRD（商业/市场需求描述），即是整个项目的纲领性文件，给予项目成员 有一个全局的视角和执行的方向，这项工作主要由开发需求提出方产品经理或由项目经理来完成；一般这个阶段的辅助性文档还有，《项目人员安排、工作进度安排》等。2.概念设计阶段：给出整个产品的设计思路，产品整体架构、功能模块规划等，也就 是从概念上给出一个完整的产品雏形，可以通过文字或图示的方式来表达所要开发产品的整体构想，主要交付物是有关《产品架构、功能规划》类文档；如下图：概念设计图例3.原型设计阶段：在 概念设计基础上，对产品构思进行具体化，将产品构思描述成开发人员能够看得清楚、便于沟通的表现形式，此阶段主要在于描述构成产品各个模块的具体规划、以 及模块之间的信息传导、交换响应的流程，主要交付物是《功能模块详细描述及流程框图》等。如下图：原型设计图例 1原型设计图例 24.界面设计（包括导航设计、信息设 计）阶段：对原型设计阶段的交付物进行细化，也就是进行详细设计，此阶段将系统原型进行直观表现，即形成产品DEMO（产品演示），涉 及到真实产品的各个界面、各种交互方式、各种响应结果等，交付物即是产品DEMO。界面设 计图例-李宋伟5.视觉设计阶段：根 据公司或项目视觉规范，将产品DEMO实现为产品效果图，这个阶段的交付物即是效果图，也是项目之外人员最直观、可理解的产品形态，同时要根据视觉规范提 供效果图中各个元素的定义标准，如按钮规格、字体、字号、文字颜色等。6.前端开发阶段：根据产品效果图，进行图片分割并制作成网页模版，这个阶段工作 包括定义CSS、DIV等，同时还要考虑与后端程序实现的可行性和高效性，交付物就是移