上一篇文章我介绍了B2C综合类电商App首页设计，得到了非常多的关注。这篇介绍垂直类电商的首页设计。
上篇回顾：《超全面！可能是最详细的电商首页设计总结》
那么首先让我们了解下什么是垂直类的电商。
B2C垂直电商细分
淘宝的商品品类（SKU）是以数十亿计的，天猫和京东也应该在数千万的级别。海量的商品品类、鱼目混杂的商家以及参差不齐的商品为消费者的购物带来了极大的选购时间成本。消费者在这样的购物环境中找到适合自己的商品有时并不比大海捞针容易多少，而其中假冒伪劣商品的大量存在更是增加了购物的难度。
相对于B2C综合商城的广而博，还有一种小而美电商形态叫做B2C垂直电商，就是只专注售卖一个或者多个相关品类的电商。鉴定一个电商是否垂直，就是能否找到一个共同属性的用户群体。比如女性，文艺青年等。垂直电商的价值就在于其站在独立第三方的角度，从海量的商品中为消费者做了一次精选，平台需要为这些商品做信用背书，所以这些商品基产品质量也相对有保证，能通过口碑逐渐地在消费者中间建立信任感。
模式优缺点：
垂直类电商优点是：面对的客户群体有一致的属性。有了这个大的前提，那么很容易知道客户在哪里，他们喜欢和关注什么，可以有针对性的精准营销。而且客户群体的集中和专一，会让其更有归属感。
垂直类电商缺点是：商品品类单一，用户重复购买率低。就是用户想买其他商品你这里没有的卖，那么用户可能选择综合类B2C电商平台。所以垂直类电商在发展到一定程度后，业绩增长会遇到天花板，于是就开始扩充品类，走大而全的道路。又会遭到大的B2C商城的竞争。不管是从商品还是价格的角度上来说，淘宝、天猫以及京东这些综合类的B2C电商，都存在大量的商品可以替代垂直类电商。
常见的垂直电商App
B2C垂直里面，一些应用的商品品类比较多。比如母婴电商这个大的垂直分类，里面有服饰、鞋子、奶粉等多个小的品类。这些应用相当于垂直电商里的综合类。
综合类的垂直电商
因为品类比较多，所以页面承载的信息密度比较高。所以页面设计采用类似综合B2C商城的设计。
△ ?贝贝和聚美优品首页
垂直电商里还有一些垂直细分类。例如各种鞋子和袜子、奢侈品类、食品类、箱包、水果类、钻戒和珠宝类、酒、养生保健品类、礼品玩具类、鲜花商城、居家类、汽车用品、药店等。
这些细分类随着时间有的逐渐消逝，如卖鞋子的乐淘。而留下来各种时尚潮品的综合推荐类、家居类居多。这些垂直细分的商品品类不是很多，所以页面设计大多采用大的留白简约型设计。本节文章重点去分析推荐一些垂直细分类的电商。
垂直电商App的首页结构
垂直电商的用户，可能购物的目的性不是很明确，一般都会以逛为主，通过逛发现自己喜欢的一些商品完成购买行为。所以首页会放置各种形式的商品推荐。推荐形式一般有
- 品类或者品牌中热门单品的推荐。
- 以专题形式的某一类商品的集中推荐，以商品推荐为主。
- 如果有达人推荐的子频道，会在首页有露出，通过一些意见领袖的推荐，
- 知识库，我的理解还是一种专题的合集，比如什么场合适合穿什么衣服，什么季节适合吃什么，如何选择合适的锅。当然这些知识里面少不了各种商品的推荐。
- 其他一些各种小频道栏目的露出。
因为综合类电商平台模块多，每个模块都可能从属某个部门，需要平衡各种部门事业部的利益。设计师设计的页面体现的是各种协调的意志。而垂直类电商的模块相比就少的多，设计师有更多自由去考虑各种模块的设计问题。知道了垂直类电商的首页的内容组成，我们开始看垂直类电商的具体模块组成。
模块1：标题栏
每个应用都有一个标题栏，这成了App的标准设计了。标题栏上一般会有三个重要的元素组成：logo图形或者文字、搜索页的入口、购物车的图标。
视觉设计1：品牌logo
标题栏放置的Logo文字会进行字体设计，垂直类电商一般会非常重视品牌的露出，所以这里不会使用系统默认的字体，而是贴图使用设计好的Logo文字或者Logo图形。
△ ?造作标题栏使用了logo图形，其他使用了字体设计的logo
视觉设计2：搜索入口
大多数垂直类电商，更希望于用户浏览推荐内容，购买推荐活动商品。而不是直接通过搜索去找到相应商品，去完成购买行为。所以垂直类电商App会有意识的弱化商品搜索。不同于B2C综合类电商导航栏上醒目的搜索栏，美食电商Enjoy和兴趣导购life首页，直接在导航栏右侧放置了一个搜索图标。
△ ?美食电商Enjoy和兴趣导购life首页
如果你的商品品类并不是很多，那么用户通过关键词搜索很难搜到东西。所以一些应用干脆把搜索和商品分类页进行结合设计。例如造作点击搜索，进入的搜索页就是商品的分类页。
△ ?造作的首页和分类页
有的垂直类电商品类并不多，所以干脆直接去掉了搜索入口。在2016年的唯品会的App甚至极端的去掉了搜索功能，希望用户在页面可以停留更长的时间。这种想法显然有点一厢情愿，因为唯品会的品类可不少，这样的设计遭到了很多用户的反对。在最新版本的唯品会又悄悄的把搜索功能加了回来。所以留不留搜索入口还是要看你的品类是否足够丰富。
模块2：分类模块
由于垂直电商的品类不是那么多。子频道也有限，所以不需要和综合类电商一样，用图标的形式作为模块快速入口，而是直接设计为Tab标签栏的设计形式，放置在标题栏下面，方便用户快速浏览切换。
视觉设计1：底部标签栏
Tab标签栏如果类别比较多的时候采用横滑的设计形式。如果应用的频道比较少，例如造作应用，甚至可以直接把标签栏设计在底部，相当于整个底部标签栏的作用，当然底部标签栏重要的“我的”模块，入口放置在顶部标题栏上。
△ ?造作首页底部标签栏
视觉设计2：滑动隐藏标签栏
一些垂直类电商的首页设计形式单一，完全由banner图构成。用户向上滑动页面，标题栏会自动隐藏，让用户有更大的页面显示面积。例如Life应用，至于向上滑动多少像素开始隐藏标题栏，你需要给程序员定义出高度。
△ ?Life 滑动隐藏标签栏
良仓的首页并没有采用这种滑动隐藏标题栏的设计，我猜测因为良仓的底部栏目太多，没有给购物车留下一个单独的位置。所以可能为了强调购物车的全局显示，所以固定栏顶部标签栏。
当然我认为这种想法可能也说不通，因为首页是不太可能促成交易行为，更多是引流的作用。我认为良仓底部的分享是一个很鸡肋的功能，本质就是一些美图商品推荐而已，如果把这个频道降级放进其他位置，把这个位置留给购物车。我估计设计师就可以舒心的使用隐藏标题栏设计。
△ ?良仓固定的标签栏
模块3：横幅广告
由于垂直类电商的信息密度低，所以有足够大的空间去放置Banner。Banner的常见比例有16:9和1:1两种。也就是750*422和750*750。一般Banner图片设计还是以750宽度的iphone6/7为基准。至于更大尺寸的iphone6/7plus还是使用这个图片，因为从节省带宽的角度完全没必要那么大的尺寸。2X的Banner图给3X用也是足够的。
那么图片的比例什么时候使用16:9，什么时候使用1:1了？还是从内容的角度进行分析。
视觉设计1：16:9的Banner图
如果你的应用展示的Banner图是类似专题性质的。图片只是一个参考作用，用户是不能从大图看到更多商品信息，需要更多文字说明来辅助阅读，图片比例选择使用16:9。例如旅游的产品图片就适合选用16:9。比如首页你要做一个欧洲的路线，你只放巴黎的埃菲尔铁塔的图片，那么提供信息量是远远不够的，必须加上德法意深度10日游的文字说明。例如造作展示的都是家居套装专题，而不是具体某个家居的单品。所以使用16:9 Banner图片比例。
△ ?造作首页的16:9 Banner图
视觉设计2：1:1的Banner图
如果你的应用展示的Banner图是类似商品性质的。图片具有重要的参考作用，用户通过观看精美的图片，不用太注重文字内容的，就可以吸引点击。图片比例选择使用4:3。例如最美有物的Banner图是以说明单个商品为主，不需要太多文字，用户也能看的明白，简单的说有图片