隋佳峻分享京东、聚美优品等首页页面布局分析由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“聚美优品官网网页版”。
京东、聚美优品等首页页面布局分析
分析网站：京东商城 域名：www.daodoc.com/ 分析目标：首页的各个模块布局
分析目的：总结出页面优缺点，提出个人的改进方案
分析整体：
主体颜色以白色背景，红色作为点缀 主打的口号：有机、天然、高品质 页面W: 1180px
Head 顶部是注册、配送地区、会员账户信息
下面是通栏广告
承接的下面的是以左中右三部分，左边Logo，中间搜索有默认搜索和推荐的商品信息
右边是做会员广告入口
在第一屏最后是以主导航、Ad和最新资讯组成其中主导航是分为左侧+通栏；Ad是分上下主次布局，主Ad分为七个展现，次Ad分为轮播三个展现；右侧资讯分上下两部分，其中下面是单商品及价格
/head 小总结：能看出商家非常会利用网页有限空间分众多小模块去划分并填充模块，可能是设计输出问题也可能是布局安排高度原因，文字过多会造成一定的视觉疲劳感众多集中表现后小块亮点较少指引性一般。
Body 分两大部分 第一部分，是同一种模块两个层级
第一层级以左右两部分左边是选项卡切换4个区域超值抢购、本季热卖、本周推荐、新品上市，右边是选项卡分三个商品单品可直接进入详情页。承接下面的也是同一个模块左右两部分，左边是限时抢购，右边是热门商品Ad。
第二层是通栏Ad
第二部分是同一模块分五个层级 其中每个层级分为左右两部分组成，左边上边是排行榜，下边是单个商品的Ad
右边上边是该层级选项卡Nav下边为各个商品展示及价格
/body Foot 底部分为两部分
第一部分分为左中右三个区域
左边区域是食谱推荐，中间区域是用户评价展示，右边是二维码
第二部分上下两层
第一层是食品安全、新手教程、配送方式、支付方式、售后服务和帮助信息；给用户一个网站指引性的Nav
第二层是Ad展现公司实力
/foot
小总结：这个网页亮点在于购物车功能是跟随页面整体而浮动可以让用户随时进行结束购买，缺点布局搭配不太合理头部过紧。
