玻璃质感卡片怎么做？自动布局5步教程

制作玻璃质感卡片，先用自动布局安排文字和内边距，再加半透明填充、背景模糊、圆角与阴影。效果完成后，把标题变长、内容变多、容器变窄，检查卡片能否继续容纳文字。下面介绍 5 步制作过程，并补充内容适配与文字可读性的处理。

卡片需要同时解决两件事：玻璃效果负责表面质感，Pixso 自动布局负责内容排列。父层与子层的尺寸能否跟随内容变化，取决于各自的调整大小设置，不能只加一个自动布局就认为适配已经完成。

比如：

• 跟随文本变化自动增大或缩小的按钮

• 带有自动布局的图文组合卡片

• 创建等距的文本详情

• 创建带有自动布局的组件，通过组合 和嵌套这些自适应组件，您可以创建跨 多种设备屏幕类型的设计内容

以下是 Pixso 整理的与自动布局有关的新词，方便大家理解。

分布：可控制自动布局画框中对象之间的距离

集中分布：将对象按设置的距离黏在一起

均匀分布：对象间距会根据自动布局外围改变而变化，设置后子对象之间距离变为均匀

调整大小：设计可跟随自动布局大小变化而响应的动态布局

1. 怎样用自动布局创建列表卡片

步骤一：将一段文字复制 2 个项目，呈现 3 行

步骤二：现在，选择所有三个项目，并导航到属性面板中的自动布局选项。单击 + 图标设置布局。

步骤三：复制布局 2 次，再为这三组内容添加一层自动布局，将方向设为水平。本例使用 160 px 间距和 100 px 内边距来制作展示画面；这些数值服务于当前画板，不是手机卡片的通用规格。

步骤四：添加填充，将颜色设置线性渐变，不透明度设置为 50%。将圆角的值设置为 30 px。

步骤五：为卡片表面添加数值为 40 的背景模糊，再设置阴影：颜色 #E5E5E5、不透明度 30%、Y 偏移 30、模糊 100。先使用这组参数，后续应结合卡片尺寸和背景明暗微调。背景模糊作用于卡片后方的内容；把同一层文字也一起模糊，并不能得到清楚可读的玻璃卡片。

列表卡片的自动布局与玻璃效果就完成了。

文字变长后，让内容和容器各司其职

制作好本例后，先复制一份作为对照。把一行短标题改成长标题，再把正文增加两行，观察变化由哪一层承担：文字应该换行，内容容器应该增加高度，而不是靠缩小字号或压紧字距把所有内容塞回原来的高度。

然后缩窄父容器。若三列卡片已经无法保持阅读宽度，就在窄屏方案中改为单列或减少列数，并写清切换条件。设计稿里缩放整个画板只会把文字一同缩小，不能证明网页或 App 能自动完成重排。

最后换一张明亮背景和一张纹理较复杂的背景，重复看标题、正文和底部信息。如果文字只在原来的深色背景上清楚，可增加卡片填充的不透明度、调整文字颜色或加深局部底色；不要只把模糊值拉高。

2. 用Pixso创建玻璃质感卡片

你也可以直接在Pixso社区搜索作品的最新分类，直接复用玻璃质感卡片。

Pixso 支持组件和自动布局，可以把这张卡片整理成可复用的组件：保留稳定的内容结构，让标题、正文和封面按页面需要替换。多人协作时，在卡片旁标出尺寸与背景取舍，能让团队更快理解哪些是装饰参数，哪些是内容不能被遮挡的要求。

玻璃效果不明显，先检查这三处

第一，卡片后方是否确实有可模糊的图像或形状。若背后只有单一纯色，即使提高背景模糊数值，也不会出现丰富的毛玻璃纹理。第二，表面填充是否完全不透明；过实的填充会挡住背景。第三，背景模糊是否加在卡片表面，而不是正文文字层。

图中展示了填充、背景模糊和成品卡片三个阶段，可以按这个顺序定位。先临时隐藏文字，观察表面是否产生预期效果，再恢复文字检查可读性。卡片的透明感不能以读不清内容为代价，尤其不要让价格、状态或主要操作落在背景最花的位置。

交付时给研发保留一张普通背景和一张复杂背景下的效果，同时说明文字、内边距、圆角与阴影参数。背景模糊是视觉效果，实际产品仍需安排不支持该效果时的稳定底色，保证内容可以正常阅读。

3. 协作设计工具Pixso的特点

团队协作：团队成员面对一个复杂的设计项目，可以多人云端协作设计，实时同步字号、边框、颜色等各种细节。

智能设计工具：自带专业设计工具，支持UI/UX设计和原型播放，一体化完成高保真产品设计。

矢量网格：模拟画笔的特色，提供精细化矢量设计，自由切割线段，连点成面。

组件变体：随意切换一个组件的多种状态，设计师可以更加高效地去创建和复用组件。

格式导入：已有其他工具设计稿时，可先导入代表性文件，检查文字、图片和图层结构，再继续制作卡片。

海量设计模板：Pixso设计资源包含腾讯、阿里、字节、蚂蚁设计等众多大厂设计系统，组件素材直接复用，创意快人一步。