最近在网盘里找到几篇旧文，可能有些图片已经是旧版的了，分析也比较浅显。但是不重要，重要的是对我的启发，同时也督促自己养成研究和总结的习惯~

选择理由：比较典型的购物网站，结构清晰。其他的购物网站大多万变不离其中。作为行业的领军企业，是很多其他同类网站的主要竞品或学习对象。

浏览工具：MAC端safari。

1.头部

1.1.顶部导航栏

天猫的顶部工具栏

放置登录、注册、个人管理相关的入口（包括购物车）以及其他相关业务的入口和全站导航。这些内容不是每个用户都会频繁去点击的，但是从业务角度又必须有，所以放在页面顶部，面积不大的一条区域，而且这是一个常规布局，用户已经形成了认知，如果需要使用也能方便找到。

二维码

如上图所示（请忽略颜色，截这张图的时候正好是年货节，颜色的变化是顺应节日的。）随着登录的状态变化，显示的信息也会有所变化。用户登录以后会显示欢迎语和昵称、等级、积分、消息等信息。除此以外，如果鼠标移到带向下小箭头处会出现下拉框，而移到“手机版”上时则显示的是二维码，省略了多余的步骤和信息，让用户直接通过二维码完成下载，简洁高效。缺点是购物车在这里有点缺少存在感，毕竟对电商来说购物车的访问率还是挺高的，包括京东、考拉在内的其他电商还会把购物车按钮放在搜索框的右侧，并显示购物车内的商品数量。那样会更直观一些。不过天猫也并非只有这一个购物车入口。在页面右侧的工具栏上有一个更显眼的，之后会说到。

1.2.LOGO+搜索

天猫头部

顶部导航栏下面是头部，左边是LOGO，中间一个大大的搜索框，便于用户直接搜索想要的内容。搜索框内放置推广文案，如果用户不输入内容直接搜索的话，会跳转到相应的页面或搜索结果。搜索框下面是推荐的关键词。天猫在这里还有1个设计亮点，就是LOGO不是一成不变的，而是根据具体节日或大促的内容来进行个性化设计，比如像上图的彩虹糖(带动效)以及下图的天猫年货节(带动效)。这样节日氛围会很浓，对页面的整体设计融入感也很好。缺点是动效幅度太大的话容易让专心购物的用户分心，也会显得比较凌乱。

天猫头部（年货节）

当页面向上滚的时候，头部这块会变成如下图所示的一个简化版停靠在页面的顶部，让用户随时知道自己在什么网站，并且方便随时进行搜索。

页面向上滚的天猫头部

2.导航

2.1.主导航和二级导航

如下图所示,红色横着的是主导航，上面放置的是阿里的各种业务。左侧的商品分类样式做了特殊化设计，与其他导航tab进行区分。商品分类下面竖条则是二级导航。是天猫所有的商品类目。直接挂在轮播图的上面，与传统的二级菜单要鼠标移到tab上才会显示的方式相比。用户不需要更多的操作就能找到自己想要看的类目。缺点是占用了轮播banner的空间，轮播图的面积比较大，是首页最吸引用户的，但是这样的设计导致轮播图的视觉中心偏右。（不过也有处理得比较好的，例如京东、1号店等，视觉上还是让轮播图居中了。）总之，这种二级导航需要和轮播图合理地组合在一起。

主导航和二级导航

下图是天猫年货节的定制版，把二级导航分割成了2块，把天猫年货节的各大会场也放在这里，并且默认打开。把用户直接引流至年货节的会场去。

天猫年货节定制版的二级导航

2.2.二级导航下的类目导航

下图是二级导航下的子目录，由于这块内容非常多，所以平时不会显示出来，只有鼠标移到某个类目上后才会出现这个浮层。浮层的左侧是较大一层的类目，右边是其相应的子类目，模块与模块之前非常清晰。热门商品用颜色标出。最右侧是品牌墙，这是针对有明确目标要看哪个品牌商品的用户的，这里往往是些热门好卖的品牌。现在有些类目的右下角还有年货节的会场入口，比如下图的化妆品类目就有，所以即便用户在浏览品类的时候也能将其引流到会场。优点是结构清晰，用了较大的空间精细排布，使用户浏览起来比较清晰明了。

类目导航

3.轮播banner

3.1.轮播图

轮播图的表现力很强，用户到了首页后很容易被这么大的图片吸引。所以很适合做一些广告推广或展示商品。这是很多电商网站都会用的重要模块。天猫充分利用了这块，每一张轮播图右侧还附带了两张小图banner。这种形式充分地利用空间来放置足够多的广告。不过缺点也很明显，就是把页面弄得很拥挤。并且由于天猫的轮播banner很大，在较小屏的设备(比如我现在的笔记本)上压迫感就会比较强。这一点上京东的处理更舒服一些，就是在轮播图的下面放置2个小banner。不过也只能放置2个固定的banner，而不能像天猫这样跟着轮播图的变化而变化。

3.2.个人信息面板

天猫的轮播图右侧，还有一条不大的半透明区域，是个人信息面板。当用户没有登录的时候，会有登录和注册的按钮，还有特权政策，吸引用户注册或登录使用天猫。登陆后会显示用户的头像、昵称，以及积分优惠等信息，推动用户消费。

优点是有助于提升用户量及促进消费。对已注册的用户来说，能掌握自己的权益和当前享有的优惠，更有购物的激情。

个人信息面板

4.右侧工具栏

天猫页面的右侧工具栏，是一个非常实用、功能强大的工具栏，内容有我的特权、购物车、我怕的资产、我关注的品牌、我的收藏等等。方便用户随时使用鼠标移动到二维码图吧上时，会出现二维码等浮层。

右侧工具栏

如果购物车内没有商品，购物车的图标是天猫红。如果购物车内有商品，图标变成白色，下面用带数字的小红点表示购物车内商品的总数，弥补了顶部导航栏上的购物车存在感太弱的缺点。

缺点是（1）二维码不会自动消失，需要点击空白处才会消失。在浏览页面时会造成一些影响。（2）这里也有头像，和个人信息面板同时出现时有些重复。用户有可能会以为是一样的东西而忽略其中一个。

优点是非常方便、高效，让用户可以不跳转页面就对自己的一些相关内容进行调整。如下图所示，如果点购物车，不会跳转到新页面，而是从页面到右侧划出一个面板，用户可以进行快速的查看和修改。其他功能如我的资产、我关注的品牌、我的收藏、历史记录、充值也有同样的交互。只有反馈需要跳转到新的页面。

右侧工具栏展开

5.商品展示布局

5.1.内容区

以下是轮播图以下的页面模块布局。

活动模块

首先是活动模块：放在轮播图的下面，这里是往下浏览时首先会看到的地方。可以将用户引流至正在举办的活动，然后产生消费。

品牌街

品牌街：左侧用大图渲染气氛或者用直播视频进行导购。右边是品牌logo墙。较多的留白看起来比较有档次。吸引追求品牌的用户在这里驻足，并进入相应的品牌旗舰店。

推荐频道

推荐频道：把各个特色频道两两分成一组，排成2行。逻辑清晰，针对性强。每个频道之间是平行关系，没有着重突出某一个，简洁直观，用户可以尽情地根据自己的偏好进行选择。

主题楼层

主题楼层：每个楼层是一个主题，左侧用大图来呼应主题，右侧是推荐的一些该主题下的店铺、专题页等。右上角的小字是该主题下的关键词，点击后回进入搜索结果页。与轮播图上细致的类目相比，推荐频道和主题楼层给用户的认知负担要少很多，只要凭着自己的偏好选择内容浏览就可以了。而不用去想某个东西应该属于哪一类之类的问题。这样的模块在其他购物类或者类目丰富的网站都有应用。天猫每2个楼层就会插一条横向的banner，这样可以避免用户浏览太多样式相同的模块而视觉疲劳或迷路。同时又可以为同类商品做广告，刺激消费。

品牌旗舰店

品牌旗舰店：这一块推荐了几个品牌店铺，每个店铺展示了三个商品。让用户直接看到商品，可以直观的做出判断。与推荐频道一样，这里的店铺之间也是平行的。不过这里太强化商品而弱化品牌了，用户很容易忽略品牌店铺的概念，所以天猫又做了一个处理，就是鼠标移动到哪个店铺，这一整个店铺的模块就会用红色描边框起来，利用了封闭性的原则强化了一下品牌与商品之间的整体感。

猜你喜欢

猜你喜欢：这一块一般情况下是看不到的，只有用户拉到了最底下时才会加载出这个模块。也就是当用户浏览了上面的内容都没有发现目标时，才会出现并向用户推荐通过大数据获得的个性化的推荐。所以这里的布局是清一色的扁平化网格布局。页面内容的结尾处有一个这样的模块，好处是充分利用用户的浏览行为，不让用户感到没有东西可看了，也可以进一步引导用户消费，适合漫无目的用户。缺点就是会分多次加载，用户如果只是因为某些原因想拉倒最底下的话就会比较困扰，有一种望不到头的感觉。

5.2.导航模式

导航条

页面滑到轮播图下面的时候，就会出现如左图所示的导航条。上面的tab对应的是主题楼层的每个主题，这个也是方便用户定位，不致于迷失在这么多相似的模块之间。并且在有明确目标是，能快速定位到那个楼层或回到页面顶部。

6.底部

这是页面的最后一个部分。往往会提供一些服务保障说明、帮助相关的说明，以及友情链接、版权信息等。这里对用户来说不是很重要的内容，只是在浏览到此处时看到，或者需要查看具体某个内容时，才会主动滑到底部查看。所以设计得结构清晰即可。天猫用了色块和分割线把结构处理得很清晰，同意组的内容之间样式也完全一致。左下角的小天猫头像是画龙点睛的地方，再次强调了品牌感。并且出现在服务保障等信息的地方，给用户一种亲切可靠的感觉。“手机天猫”的二维码也是首尾呼应，再次给用户提供一个快捷地获取移动端应用的途径。

天猫底部