电商活动卡片式设计思考
最后更新：2020-04-17 09:50:59 手机定位技术交流文章
卡片设计有许多优点。它可以更好地将内容分成区域，解决内容与内容块分离的问题，并使用户即使在长屏幕上滑动也能很好地识别每一个内容。
1。背景
在活动设计中，我们经常会遇到具有极高可重用性的组件。在物质的表象下，有一系列的基本原理。在此次女神节活动中，我们将重点放在活动中的“卡片设计原则”上，希望能够简化卡片层次，使活动页面更加简洁。
二。活动中的卡片设计
卡片设计起源于谷歌材料设计。卡片设计有许多优点。它可以更好地将内容分成区域，解决内容与内容块分离的问题，并使用户即使在长屏幕上滑动也能很好地识别每一个内容。在电子商务活动中，我们通常把卡片看作是一个容器，用来承载一种或一组高度相关的元素。
由于电子商务活动场所中的大量内容，一个楼层可能包含单个项目、场所、品牌、关键词等。为了使内容更加完整，更能体现主题氛围，我们在设计中引入了卡片设计。
第三，问题的焦点:牌的层次太多
在实际的设计实施中，我们发现不同的设计学生对卡片有不同的理解。以下是一些典型的例子。
典型案例1:设计专业的学生对卡片倒角的理解不对称
图1:场馆的单层
在上图所示的模块中，由于对卡片层次的理解不同，单个产品模块的倒角太多，更加复杂。
一些学生认为圆角是一种风格化的视觉元素。页面中的视觉元素应该统一为一个整体。圆角的使用可以使图片显示更柔和，因此在白色底部图形的角上添加了倒角。
其他一些学生认为添加倒角增强了白色背景图的独立性。但是，单个项目作为一个整体是一个卡片信息。不建议在卡内添加不必要的级别。卡内的信息级别应该尽可能简单。
在许多通信中，对卡的理解无法统一，通信成本很高，最终的计划无法达成。
典型案例2:缺乏卡片设计指导原则
图2:会议厅的分区楼层
在上图所示的活动中，内容级别更复杂，级别也更多。由于缺乏卡式设计的指导原则，当页面输出时，有几层嵌套模块。
通过以上两个场景，我们发现了常见的问题:
不同的设计师对卡片有不同的理解，导致卡片应用的混乱和不统一。许多项目线路存在卡设计标准不明确的问题，导致通信成本非常高。为了解决这两个问题，我们有以下想法。
四.移动卡片设计场景
活动设计中卡片设计的场景非常频繁，一般可分为以下三类:
场景1:[单一内容卡]
[单一内容卡]通常由单个独立模块组成。在这种情况下，不会有特别复杂的等级关系。例如，我们看到一个单一的项目，一个商店和一张优惠券，都属于这种场景。
下图展示了散布着瀑布和列表条目的商店。
图3:单一内容卡示例
在瀑布中，我们通常只拿一件物品、一项活动、一份清单等。作为一个独立的卡模块，并通过瀑布逐一列出。
场景2:[组合内容卡]
[组合内容卡]的内容比[单一内容卡]更复杂，后者通常由多个独立模块组成。由于这些独立模块的内容有一定的相关性，并共同构成一个整体，设计需要传达这些内容的整体感觉，所以引入了卡片设计。
下图举例说明了分部楼层:
图4:“组合内容卡”示例
部门的楼层通常被划分为业务维度，相关内容被合并。图片中的时尚是一个分区地板，包含会场、品牌、单一产品和其他元素，共同构成一个分区模块。在这种情况下，我们通常将这些模块包装在卡片容器中，以确保部门相关信息的“简单性”和“独立性”。
场景3:单一内容卡和组合内容卡相互嵌套
在嵌套场景中，内容层更复杂，通常有多个小卡片和一个大卡片。这也是最常见的大规模促销方式。如果处理不好，很容易出现“多层次嵌套和复杂层次”。
下图举例说明了峰值下限输出。
(此示例具有复杂的信息级别和许多卡元素，这不是最佳示例；优化思想将在后面介绍)
图5:嵌套[单一内容卡]和[组合内容卡]的示例
其中，每一秒必杀商品都以“单一内容卡”的形式存在。当所有秒杀商品组合在一起并添加标签时，需要一个更大的容器来包装单个产品和标签。这是“组合内容卡”。
五、活动卡的基本设计原则
基于卡设计的常见应用场景，总结了设计中应遵循的原则。
内容层次:保持简洁，减少嵌套
在“单一内容卡”或“组合内容卡”的情况下，信息一般不太复杂，保持信息简洁也不是很困难。然而，当[单一内容卡]和[组合内容卡]嵌套时，通常会有许多问题。这也是我们之前项目中最有问题的场景之一。我们建议嵌套层次必须尽可能低，否则整个页面将非常复杂。
下面的顶针地板例子说明了如何简化它。
图6:简化“秒杀地板”后
在上图中，第二个kill中的单个项目作为单个内容卡存在，而整个楼层作为组合内容卡存在。通过“保留必要的”整体容器的大卡片“+”独立内容的小卡片“和移除其它层次的卡片”，保证了多达两个层次的嵌套关系，减少了卡片倒角的使用，最终达到简化层次的目的。
视觉层面:元素的统一和装饰的简约
视觉在卡片设计中，会用到许多装饰和元素，如卡片的内容形式、卡片内容的颜色、投影效果等。它们一起形成卡的最终显示样式。卡片的圆角、卡片中字体的厚度和字体大小以及卡片中的间距是基本的参考值，它们对整个页面样式有很大的影响。
我们最终期望的是卡片和卡片中的元素形成一个合理的比例规则，并在整个页面中保持统一。有了这个目标，我们就能更好地指导我们未来的工作。圆角的尺寸差异呈现出不同的视觉感受和风格差异。在实际应用过程中，各种尺寸的模块也会出现。设计时，有必要考虑产品风格或气质是否适合大圆角或小圆角。在间距上，用大模块中更多的分隔线来逐个替换小模块，以达到减少层次的目的。
图7:用分隔线简化标高
当视觉被实现时，它通常喜欢添加许多装饰元素。例如，通过设置正面和背面颜色，卡片的投影使内容和背景具有空的视觉效果。但是，在促销活动中，最重要的是要保证卡片内容的清晰。活动信息本身已经非常丰富。如果你在卡片上加上空的感觉，整个页面在视觉上会变得非常臃肿。因此，我们做了一个统一的减法，删除了不必要的装饰内容。
1图8:简化不必要的装饰元素
六.项目效果
在此次女神节项目中，我们将上述卡式设计原则应用于地面，引导了女神节项目的实际产出，效果明显。下图选择列表中的楼层作为示例，您可以感觉到调整前后的楼层比较。
1图9:女神节分区楼层简化前后对比
七、总结与思考
卡片设计在活动中的应用只是一个小小的缩影。在设计中，我们经常会遇到不同立场和观点的问题。一个学生可能认为模式A更好，但另一个学生认为模式B更好。
分歧总是不可避免的。如果你试图从感官层面进行交流，判断过程将非常主观，缺乏测量标准，最终的结论将缺乏支持。
我们建议，如果存在设计差异，我们应该尽可能依靠设计标准来建立一个判断标准，使双方能够达成协议，从根本上解决问题。这不仅可以保证设计决策的合理性，还可以降低类似问题的通信成本，提高输出质量和协作效率。
这也是一些基于卡片设计的思考，希望能给你一些启发。
参考:
https://www.uisdc.com/tencent-card-design-tips
http://material . io/design/shape/shape-hierarchy . html # developing-hierarchy
https://www.uisdc.com/interface-layout-style-analysis
https://www.uisdc.com/best-practices-designing-cards
https://www.uisdc.com/best-practices-for-cards
作者:余婷，吴；公开号码:京东设计中心京东设计中心(jdc)(身份证:京东设计)
资料来源:https://mp.weixin.qq.com/s/o00E8haH26OrBPa_KFETdQ
这篇文章由@ JD.com设计中心的JDC授权，由每位产品经理发表。未经允许禁止复制。
主题图来自Unsplash，基于CC0协议。
本文由 在线网速测试 整理编辑，转载请注明出处。
