【吴刚大讲堂】UI线框图标设计零基础入门标准教程

这门课解决什么工作场景

UI 设计在界面落地时，往往面临一个尴尬环节：视觉稿定稿后，图标资源不够用，或者需要一套风格统一、尺寸规范的图标库。很多初学者只会用现成素材，一旦业务提出定制需求，就无从下手。这门课聚焦于 UI 线框图标设计，核心解决的是「从空白画布到成套图标」的产出问题。它不教你做完整的 App 界面，而是专攻图标这一细分领域，重点训练你对网格、线条粗细、视觉重心和圆角规范的把控能力。

适合人群包括：零基础转行 UI 设计的新人、需要提升图标绘制效率的初级设计师，以及产品经理或运营人员希望具备基础图标绘制能力以辅助沟通的群体。课程强调规范先行，这意味着你学完后不是随便画几个图形，而是能遵循行业标准，产出可用于前端开发的矢量图标。

建议先看哪几块，学完能独立做什么

资料结构清晰，建议按以下顺序切入：首先看基础理论部分，理解图标的设计原则、网格系统和常用工具的基本操作，这是后续练习的根基；接着进入线条图标专项练习，掌握单一线条的粗细变化与转折处理；然后是填充图标部分，学习如何处理负空间和视觉平衡；最后是成套图标输出，模拟真实项目流程，完成一组风格统一的图标集。

学完本课后，你将能够独立使用矢量软件（如 Illustrator 或 Figma）绘制符合 UI 规范的线框图标。你可以独立完成一个小型项目的图标设计任务，例如为网页或 App 设计一套 24×24 或 32×32 像素的标准图标集，并确保其在不同尺寸下的清晰度与一致性。更重要的是，你将建立起「设计前先建网格、绘制中重规范、完成后做校验」的工作习惯，这是职业设计师的基本素养。

资料怎么配合练习

本课程的配套资料包含课件、源文件和练习素材。建议你边看视频边动手，不要只看不练。每个知识点后通常配有练习题，务必对照源文件检查自己的作品，对比线条端点、转角圆润度、内部负空间是否一致。可以使用资料中提供的网格模板，强制自己养成对齐习惯。对于成套图标练习，尝试用不同配色或描边宽度重新绘制已有图标，测试自己对视觉权重的理解是否到位。通过反复比对与修正，才能真正内化设计规范，避免学完即忘。