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

1、京东、聚美优品等首页页面布局分析分析网站：京东商城域名： HYPERLINK 分析目标：首页的各个模块布局分析目的：总结出页面优缺点，提出个人的改进方案分析整体：主体颜色以白色的背景，红色的主色调，一些价格优势，促销也是红色标给人醒目！细节在主体红色之外红的有色差而不是用一种红的色值公司理念：多、快、好、省页面总Width：1210pxHead区域：顶部以Height: 31px；其中包括收藏本页、切换地区方便物流团队第一时间锁定用户地址、登陆提示和注册、会员专区、手机版京东、售后服务、网站导航下面以通栏形式广告W: 1210px主要位置给了京东Logo:width270px * height

2、60px Search:w500 * h36 默认搜索里主要以近期主打产品为主，搜索模块可以让买家直接输入自己想买的东西的名称，快速查找，节约时间。并且搜索栏下面有热门搜索，这可以显示大家最近在关注的东西。用户订单和购物车结算Main Nav分为7个主导航左边主Navigation: w 210px * h 450px 分为14个主要商品分类中间活动Advertisement: 分上下两个广告，上面为6个主要活动，下面为3个打折促销活动是定时切换的，既能推广活动又能促销新品和折扣商品右边公司快讯和零碎功能入口小结：第一屏中以三列式布局呈“F”状的视线习惯，网页的上方为用户提供服务、配送方式等，

3、让用户了解商城的运作方式，为用户以后的购物提供方便。在网页的中间部分是大幅的商城的最新信息，及商品的打折信息，让顾客能及时找到自己所需的商品，导航栏及所有商品分类为用户提供方便选择，网页中间展示了商品的最新更新，让用户能更快知道商品信息。网站板块设计横向按照1：2：1的比例设计，大致分为总体分类，产品展示等。这样的设计非常符合用户阅读习惯，中间是关键点占得比重比较大。Head结束Body区域开始通栏接地气区域这些商品都是近期搜索指数最高、打折优惠、推新品、预售商品，采用灰色的商品模块接下来分出8楼阶梯介绍商品其中每层阶梯结构 H 412px ，每层都是分为3部分结构Left:以每层主分类、下跟

4、具体商品细节分类Middle:以选择卡形式切换不同细节分类，!Important 第一个放的是特价商品Right:以该楼层主打品牌展示为主Notice: 8F右侧很特殊把细分类中做了对应销售排行榜，里面呈现价格Body结束Foot区域开始分为两部分：上面以互动为主有用户晒单、免费试用和在线读书；下面主要给用户购物指引介绍京东商城的特点配送方式，付款方式，售后服务，特色服务，和京东物流实力；!京东为公益事业有一个栏目，虽然不起眼但是公益是一个有传达正能量的最下面忽略吧。都是备案啥的。一句话总结首页：首页即门面，是给大多数用户的第一印象。对于用户决定是否继续浏览起着重要作用，所以首页的设计应该遵循

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

6、类做成隐藏式列表。即：鼠标移动到时，弹出列表。这样不仅保证了页面的整体感，另外也节省出一个广告位。一共8F，至少能多出8个广告展示位。以图片加文字一体的形式来表现，并且统一限制字数。这样可以使得商品展示图尺寸稍大，并且使得局部变的整洁统一。搜索框改为随页面下拉浮动，这样更方便用户在页面不能直接找到相应品类商品的时候进行搜索。还有将回到顶部按钮尺寸加大，更容易识别。分析网站： 爱乐活域名: 分析目标：首页的各个模块布局分析目的：总结出页面优缺点，提出个人的改进方案分析整体：主体颜色以白色的背景，黑色的主色调，一些价格优势，促销是红色！网页理念：主要以时尚、个性为基调设计页面总Width：1150

7、pxHead顶部左侧给了LogoLogo大小W 210px * H 46px下面接主导航，导航里分为三大类，两小类三大类以：女性，男性，和零碎两小类以：专题和品牌导航位置右侧放置登陆、注册、购物车等在第一屏中三分二位置给了Advertisement分为7个展示W 1150px * H 502px/headBody在中间部分我看来是分为两部分组成限时抢购和商品层限时抢购部分以Sale体现，右侧有互动微信的二维码下面承接的商品层以左右布局左边以当前模块主图和细分导航指引，右边以具体商品展示+价格信息为入口/bodyFoot广告+end/foot小总结：整个网站优缺点很明显，优点干净整齐布局简洁明了

8、，缺点无搜索功能在用户无法直接简单找到自己需求主导航设计与主体展现无呼应产品分类不明确分析网站： 易果网域名: 分析目标：首页的各个模块布局分析目的：总结出页面优缺点，提出个人的改进方案分析整体：主体颜色以浅色背景+黑色反衬，外加黄色点缀主打的口号是全球精选页面总Width: 1130pxHead顶部分为上下两部分上部以Logo+（选择地区+会员充值+优惠专区+团购）+电话下部以隐藏式Nav + Search + Order & Shopping承接Top紧凑下面以两个Ad填充，第一个Ad是 W: 1130px * H: 361px第二个Ad是偏小的通栏 W: 1130px * H: 70px

9、/head小总结：头部张弛有度，亮点在于隐藏式Nav把Ad放大突显出大气，隐藏式分类中产品分类明确指引性清晰，分为8个类别每个类别之间以颜色作为过度用户体验很好；在Ad下面放近期小图起到合理过度到下一个模块搜索中给出用户指引性搜索指导买家如何快速找到自己的需求，搜索旁边有当季热销商品指引Body以选项卡形式表现各种打折优惠商品接下来以同一个模块8个层级分类表现与主导航相呼应各级模块层每层模块分两部分组成，左边以当前层级主推切换三个商品专场入口，右边分别列出详细商品及购买价格信息/bodyFoot底部已会员专区和用户指南、付款方式、配送方式、售后服务、关于我们end小总结：这个平台布局与京东类似

10、，个人感觉颜色搭配过于沉重长时间浏览该网页有种压抑情绪。另外商品图片可能是为了防止被盗图所以添加的水印，但是位置在配合很好的商品上给网站整体视觉输出大大减分，给用户感觉这家老板太小家子气。分析网站： 本来生活网域名: http:/www.benla/分析目标：首页的各个模块布局分析目的：总结出页面优缺点，提出个人的改进方案分析整体：主体颜色以白色背景，搭配绿色为主色调主打的旗号是冷链配送、基地直供页面总宽 W: 990pxHead顶部从左往右会员登录注册、切换城市和最右边的帮助起过度的是一个通栏的Ad某个商品专区入口 W: 990px * H: 60px接下来是个主要以三部分组成Logo+城市

11、配送切换+Search+O & S第一屏最后以三分二位置给了由主Nav和Ad的模块左侧主导航有商品分类分出11个类别每个类别有详细对应商品分类中间上部分以Nav也分上面主要导航和下面次要导航；主导航分9类，次导航分3个当前主推专区入口Ad部门分6个广告展示，每个Ad下面有明确说明小总结：搜索框里出现默认搜索，方便用户在不打字情况下直接找到本站推荐商品而在默认下面也有推荐的其他商品，在第一屏中导航分类很明显清晰，但是次导航专区分类中文字表现过多不如图片展现更易于用户接受/headBody承接下面的是以一个分两部分组成的模块，左边以选项卡形式切换三个模块，新品推荐、限时抢购和每日新鲜组成对应每个商

12、品有相应价格信息，右侧是公司的公告信息主体分为同一模块的10个层级表现页面Nav对应的分类层其中每个模块以左右两个部分组成，左边是一个主推的商品图片入口，右边是各个具体商品及价格!细节在各模块会隔2-3个出现一个通栏的Ad 配合当下热销的商品展示作为入口/bodyFoot底部分为上下两大部分上部分分为左右两个模块，左边是以根据用户搜索词关联相关于最高的其他商品推荐；右边是本站做的活动区入口下部分是以新手指南、配送方式、支付方式和售后服务，给用户一个网站指引性的Nav小总结：优点是导航指引性强，能够快速引导用户找到所需商品。缺点美工设计有缺失视觉输出略有薄弱的地方分析网站： 聚美优品域名: HY

13、PERLINK http:/ http:/ 960pxHead顶部提示登录的用户 Ctrl + D 收藏本页提示下面为左右两部分，左边主要Nav 分为限时特卖、美妆商城、美妆口碑、手机聚美和正品保证；右边是用户登录和订单信息接下来是Logo 和 Shopping在下面是网页Main Nav分为四个入口，特卖精选、服装、鞋包、家具特卖在第一屏最后占用三分之二的位置是通栏Ad特卖场入口/head小总结：在头部聚美大胆运用多种不同色彩元素但主色调还是以粉色为主，烘托出整个大卖场的热度，强刺激用户向下继续阅览Body主体部分大致以两个部分组成第一部分是以同一模块分为8个特卖专场为主与导航呼应其中每个专

14、场以三部分组成，上面Ad介绍本专场内容，中间各个特卖商品及价格，下面指引用户进入本专区的入口之前以两个通栏Ad上下组成第二部分Head顶部Nav以七个分类而且在每个分类有记录本分类的商品个数下面是分为主次两个Ad组成，主Ad分为三个展示，次Ad是通栏表达让用户对此平台相信其中有三个百分百，100%正品、100%保障、100%安心打消消费者顾虑/headBody第二部分主体以左右两部分组成左边是各个商品的展示及价格，!在展示最下面放置的是已经抢空的商品有勾引用户关注右边以上下组成大致分为五个模块，从上到下是商品预告、今日爆款、名牌商品预告、互动模块和跟随页面的导航条/bodyFoot底部大致两部

15、分上部分是以服务保障、使用帮助、支付方式、配送方式、售后服务、二维码；给用户一个网站指引性的Nav下部分是Ad功能还是打消消费者顾虑相信聚美的公司实力，说白了吹吹牛体现公司实力小总结：这个是团购类网站的经典优点不说，其中最经典的一笔是不设置搜索这个是聚美独特的地方他是想让用户不直接购买而是靠着众多商品海淘一样去买，可能在用户只想买一个叫A货的时候无意间发现了B的存在。以此类推这个消费数量是没有封顶的，也是聚美重复购买多次二次消费的恐怖点所在。分析网站： 沱沱工社网域名: http:/www.tooto/分析目标：首页的各个模块布局分析目的：总结出页面优缺点，提出个人的改进方案分析整体：主体颜色

16、以白色背景，红色作为点缀主打的口号：有机、天然、高品质页面W: 1180pxHead顶部是注册、配送地区、会员账户信息下面是通栏广告承接的下面的是以左中右三部分，左边Logo，中间搜索有默认搜索和推荐的商品信息右边是做会员广告入口在第一屏最后是以主导航、Ad和最新资讯组成其中主导航是分为左侧+通栏；Ad是分上下主次布局，主Ad分为七个展现，次Ad分为轮播三个展现；右侧资讯分上下两部分，其中下面是单商品及价格/head小总结：能看出商家非常会利用网页有限空间分众多小模块去划分并填充模块，可能是设计输出问题也可能是布局安排高度原因，文字过多会造成一定的视觉疲劳感众多集中表现后小块亮点较少指引性一般。Body分两大部分第一部分，是同一种模块两个层级第一层级以左右两部分左边是选项卡切换4个区域超值抢购、本季热卖、本周推荐、新品上市，右边是选项卡分三个商品单品可直接进入详情页。承接下面的也是同一个模块左右两部分，左边是限时抢购，右边是热门商品Ad。第二层是通栏Ad第二