垂直类电商，首页需要放置各种专题推荐，来导购各种商品。各种编辑精选，达人推荐，热卖商品。对于用户来说本质就是推荐商品。所以用户并不在乎你的内部各种叫法分类。那么一些电商直接打破了那种综合B2C电商的豆腐块做法。而是用了卡片化设计。各种推荐内容就是一个个卡片设计，这种设计的优点就是足够精简，看起来有格调感。缺点就是信息密度很低，容纳不了足够多的信息。

　　视觉设计1：横向卡片

　　想去应用采用了横向大卡片的设计。启动画面推荐的商品，通过一个动画切换直接显示在了首页的默认第一个卡片。通过这种强调的手法，让用户足够聚焦。这个横向卡片有一个缺点就是可容纳信息量不能太大，所以只适合做单一类型的内容卡片。如果试图在卡片上加上各种复杂的模块内容。一旦卡片过多，用户在横向滑动卡片的时候，容易失去位置感。我在哪个模块，我刚才看的模块在哪里，用户容易产生困惑，这是一个鱼与熊掌不可兼得的问题。

　　△ 想去的启动页和首页卡片化设计

　　视觉设计2：纵向卡片

　　另外一种大卡片设计就是纵向卡片，最美有物的首页卡片是纵向滑动的。同横向滑动相比，滑动的易用性略好于横向滑动，因为用户也更习惯于上下滑动。纵向滑动的信息承载度更低于横向滑动，因为需要页面需要留出足够的区域，去放置更多前后卡片，去营造卡片的上下立体感。这样的立体设计可以给予用户更好的位置感。因为设计可用区域小，所以更多通过精心标题设计去吸引用户点击。

　　△ 最美有物的首页卡片化设计

　　模块5：楼层Banner

　　之前我们说过垂直细分类的频道分类可能没有那么多，所以不需要像B2C综合类电商那么复杂的设计形式。可能直接以单一的专题Banner形式展现，从上到下都是Banner形式的楼层。

　　视觉设计1：图片的比例

　　因为Banner设计的形式比较单一，采用图片+文字的视觉样式。每个楼层就是一个小模块，那么模块与模块之间的如何通过视觉手段进行区分了?Life应用采用了1+N的设计形式。设计样式上，Life上半部分大Banner加半透明黑底，下半部分用白色背景，有一个白色上三角，这样很清晰让用户明白，下半部分的商品是从属于上半部分的专题。

　　△ Life的楼层Banner

　　Life上半部分Banner采用了750*400PX的分辨率， 与16:9相比扣除了22px，没有采用16:9的原因是，是因为上半部分与下半部分之前有30px的留白，为了不让整个Banner太高浪费面积，所以取整选了400PX高度。

　　下半部分Banner采用了176*176PX(1:1)的小图。这样图片比例符合之前分析的专题图适合16:9，商品图适合用1:1。这样的大小比例看起来可以让版块之前区分的很清楚。当然如果下半部分图片一定要使用小图，否则看起来层次就混乱，。例如男衣邦的首页，上图和下图的比例看起来非常的接近。模块层次区分的就不是非常好。

　　△ 男衣邦的楼层Banner

　　视觉设计2：视觉样式

　　同一个界面反复排布出现Banner，所以设计形式感要统一。Life采用的是图标+标题+栏目上下排版形式。这样的设计好处是每个模块很清晰，且用户可以很清晰的对应分类各种子频道。所以设计样式不是随意的选择，单纯的看视觉美学样式。而是需要有效的对产品运营的需求进行支撑。

　　△ Life首页楼层banner与分类页

　　模块6：底部导航栏

　　底部导航一般分为4到5个模块。以图标+文字的设计形式进行展示，电商最常见的底部导航栏设置是首页，分类，购物车，社区，我的。

　　商品分类