训练营part7/9-『UI界面再认识』彩色化卡片 细节设计

1.【如图所示】彩色化卡片主要来源于真实卡片和UI色彩卡片。

2.彩色化卡片组成简单，布局灵活【如图所示】。

3.彩色化卡片主要由【文字】、【背景】和【点缀】组成。

4.在【文字】这一块呢，这里给大家整理了常见的设计参数【如图所示】。

5.在【背景配色】上，【色相和明度】要保持大致一致，【饱和度】要重点调节【如图所示】。

6.这里给大家延伸一下【背景】的【微渐变】效果。

7.我们进入到【PS】，打开一个案例图，我们可以看到，下面这个矩形它的颜色是有渐变效果的，不是很明显但还是有渐变效果的【如图所示】。

8.然后在背景上做了一个圆形的点缀，这样微渐变的效果就显示出来了【如图所示】。
9.【弥散投影】就是将背景进行高斯羽化，然后进行适当的缩小并且降低不透明度为80%【如图所示】。

10.【点缀】可以让卡片在视觉上更加饱满，画面更加丰富【如图所示】。

11.【点缀】一般把不透明度调整在10%~20%之间，在配色上选用邻近色然后利用蒙版进行渐变【如图所示】。

12.这里把彩色化卡片的制作步骤进行了拆解【如图所示】。

13.接下来给大家讲解【图标类卡片】如何绘制，首先我们要选取图片，然后开始绘制轮廓，最后简笔画并优化结构【如图所示】。

14.如果简笔画下来之后仍然感觉复杂，那就要继续简化【如图所示】。

15.在配色上采用【邻近色】的配色方案【如图所示】。

16.【卡片背景】运用保持色调一致的方法，然后微渐变背景，最后倾斜圆角矩形进行点缀【如图所示】

17.同样这里把【图标类型卡片】的设计步骤进行了拆分【如图所示】。