卡牌是商品中常用的结构设计模块众所周知。透过卡牌，能将相同的文本分层级女团在一同。卡牌式结构设计便携式简洁和功能强大的属性，能让网页看上去更有社会秩序感。
卡牌做为常用的UI模块，一般来说由副标题、文本叙述、影像、按键等原素共同组成。
01
卡牌式结构设计手册
透过预测卡牌的逐步形成、卡牌结构设计突破点来全面性归纳卡牌结构设计方式！
1) 卡牌与大背景逐步形成对照
为的是更快地界定卡牌和大背景，能给卡牌充填色调、加进深色custom、加进阴霾等让卡牌与大背景有界定。
2) 选择最合适的明甫
文本可读性由字体的优先选择和明甫的大小决定。例如，下面两个卡牌有一样的布局，但右边卡牌的文本更有层级感，更容易识别。
透过优先选择最合适的明甫大小，能让整个卡牌在视觉上变得均衡，每部分文本有对照，但又很协调，主次关系明确。
结构设计提示：
副标题：一般来说使用20px-36px，具体大小需要根据卡牌使用场景灵活优先选择。
副副标题：明甫应该比副标题小2px-10px，以便于界定文本的主次。
正文：字体大小保持在14px-16px。
按键标签：明甫与正文明甫相同或者比正文明甫大。当需要显示多个选项时，主要操作按键使用更突出的字体样式(加粗)，次要操作使用不太突出的字体样式(常规)。
3）建立统一的间距规范
在网页中，原素间的间距是划分文本、建立层级结构的重要因素。
如果想让网页的结构设计保持一致性，避免出现混乱，就需要建立统一的间距规范，并让所有网页都按照这个间距规范执行。
结构设计保持统一后，后期开发也会更友好。
结构设计提示：
在建立间距规范前，最好优先选择一个基本值，例如4px，做为UI原素之间增加间距的基本单位。原素的间距规范则按照4的倍数，依次划分间距数值，这样更方便后期结构设计。
4）使用骨架屏加载文本
现在很多商品采用与网页布局匹配的骨架屏做为loading过渡，这样有助于减少用户对加载文本的不确定性。
对照下面的两个加载样式能看到，右侧的骨架屏加载样式能让用户知道接下来的网页中会出现卡牌，更快地传达文本。
更多骨架屏加载样式：
5）定义卡牌的高度
卡牌一般来说以一组的形式出现在网页中，水平、垂直方向都要保持对齐，这样网页才会看上去更规范。
但每个卡牌的文本可能不一样，例如有的卡牌4行文字，有的卡牌只有1行文字。
这种情况下，我们需要对卡牌设定一个固定的高度，并对展示的文本设定具体的行数，例如规定最多展示两行文字，多出的文字做省略效果。
6）使用网格进行卡牌布局
网格是基于卡牌布局的基础，有助于一致地排版文本。
对于相同的显示设备，如pc端、pad端和移动端，采用相同的网格列数和宽度，保持文本在相同屏幕尺寸上做到响应式变化。
7）创建具有相同文本的卡牌结构设计
当卡牌中有副标题、文本、图片、按键等多种原素时，需要考虑副标题与图片的位置关系、副标题和文本的长短等。
例如卡牌顶部是副标题时，考虑到副标题字数不确定，我们能在卡牌上方保持至少能容纳两行副标题的空间，卡牌内的图片和按键的位置保持不变。
这样既能让副标题差异化的展示，还不破坏卡牌内其他文本的位置，整组卡牌放在一同也更整齐。
8）定义卡牌的交互状态
当用户与卡牌进行交互时，卡牌需要呈现特定的视觉反馈。常用的卡牌状态包括默认、悬浮(pc端)、激活、选中等。
02
Web卡牌结构设计示例
1) 商品列表页
亚马逊、阿里、eBay等电商网站都使用卡牌来展示商品。一般来说，商品卡牌由商品图片、副标题、价格、折扣和按键共同组成，点击卡牌跳转到商品详情页。
2) 文本网站
例如Behance、Bribbble等文本平台、BBC等新闻平台，或者Unsplash这类图片网站，都使用基于卡牌的布局表示每个文本事，这样用户能快速浏览、比较和优先选择想要观看的文本。
3) 数据看板
数据看板中展示了如何使用卡牌对相关信息进行分组，用户更方便比较和预测界面中的数据。
4) 协作工具
卡牌是灵活的模块，能女团成相同类型的小模块。Figma、Framer等协作工具使用卡牌展示项目和文件。
这种类型的卡牌结构设计简洁、功能性更强，点击卡牌能访问更多与文件相关的操作。
最后
以上是8条结构设计师必备的卡牌式结构设计手册,希望透过这些结构设计手册能让大家更熟练地掌握并运用卡牌式结构设计～
