00:00 / 01:00
连播
清屏
智能
倍速
点赞443
00:00 / 00:56
连播
清屏
智能
倍速
点赞23
00:00 / 00:40
连播
清屏
智能
倍速
点赞767
00:00 / 02:39
连播
清屏
智能
倍速
点赞265
00:00 / 00:45
连播
清屏
智能
倍速
点赞36
在Figma中制作带渐进式模糊效果卡片的教程 朋友们,今天我来给大家分享一下在Figma中制作带渐进式模糊效果卡片的教程。很多人在做UI设计时,可能不太清楚怎么制作出这种能让背景与前景内容自然过渡,还兼顾不同模式适配性的卡片,接下来我就一步步教大家。 首先,我们要创建基础框架。按下F键,创建一个尺寸为320×440px的框架,这个框架就是我们卡片的主体啦。把它的填充色设置为白色,也就是#FFFFFF,然后给它添加1px的描边。再加上投影,参数设置为X=0、Y=0、模糊=0、扩散=4、颜色是#82B6FF,不过透明度要设置为25%。这就好比我们给房子打好了地基,后续的操作都要在这个基础框架上进行。 接着,我们来添加背景模糊。新建一个模糊帧,让它的宽度占基础框架的100%,高度占50%。然后选择Progressive,也就是渐进式背景模糊,把Start设置为0,End设置为80。给这个模糊帧填充为线性渐变,将渐变停止点设置为0%时白色0%透明度,70%时白色100%透明度。这一步就像是给房子的一部分加上了一层朦胧的纱帘,让它有了一种渐变模糊的美感。 之后,我们要插入内容。在模糊帧内添加文本与图标等内容,不过要注意底部内边距最大设为24px,这样能保证文字与背景有足够的对比度,让内容更清晰可读。字体方面,分别选用Proxima Nova,特粗20号;Inter,常规14号和中等12号,行高对应设置为24、20、20。这就像是在房子里摆放家具,要合理安排才能既美观又实用。 最后,我们进行主题拓展。这种模糊效果在深色模式中同样适用哦。把模糊帧的填充色改为黑色,也就是#000000,然后调整内部内容来适配深色视觉风格。就如同我们可以根据不同的季节给房子换不同的装饰一样。 最终,我们就能得到一张融合渐进式模糊的人物介绍卡片,它的模糊效果让背景与前景内容自然过渡,还兼顾了浅色和深色模式的适配性,这可是UI设计中提升视觉层次感的常用技巧呢。 朋友们,你们学会了吗?在实际操作中,你们觉得哪个步骤最有挑战性呢?快在评论区和大家交流一下吧。#设计
00:00 / 03:09
连播
清屏
智能
倍速
点赞0
00:00 / 02:36
连播
清屏
智能
倍速
点赞23