产品设计体会（6031）产品新首页诞生记
2009年夏天，“e网打进”的产品portal做了一个改版项目，叫“变脸”，回想一下，我们正是按照：“战略、范围、结构、框架、表现”的顺序做的，设计师也从头到尾很充分的参与其中。很快半年过去了，产品、公司、团队里很多事情都发生了变化，不过对于这个项目来说，还是有些可以分享一下的东西……
这个项目的缘起是为了统一公司几个产品的portal风格，但我们希望能在老板给出的这个目标下找到“变脸”的更多价值。于是项目开始后我查看了portal页面的访问情况，分析了用户场景，画了下图。
产品portal的用户场景
在“e网打进”刚上市之时，portal页面只是付费用户的登录入口，有一个简单的填写账号密码的输入框，并没有额外的商业价值，但随着产品的成长，渐渐有了点名气，当时每个月有几万UV（Unique Visitor，独立访客），其中：
非付费用户的访客占大多数，超过80%，短期内相当稳定；付费用户约20%弱，目的其实很明确——登录，很少会东张西望看其他内容；极少数的经销商，有个入口登录后台也就行了。
非付费用户的访客访问portal的行为逐渐增多，他们通过各种途径知道了“e网打进”，可能是通过搜索引擎，可能是听到朋友说起，有了点兴趣，但是到了这个页面以后，看不到产品介绍、不知道如何购买，虽然portal本身使用了“e网打进”，服务部门的同学可以及时与访客交流，但页面内容的缺失导致流失率依然很高。
有了上述分析，很直接的想法就是portal要转型，重点满足普通访客，促进他们转化为e的付费用户，所以我们加重了营销相关内容，力求创造更多的销售机会，也就是所谓的“潜在用户”。进一步思考：
潜在用户 = 访客数 × 转化率
我们可以一方面通过增加页面的营销内容提高转化率，另一方面也可以通过SEO、公关、推广等方式增加访客数，下面只说前者，但两者的目的都是希望能加粗上图中访客到“潜在用户”的线。
之后，我们和销售、服务一起讨论，确认了目的，总结出portal需要哪些页面，以及导航菜单的结构，因为整个站点的复杂度相对较低，所以我们压缩在一级菜单里解决了，如下表。
产品portal菜单结构示意
接着是确定每个页面上都需要哪些元素，以首页为例，我们列出了下表。
首页的元素
上面的工作可以看作“结构化思维”，“战略、范围”的设计基本完成，接下来就是“形象化表达”了，“结构、框架、表现”，UE的同学就成了主角。下面几张图是用哪些工具做的就不说了，这里聊一下PD和UE谁做什么事情，怎么配合。
一开始，PD和UE一起讨论，手绘出首页的大概样子。PD要表达清楚每一个模块的商业目标，可以给出自己对页面的布局建议，但最终的页面结构，UE可以主导确定。
纸面Demo
然后是线框图，PD有时候也会直接给出这个，“变脸”项目中，是UE的同学做的。大家仍然是讨论确定，UE这时候会在设计的过程中融入很多自己的想法，PD要做到的就是防止走偏，保证大家对商业目标理解的一致。
比如在下图中，大家讨论后确定页面为“左侧大右侧小”的双列结构，并且左侧的内容主攻访客，右侧的内容主攻付费用户。
线框图Demo
接着，UE出页面效果图，会安排销售、服务等相关方来做一次评审，告诉他们这就是将来看到的页面，征求意见，他们一定会有各种疑问，这时候PD和UE需要确保每一个细节设计都是有理有据，包括每块区域的位置、长宽；每行文字的字体、字号；每个小图的颜色等等，都不只是为了好看，而一定是与商业目标符合的。
比如下图中，“立即购买”的区域用了页面上最跳的橙色，在充满商业气息的蓝色氛围下很醒目；且位置在“e网打进”访客的电脑最常见的分辨率，即1024×768的首屏右下角，这归功于数据分析；又有个亲切的美女在向你招手，进一步吸引眼球。以上三点设计非常强势的突出了目的，至于是否太过，需要后续的效果分析来验证。
视觉效果图
2009年12月在线上的这个页面，整体和上图看起来还是很像的。今后一定会有变化，不知道你在看的时候是什么样子。
新首页上线以后，事情还没有完，持续的监控和改进是必须的，所以在上线后的半个月、一个月、三个月这几个时间点，我们都做了一些数据分析，从结果看，有一定的效果，比如访客粘度、网站停留时间均有提升，填写表单留下联系方式的潜在用户明显增多，具体就不仔细讲述了。
同学们，要积极发言啊