做好瓷片区界面设计，一个教程帮你搞定！

更新时间：2024-05-11 21:14:24

瓷片区，是由多个展示内容要素的区域组合而成，因其布局形似瓷砖贴片而得名。要设计瓷片区，需先确定区域大小。区域的宽度由设计风格决定，可为通栏，也可减去左右页边距。高度的制定则较为特殊，更多使用预设尺寸，而非适应尺寸。瓷片区的高度主要由模块的内容数量和权重决定，数量越多、权重越高，高度越大，反之则越小。接下来就跟随本教程让你轻松做好瓷片区界面设计，一起来看看吧！

点击图片即可免费获取瓷片区界面设计教程👇

1、背景

先来创建一个宽度为 390，高度自定义的画板，用线性渐变填充它，颜色从#BEF000 逐渐过渡到#F9FFE3。

2、背景

再来制作一个宽度为 366 的矩形，高度嘛你可以自己决定，然后用白色填充这个矩形。接下来，我们要添加一些描点，来调整矩形的形状。这些描点就像是矩形的关节一样，可以让我们自由地改变它的形状。

3、标题

创建文本，选择官方字体 MiSans、加粗、18 号，填充颜色 #080808。

4、更多内容

创建文本，选择官方字体 MiSans、Medium、14 号，填充颜色为 #080808。

绘制一个 16*16 的矩形，颜色填充为 #080808。

再绘制一个箭头图标，填充颜色为 #BEF000。

5、水果卡片-文本

标题文本：字体选择 MiSans，加粗、16 号大小、填充颜色为#08080808。

次级文本：字体选择 MiSans、常规、12 号大小、填充颜色为#0808080808、透明度 50%。

6、水果卡片 - 金额

免单文本我们选择 MiSans 字体，Regular 样式，12 号大小，填充颜色是亮丽的#FF5733。

金额文本我们同样选择 MiSans 字体，不过要用加粗的 Blod 样式，20 号大小，同样填充颜色也是#FF5733。

这样设计出来的水果卡片金额部分，既清晰又醒目，让人一看就忍不住想买买买！

7、水果卡片-按钮

首先，绘制一个 72x28 的矩形，填充颜色为 #BEF000。

然后，选择 MiSans.SemiBold 字体，文字大小为 14，填充颜色为 #FF5733，将按钮文本放在矩形的中央。

接下来，选择一个水果图标，调整大小并将其放置在矩形的右下角。

然后，创建一个装饰文本，选择 Montserrat 字体，加粗，文字大小为 32，填充颜色为 #33D900，透明度为 10%。

最后，再绘制一个圆形，填充颜色为 #54F000，透明度为 20%，添加 50 的高斯模糊，作为卡片的装饰元素。

8、水果卡片 - 按钮

首先，绘制一个 72x28 的矩形，填充颜色为 #BEF000。

然后，在按钮上添加文本，字体选择 MiSans，加粗，字号 14，填充颜色为 #FF5733。

接着，选择一个水果图标，调整大小并放置在右下角。

再创建一个装饰文本，字体选择 Montserrat，加粗，字号 32，填充颜色为 #33D900，透明度 10%。

最后，绘制一个圆形，填充颜色为 #54F000，透明度 20%，添加 50 的高斯模糊，作为卡片的装饰元素。

9、瓷片区

让我们来按照水果卡片的绘制方法，制作另外两张卡片吧！

感谢即时设计用户@HD 上传的图标资源，让我们的设计更加生动有趣！

瓷片区的设计空间较大，可做得非常复杂、新颖、富有创意，但这需要一定的经验支撑。对于新手来说，首先要掌握以最基础的样式输出，这样才能更好地展示内容，激发用户的点击欲望，在完成了本次基础教程之后相信大家对于如何做好瓷片区界面设计应该有了更深的感触，大家别忘了把自己练习的作品分享到即时设计的设计社区，为这个教程画上一个完美的句号。