野川社：平面基础视觉设计课（完结）

这门课的名字是「平面基础视觉设计课」，但它的内容对前端开发者同样有直接价值。日常工作中遇到的间距不统一、层级混乱、配色扎眼、界面「能跑但不好看」等问题，本质上是视觉设计的基础功没打牢。野川社这套课把版式、色彩、空间这几块拆开讲，又配了大量可操作的案例，适合拿来做对照练习，而不是单纯看一遍就过。

技术栈与内容定位

课程本身不绑定某个具体软件版本，讲的是设计的通用规则：版式中的对齐、分组、留白与视觉动线；色彩中的色相、明度、饱和度关系，以及如何用有限的色板维持界面的一致性；空间部分则涉及层次、透视与视觉重量的分配。这些概念放到 Web 与移动端界面里同样成立，CSS 里的 spacing scale、color token、z-index 分层，背后对应的就是同一套判断标准。把它当成「设计基础 + 视觉判断力训练」来看，比当成软件操作课更准确。

课程按课次推进，前面几课打基础，中后段进入综合案例，作业包按课次分开，说明每节课都有对应的动手产出。这种结构的好处是：你可以只挑自己薄弱的那一块补，比如版式弱就先做前几课的排版练习，色彩弱就集中刷配色相关的几课，不必从头到尾线性看完。

项目结构：作业包怎么用

作业包按课次独立打包，体积差异明显——有的只有几 MB，有的接近 160 MB，这通常意味着后者的案例素材更重，可能是多图层、多画板或者带完整参考图的综合稿。对开发者来说，比较实用的做法是：

• 先解压体积小的几课，快速过一遍基础概念与简单练习，判断课程节奏是否适合自己；
• 再打开体积大的综合课，重点看图层组织、命名习惯和分组逻辑——这部分和前端组件拆分、目录结构的思路是相通的；
• 把每个作业当成一次「还原练习」：不照抄参数，而是先自己排一版，再对照源文件找差异，记录下自己判断失误的地方，比如字号层级拉不开、留白给得太平均。

这种「先做后比」的方式，比跟着视频一步步点要慢，但留下的判断经验更牢。

可复用模块与工程视角

课程里反复出现的几个模块值得单独抽出来复用：一是版式网格，一旦确定栏宽与间距规则，页面里大部分内容块的排布都能套用；二是色彩关系，主色、辅助色、中性色的比例控制，直接对应设计系统里的 token 划分；三是空间层级，用大小、明暗、疏密来区分信息优先级，对应到前端就是视觉层级的 CSS 实现。把这三点整理成自己的检查清单，每次做完界面过一遍，比记零散技巧有用得多。

自学路径建议

如果目标是提升界面完成度，可以这样安排：先用前几课把版式规则过一遍，同时拿自己手上的项目做对照，找出间距和对齐上的问题；接着集中处理色彩，建立一套自己能复用的色板；最后用综合案例检验，重点看信息层级是否清晰、空间是否透气。作业包不必全部做完，挑两到三个有代表性的完整做一遍，比每个都浅尝辄止效果好。整套资料的价值在于提供可对照的源文件和判断标准，配合自己的实际项目反复比对，才能把课里的规则变成手上的习惯。