##电商活动卡片式设计思考

卡片式设计的优点很多，它可以较好的对内容进行区域划分，解决了内容与内容的区块分隔，让用户在长屏幕滑动中，依旧可以很好的识别每一块内容。

本文插图

一、背景
活动设计中，我们经常会碰到复用性超高的组件。在物料的表象之下，存在一系列的基础原则。在这次女神节活动中，我们重点针对活动中的【卡片式设计原则】进行了深入思考，希望通过简化卡片层级，让活动页面更简洁。
二、活动中的卡片设计
卡片式设计最早来源于Google Material Design 。卡片式设计的优点很多，它可以较好的对内容进行区域划分，解决了内容与内容的区块分隔，让用户在长屏幕滑动中，依旧可以很好的识别每一块内容。在电商活动中，我们通常将卡片看作一个容器，用于承载一类或者一组相关度较高元素。
由于电商活动会场内容较多，一个楼层可能包含单品、会场、品牌，关键词等内容。为了让内容更具整体性，且与主题氛围呼应，我们在设计中引入了卡片式设计。
三、问题聚焦：卡片层级过多
在实际设计执行中，我们发现，不同设计同学对卡片的理解不太一样，下面选取了几个比较典型的例子进行了说明。
典型案例一：设计同学对卡片倒角理解不对称

本文插图

????图1：某个会场的单品楼层
在上图的模块中，因为对卡片层级的理解不同，导致单品模块中倒角过多，比较复杂。
部分同学认为圆角属于风格化，是视觉元素的一种，一个页面里的视觉元素应该整体统一，圆角的使用可以让图片展示更为柔和，所以在白底图边角增加了倒角。
还有部分同学认为，增加倒角的做法加强了白底图的独立性；而单品整体作为1个卡片信息，不建议在内部增加不必要的层级，卡片内部信息层级应当尽量简单。
在多次沟通中，大家对卡片的理解无法统一，沟通成本很高，最终方案也无法达成一致。
典型案例二：缺少卡片式设计指导原则

本文插图
【##电商活动卡片式设计思考】

图2：某个会场的事业部楼层
上图所示的活动中，内容层级较复杂，分层较多。因为缺少卡片式设计的指导原则，在页面输出时，出现了层层嵌套的模块。
通过以上的两个场景，我们找到了共性的问题：

不同的设计师对卡片理解不同，导致卡片运用较混乱，不统一；
多条项目线都存在卡片式设计准则不明确的问题，导致沟通成本非常高。

为了解决这两个问题，我们进行了以下思考。
四、活动卡片式设计的场景
卡片式设计在活动设计中出现的场景十分频繁，一般可以归为以下3类：
场景一：【单一内容卡片】
【单一内容卡片】一般由单个独立模块组成。在此类场景下，不会存在特别复杂的层级关系。例如我们看到的1个单品、1个店铺、1张优惠券，都属于此类场景。
下图以瀑布流单品中穿插的店铺、榜单入口为例进行了说明。

本文插图

图3：【单一内容卡片】示例
在瀑布流单品中，我们通常将1个单品、1个活动、1个榜单等作为一个独立的卡片模块，通过瀑布流的方式依次罗列。
场景二：【组合内容卡片】
【组合内容卡片】内容比【单一内容卡片】更复杂，通常是由多个独立模块组成，因为这些独立模块间内容具有一定的相关性，共同构成了一个整体，设计时需要传达这些内容的整体感，所以引入了卡片式设计。