网页卡片设计 第1篇
借助评论功能，我们经常看到星级评分形式（1 到 5 星）是最受欢迎的。根据产品和服务的质量，用户会对它们进行 1 到 5 星的评分。这种评价方法非常适合用来评价产品或服务的水平。许多电子商务网站、电影评论和房间出租都在他们的系统中使用这个评级。
除此之外，我们还应该应该设计适合每种评估类型的卡片。在评论卡设计中，我们会看到很多不同的类型：汇总所有评论并计算平均星数，或者显示每个用户的评论，包括评分或喜欢不喜欢的星数，并记录有关他们对产品或服务的体验的信息。
reviews card示例
▍Dashboards card-仪表板卡
仪表板有助于将重要信息快速传达给系统。仪表板卡的主要目的是呈现当前数据和资源并显示它们的状态，帮助管理员快速主动地在他们的系统上工作。对于每个重要的信息项，都会有一张卡片来描述。根据我们要描述的信息，选择最优化的图表设计。在这里，柱形图和折线图可能是最常用的，此外，我们还可以使用饼图。
仪表板卡的常用组件包括信息项名称、当前数据、显示当前波动率的图表、百分比变化。同时，我们还可以使用视觉层次和颜色来帮助用户轻松区分。
dashboard card小样
了解如何创建好的卡片UI设计意味着理解如何为我们的用户创建直观的浏览体验。 简而言之，卡片UI设计是其中一项重要技能，一旦掌握，我们就可以解决各种UI设计问题。
这次的卡片UI设计就介绍到这里啦，我们也将持续为大家带来更多的设计干货分享~
网页卡片设计 第2篇
博客类文章中的卡片指的是在博客页面上显示用户帖子的组件。它包括创建日期和时间、标题、内容、插图、文章类型等许多组成部分。而要创建一个漂亮的博客卡片，我们需要依赖许多因素，例如：是否布局清晰、易于理解、合理划分成分。
blog post card示例
blog post card
用户可以通过博客帖子卡片看到一些常见的组件，如媒体、主标题、简短描述和 CTA（号召性用语）。此外，用户还可以根据需要自定义设计常用组件，例如将“阅读更多”按钮更改为“保存帖子”或添加更多“分享”、“喜欢”类的按钮。
网页卡片设计 第3篇
国外的电商App，尤其是品牌自己的App，总是会做得非常极简，一个标题一个价格一张图片，几乎做到了商品卡片最简洁的状态，这是品牌气质决定的，也是产品定位决定的。所以国内走出海路线的App大多也会是这个风格，比如Shein。
马蜂窝/飞猪
举这两个例子并不是因为两者的组件设计得有多精妙，而是因为它们有着另一种不同的商品，以及所呈现出来的不同的组件——酒店。
我在这里想要说明的是，不同的商品类型可能也会有其特有的字段类型，尤其是服务型商品，不同的服务所呈现出来的组件会有很大不同。
这里收集了一些商品卡片的线上案例，也可以作为设计时的参考：
商品卡片的组件，今天就介绍到这里了。
新一期B端课程开课了，课程和作品集输出方式再次升级，有提升需要的同学快来！
网页卡片设计 第4篇
列表布局通常也会保持所有图片尺寸一致，但文本区域需不需要与图片等高，得看具体项目中商品需要露出的信息多寡，像京东这种信息非常多的，文本区域就可以超出图片的高度范围。
而如果信息量中等，那么等高是一种比较好的选择。
但如果信息比较少，强行把某一字段与图片底对齐的做法会导致组件内的间距比组件间的更大，从而影响亲密性识别。
这时候可以在两个商品之间加分割线。
主要有三种样式，我称之为有全包、半包和开放式。