视觉设计2 1:1的Banner图如果你的应用展示的Banner图是类似商品性质的。图片具有重要的参考作用，用户通过观看精美的图片，不用太注重文字内容的，就可以吸引点击。图片比例选择使用4:3。例如最美有物的Banner图是以说明单个商品为主(图1-11)，不需要太多文字，用户也能看的明白，简单的说有图片就够了，所以图片比例选择4:3。

图1-11 最美有物的1:1 Banner图

　　模块4：卡片化内容推荐

　　垂直类电商，首页需要放置各种专题推荐，来导购各种商品。各种编辑精选，达人推荐，热卖商品。对于用户来说本质就是推荐商品。所以用户并不在乎你的内部各种叫法分类。那么一些电商直接打破了那种综合B2C电商的豆腐块做法。而是用了卡片化设计。各种推荐内容就是一个个卡片设计，这种设计的优点就是足够精简，看起来有格调感。缺点就是信息密度很低，容纳不了足够多的信息。 视觉设计1 横向卡片想去应用采用了横向大卡片的设计。启动画面推荐的商品(图1-12)，通过一个动画切换直接显示在了首页的默认第一个卡片。通过这种强调的手法，让用户足够聚焦。这个横向卡片有一个缺点就是可容纳信息量不能太大，所以只适合做单一类型的内容卡片。如果试图在卡片上加上各种复杂的模块内容。一旦卡片过多，用户在横向滑动卡片的时候，容易失去位置感。我在哪个模块，我刚才看的模块在哪里，用户容易产生困惑，这是一个鱼与熊掌不可兼得的问题。

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

图1-13 最美有物的首页卡片化设计

　　模块5：楼层Banner

　　之前我们说过垂直细分类的频道分类可能没有那么多，所以不需要像B2C综合类电商那么复杂的设计形式。可能直接以单一的专题Banner形式展现，从上到下都是Banner形式的楼层。视觉设计1图片的比例因为Banner设计的形式比较单一，采用图片+文字的视觉样式。每个楼层就是一个小模块，那么模块与模块之间的如何通过视觉手段进行区分了?Life应用采用了1+N的设计形式(图1-14)。设计样式上，Life上半部分大Banner加半透明黑底，下半部分用白色背景，有一个白色上三角，这样很清晰让用户明白，下半部分的商品是从属于上半部分的专题。

图1-14 Life的楼层Banner

　　Life上半部分Banner采用了750*400PX的分辨率， 与16:9相比扣除了22px，没有采用16:9的原因是，是因为上半部分与下半部分之前有30px的留白，为了不让整个Banner太高浪费面积，所以取整选了400PX高度。下半部分Banner采用了176*176PX(1:1)的小图。这样图片比例符合之前分析的专题图适合16:9，商品图适合用1:1。这样的大小比例看起来可以让版块之前区分的很清楚。当然如果下半部分图片一定要使用小图，否则看起来层次就混乱，。例如男衣邦的首页(图1-15)，上图和下图的比例看起来非常的接近。模块层次区分的就不是非常好。