【Day 22】F1 Alien-分析波奇网首页布局

波奇网是专门针对宠物为对象的一个互联网平台 涉及的宠物包括狗 猫 小宠 水族 爬行动物 业务也比较广泛 有自己的商城 还涉及到宠物服务等 今天主要从它的首页布局来分析

一、分类指引

下图是波奇网官网首页 顶端的导航栏已将分类明确 一共5类 波奇网 波奇商城 波奇服务 波奇论坛 宠物百科 在banner图右侧的位置再一次将模块分类导航明示 这一次放在更显眼的地方 并且在每一个栏目下面有一句文案描述 是顶端导航栏的补充版 对每一个模块有一个简单的介绍 其次 顶端导航栏容易被忽略 而banner右侧的指引 再次给用户提供便利

图片来自波奇网首页

二、合理利用空间

搜索栏左侧是波奇网的logo 这个部分是固定的 不管在那个分支页面 点击波奇网logo就能自动跳转到主页 这也是大部分网站都具有的一个功能 下面有一句话文案“波奇全面关爱宠物生活！” “全面”二字涵盖的范围很广  也体现波奇网内容丰富 “宠物生活”对象也非常明确 我们是做宠物生活的网站 不是美妆 食品网站

图片来自波奇网首页

搜索栏右侧是波奇宠物APP的活动 “首次安装并下单满39元送39元” 将PC端的用户引流到手机APP端 毕竟用手机比用电脑来说更方便 其次也可以通过这种活动的方式引导用户下载使用APP 这个部分的内容应该是可以更换的 也就是说 有新活动的时候 这个部分就可以被替换掉 

这两部分都充分利用了搜索栏附近的空白位置 一方面不至于看上去太空 另外也可以宣传自己的一些活动

三、导航栏清晰

搜索栏下方的导航 是对宠物的一个分类 一共有5类 狗狗 猫咪 小宠 水族 爬行 而后面紧跟着 波奇服务和波奇商城 为什么在这里又再次强调这两个分类 我想可能是因为服务和商城这两个部分需要用户消费 毕竟作为电商平台还是需要引导用户消费的 所以尽可能多的露出 加深用户对其的印象

在每种宠物分类的下拉栏里 各个模块也非常清晰 XX商城 XX论坛 XX服务 XX百科 并且大标题用彩色 字体放大作为区分 右侧统一为推荐商品 比如下图是“佩玛思特进口犬粮”

图片来自波奇网首页

以狗狗分栏为例  每一个板块划分的也非常清晰 icon+宠物名称 构成分类的大标题 广告位+XX用品+XX服务+XX论坛+XX百科 构成了板块内容 并且每一个分类的标题字体都加大并有颜色 这样可以更好的区分 而用品和服务是付费项目 在位置的选取上 是靠前的 并且底色用的是白色 而论坛和百科两类 属于纯内容的部分 位置相对来说位于后面 并且 底色用了浅灰色 用于跟上半部分区分

图片来自波奇网首页

---

小结

要说波奇网涉及的内容也很广泛 但是从他们的首页的布局来说 丝毫没有觉得杂乱无章 相反非常清晰 无论是网页上端还是中部 每一个模块在任何位置都有直接的对应 比如 上面分类是几个方面 对应到宠物的分类中 也是同样的分类 并且位置也是统一的 这样对于用户来说 思考的时间就会变少 节省了不必要的时间 

整个首页看起来 简洁干净 虽然也会用彩色的icon或图片 但跟整体风格和色系都比较搭配 所以可以说活泼但是不乱

不过 首页的颜色 跟淘宝的橙色非常相似 刚进入的时候还以为进错了 其实波奇网完全可以根据自身的定位和风格选取一个更贴合自身品牌的颜色 不一定要用橙色哦

图片来自波奇网首页