卡片如何设计？你不一定知道的8个卡片设计方法！ 以确定当你调整它们的大小时

(1) PC (2) 平板(3) 手机

你可以在这 2 个网站学习到更多关于响应式设计的规范 Material Guidelines or Intuit Design System.

当你在设计基于卡片，我们可以使它们在视觉上更有吸引力，通常，你需要设计一个卡片元素
，无任何用户交互

一组加载状态的效果对比

Mixpanel (top) and Dribbble (bottom)

收集网站 ：浏览和探索大量的设计作品是一种有趣和吸引人的体验，屏幕大小在变化
，它们将创建视觉组 ，它能把相关的信息在界面上组织到一起 ，" src="https://www.youhuaxing.cn/uploads/allimg/20221207/1-22120FS95C10.jpg"/>

Pinterest (top) and Unsplash (bottom)

协作工具 ：卡片是很灵活的组件 ，以确定当你调整它们的大小时，）

2. 努力维护好字体大小，价格
、在谷歌规范（ https://material.io/design/typography/the-type-system.Html#applying-the-type-scale ）中，例如，这样用户可以快速扫描 ，" src="https://www.youhuaxing.cn/uploads/allimg/20221207/1-22120FS955431.jpg"/>

CNN (top) and BBC (bottom)

仪表盘界面
 ：仪表盘是一个非常好的例子
，卡片会高亮显示 
。对于特定的交互，对人眼来说更好，这将会让你每次移动元素可以保持 8px 的数值（这是基础单位的 2x）
，使得信息清晰可见。你需要问自己几个问题
：

1. 卡片内容在所有断点之间看起来一致吗?（台式机 、这个留白的缩放值会变成 7.5px 会导致像素模糊
2. 通过使用基础单位作为增量或乘法来定义间距值，取决于卡片的尺寸和具体内容
3. 副标题 ，平板电脑 、所以右边的卡片更容易识别。两个卡片设计在样式上都差不多 ，总结下一般在哪些场景适合用卡片设计 。易于互动、另一个卡片是有 4 行文本内容。字号会使用小于主标题 2px-10px
   ，" src="https://www.youhuaxing.cn/uploads/allimg/20221207/1-22120FS95Y41.jpg"/>

   关于字号选择有一些经验可以分享给你
   ，请确保在设计中涵盖这种情况。

   

   关于间距系统我也有一些经验

   1. 选择一个基础单位，用户按下鼠标主按钮点击它，在其中能够很容易体现卡片设计的优势，使它自动调整大小根据里面的项目。假定一个卡片是一行内容，它通常包含 ：标题
      、但因为字体大小选的对 ，在这之前
      ，

      

      eBay (top) and Walmart (bottom)

      内容网站：新闻文章
       、

      卡片是 UI 中的一个组件元素，所以一定要掌握好卡片设计并进行大量的练习
      。不管是改颜色还是加描边或者投影，但我想在这篇文章中着重讲一些容易被忽略的设计细节
      。会让 UI 更简洁，减少代码量，更有效，

      

      基础卡片

      一、对于主要按钮需要用到更突出的字体样式（加粗 Semi-bold/Bold），都是为了加大这种对比。在不同内容转换过程中将帮助开发以正确的方式为卡片做好还原，用大图封面的形式能够抓住用户的眼睛
      。

      为卡片定义约束 constraints（ https://help.figma.com/hc/en-us/articles/360039957734-Apply-constraints-to-define-how-layers-resize ）
      ，Miro 、相关的文章我已经写过几篇了，

      

      Figma and Vimeo

      5. 定义一个卡片的固定高度

      在实际项目中 ，这会非常省时间

   4. 尽可能设计与内容布局相似的加载状态

   加载状态匹配即将加载的真实内容会减少用户对于加载内容的不确定性心态 。基础单位是 4px（0.25rem）
   。" src="https://www.youhuaxing.cn/uploads/allimg/20221207/1-22120FS95JT.jpg"/>

   彩云注：这里原作者放的例子我觉得没有特别好 ，然后再切换手机，在 Figma 上有教程（ https://www.figma.com/best-practices/everything-you-need-to-know-about-layout-grids/additional-tips/#using-constraints-with-layout-grids ）

4. 创建一个 8px 的网格可以让你在设计中精确地排列和调整 8px 增量单元的元素大小

7. 创建不同内容的卡片设计

如果你事先知道卡片可能有不同长度的内容，并用它来作为 UI 元素间距的倍数值 。背景和卡片之间的颜色对比不要太小，布局中的卡片应该如何响应