一学就会 | 医疗类金刚区图标|（含教程）

金刚区作为产品功能架构重要的组成部分，是设计师重点发挥的区域，不同的设计手法（渐变、透明度变化、投影、晶白、毛玻璃...）可以延展出不同类型的差异化图标，使得金刚区图标质感差异也会有所不同。

下面我们以医疗类图标为例，带你了解金刚区轻质感（渐变、投影、模糊）图标的设计思路，参数仅做参考哦~

这里使用的设计工具是「行空设计」，这是一款专为产研团队研发的设计协作平台，操作顺畅，页面简洁，兼容Sketch，复制链接（https://xk.design/login?c=zc），边看边操作效果更佳哦~

1.渐变色：使用同色系做渐变打造轻质感。

2.光影处理：内阴影打造出立体感，把图案做出厚度。高光图层加强图案表面光滑的质感，类似反光的效果。图案整体设置外阴影加强重量感，并制造图案和底部圆的空间感 。

3.底部阴影：使用高丝模糊让整体阴影的阴影细节更为丰富。

利用形状工具绘制底部背景，填充同色系的线性渐变 ，并且给底部背景设置内阴影打造立体感。

l 尺寸：52*52px

l 线性渐变填充：#FFAD61-#FE5E25

l 内阴影1：#000000，不透明度31%，混合模式「叠加」，大小「0、-3、6、0」

l 内阴影2：#FFFFFF，不透明度50%，混合模式「叠加」，大小「0、3、6、0」

同理，利用形状工具绘制药箱雏形，填充颜色较浅的线性渐变色 ，并设置内阴影。包含：手柄、箱子、箱盖。

手柄是由两个大小不一的圆角矩形进行「减去顶层」得出。

l 外层矩形尺寸：26*15px，圆角半径4

l 里层矩形尺寸：18*9px，圆角半径1

l 手柄整体线性渐变填充：#FEF6F2-#FFB091

l 内阴影1：#FFFFFF，不透明度88%，大小「0、1、1、0」

l 内阴影2：#000000，不透明度100%，混合模式「叠加」，大小「0、-1、1、0」

l 尺寸：34*8px，圆角半径「4.5、4.5、0、0」

l 线性渐变填充：#FFF0E8-#FFCDB9

l 内阴影1：#FFFFFF，不透明度88%，大小「0、1、1、0」

l 内阴影2：#000000，不透明度34%，混合模式「叠加」，大小「0、-1、1、0」

l 尺寸：34*20px，圆角半径「0、0、7、7」

l 线性渐变填充：#FFF4EE-#FFC0A7

l 内阴影1：#FFFFFF，不透明度88%，大小「0、1、1、0」

l 内阴影2：#000000，不透明100%，混合模式「叠加」，大小「0、-1、1、0」

整体图标的高光显示在箱盖和箱子上。因此复制箱盖，修改尺寸去阴影，改变颜色作为箱盖的高光。而箱子的高光同理，但需多绘制一条曲线，并与原小尺寸的箱子进行【减去顶层】得到新的平滑形状，随后填充白色的线性渐变，制造高光点，打造表面光滑的质感。

l 尺寸：30*6px，圆角半径「4.5、4.5、0、0」

l 线性渐变填充：#FFFFFF（100%）-#FFFFFF（0%）

l 小箱子尺寸：30*16px，圆角半径「0、0、7、7」

l 曲线尺寸：52.7*28.32px

l 整体线性渐变填充：#FFFFFF（100%）-#FFFFFF（0%）

利用矩形工具绘制锁扣与十字架，锁扣进行渐变线性填充，并设置内外阴影打造质感和重量感，十字架填充与底色背景一致的线性渐变色。

l 尺寸：4*9px，圆角半径「2」

l 线性渐变填充：#FFBC9A-#FFA584

l 外阴影：#FE8643，不透明度40%，大小「0、1、1、0」

l 内阴影1：#FFFFFF，不透明度88%，大小「0、1、1、0」

l 内阴影2：#000000，不透明度100%，混合模式「叠加」，大小「0、-1、1、0」

l 尺寸：10*2px，圆角半径「1」

l 线性渐变填充：#FFAD61-#FE5E25

将药箱所有图层打组命名为中心图案，设置外阴影增添重量感，最后复制一个底部背景图层放在最底部作为背景阴影，填充色不变，降低不透明度，设置高斯迷糊，增添整体图案的阴影细节。大家记得注意图层顺序哦

l 外阴影：#E34005，不透明度63%，大小「0、2、4、0」

l 图层不透明度20%

l 线性渐变填充：#FFAD61-#FE5E25

l 高斯模糊「3」

以上就是医疗轻质感图标的绘制教程啦，你也来试试吧。期待你的作品哦~大家有其他疑问可以在评论区讨论哦~