1、京东、聚美优品等首页页面布局分析分析网站：京东商城域名：分析目标：首页的各个模块布局分析目的：总结出页面优缺点，提出个人的改进方案分析整体：主体颜色以白色的背景，红色的主色调，一些价格优势，促销也是红色标给人醒目！细节在主体红色之外红的有色差而不是用一种红的色值公司理念：多、快、好、省页面总 Width： 1210pxHead 区域：顶部以 Height: 31px；其中包括收藏本页、切换地区方便物流团队第一时间锁定用户地址、登陆提示和注册、会员专区、手机版京东、售后服务、网站导航下面以通栏形式广告 W: 1210px主要位置给了京东 Logo:width270px * height60px
2、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
4、部分结构Left:以每层主分类、下跟具体商品细节分类Middle:以选择卡形式切换不同细节分类，!Important 第一个放的是特价商品Right:以该楼层主打品牌展示为主Notice: 8F 右侧很特殊把细分类中做了对应销售排行榜，里面呈现价格Body 结 束Foot 区域开始分为两部分：上面以互动为主有用户晒单、免费试用和在线读书；下面主要给用户购物指引介绍京东商城的特点配送方式，付款方式，售后服务，特色服务，和京东物流实力；!京东为公益事业有一个栏目，虽然不起眼但是公益是一个有传达 正能量的最下面忽略吧。 。 。都是备案啥的。一句话总结 首页：首页即门面 ，是给大多数 用户的第一 印象
5、。对于用户决 定是否继续 浏览起着重 要作用，所以首页的 设计应该遵 循美观，统一，层次清晰，商品导向明 确这几个原则。缺点：1、同类产品，没有价格排序、售出量排序 功能。 2、商品种类不够齐全，不能满足客 户需求。很多顾客往 往希望一次性把所有的东西都买齐，以节省运输费用和减少购物麻烦。这样的缺点，使得京都流失了很多潜在的购买力。 3、没有即时的聊天工具，客户不能及 时和客服交流，顾客只能通 过留言来向京都反映自己的需求，但是留言的方式存在一个时间差，不利于有效的沟通。 4、不少时候客服电话基本属于打不通 状态，消费者很难 及时反映自己遇到的问题或者需求。而京都的送货效率也让很多顾客不满意，
6、不仅速度慢，工作人员的素质有待提高，部分商品的包装也存在一定的缺陷。首页改进点：如果把分类做成隐藏式列表。即：鼠标移动到 时，弹出列表。这样不仅保证了页面的整体感，另外也节省出一个广告位。一共 8F，至少能多出8 个广告展示位。以图片加文字一体的形式来表现，并且统一限制字数。这样可以使得商品展示图尺寸稍大，并且使得局部变的整洁统一。搜索框改为随页面下拉浮动，这样更方便用户在页面不能直接找到相应品类商品的时候进行搜索。还有将回到顶部按钮尺寸加大，更容易识别。分析网站： 爱乐活域名: 分析目标：首页的各个模块布局分析目的：总结出页面优缺点，提出个人的改进方案分析整体：主体颜色以白色的背景，黑色的主
7、色调，一些价格优势，促销是红色！网页理念：主要以时尚 、个性为基调 设计页面总 Width： 1150pxHead顶部左侧给 了 LogoLogo 大 小 W 210px * H 46px下面接主导 航，导航里分为 三大类，两小类三大类以：女性，男性，和零碎两小类以：专题和品牌导航位置右 侧放置登陆 、注册、购物车等在第一屏中 三分二位置 给了 Advertisement分为 7 个展 示W 1150px * H 502px/headBody在中间部分 我看来是分 为两部分组 成限时抢购和 商品层限时抢购部 分以 Sale 体现，右侧有互动 微信的二维 码下面承接的 商品层以左 右布局左边以当
8、前 模块主图和 细分导航指 引，右边以具体 商品展示+价格信息为 入口/bodyFoot广告+end/foot小总结：整个网站优缺点很明显，优点干净整齐布局简洁明了，缺点无搜索功能在用户无法直接简单找到自己需求主导航设计与主体展现无呼应产品分类不明确分析网站： 易果网域名: 分析目标：首页的各个模块布局分析目的：总结出页面优缺点，提出个人的改进方案分析整体：主体颜色以 浅色背景+ 黑色反衬，外加黄色点 缀主打的口号 是全球精选页面总 Width: 1130pxHead顶部分为上 下两部分上部以 Logo+（选择地区+ 会员充值+ 优惠专区+团购）+电话下部以隐藏 式 Nav + Search
9、+ Order & Shopping承接 Top紧凑下面以 两个 Ad 填 充，第一个 Ad是 W: 1130px * H: 361px第二个 Ad是偏小的通 栏 W: 1130px * H: 70px/head小总结：头部张弛有 度，亮点在于隐 藏式 Nav把 Ad 放大 突显出大气 ，隐藏式分类 中产品分类 明确指引性 清晰，分为 8 个类 别每个类别 之间以颜色 作为过度用 户体验很好；在 Ad 下面 放近期小图 起到合理过 度到下一个 模块搜索中 给出用户指 引性搜索指 导买家如何 快速找到自 己的需求 ，搜索旁边有 当季热销商 品指引Body以选项卡形 式表现各种 打折优惠商 品接下
10、来以同 一个模块 8个层级分类 表现与主导 航相呼应各 级模块层每层模块分 两部分组成 ，左边以当前 层级主推切 换三个商品 专场入口，右边分别列 出详细商品 及购买价格 信息/bodyFoot底部已会员 专区和用户 指南、付款方式、配送方式、售后服务、关于我们 end小总结：这个平台布 局与京东类 似，个人感觉颜 色搭配过于 沉重长时间 浏览该网页 有种压抑情 绪。另外商品图 片可能是为 了防止被盗 图所以添加 的水印，但是位置在 配合很好的 商品上给网 站整体视觉 输出大大减 分，给用户感觉 这家老板太 小家子气。分析网站： 本来生活网域名: http:/ 白色背景，搭配绿色为 主色调主打
11、的旗号 是冷链配送 、基地直供页面总宽 W: 990pxHead顶部从左往 右会员登录注 册、切换城市和 最右边的帮 助起过度的是 一个通栏的 Ad 某个商 品专区入口 W: 990px * H: 60px接下来是个 主要以三部 分组成Logo+城市配送切 换+Searc h+O & S第一屏最后 以三分二位 置给了由主 Nav 和 Ad 的模块左侧主导航 有商品分类 分出 11 个 类别每个类 别有详细对 应商品分类中间上部分 以 Nav 也 分上面主要 导航和下面 次要导航；主导航分 9类，次导航分 3个当前主推 专区入口Ad 部门分 6 个广告展 示，每个 Ad 下 面有明确说 明小总结
12、：搜索框里出 现默认搜索 ，方便用户在 不打字情况 下直接找到 本站推荐商 品而在默认 下面也有推 荐的其他商 品，在第一屏中 导航分类很 明显清晰，但是次导航 专区分类中 文字表现过 多不如图片 展现更易于 用户接受/headBody承接下面的 是以一个分 两部分组成 的模块，左边以选项 卡形式切换 三个模块，新品推荐、限时抢购和 每日新鲜组 成对应每个 商品有相应 价格信息，右侧是公司 的公告信息主体分为同 一模块的 10 个层级表 现页面 Nav 对应的分 类层其中每个模 块以左右两 个部分组成 ，左边是一个 主推的商品 图片入口，右边是各个 具体商品及 价格!细节在各模 块会隔 2-3
13、 个出现一 个通栏的 Ad 配合当下热 销的商品展 示作为入口/bodyFoot底部分为上 下两大部分上部分分为 左右两个模 块，左边是以根 据用户搜索 词关联相关 于最高的其 他商品推荐 ；右边是本站 做的活动区 入口下部分是以 新手指南、配送方式、支付方式和 售后服务，给用户一个 网站指引性 的 Nav小总结：优点是导航 指引性强，能够快速引 导用户找到 所需商品。缺点美工设 计有缺失视觉输出略有 薄弱的地方分析网站： 聚美优品域名: 分析目标：首页的各个模块布局分析目的：总结出页面优缺点，提出个人的改进方案分析整体：主体颜色以 浅色背景，搭配粉色和 黑色为主公司主打方 向是：化妆品团购
14、网，并且保证 30 天无条件 退货页面 Width: 960pxHead顶部提示登 录的用户 Ctrl + D 收藏本页提 示下面为左右 两部分，左边主要 Nav 分为限时特 卖、美妆商城、美妆口碑、手机聚美和 正品保证；右边是用户 登录和订单 信息接下来是 Logo 和 Shopping在下面是网 页 Main Nav 分为 四个入口，特卖精选、服装、鞋包、家具特卖在第一屏最 后占用三分 之二的位置 是通栏 Ad特卖场入口/head小总结：在头部聚美 大胆运用多 种不同色彩 元素但主色 调还是以粉 色为主，烘托出整个 大卖场的热 度，强刺激用户 向下继续阅 览Body主体部分大 致以两个部
15、分组成第一部分是 以同一模块 分为 8 个特 卖专场为主 与导航呼应其中每个专 场以三部分 组成，上面 Ad 介 绍本专场内 容，中间各个特 卖商品及价 格，下面指引用 户进入本专 区的入口之前以两个 通栏 Ad 上 下组成第二部分Head顶部 Nav以七个分类 而且在每个 分类有记录 本分类的商 品个数下面是分为 主次两个 Ad 组成，主 Ad 分为 三个展示，次 Ad 是通 栏表达让用 户对此平台 相信其中有 三个百分百 ，100% 正品、100% 保障、100%安心打消消 费者顾虑/headBody第二部分主 体以左右两 部分组成左边是各个 商品的展示 及价格，!在展示最下 面放置的是
16、已经抢空的 商品有勾引 用户关注右边以上下 组成大致分 为五个模块 ，从上到下是 商品预告、今日爆款、名牌商品预 告、互动模块和 跟随页面的 导航条/bodyFoot底部大致两 部分上部分是以 服务保障、使用帮助、支付方式、配送方式、售后服务、二维码；给用户一个网站指引性 的 Nav下部分是 Ad 功能还是 打消消费者 顾虑相信聚 美的公司实 力，说白了吹吹 牛体现公司 实力小总结：这个是团购 类网站的经 典优点不说 ，其中最经典 的一笔是不 设置搜索这 个是聚美独 特的地方他 是想让用户 不直接购买 而是靠着众 多商品海淘 一样去买，可能在用户 只想买一个 叫 A 货的时 候无意间发 现了
17、B 的存 在。 。 。以此类推这 个消费数量 是没有封顶 的，也是聚美重 复购买多次 二次消费的 恐怖点所在 。分析网站： 沱沱工社网域名: http:/ 白色背景，红色作为点 缀主打的口号 ：有机、天然、高品质页面 W: 1180pxHead顶部是注册 、配送地区、会员账户信 息下面是通栏 广告承接的下面 的是以左中 右三部分，左边 Logo，中间搜索有 默认搜索和 推荐的商品 信息右边是做会 员广告入口在第一屏最 后是以主导 航、Ad 和最新 资讯组成其中主导航 是分为左侧 +通栏；Ad 是分上 下主次布局 ，主 Ad 分为 七个展现，次 Ad 分为 轮播三个展 现；右侧资讯分 上下两部分
18、 ，其中下面是 单商品及价 格/head小总结：能看出商家 非常会利用 网页有限空 间分众多小 模块去划分 并填充模块 ，可能是设计 输出问题也 可能是布局 安排高度原 因，文字过多会 造成一定的 视觉疲劳感 众多集中表 现后小块亮 点较少指引 性一般。Body分两大部分第一部分，是同一种模 块两个层级第一层级以 左右两部分 左边是选项 卡切换 4 个 区域超值抢 购、本季热卖、本周推荐、新品上市，右边是选项 卡分三个商 品单品可直 接进入详情 页。承接下面的 也是同一个 模块左右两 部分，左边是限时 抢购，右边是热门 商品 Ad。第二层是通 栏 Ad第二部分是 同一模块分 五个层级其中每个层 级分为左右 两部分组成 ，左边上边是 排行榜，下边是单个 商品的 Ad右边上边是 该层级选项 卡 Nav 下 边为各个商 品展示及价 格/bodyFoot底部分为两 部分第一部分分 为左中右三 个区域左边区域是 食谱推荐，中间区域是 用户评价展 示，右边是二维 码第二部分上 下两层第一层是食 品安全、新手教程、配送方式、支付方式、售后服务和 帮助信息；给用户一个网站指引性 的 Nav第二层是 Ad 展现公司 实力/foot小总结：这个网页亮 点在于购物 车功能是跟 随页面整体 而浮动可以 让用户随时 进行结束购买，缺点布局搭 配不太合理 头部过紧。
