网页UI项目管理规范

能力缺口：别把网页 UI 只当画图

很多转岗或自学的同学做网页界面时，习惯打开设计工具直接拖拽控件，画完几张漂亮的首页截图就交差。一旦进入真实项目，立刻暴露能力缺口：不知道企业站、门户站、活动页的版式约束完全不同，不清楚栅格、安全区、响应式断点该按什么标准定，交付的稿子前端拿到手根本没法还原。这门课不教你软件操作，也不讲色彩心理学，专门补的就是项目管理规范这一块。它解决的问题是：让你从能画图升级到按工程标准出图，知道每一步该交付什么、遵循什么规范、怎样和上下游对接。它的学习门槛很低，只要你已经能用设计工具独立排版，知道基础控件怎么画，就能看懂。但如果你连基本排版都没做过，建议先补软件操作再来。如果你每次接项目都靠临时找参考、凭感觉定尺寸，这门课就是给你补规矩的，缺什么补什么，别假装自己什么都懂。

学习顺序与资料配合练习

建议先看网站分类与构成元素这两块，别跳过。很多人觉得分类是废话，但实际做后台管理系统和做营销活动页，栅格密度、字号层级、组件复用要求差得很远，不先分清项目类型，后面定规范就是空谈。构成元素那节要重点记哪些是通用模块比如导航、表单、卡片，哪些是业务定制块，这是后续建组件库的基础。看完这两块，再进入设计步骤与规范的核心内容，重点抠尺寸、间距、命名、栅格这些硬性约定。资料包里的课后作业不是看完就扔，必须跟着从零搭一套页面框架，按课里讲的规范把图层整理好、标好尺寸再交付，自己模拟一次完整流程。练习时别只画首页，至少做一个列表页和一个详情页，把导航、表单、卡片这些通用元素都用到，这样才能检验规范是不是真的落地了，而不是看的时候觉得都懂，动手还是凭感觉。

看完应能回答的几个问题

• 拿到一个新项目，你怎么判断它属于哪类网站，对应的版式约束是什么？
• 一个标准网页设计稿交付时，必须包含哪些规范说明，前端才能无歧义还原？
• 图层结构、组件命名、间距取值，你按什么规则来定，能不能说出依据？
• 课后作业要求你按规范出一套页面，你能不能独立完成并写出设计说明？

把这几个问题答清楚，这门课的规范才算真正吃进去了。学完产出很明确：你能独立给一个小型网站项目写设计规范文档，明确栅格列数、断点划分、组件状态、图层命名规则，并说明为什么这么定。别只停留在看过视频的层面，动手做完才算你的能力。