够细致够全面！上手即用的图标设计参数大全
一、全文速览图
今天我们接着往下 ，分享很多同学关注的即用计参图标的设计规范 。
二 、标设图标类型认识
在UI设计领域中 ，够细图标设计和界面设计其实属于两个不同的致够分支 。界面设计本质上是全面全做排版和布局，是上手数对常规元素和素材的组合 ，门槛低上手容易 。即用计参而图标设计则是标设绘制和创作 ，是够细通过绘图工具画出想要的图形 ，所以上手难度更高学习曲线更陡峭 。致够
同时图标种类较多 ，全面全设计风格不同 ，绘制的规范和技法也有较大的差异 ，所以学习图标设计的第一件事就是先理解和区分图标的种类 ，然后再根据图标的类型学习它们的规范和技法。
UI设计可以将图标划分成三个大类 ，启动图标 、工具图标 、装饰图标。
启动图标就是用于在系统界面中辨识应用的图标，是启动应用的按钮 。不同系统的启动图标差异较大 ，但基本都包含背景区域和图标主体两个部分 ，图标主体的形态和风格各异 ，可以是产品的LOGO ，也可以是普通图标 、摄影素材 、真人照片 、特殊字体等 。
工具图标就是应用内最普通的用来传递信息的图标 ，比如播放 、关闭 、收藏 、点赞、通知等图标 ，一般样式都很简单，主要使用线性或面性的设计 。
装饰图标则是用于提升页面视觉效果的图标类型 ，会使用较为复杂的视觉效果，包括但不限于毛玻璃、3D 、实物 、插画、拟物等等。
学习图标设计肯定也要遵循先易后难的规律 ，所以我们要先从工具图标开始学起 ，再深入装饰和应用图标 ，而工具图标设计也是作为UI设计师必须要掌握的技能 。
很多新人可能会有疑问，现在市面上有非常多成熟的图标库可以使用，甚至可以用AI生图 ，为什么我们还要学图标设计，直接用素材和AI不好吗 ？
这就是一个非常值得注意并理解的问题 ！
首先不同应用内使用的工具图标数量和类型各不相同 ，而外部图标库很难正好满足所有图标使用的需要 ，且成熟图标库被引用的次数很多 ，很容易被识别 ，缺乏个性，无法满足个性化 、品牌化的设计需求。
第二点关于AI生图 ，如果你们真的有深度使用就会明白它们确实越来越强大 ，能生成越来越复杂的图标和图形。但是……最简单 、基础的图标反而生成得不好，完全不能落地 。并且无法生成我们需要的矢量格式 ，无法应用到交付和开发环境中。
在真实项目环境中，必然会高频出现图标设计的需求 ，而素材和AI都无法100%满足这些需求 ，所以我们必须具备这项技能 ，以应对复杂且多变的真实工作环境 。
三 、工具图标规范
了解工具图标设计规范之前，我们要先做个声明 ，那就是工具图标规范和启动图标规范不同 ，不是一种强制的约束和限制 ，而是一种 “建议”，不同系统和框架会有自己的工具图标设计规范，没有绝对的标准 。
但因为AndROId的Material Design中对工具图标的规范描述最详细，所以它的规范也是接受程度最高应用最广泛的 ，下面我们也以它的标准为基础展开说明 。
1. 图标的画布和格线
图标的画布尺寸 ：24 ，12 - 48
设置逻辑：24是图标最通用的尺寸 ，但不代表界面只能使用这个尺寸展开设计。每套项目可能都包含多种尺寸的工具图标规范 ，可以从12-48之间以4的倍数选择合理的尺寸 。
图标的内间距/出血线：1-4
设置逻辑：内间距的设置是为图标图形预留一些空间，防止图形过度饱满失衡（就像田字格写字不会撑满） 。24的图标使用2的内间距 ，比它小的使用1 ，比它大的使用3和4 。
图标的格线系统 ：由圆、正方形 、垂直矩形 、水平矩形组成
设置逻辑 ：在24的图标中 ，圆使用和内容区域一样的尺寸20 ，矩形尺寸比圆小使用18 ，垂直矩形宽高为16/20 ，水平矩形的宽高为20/16，绘制示例如下 。不同尺寸的画布格线可以依据这个逻辑创建 。
格线系统是图标绘制的重要依据 ，绘制同类图形就可以直接套用格线图形的尺寸。如果使用其它图形 ，也会根据格线系统来判断比例是否合适（需要一定经验） 。
2. 图标的图形参数
线性图标的描边大小 ：1 、1.25、1.5、1.75 、2
应用逻辑 ：在线性风格的图标设计中 ，描边的大小是可以使用非整数的 ，整数的应用往往不是太粗就是太细 ，所以我们可以使用 0.25 作为跳板来设置。
线性图标的描边位置：居中描边
应用逻辑：描边包含外 、中 、内三种设置，但内、外描边只能应用于闭合路径 ，而图标设计会经常创建非闭合路径 ，所以全局统一居中描边是更合理的选择。
图标的外圆角尺寸 ：0.5-4
应用逻辑 ：如果图形要使用圆润的边角 ，那么这个圆角的尺寸可以以0.5 为一档递进或递减，要确保圆角尺寸的统一 。
图标的内圆角尺寸：0-0.5
应用逻辑 ：图标内侧的边角，可以直接使用锐角，如果觉得不够和谐那么最多添加0.5的圆角，不能和外部使用相同的圆角 。
面性图标的镂空线条 ：1-4
应用逻辑 ：镂空线条看起来像反向描边 ，但它和轮廓描边的特性还是不同 ，比如需要居中或者容易看起来显小，所以可以直接以1到4的整数进行设置。
结尾
工具图标的分享就先做到这里 ，后面还会增加启动图标的规范说明 ，有其它的问题也可以发出来，我们会在后续的多图动态版本里补充上去。
作者 ：超人的电话亭
一、全文速览图
今天我们接着往下 ，分享很多同学关注的即用计参图标的设计规范 。
二 、标设图标类型认识
在UI设计领域中 ，够细图标设计和界面设计其实属于两个不同的致够分支 。界面设计本质上是全面全做排版和布局，是上手数对常规元素和素材的组合 ，门槛低上手容易 。即用计参而图标设计则是标设绘制和创作 ，是够细通过绘图工具画出想要的图形 ，所以上手难度更高学习曲线更陡峭 。致够
同时图标种类较多 ，全面全设计风格不同 ，绘制的规范和技法也有较大的差异 ，所以学习图标设计的第一件事就是先理解和区分图标的种类 ，然后再根据图标的类型学习它们的规范和技法。
UI设计可以将图标划分成三个大类 ，启动图标 、工具图标 、装饰图标。
启动图标就是用于在系统界面中辨识应用的图标，是启动应用的按钮 。不同系统的启动图标差异较大 ，但基本都包含背景区域和图标主体两个部分 ，图标主体的形态和风格各异 ，可以是产品的LOGO ，也可以是普通图标 、摄影素材 、真人照片 、特殊字体等 。
工具图标就是应用内最普通的用来传递信息的图标 ，比如播放 、关闭 、收藏 、点赞、通知等图标 ，一般样式都很简单，主要使用线性或面性的设计 。
装饰图标则是用于提升页面视觉效果的图标类型 ，会使用较为复杂的视觉效果，包括但不限于毛玻璃、3D 、实物 、插画、拟物等等。
学习图标设计肯定也要遵循先易后难的规律 ，所以我们要先从工具图标开始学起 ，再深入装饰和应用图标 ，而工具图标设计也是作为UI设计师必须要掌握的技能 。
很多新人可能会有疑问，现在市面上有非常多成熟的图标库可以使用，甚至可以用AI生图 ，为什么我们还要学图标设计，直接用素材和AI不好吗 ？
这就是一个非常值得注意并理解的问题 ！
首先不同应用内使用的工具图标数量和类型各不相同 ，而外部图标库很难正好满足所有图标使用的需要 ，且成熟图标库被引用的次数很多 ，很容易被识别 ，缺乏个性，无法满足个性化 、品牌化的设计需求。
第二点关于AI生图 ，如果你们真的有深度使用就会明白它们确实越来越强大 ，能生成越来越复杂的图标和图形。但是……最简单 、基础的图标反而生成得不好，完全不能落地 。并且无法生成我们需要的矢量格式 ，无法应用到交付和开发环境中。
在真实项目环境中，必然会高频出现图标设计的需求 ，而素材和AI都无法100%满足这些需求 ，所以我们必须具备这项技能 ，以应对复杂且多变的真实工作环境 。
三 、工具图标规范
了解工具图标设计规范之前，我们要先做个声明 ，那就是工具图标规范和启动图标规范不同 ，不是一种强制的约束和限制 ，而是一种 “建议”，不同系统和框架会有自己的工具图标设计规范，没有绝对的标准 。
但因为AndROId的Material Design中对工具图标的规范描述最详细，所以它的规范也是接受程度最高应用最广泛的 ，下面我们也以它的标准为基础展开说明 。
1. 图标的画布和格线
图标的画布尺寸 ：24 ，12 - 48
设置逻辑：24是图标最通用的尺寸 ，但不代表界面只能使用这个尺寸展开设计。每套项目可能都包含多种尺寸的工具图标规范 ，可以从12-48之间以4的倍数选择合理的尺寸 。
图标的内间距/出血线：1-4
设置逻辑：内间距的设置是为图标图形预留一些空间，防止图形过度饱满失衡（就像田字格写字不会撑满） 。24的图标使用2的内间距 ，比它小的使用1 ，比它大的使用3和4 。
图标的格线系统 ：由圆、正方形 、垂直矩形 、水平矩形组成
设置逻辑 ：在24的图标中 ，圆使用和内容区域一样的尺寸20 ，矩形尺寸比圆小使用18 ，垂直矩形宽高为16/20 ，水平矩形的宽高为20/16，绘制示例如下 。不同尺寸的画布格线可以依据这个逻辑创建 。
格线系统是图标绘制的重要依据 ，绘制同类图形就可以直接套用格线图形的尺寸。如果使用其它图形 ，也会根据格线系统来判断比例是否合适（需要一定经验） 。
2. 图标的图形参数
线性图标的描边大小 ：1 、1.25、1.5、1.75 、2
应用逻辑 ：在线性风格的图标设计中 ，描边的大小是可以使用非整数的 ，整数的应用往往不是太粗就是太细 ，所以我们可以使用 0.25 作为跳板来设置。
线性图标的描边位置：居中描边
应用逻辑：描边包含外 、中 、内三种设置，但内、外描边只能应用于闭合路径 ，而图标设计会经常创建非闭合路径 ，所以全局统一居中描边是更合理的选择。
图标的外圆角尺寸 ：0.5-4
应用逻辑 ：如果图形要使用圆润的边角 ，那么这个圆角的尺寸可以以0.5 为一档递进或递减，要确保圆角尺寸的统一 。
图标的内圆角尺寸：0-0.5
应用逻辑 ：图标内侧的边角，可以直接使用锐角，如果觉得不够和谐那么最多添加0.5的圆角，不能和外部使用相同的圆角 。
面性图标的镂空线条 ：1-4
应用逻辑 ：镂空线条看起来像反向描边 ，但它和轮廓描边的特性还是不同 ，比如需要居中或者容易看起来显小，所以可以直接以1到4的整数进行设置。
结尾
工具图标的分享就先做到这里 ，后面还会增加启动图标的规范说明 ，有其它的问题也可以发出来，我们会在后续的多图动态版本里补充上去。
作者 ：超人的电话亭
