功能图标设计的基本分类方式
在日常使用的App或网页中，功能图标无处不在。它们不只是装饰，更是用户快速理解操作的关键。根据用途和表现形式，功能图标大致可以分为几类：线性图标、面性图标、拟物图标、扁平图标和动态图标。
线性图标
线性图标以简洁的线条勾勒出图形轮廓，常用于工具类应用的操作按钮。比如微信聊天界面的‘发送语音’按钮，就是一个典型的线性麦克风图标。这类图标视觉轻盈，适合信息密度高的界面。
常见的线性图标多采用2px或1.5px的描边宽度，SVG格式是首选：
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 14C13.66 14 15 12.66 15 11V5C15 3.34 13.66 2 12 2C10.34 2 9 3.34 9 5V11C9 12.66 10.34 14 12 14Z" stroke="#000" stroke-width="2"/>
</svg>面性图标
面性图标用实心色块填充图形，视觉上更重，常用来强调重要功能。例如支付宝首页的‘扫一扫’红色背景图标，就是通过颜色和面积吸引点击。这类图标适合做主导航或核心功能入口。
在设计时，通常会统一圆角大小和内部负空间比例，保证整体协调。比如一组面性图标都使用4px圆角，图形容器保持24×24px尺寸。
拟物图标
拟物图标追求真实质感，带有阴影、高光和纹理。早期iOS系统大量使用这类设计，像日历图标上的纸张褶皱、相机镜头的金属反光。虽然现在用得少了，但在一些需要强识别的场景仍有价值，比如教育类App里的‘计算器’图标，做成真实设备模样更容易被孩子理解。
扁平图标
扁平化是目前主流趋势，去掉多余的渐变和立体效果，只保留最基本形状。Windows系统的开始菜单图标就是典型例子。这种风格加载快、适配性强，在不同分辨率屏幕上都能清晰显示。设计时讲究几何规整，比如用标准圆形、矩形组合成图形。
动态图标
随着交互需求提升，静态图标开始‘动起来’。比如下载完成时的对勾动画、网络刷新时的旋转箭头。这些微动效能即时反馈操作结果，减少用户疑惑。实现上常用Lottie或CSS动画控制：
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-icon {
animation: spin 1s linear infinite;
}选择哪种图标类型，取决于产品调性和使用场景。工具类产品偏向线性+扁平，追求效率；儿童应用可能更适合拟物+色彩丰富的设计。关键是要让图标一眼可辨，点下去就知道会发生什么。
实际工作中，设计师常会混合使用多种类型。比如主界面用扁平图标保持清爽，关键按钮加一点微动效提升引导性。归根结底，功能图标的核心不是好看，而是好用。