设计师必备！UI设计文本参数大全
一、全文速览图
上一篇《移动端设计参数大全 | 超详细版本》我们梳理了移动端基础元素与组件的尺寸定义规范，而本篇我们将聚焦于另一关键模块——文本的参数体系。
今天我们继续深入，带来许多设计师关心的图标设计规范指南。
二、图标类型认知
在UI设计领域中，图标设计与界面设计实则分属两个不同维度。界面设计核心在于排版逻辑与布局结构，是对标准化元素与现成素材的组织与整合，入门门槛较低、上手较快；而图标设计则侧重于图形绘制与视觉创作，需借助绘图工具从零构建图形，因此学习成本更高、成长曲线更陡峭。
此外，图标种类繁多、风格多元，不同类别对应的绘制逻辑、精度要求与表现技法差异显著。因此，掌握图标设计的第一步，是清晰识别并归类图标类型，再针对性地学习其对应的设计规范与执行方法。
UI设计中，图标通常可划分为三大类：启动图标、工具图标、装饰图标。
启动图标：用于操作系统桌面或应用列表中标识App身份，是用户点击进入应用的入口。各平台（iOS / Android / HarmonyOS）对启动图标有明确但差异化的尺寸、圆角、阴影等要求，但整体结构普遍包含背景区域与图标主体两部分。主体形式自由度高，可以是品牌LOGO、抽象图形、摄影图像、人物肖像，甚至定制化字体造型。
工具图标：即应用内高频使用的功能性图标，如播放/暂停、关闭/返回、收藏/点赞、通知/设置等。这类图标强调信息传达效率，形态简洁、语义明确，主流风格为线性（Outline）或面性（Filled）。
装饰图标：主要用于增强页面氛围、提升视觉层次，常见于空状态页、引导页、营销活动页等场景。其表现手法丰富，涵盖毛玻璃质感、3D建模、实物摄影、插画风、拟物化等多种高表现力形式。
遵循“由简入深”的学习路径，建议优先掌握工具图标设计，它是UI设计师的基础能力项；进阶后可拓展至装饰图标与启动图标的设计能力。
不少新人常有疑问：如今已有大量成熟图标库（如Iconfont、Material Icons、Feather Icons），甚至AI绘图工具也能快速生成图标，为何还要亲自学习图标绘制？直接调用资源不是更高效吗？
这个问题值得认真思考——
✅ 第一，通用性 ≠ 适配性
每个产品所需的工具图标数量与语义组合千差万别，外部图标库难以100%覆盖全部使用场景。且高度复用的图标易造成视觉同质化，削弱品牌辨识度与产品个性。
✅ 第二，AI生成 ≠ 可交付
尽管当前AI图像生成能力持续跃升，但在基础工具图标这一细分领域，其输出仍存在明显短板：细节控制弱、比例失衡、线条不规整、无法精准表达功能语义；更重要的是，AI产出多为位图，缺乏可缩放、可编辑、可开发对接的矢量格式（SVG），无法直接嵌入设计系统或交付前端开发。
真实项目中，图标需求高频、碎片、动态变化——临时新增一个筛选图标、替换一组状态图标、适配深色模式下的颜色映射……这些场景下，依赖外部资源或AI往往滞后低效。唯有掌握底层设计能力，才能从容应对复杂多变的实际工作流。
menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件，你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。
三、工具图标规范
需特别说明：工具图标规范不同于启动图标，它并非强制性标准，而是一套被广泛验证的最佳实践建议。不同设计系统（如Material Design、Human Interface Guidelines、Ant Design）均有各自细化规则，但并无绝对统一的“唯一真理”。
因Google Material Design对工具图标规范描述最系统、最详尽，且在行业落地最广、接受度最高，本文将以该体系为基准展开解析。
1. 图标的画布与格线系统
图标画布尺寸：24 × 24（主流），兼容范围 12–48（以4为步长） 设置逻辑：24px 是Web与移动端最通用的基准尺寸，但实际项目中常需多尺寸适配（如12px用于微提示、32px用于侧边栏、48px用于大按钮）。所有尺寸均建议以4的整数倍设定，便于响应式缩放与像素对齐。
内边距 / 出血区（Padding / Safe Zone）：1–4 px
设置逻辑：为图形预留呼吸空间，避免视觉拥挤或边缘裁切。常规24px图标推荐2px内边距；小于24px（如12/16）用1px；大于24px（如32/48）可用3px或4px。
格线构成：由圆形、正方形、垂直矩形、水平矩形四类基础形状组成
设置逻辑：以24px画布为例——
- 圆形：直径20px（与内容区一致）
- 正方形：20×20px
- 垂直矩形：16×20px（宽×高）
- 水平矩形：20×16px（宽×高）
其他尺寸画布可依相同比例缩放推导。该格线系统是构图锚点，同类图形（如齿轮、心形、箭头）可直接套用对应格线尺寸；非标图形也需参照格线判断比例协调性（需一定经验积累）。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
2. 图标的图形参数细则
线性图标描边粗细：1、1.25、1.5、1.75、2 px
应用逻辑：线性图标不宜仅用整数描边（如1/2px易显单薄或笨重），0.25px为精细调节单位，兼顾清晰度与视觉平衡。
描边位置：统一采用居中描边（Center Stroke）
应用逻辑：描边方式分外描边（Outside）、居中描边（Center）、内描边（Inside）。因工具图标常含开放路径（如箭头、折线），外/内描边仅适用于闭合图形，居中描边兼容性最强、可控性最优，是行业默认选择。
外圆角（Outer Corner Radius）：0.5–4 px
应用逻辑：若图形需圆润处理，圆角值建议以0.5为最小单位递进，且同一套图标中须保持统一数值，确保风格一致性。
内圆角（Inner Corner Radius）：0–0.5 px
应用逻辑：图形内角（如尖角交汇处）宜保持锐利；若为提升柔和感，最多添加0.5px圆角，严禁与外圆角数值相同，否则易导致视觉膨胀或结构模糊。
面性图标镂空区域最小宽度：1–4 px
应用逻辑：“镂空”指面性图标中需保留的负空间线条（如“放大镜”镜框、“齿轮”齿槽），其宽度独立于描边逻辑。为保障清晰可辨与渲染稳定，建议设为整数，常用1–4px区间。
结尾
本次工具图标规范分享暂告一段落。后续我们将陆续补充启动图标设计规范、装饰图标表现逻辑及跨平台适配要点等内容。如有具体疑问或希望展开的专题，欢迎留言，我们将在后续的多图动态更新版本中逐一回应。
下篇见～
欢迎关注作者微信公众号：「超人的电话亭」
