4步教会你制作UI质感效果的卡片

卡片 (Card)，是我们在每个网站和应用程序中都会经常看到的一种组件，它能够简单直观地将想要表达的内容传达给用户，是目前UI设计流行的方式之一，那一套质感效果的卡片应该如何实现呢？

今天我们以第一个卡片为例来进行操作，这里使用的设计工具是「行空设计」，这是一款专为产研团队研发的设计协作平台，操作顺畅，页面简洁，兼容Sketch

—————————————————————————

01 制作背景

使用矩形工具（快捷键R）绘制底部背景，随后填充渐变色，使背景看起来丰富有层次
尺寸：320*170px、圆角半径：8、线性渐变填充：#FF4747-#FFB380

02 增添光影

利用钢笔工具（快捷键P）绘制出2个光影区域并设置透明渐变，选中底部背景图层并添加蒙版，使得两个光影区域只在背景内显示。

线性渐变填充：#E0E0E0-#FAFAFA、不透明度30%

03 绘制图标

云朵图标由正圆和圆角矩形组成，同时选中两图形，执行布尔运算的联集；箭头图标由三角形和钢笔工具绘制的直线组成，绘制完成后打组，给云朵和箭头填充白色并添加阴影，最后云朵及箭头编组，整体旋转10度。

云朵：圆形48*48px；圆角矩形98*44px、圆角半径31.5；

布尔运算形状结合，设置边框，颜色#FFFFFF；宽度12；添加外阴影#FACBCA、大小【9、0、1、0】

箭头：直线14.55、边框宽度6；三角形15.31*10.8px、圆角半径1；

选中直线及三角形图层进行编组，设置颜色#FFFFFF；添加外阴影#FACBCA、大小【2、-2、1、0】

04 添加文字

文字工具（快捷键T）输入文字，设置字体和颜色，并调整位置就完成啦

根据上面的教程，你也来通过改变底部背景的渐变色和图形，来试试其他3个卡片的绘制吧，期待你的作品哦~大家有其他疑问可以在评论区讨论哦~

—————————————————————————

扫码加入行空设计公测用户群：

扫码关注行空设计公众号：