网站产品设计流程.doc

H:\精品资料\建筑精品网原稿ok（删除公文）\建筑精品网5未上传百度

每个产品主要经过以下几个阶段:
可行性评估
主要执行人员: UI、 UE、 需求部门、 程序部
需沟通人员: 销售部
当产品经理确定基本的思路后,会先会跟我们沟通, 并说明这个产品的思路、 受众及一些自己的想法．接着会拿来一个结构图来和我们探讨实现方面的可行 性。我们也会准备相关资料与其进行沟通, 主要会从数据报告、 功能性及可行性三方面下手, 在探讨的同时会指出功能或结构上的一些问题, 并提出改进方案, 这步 一定得仔细, UI、 UE深入探讨并尽可能考虑到每个实现的细节,待框架打好后,出好的产品很容易.但如果在可行性评估上出现隐患,余下的其它工作也将会遇 到诸多问题。
我们主要从以下三方面进行评估:
· 数据报告
经过99Click、 Netratings、 Counter三套系统来进行数据收 集, 并在分析报告中指出相应的问题。
· 功能性
站在用户角度上, 对方案的结构及功能性进行评估, 提出并解决操作上的问题。
· 可行性
每个产品初期都是感性的, 但在不能保证每个功能都能按原有思路进行实现, 具体还需要和 相关技术 人员进行探讨、 碰撞后形成最终的产品思路。
二 产品原型
主要执行人员: 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套左右提交给需求部 门,同时也会指出自己最满意一套, 和需求部门进行二,三次碰撞后,最终拿出定稿。

2)　UE
UE则开始针对原型进行操作上的优化调整,召集用户并组织头脑风暴,收集到相关意见后, 由 UE整理出交互及用户体验方面改进意见,并反馈给UI及需求部门。比如:"这个文字需要加下划线"、 "按钮上不要加样式,反而没有点击的欲望了…"。
3)　UID
UID即开始着手准备制作方面相关文档.并提出实现方面的意见.等待效果图最终确定后,则 开始相关代码的编制(CSS+DIV、 AJAX、 Java)。
4)　SEO
SEO则根据原型提出搜索引擎优化的意见,为制作阶段代码优化做准备.
这个阶段一定要保证与需求部门沟通到位,当产品界面最终定稿后,建议再组织一次讨论,这次用户面对着是实实在在的产品,所感受会和之前有所不同.对 产品效果上来说,这次的讨论也会有不少收获。
四 界面设计规范及功能实现
主要执行人员: UI、 UE、 程序、 SEO
需沟通人员: UE、 销售
1)　设计规范
考虑到在动态实现方面,光凭效果图很难直接的给予表现, 这时需要配合使用说明文档及设计 规范规范来做辅助。比如按钮及文字链在触发前后的样式,文字间距…。如下图:

2)　代码及程序开发
由UID进行页面的代码开发( CSS+DIV) , 并需严格参考SEO理出的相关规 范, 针对一些AJAX的动态效果还需要程序部人员协助完成, 当静态HTML完成后即由技术人员进行程序嵌套, 并实现预期的功能。
这个阶段由UI、 UE全程跟踪, 保证HTML和设计稿最大限度相似前提下, 对已实现的功能进行测试, 并出交互设计改进文档, 提交给技术人员。
五 产品上线
主要执行人员: 需求部门
需沟通人员: UI、 UE、 程序、 销售
这个阶段主要是内容的添加, 主要由相关频道编辑完成, 对于软性广告位这块还需要和销售进行协调。完成内容添加后, 由需求部门、 UI、 UE进行核查, 在保证和内容、 功能完整后, 进行整体上线。
六 分析报告及优化方案
主要执行人员: UE
需沟通人员: UE、 UID、 程序、 需求部门、 销售
产品上线后, 由UE进行数据及意见的收集, 在二周后出相关改进文档, 协调各部门进行优化的工作。