完整指南：卡片设计入门及实用技巧解析

UI卡片是对响应设计的终极回应。无论是响应布局还是自适应布局，卡片UI设计都可以为适应做出贡献，其灵活可控的容器结构可以根据总宽度灵活调整布局结构。虽然UI卡片在加载速度和屏幕适应性上有天然的优势，但由于卡片的意识，每个部分都是独立的信息，在设计时可能会出现页面认知负荷过大的现象。

1、什么是卡片设计？

卡片是一个 UI 组件，包括某个内容的信息和操作。卡片可以包含各种元素，但都应该属于同一主题。这样做的目的是为了防止文本冗长，呈现更多的内容。即使从设计的角度来看，用户可能不熟悉卡片的概念，但他们很快就会知道如何使用它们，因为它们与实体卡片相同。

即时设计-可实时协作的专业 UI 设计工具https://js.design/community?category=search&search=%E5%8D%A1%E7%89%87%E8%AE%BE%E8%AE%A1&source=csdn&plan=smt08062

2、卡片设计流行的原因？

卡片之所以受欢迎，是因为卡片聚焦内容，强制内容适应卡片边界和卡片布局的限制。设计者喜欢根据卡片混合大量内容，而不用担心设计会变得凌乱。

卡片可以将内容转换成容易理解的小块，方便客户与之互动。通过给内容一个容器，卡片可以向用户解释内容是真实的、感性的。

直观:卡片在页面上看起来和现实世界中的卡片一样，对用户来说似乎很常见。在卡片成为移动和网络应用中的时尚元素之前，它们在现实生活中无处不在:名片、棒球卡片和纸条。卡片代表了一种有利的视觉对比，它允许我们的大脑直接将卡片与它们所代表的内容结合起来，就像现实生活中一样。

易于阅读:卡片不占太多空间，并敦促设计师优先选择内容。不同的是，每张卡片都变成了易于阅读的内容。卡片让用户更容易找到自己感兴趣的内容。

吸引人，对用户更友好：基于卡片的设计一般都很依赖于视觉效果(尤其是照片)；就信息结构而言，视觉层次会更清晰。应用照片有助于使基于卡片的设计对用户更有吸引力，而不是在卡片中排列的相同内容。

便于共享：卡片可以鼓励用户在社交平台上共享内容，因为用户可以只分享特定的内容，而不是整个页面。

3、卡片设计何时使用？

基于搜索的页面：卡片可以通过模块内容快速显示合适的内容，让用户充分了解自己的爱好。基于卡片的设计是一种非常适合显示这种内容的形式。

信息访问：当用户浏览信息时，卡片的兼容性更好。

任务管理:当过程中的单个任务可以作为卡片进行解释时，可以很容易地组织卡片以获得任务列表。使用卡片页面进行任务管理，为客户建立一个良好的仪表板层面，其中每张卡片代表一个独立的任务。

可视化分析：仪表板通常在同一页上同时显示各种内容样本。在这种情况下，卡片对比可以帮助在每个物体之间创造更明显的差异，每张卡片可以适应不同的角色。

4、卡片解构

为了支持它们所包含的内容类型，卡片的布局可以有所不同。下面的部件通常可以在各种卡片款式中找到。

富媒体：卡片可包含缩列图，以显示图片、插图、头像、Logo、标记或图形。

标题：标题文本可包含相册或文章的名称或标题。

描述：适用于文字，如文章摘要或简短描述。

动作按钮：卡片可包含用于操作的按钮。

小标题：小标题文字可包含详细介绍，例如文章的签名或标记位置。

标志：卡片可包含操作标志。

5、设计技巧

5.1使用相关主题的照片

图片是卡片设计的主角。你需要一张高档的照片来吸引用户对每张卡片的注意力。不仅仅是图像，卡片还可以包括插图、带有浅色背景框的图标或其他类型的丰富媒体，但它们需要与内容主题相关。

5.2提高视觉层次

卡片中的结构分析有助于引导客户阅读关键信息。将具体内容放在卡片的顶部，并使用排版来加强具体内容。用空缺和对比来分隔需要大量视觉分离的内容区域。

5.3限制内容长度

一张卡片应该只包含重要的信息，并给出相关的意见，以获得额外的细节，而不是完整的细节本身。当我们试图在一张卡片中添加太多内容时，卡片可能会变得非常复杂，并且会失去与卡片对比的具体联系，因为它不会像一张卡片。

5.4防止置入连接

不包括内部连接，卡片应自行连接。放置文本链接会使用户误操作。

5.5区分操作顺序

包括不同控制的卡片应该在视觉上进行比较。在下面的例子中，我通过使用轻色而不是关键的按钮风格来降低后续操作的视觉强度。

6、如何在视觉上做到更加美观？

APP 卡片并非纯粹的拟物概念，但是一般情况下，应用一致的对比和物理原理可以帮助大家了解页面，分析内容中的视觉层次。

6.1应用圆角

与现实世界中的卡片在形态上进行视觉对比。

弧线效率更高，因为它使人的眼镜容易跟随视觉动线，因为它更适合头部和眼睛的自然运动。

6.2增加轻微外框或投影

添加一个浅色的画框或者添加一个浅色的投影是一个很好的方法。影子在页面上创建了一个层次，这有助于我们区分它 UI 元素。

然而，在设计中加入黑色阴影并不像听起来那么简单。有时候设计师会加强投影效果，让原本看起来不错的设计看起来很便宜。避免使用纯黑色阴影。

6.3注意字体和留白

重要的是让每一张卡片都被看到、阅读和理解。在每一块周围增加很多空白，让用户有时间处理和重新设置视觉，有精力看完一张卡片再去下一张。

选择简单而基本的字体，因为基本的排版可以最大限度地提高可读性，并且有助于访问。

7、优秀的卡片设计案例

7.1电子商务卡片设计

商品卡片是一种非常重要的商品，可以帮助你将来的访问者转化为客户。一张优秀的产品卡片应该能够吸引人们的注意力，激发人们获得商品的冲动，鼓励人们购买，并在搜索结果中得到有效的推广。

商品的名称应该放在最显眼的地方，这样观众就会立刻明白他是来对地方的。一张好的图片可以告诉顾客比千言万语好，所以你需要一张高质量的产品图片来设计完美的产品卡片。假如产品有特价，不但要在价格栏上注明促销价格，还要注明常规价格，以及顾客可以节省多少钱。

7.2用户中心卡片设计

介绍卡片已经成为网站中的应用或功能模板。随着个人ip比以往任何时候都更加关键，卡片设计也可以在这里发挥重要作用。就像每张卡片一样，环境变量卡片也是一张卡片 UI 组件，它包含了对它所代表的内容非常重要的信息。你必须向别人推销你，以实现你的目标。

会员卡片设计素材-会员卡片设计模板-即时设计

根据最初的定义和观察卡片，我们可以更好地了解这种跨行业的设计模式。这也让我们推断了客户希望在这些卡片上采取什么行动。卡片在提供许多不同类型内容概述的环境中特别有效，而不是简单地作为内容列表的替代品。希望今天的内容分享对你有所帮助~