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月在线上的这个页面，整体和上图看起来还是很像的。今后一定会有变化，不知道你在看的时候是什么样子。

新首页上线以后，事情还没有完，持续的监控和改进是必须的，所以在上线后的半个月、一个月、三个月这几个时间点，我们都做了一些数据分析，从结果看，有一定的效果，比如访客粘度、网站停留时间均有提升，填写表单留下联系方式的潜在用户明显增多，具体就不仔细讲述了。

建议继续学习：

1. 做个懂产品的程序员    (阅读：8779)
2. 在大公司和小公司做产品的区别    (阅读：4918)
3. Apple 谈论产品 vs Microsoft 谈论技术    (阅读：2850)
4. 做互联网产品的节奏感    (阅读：2727)
5. UED团队建设：以产品设计为中心    (阅读：2516)
6. 产品不一定是最重要的，跳槽必看！    (阅读：2437)
7. 产品工作的“BUT”三角    (阅读：2271)
8. 在淘宝大半年的零散体会    (阅读：2152)
9. 把项目当做产品来做    (阅读：2135)
10. 什么是产品人才    (阅读：2077)