隋佳峻分享京东、聚美优品等首页页面布局分析

京东、聚美优品等首页页面布局分析

分析网站：京东商城 域名：www.jd.com

分析目标：首页的各个模块布局

分析目的：总结出页面优缺点，提出个人的改进方案

分析整体：

主体颜色以白色的背景，红色的主色调，一些价格优势，促销也是红色标给人醒目！细节在主体红色之外红的有色差而不是用一种红的色值

公司理念：多、快、好、省

页面总Width：1210px

Head区域：

顶部以Height: 31px；

其中包括收藏本页、切换地区方便物流团队第一时间锁定用户地址、登陆提示和注册、会员专区、手机版京东、售后服务、网站导航

下面以通栏形式广告W: 1210px

主要位置给了

京东Logo:width270px * height60px

Search:w500 * h36 默认搜索里主要以近期主打产品为主，搜索模块可以让买家直接输入自己想买的东西的名称，快速查找，节约时间。并且搜索栏下面有热门搜索，这可以显示大家最近在关注的东西。

用户订单和购物车结算

Main Nav分为7个主导航

左边主Navigation: w 210px * h 450px 分为14个主要商品分类

中间活动Advertisement: 分上下两个广告，上面为6个主要活动，下面为3个打折促销活动是定时切换的，既能推广活动又能促销新品和折扣商品

右边公司快讯和零碎功能入口

小结：第一屏中以三列式布局呈“F”状的视线习惯，网页的上方为用户提供服务、配送方式等，让用户了解商城的运作方式，为用户以后的购物提供方便。在网页的中间部分是大幅的商城的最新信息，及商品的打折信息，让顾客能及时找到自己所需的商品，导航栏及所有商品分类为用户提供方便选择，网页中间展示了商品的最新更新，让用户能更快知道商品信息。网站板块设计横向按照1：2：1的比例设计，大致分为总体分类，产品展示等。这样的

设计非常符合用户阅读习惯，中间是关键点占得比重比较大。

Head结束

Body区域开始

通栏接地气区域

这些商品都是近期搜索指数最高、打折优惠、推新品、预售商品，采用灰色的商品模块 接下来分出8楼阶梯介绍商品

其中每层阶梯结构 H 412px ，每层都是分为3部分结构 Left:以每层主分类、下跟具体商品细节分类

Middle:以选择卡形式切换不同细节分类，!Important 第一个放的是特价商品

Right:以该楼层主打品牌展示为主

Notice: 8F右侧很特殊把细分类中做了对应销售排行榜，里面呈现价格

Body结束

Foot区域开始

分为两部分：上面以互动为主有用户晒单、免费试用和在线读书；下面主要给用户购物指引介绍京东商城的特点配送方式，付款方式，售后服务，特色服务，和京东物流实力； !京东为公益事业有一个栏目，虽然不起眼但是公益是一个有传达正能量的

最下面忽略吧。。。都是备案啥的。

一句话总结首页：首页即门面，是给大多数用户的第一印象。对于用户决定是否继续浏览起着重要作用，所以首页的设计应该遵循美观，统一，层次清晰，商品导向明确这几个原则。

缺点：

1、同类产品，没有价格排序、售出量排序功能。 2、商品种类不够齐全，不能满足客户需求。很多顾客往往希望一次性把所有的东西都买齐，以节省运输费用和减少购物麻烦。这样的缺点，使得京都流失了很多潜在的购买力。 3、没有即时的聊天工具，客户不能及时和客服交流，顾客只能通过留言来向京都反映自己的需求，但是留言的方式存在一个时间差，不利于有效的沟通。 4、不少时候客服电话基本属于打不通状态，消费者很难及时反映自己遇到的问题或者需求。而京都的送货效率也让很多顾客不满意，不仅速度慢，工作人员的素质有待提高，部分商品的包装也存在一定的缺陷。

首页改进点：

如果把分类做成隐藏式列表。即：鼠标移动到时，弹出列表。这

样不仅保证了页面的整体感，另外也节省出一个广告位。一共8F，至少能多出8个广告展示位。

以图片加文字一体的形式来表现，并且统一限制字数。这样可以使得商品展示图尺寸稍大，并且使得局部变的整洁统一。 搜索框

改为

随页面下拉浮动，这样更方便用户在页面不能直接找到相应品类商品的时候进行搜索。

本文来源：https://www.bwwdw.com/article/o83d.html