互联网产品设计的流程导入到网站策划流程之中

在互联网时代，每一个有盈利任务的企业网站就是一个互联网产品，互联网产品经理的角色从更广义的角度包括了网站策划的角色。目前除了一些比较成熟的互联网公司外，还少有一些企业将互联网产品设计的流程导入到网站策划流程之中。而下文这位产品经理分享的互联网产品设计流程对各位将起到很好的启发作用——如何让我们的产品策划流程变得更高效呢？让我们一起来学习吧。每个产品主要经过以下几个阶段：我们一一来看。

1.可行性评估

主要执行人员：UI（用户界面设计）、UE（用户体验设计）、需求部门、程序部

需沟通人员：销售部

当产品经理或网站策划人 员确定基本的思路后，会先会跟跟各个人员沟通，并说明这个产品的思路、受众及一些自己的想法．接着会拿出一个结构图探讨实现方面的可行性。我们也会准备相 关资料与其进行沟通，主要会从数据报告、功能性及可行性三方面下手，在探讨的同时会指出功能或结构上的一些问题，并提出改善方案，这步一定得仔细，UI、 UE深入探讨并尽可能考虑到每个实现的细节，待框架打好，出好的产品很容易。但如果在可行性评估上出现隐患，余下的其它工作也将会遇到诸多问题。

我们主要从以下三方面进行评估：

（1）数据报告

通过99Click、Netratings、Counter三套系统来进行数据收集，并在分析报告中指出相应的问题。

（2）功能性

站在用户角度上，对方案的结构及功能性进行评估，提出并解决操作上的问题。

（3）可行性

每个产品初期都是感性的，但在不能保证每个功能都能按原有思路进行实现，具体还需要和相关技术人员进行探讨、碰撞后形成最终的产品思路。

2.产品原型

主要执行人员：UI、UE、需求部门

需沟通人员：程序部、销售部

在产品原型方面，主要指的是黑白稿或线稿，除了颜色基本采用黑白的形式，最终出的产品原型将会和实际产品没区别。这个环节会拟定出产品页面的宽度，广告的 形式，导航基本样式，各内容区域的表现形式等。

当经过可行性评估阶段后，产品经理的思路和自己也基本达成共识，接下来将进行原型设计，我将主要分为三个步骤来实现：

1）纸稿

一般情况下结构图都是采用word文档描绘，我选择笔和纸的方式，主要还是因为比较方便、易修改，有任何突发的思路只需要擦一下，就可以直接在已有的基础 上进行调整，由于之前的讨论没有实物参照，在这个环节你一定会发现更多有趣的问题。

2）线稿、黑白稿

当纸稿确定后，则由UI或UE使用做绘图工具来描绘黑白稿（我主要使用Photoshop来进行这个步骤，跟据个人习惯不同，大家的方式也有所区别，比如 淘宝UED Team及Baidu UE更多的则采用线稿的形式）。也许是做UI的原因，我习惯还是采用黑白稿，方便界面设计，在结构上也会精确到像素，比如：导航高度40px，头条采用 20px黑体，图片规格:104×85px，页面的各区域的留白为5px…等等，只有这样才会发现更多细节上的问题，当然到界面设计的同时你也会尝到更多 的甜头。

3）原型

完成以上的两个步骤后，产品的基本功能、结构、规范都已经大致成型。这时你可以叫上程序部、销售部及需求部门产品经理，在白板上对着黑白稿做最终的讨论。 经过二次、三次调整，最终定下完整的产品原型。

另外，值得提的一点是，在产品原型未确定前，千万别急着去做界面设计，因为之前的讨论主要会通过白板、Word或纸稿。在原型未确定前，有很多潜在的问题 表现不是很直白，比如：“窄了、窄了，完了，新闻列表只能放八个字”、“广告放不下了”、“数据提不出来，目前没这个接口…”。如果提前进入界面设计的环 节，一但有问题，就意味着重新又需要找产品经理、技术部、销售进行再次沟通，这个步骤是很烦琐的，也会让人很郁闷的。

3.产品界面设计

主要执行人员：UI、UE、需求部门

需沟通人员：UID、SEO

目前产品的雏形已基本成型，虽然还没华丽的外衣，但凹凸有致的身型已隐约可见。下一步将进入界面设计阶段，产品经理和网站策划们也将再次体会到黑白稿给他带来的各种便利。

1）UI（用户界面设计）

我的习惯是，主要针对首页进行风格设计，并出3-4套界面，最终挑选出两套左右提交给需求部门，同时也会指出自己最满意的一套，和需求部门进行两三次碰撞 后，最终拿出定稿。

2）UE（用户体验设计）

UE则开始针对原型进行操作上的优化调整，召集用户并组织头脑风暴，收集到相关意见后，由UE整理出交互及用户体验方面改善意见,并反馈给UI及需求部 门。比如:“这个文字需要加下划线”、“按钮上不要加样式，反而没有点击的欲望了…”。

3) SEO

SEO则 根据原型提出搜索引擎优化的 意见，为制作阶段代码优化做准备。

这个阶段一定要保证与需求部门沟通到位，当产品界面最终定稿后，建议再组织一次讨论，这次用户面对着是实实在在的产品，所感受会和之前有所不同。对产品效 果上来说，这次的讨论也会有不少收获。

4.界面设计规范及功能实现

主要执行人员：UI、UE、程序、SEO

需沟通人员：UE、销售

1）设计规范

考虑到在动态实现方面，光凭效果图很难直接的给予表现，这时需要配合使用说明文档及设计规范规范来做辅助，比如按钮及文字链在触发前后的样式、文字间 距…。如下图：

2）代码及程序开发

由UID进行页面的代码开发（CSS+DIV），并需严格参考SEO理出的相关规范，针对一些AJAX的动态效果还需要程序部人员协助完成，当静态 HTML完成后即由技术人员进行程序嵌套，并实现预期的功能。

这个阶段由UI、UE全程跟踪，保证HTML和设计稿最大限度相似前提下，对已实现的功能进行测试，并出交互设计改善文档，提交给技术人员。

5.产品上线

主要执行人员：需求部门

需沟通人员：UI、UE、程序、销售

这个阶段主要是内容的添加，主要由相关频道编辑完成，对于软性广告位这块还需要和销售进行协调。完成内容添加后，由需求部门、UI、UE进行核查，在保证 和内容、功能完整后，进行整体上线。

6.分析报告及优化方案

主要执行人员：UE

需沟通人员：UE、UID、程序、需求部门、 销售

产品上线后，由UE进行数据及意见的收集，在二周后出相关改善文档，协调各部门进行优化的工作。