Icon 金刚区图标
设计原则依据 MEXC icon 统一设计规则进行设计
大小与网格
以 24*24px 的尺寸作为图标绘制的统一栅格尺寸，实际画布控制在20*20px的区域，在一定特殊情况下入 icon 过长或者有突出的边角等，允许内容适当延伸，确保视觉重量上统一
24
20
24
20
设计指南
2
拐角
3
3
重量、描边
空间分配
行程端点
1
端点
外部及内部线段末端均为直角处理
拐角
外圆内方，外部轮廓默认保持 2px圆角，内部镂空直角。根据图标美观程度进行微调
2
一般拐角为 2px，结合现实效果
也可采用大圆角，满足造型需求
为保持面性图标视觉的硬朗感与清晰度，内部镂空形状采用直角处理
若直角效果最佳，根据图形美观程度可以做微调（圆角范围 1px或0.5px）
重量
金刚区图标设计默认采用面性样式，当图形语义受限、无法通过面性准确表达，可使用线性图标进行补充设计，其外轮廓线需适当强化，避免与面性图标产生“视觉失衡”
当内部镂空线条过于密集时，允许对该区域的线条进行微调变细（例如调整为 1.8px 至 1.5px 之间 ）确保图标的视觉清晰度和舒适度
2
2
2
面性图标内部的镂空线条粗细、图标分割断口间隔均为 2px
空间分配
图标的镂空设计应在清晰度与图形美观之间取得平衡，避免镂空面积过大导致图标偏轻，或过小导致图形沉闷。
镂空面积占图标整体面性区域的比例 应控制在 20% 至 30% 之间
镂空面积的范围仅限于图标的实际绘制实体图形区域, 不包括图标周围的安全边距
渐变角度
图标使用自上而下的 90° 垂直渐变，以增强层次感与轻量视觉效果
图标使用自上而下的 90° 垂直渐变，顶部以 A 点实色起始，向下逐步过渡至 B 点的透明色
Color token : content/primary
Color token: content/primary （75% Opacity）
A
B
设计示例
图标的外部及内部线段末端均为直角处理，不可采用圆角设计样式
推荐
禁用
当图形语义受限、无法通过面性准确表达时，可使用线性图标进行补充设计，其外轮廓线需适当强化，以提升视觉比重。
推荐
禁用
图标切图规则及模版
App 输出 3x 的切图 ，Web 输出 2x 的切图；设计参考请跳转至 图标规范模版文件 库查看
金刚区 + web 菜单栏 icon
图标内容在 24*24px 栅格内绘制，在 32*32px 交付容器内居中导出，以适配不同平台
剧中放置
32
24