写这篇文章的目的就是总结一下自己的设计方法和工作中遇到的问题，今天我们来聊一聊卡片式设计，如果有和我不同的意见以及文章中没有提到的点，欢迎大家积极交流，废话不多说，让我们正式开始。以下是目录。
先从我们身边的能联想到的卡片说起，例如贺卡、明信片、名片等都是卡片。在14年发布的Material Design中，类似卡片式设计的理念就已经被提及了，其理念也是基于传统的纸张媒介。
“与真正的纸张不同，我们的数字材质可以智能地扩大和变形。材质具有实体的表面和边缘。接缝和阴影表明组件的含义。”
互联网中的卡片式设计是一种将信息和功能封装在独立、矩形容器中的用户界面设计方法。这些容器通常具有清晰的边界，类似前文提到身边中的名片。每张卡片通常包含一组相关的信息或功能，从而形成一个独立的内容单元，就像我们收到的名片和贺卡。
通过观察使用的APP对卡片进行分类，列表卡片是其中一种，基础的列表卡片可以由标题、正文、辅助文案、按钮和图片等组成。我们平常使用的大部分APP的卡片组件都是由这些基础控件组成的，大致上可以分为横向和纵向排布内容。
这种简单排布的设计可以在一些排行榜单，热搜模块中看到。还可以通过横向与纵向组合排列提供更多的交互，例如网易云的音乐推荐和米游社中的同人榜单。
平常接触到的瀑布流以及信息流，将其元素拆解开来，本质也是多个有序的列表卡片组合在一起的。瀑布流主要正针对图片较多、或以以图片内容为主设计，它最大的优点是无需过于在意图片的高度，可以很好的还原图片全貌，也符合我们双眼的浏览动线。例如小红书。
而信息流更需要按行来阅读，加以图片辅助，符合大多数用户的阅读习惯，同时可以加入更多的交互元素，例如转赞评。在运营层面，信息流便于插入新的样式的内容或广告，不会打乱整体布局。比较常用的例如微博。
而非列表式卡片比较突出的一个特点，在内容上排列不像列表卡片那么有序，往往会有更多元素参与进来，它在有限空间内能展示更多样化的信息，允许更自由的排列和组合，可以打破传统网格的限制。在设计上会更加重视视觉层面的塑造，更多会出现在运营设计中，例如活动、推广、弹窗提醒。通常会包含更大的按钮、图标、富有吸引力图片等。
从视觉层面来讲，在卡片式的设计中，卡片往往会附带圆角。原因一是趋于移动设备外观方向的圆角，这样做可以使用户在使用APP的过程中更有沉浸感。二是同时可以将信息分割成易于理解的小块。三是在同样大小数量的模块中，你会发现一眼看过去，带圆角的可以更容易数清楚有多少个数量，确定性会更强。同时，你的视线也会更加倾向于聚焦某个卡片模块内的内容。
从业务层面讲，我们在接到一个需求时，大致都会按
要实现什么功能→需要哪些字段→元素排列与交互设计→最终输出
这个路径来的。你会发现在排列组合的阶段，所做的自然而然就形成一个功能模块了，而将这个模块与其他模块区分的一个非常好用的手段就是卡片式。不同的卡片组合起来可以实现非常丰富的页面。
卡片式设计还可以轻松添加、移除或重新排序内容，而不影响整体布局，广告可以自然地融入内容卡片中，不影响用户体验。每个卡片还可以作为独立单元进行数据追踪，精确分析用户行为，用来优化内容策略。
保持卡片的视觉风格、交互方式和信息结构的一致性。不要用奇奇怪怪的圆角，使用太大的圆角只会让你的设计看起来像飞机稿，同时也会加重用户的视觉疲劳。同一个页面内的圆角、描边、阴影和间距大部分情况下要遵循设计规范。
适合卡片式设计的内容：独立的、自成一体的信息单元、图文混合的内容、需要快速比较或选择的项目。比如仪表盘、瀑布流等；
不适合卡片式设计的内容：长文本阅读、需要连续性或上下文的信息、高度结构化的数据，例如表格、会话列表、新闻资讯等。
还有一点就是遵循行业共通的规则，比如社交软件的联系人和会话页，几乎都是用的列表式设计，不要设计成卡片，这样只会增加用户理解成本，造成劝退。
卡片式设计不可避免地会占用一些空间，因此我们可以合理利用横向空间进行拓展，丰富交互内容的同时使空间利用率更高，例如拼多多首页的金刚区和微信读书的首页推荐区域，都可以通过向右滑动来获取更多的信息。
一般来说判断一个卡片内的内容是否可以再用嵌套卡片的方法是：1.彼此之间的大小占比是否一致；2.各部分内容具有相似的重要性；3.信息结构相对平级；
如果内容占比大小不一样，结构相对来说有一些差异，就不太适合设计成嵌套卡片了。不当使用嵌套卡片可能会导致层级过多，信息密度过高，导致用户感到压力，难以快速理解内容，从而降低内容的可读性。
选择是否使用卡片式设计应该是一个深思熟虑的决定，基于对需求、功能、用户和产品特性的全面分析。卡片式设计不是万能的解决方案，而是众多设计选项中的一种。在某些情况下，它可能是最佳选择；在其他情况下，可能需要不同的方法或混合策略。
最重要的是，设计应该服务于内容和用户需求，而不是相反。好的设计应该是几乎不被注意的，它应该让用户能够轻松、直观地完成他们的任务，而不会感到困惑或受阻。因此，在决定是否采用卡片式设计时，始终将用户体验放在首位，并准备根据反馈和数据进行调整和优化。
以上就是今天要分享的内容~下篇再见~最后附上搜集的一些卡片素材~
