帮5买首页宽窄屏与栅格化改版设计

2014年年末我们花费的大力气,综合了来自投资人,老板,新员工,PM,运营,客服,设计师,开发,SEO等等各个领域的意见,将首页彻头彻尾的革命性的设计

本次亮点:

1)栅格化

2)宽窄版自适应

3)规整精美的图片

4)定位电商

下面我们用一张图说明本次改版中你可能不知道的事

首页改版说明点我查看线上

 

网页设计中的分割布局

作为网页设计师,我们可以参考的设计范例和布局原则有很多,比如说:栅格化、纵向一致性、F型布局、Z型布局、三分法则、黄金分割法等等。注重这些原则将会给你的设计带来视觉吸引力和功能性,现在让我们来看一种简单的页面布局方式——将页面两等分。

幻灯片1 幻灯片2 幻灯片3 幻灯片4 幻灯片5 幻灯片6 幻灯片7 幻灯片8 幻灯片9 幻灯片10 幻灯片11 幻灯片12 幻灯片13

总结:

  • 用户仅在三秒内就能对你的页面做出判定

  • 为了吸引访问者的注意力并且降低页面跳出率,我们应该试着让我们的页面布局“浏览起来友好”

  • 就在中心位置划分你的布局,并且将重要元素调整到“之”字形的端点上,以确保你的访问者在浏览后记住更多的细节

电商排行榜产品进化过程

简易而言,电商排行榜产品的意义在于:按照一定的算法将所有电商进行排名,可以凸显帮5买在电商行业的权威地位;本文将会讲述此产品的进化过程与细节。

第一版本:

下图就是我刚刚接手电商排行榜时候的界面(效果图,非真实数据),将商家按照收录商品数,流量占比,最低价商品数占比进行计算,得出一个综合的商家指数进行降序排列,为用户购物作出一定的指引。其中3大数据为机器自动抓取,平均每天可以更新一次,全部为真实数据,参考价值还是相当的。

商家可以提交自己的信息,可以申请被我们收录,若商家指数计算出来能进前100名,就可以被展示在界面上。

右侧也会提供一些热度和成交数最高的商品。

为了做这个界面,设计师足足设计了100多个Logo!

第一版本

第二版本:

产品在线一段时间之后,我们的老板(黄飞鸿)提出:这里面全部都是机器获取的数据,应该加入信任之类的用户产生的内容,使得商家指数变得更为丰满。

收到此需求之后,我们就开始策划产品,计划增加一列数据:可信度;按照美国学生的评分方式,从A+到D-,降序排列。

怎么评分呢?我和产品助理一起商讨着,结合帮5买自身产品的一些用户反馈、电商本身的名气,一些第三方网站的反馈;来进行综合的人工打分;一些不知名的商城只能拿到C以下的分数了。

一切妥当之后,就开发上线了,界面效果图如下。

第二版本

第三版本:

随着公司的不断发展,影响力也不断增加,公司投资人对此页面感兴趣了,老板也不断提升要求,老板希望能加入更多更新的东西,让商家指数更加的丰满,希望我们团队能够进行一次头脑风暴,相处更多的好点子。

当我接到如此抽象的改版需求之后,我并没有组织大家进行头脑风暴,因为此产品偏数字,偏现实,不合适进行头脑风暴,于是,我进入了个人的理性思考。

结合我领导提出的意见,我把指数的重新计算进行了如下的策划:

爬取数据需求

把可信度变成了用户评价,包括:好评度、印象标签、点评数量、投诉数量,并加入了帮5买评价,用户可以直接点击顶和踩对商家做出评价。这样的话商家指数就可以变得丰满。

用户评价类的数据我们自身是没有的,需要爬取,所以我们向Data组提出了数据爬取需求,如下图:

爬取需求

需求提出之后,Data组领导安排了一名工程师与我们对接,工程师分析了360印象网站的的数据结构,开始爬取,这之间的过程比较顺利,3天之后,就全部爬取完毕并顺利入库。

这次的要展示的数据明显增多,如果一次性全展示在页面上的话,用户很难找到重点,所以我们又开始设计界面交互来解决此问题,进行了草图设计,如下图:

草图设计

将第一层级的属性(如数据评估)与属性值放出来,其他的内容先隐藏起来,这样可以做到一目了然。

页面上还有一些细节的修正,我们看了数据,发现来此页面的人一般都是来看商家排行的,很少有购物的行为,左侧商品模块的点击率很低,索性就直接删除了。

商品排行

从页面上线至今,已经有不少的商家提交了收录信息,我们发现很多的联系人我们并不知道他们的职位,这让我们联系起来很头疼,所以我们就加入了职业的填写项目,但不做为必填项目。

申请表单

整个产品里面最核心的应该就是如何得出综合的商家指数了,构想的时候确实伤脑经,通过和商业智能工程师与产品助力的合力商讨,我们还是把这个艰难的阶段给攻破了。技术版权,关键部位已被我抹去,嘿嘿。

算法

 

界面的设计我们也在同步进行着,因我本人之前就是设计专业毕业,所以对于设计要求比较苛刻,不做到90分以上不罢休。我们的UI设计师被我来回折腾了好几轮,才最终定稿。效果图如下:

第三版本-数据展开

第三版本-评价展开

上线中的一个插曲,因为老板要展示给投资人看新版本,压缩了上线时间,前端的时间就不够,圆形的好评度那块我们足足切了101张图。

好在当天晚上12点20分左右,产品顺利上线!

奉上地址:http://www.b5m.com/jihe2

上线之后我发现banner不好看,又进行了更新

我们提前就已经加好了统计代码,经过一点时间的观察,我们发现经过我们的努力,产品受欢迎程度还是不错的,UV曲线越来越妖娆了。

UV趋势图