隋佳峻分享京东聚美优品等首页页面布局分析Word文档下载推荐.docx

隋佳峻分享京东聚美优品等首页页面布局分析Word文档下载推荐.docx

《隋佳峻分享京东聚美优品等首页页面布局分析Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《隋佳峻分享京东聚美优品等首页页面布局分析Word文档下载推荐.docx（23页珍藏版）》请在冰豆网上搜索。

width270px*height60px

Search:

w500*h36默认搜索里主要以近期主打产品为主，搜索模块可以让买家直接输入自己想买的东西的名称，快速查找，节约时间。

并且搜索栏下面有热门搜索，这可以显示大家最近在关注的东西。

用户订单和购物车结算

MainNav分为7个主导航

左边主Navigation:

w210px*h450px分为14个主要商品分类

中间活动Advertisement:

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

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

小结：

第一屏中以三列式布局呈“F”状的视线习惯，网页的上方为用户提供服务、配送方式等，让用户了解商城的运作方式，为用户以后的购物提供方便。

在网页的中间部分是大幅的商城的最新信息，及商品的打折信息，让顾客能及时找到自己所需的商品，导航栏及所有商品分类为用户提供方便选择，网页中间展示了商品的最新更新，让用户能更快知道商品信息。

网站板块设计横向按照1：

2：

1的比例设计，大致分为总体分类，产品展示等。

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

Head结束

Body区域开始

通栏接地气区域

这些商品都是近期搜索指数最高、打折优惠、推新品、预售商品，采用灰色的商品模块

接下来分出8楼阶梯介绍商品

其中每层阶梯结构H412px，每层都是分为3部分结构

Left:

以每层主分类、下跟具体商品细节分类

Middle:

以选择卡形式切换不同细节分类，!

Important第一个放的是特价商品

Right:

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

Notice:

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

Body结束

Foot区域开始

分为两部分：

上面以互动为主有用户晒单、免费试用和在线读书；

下面主要给用户购物指引介绍京东商城的特点配送方式，付款方式，售后服务，特色服务，和京东物流实力；

!

京东为公益事业有一个栏目，虽然不起眼但是公益是一个有传达正能量的

最下面忽略吧。

。

都是备案啥的。

一句话总结首页：

首页即门面，是给大多数用户的第一印象。

对于用户决定是否继续浏览起着重要作用，所以首页的设计应该遵循美观，统一，层次清晰，商品导向明确这几个原则。

缺点：

1、同类产品，没有价格排序、售出量排序功能。

2、商品种类不够齐全，不能满足客户需求。

很多顾客往往希望一次性把所有的东西都买齐，以节省运输费用和减少购物麻烦。

这样的缺点，使得京都流失了很多潜在的购买力。

3、没有即时的聊天工具，客户不能及时和客服交流，顾客只能通过留言来向京都反映自己的需求，但是留言的方式存在一个时间差，不利于有效的沟通。

4、不少时候客服电话基本属于打不通状态，消费者很难及时反映自己遇到的问题或者需求。

而京都的送货效率也让很多顾客不满意，不仅速度慢，工作人员的素质有待提高，部分商品的包装也存在一定的缺陷。

首页改进点：

如果把分类做成隐藏式列表。

即：

鼠标移动到

时，弹出列表。

这样不仅保证了页面的整体感，另外也节省出一个广告位。

一共8F，至少能多出8个广告展示位。

以图片加文字一体的形式来表现，并且统一限制字数。

这样可以使得商品展示图尺寸稍大，并且使得局部变的整洁统一。

搜索框

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

还有将回到顶部按钮尺寸加大，更容易识别。

爱乐活

域名:

主体颜色以白色的背景，黑色的主色调，一些价格优势，促销是红色！

网页理念：

主要以时尚、个性为基调设计

1150px

Head

顶部左侧给了Logo

Logo大小W210px*H46px

下面接主导航，导航里分为三大类，两小类

三大类以：

女性，男性，和零碎

两小类以：

专题和品牌

导航位置右侧放置登陆、注册、购物车等

在第一屏中三分二位置给了Advertisement分为7个展示

W1150px*H502px

/head

Body

在中间部分我看来是分为两部分组成

限时抢购和商品层

限时抢购部分以Sale体现，右侧有互动微信的二维码

下面承接的商品层以左右布局

左边以当前模块主图和细分导航指引，右边以具体商品展示+价格信息为入口

/body

Foot

广告+end

/foot

小总结：

整个网站优缺点很明显，优点干净整齐布局简洁明了，缺点无搜索功能在用户无法直接简单找到自己需求主导航设计与主体展现无呼应产品分类不明确

易果网

主体颜色以浅色背景+黑色反衬，外加黄色点缀

主打的口号是全球精选

页面总Width:

1130px

顶部分为上下两部分

上部以Logo+（选择地区+会员充值+优惠专区+团购）+电话

下部以隐藏式Nav+Search+Order&

Shopping

承接Top紧凑下面以两个Ad填充，

第一个Ad是W:

1130px*H:

361px

第二个Ad是偏小的通栏W:

70px

头部张弛有度，亮点在于隐藏式Nav把Ad放大突显出大气，隐藏式分类中产品分类明确指引性清晰，分为8个类别每个类别之间以颜色作为过度用户体验很好

；

在Ad下面放近期小图起到合理过度到下一个模块搜索中给出用户指引性搜索指导买家如何快速找到自己的需求

，搜索旁边有当季热销商品指引

以选项卡形式表现各种打折优惠商品

接下来以同一个模块8个层级分类表现与主导航相呼应各级模块层

每层模块分两部分组成，左边以当前层级主推切换三个商品专场入口，右边分别列出详细商品及购买价格信息

底部已会员专区和用户指南、付款方式、配送方式、售后服务、关于我们end

这个平台布局与京东类似，个人感觉颜色搭配过于沉重长时间浏览该网页有种压抑情绪。

另外商品图片可能是为了防止被盗图所以添加的水印，但是位置在配合很好的商品上给网站整体视觉输出大大减分，给用户感觉这家老板太小家子气。

本来生活网

主体颜色以白色背景，搭配绿色为主色调

主打的旗号是冷链配送、基地直供

页面总宽W:

990px

顶部从左往右

会员登录注册、切换城市和最右边的帮助

起过度的是一个通栏的Ad某个商品专区入口W:

990px*H:

60px

接下来是个主要以三部分组成

Logo+城市配送切换+Search+O&

S

第一屏最后以三分二位置给了由主Nav和Ad的模块

左侧主导航有商品分类分出11个类别每个类别有详细对应商品分类

中间上部分以Nav也分上面主要导航和下面次要导航；

主导航分9类，次导航分3个当前主推专区入口

Ad部门分6个广告展示，每个Ad下面有明确说明

搜索框里出现默认搜索，方便用户在不打字情况下直接找到本站推荐商品而在默认下面也有推荐的其他商品

，

在第一屏中导航分类很明显清晰，但是次导航专区分类中文字表现过多不如图片展现更易于用户接受

承接下面的是以一个分两部分组成的模块，

左边以选项卡形式切换三个模块，新品推荐、限时抢购和每日新鲜组成对应每个商品有相应价格信息，

右侧是公司的公告信息

主体分为同一模块的10个层级表现页面Nav对应的分类层

其中每个模块以左右两个部分组成，左边是一个主推的商品图片入口，右边是各个具体商品及价格

细节在各模块会隔2-3个出现一个通栏的Ad配合当下热销的商品展示作为入口

底部分为上下两大部分

上部分分为左右两个模块，左边是以根据用户搜索词关联相关于最高的其他商品推荐；

右边是本站做的活动区入口

下部分是以新手指南、配送方式、支付方式和售后服务，给用户一个网站指引性的Nav

优点是导航指引性强，能够快速引导用户找到所需商品。

缺点美工设计有缺失视觉输出略有薄弱的地方

聚美优品

主体颜色以浅色背景，搭配粉色和黑色为主

公司主打方向是：

化妆品团购网，并且保证30天无条件退货

页面Width:

960px

顶部提示登录的用户Ctrl+D收藏本页提示

下面为左右两部分，左边主要Nav分为限时特卖、美妆商城、美妆口碑、手机聚美和正品保证；

右边是用户登录和订单信息

接下来是Logo

和Shopping

在下面是网页MainNav分为四个入口，特卖精选、服装、鞋包、家具特卖

在第一屏最后占用三分之二的位置是通栏Ad特卖场入口

在头部聚美大胆运用多种不同色彩元素但主色调还是以粉色为主，烘托出整个大卖场的热度，强刺激用户向下继续阅览

主体部分大致以两个部分组成

第一部分是以同一模块分为8个特卖专场为主与导航呼应

其中每个专场以三部分组成，上面Ad介绍本专场内容，中间各个特卖商品及价格，下面指引用户进入本专区的入口

之前以两个通栏Ad上下组成

第二部分

顶部Nav以七个分类而且在每个分类有记录本分类的商品个数

下面是分为主次两个Ad组成，主Ad分为三个展示，次Ad是通栏表达让用户对此平台相信其中有三个百分百，100%正品、100%保障、100%安心打消消费者顾虑

第二部分主体以左右两部分组成

左边是各个商品的展示及价格，!

在展示最下面放置的是已经抢空的商品有勾引用户关注

右边以上下组成大致分为五个模块，从上到下是商品预告、今日爆款、名牌商品预告、互动模块和跟随页面的导航条

底部大致两部分

上部分是以服务保障、使用帮助、支付方式、配送方式、售后服务、二维码；

给用户一个网站指引性的Nav

下部分是Ad功能还是打消消费者顾虑相信聚美的公司实力，说白了吹吹牛体现公司实力

这个是团购类网站的经典优点不说，其中最经典的一笔是不设置搜索这个是聚美独特的地方他是想让用户不直接购买而是靠着众多商品海淘一样去买，可能在用户只想买一个叫A货的时候无意间发现了B的存在。

以此类推这个消费数量是没有封顶的，也是聚美重复购买多次二次消费的恐怖点所在。

沱沱工社网

主体颜色以白色背景，红色作为点缀

主打的口号：

有机、天然、高品质

页面W:

1180px

顶部是注册、配送地区、会员账户信息

下面是通栏广告

承接的下面的是以左中右三部分，左边Logo，

中间搜索有默认搜索和推荐的商品信息

右边是做会员广告入口

在第一屏最后是以主导航、Ad和最新资讯组成

其中主导航是分为左侧+通栏；

Ad是分上下主次布局，主Ad分为七个展现，次Ad分为轮播三个展现；

右侧资讯分上下两部分，其中下面是单商品及价格

能看出商家非常会利用网页有限空间分众多小模块去划分并填充模块，可能是设计输出问题也可能是布局安排高度原因，文字过多会造成一定的视觉疲劳感众多集中表现后小块亮点较少指引性一般。

分两大部分

第一部分，是同一种模块两个层级

第一层级以左右两部分左边是选项卡切换4个区域超值抢购、本季热卖、本周推荐、新品上市，右边是选项卡分三个商品单品可直接进入详情页。

承接下面的也是同一个模块左右两部分，左边是限时抢购，右边是热门商品Ad。

第二层是通栏Ad

第二部分是同一模块分五个层级

其中每个层级分为左右两部分组成，

左边上边是排行榜，下边是单个商品的Ad

右边上边是该层级选项卡Nav下边为各个商品展示及价格

底部分为两部分

第一部分分为左中右三个区域

左边区域是食谱推荐，中间区域是用户评价展示，右边是二维码

第二部分上下两层

第一层是食品安全、新手教程、配送方式、支付方式、售后服务和帮助信息；

第二层是Ad展现公司实力

这个网页亮点在于购物车功能是跟随页面整体而浮动可以让用户随时进行结束购买，缺点布局搭配不太合理头部过紧。