手里有一个个人网站，想把它做得好看一点，结果打开教程发现：有人让你先学 Photoshop，有人让你先学 HTML，有人说现在都用 Figma 了，还有人劝你直接抄模板。学了两周，画画改改，最后网站还是那个样子。

这篇是「网页设计」栏目的第一篇，也是整个系列的路线图。它不解决某一个具体问题，而是回答一个更前置的问题：从零到能独立做出一个像样的网页，到底该按什么顺序学、每一步用什么软件。

一、先分清：网页设计到底在学什么

新手最大的坑，是把「网页设计」当成一件事。其实它是三件事叠在一起，各自要练的手艺完全不同。

视觉设计解决「好不好看」：色彩、字体、间距、层级、留白。你打开一个网站觉得舒服，八成是这些基本功在起作用。

交互设计解决「好不好用」：用户从哪进来、点哪里、点完发生什么、卡住了怎么退回。这一层靠的是逻辑和同理心，不是美术功底。

前端实现解决「怎么变成真的」：把设计稿写成浏览器认识的代码，让它真的能点、能滚、能在手机上正常显示。

三件事的交界处，才是「网页设计师」这个身份。你可以偏视觉，也可以偏实现，但完全不懂另外两块，作品就会露怯——设计稿再漂亮，切出来一塌糊涂；代码写得再溜，界面还是丑。

所以这个栏目会按 认知 → 工具 → 实现 → 体系 → 高深 五段推进，中间不跳级。

二、五个阶段，一张路线图

阶段	目标	核心内容	主要软件
一·认知入门	建立审美和规则感	浏览器原理、色彩、字体、四原则、图片	Figma、Chrome DevTools
二·工具实操	能画出规范的设计稿	Figma 组件/自动布局、修图、矢量、栅格、交付	Figma、Photoshop、Illustrator
三·前端实现	能把设计稿做成真页面	HTML/CSS 布局、响应式、动效、Git、调试	VS Code、Chrome DevTools、Git
四·进阶体系	能支撑一整个项目	设计系统、无障碍、动效、UX、后台界面	Figma、Storybook、Rive
五·高深专题	能做别人做不出的效果	WebGL、滚动叙事、AI 辅助、工程化、性能	Three.js、GSAP、Vite

下面把每一段说清楚，包括它为什么必须排在这个位置。

三、阶段一：认知入门（先把眼睛和脑子练出来）

这一段不产出作品，但决定你后面能走多远。

为什么先学「浏览器怎么渲染页面」？因为你以后所有的调试、性能优化、布局困惑，答案都在这个流程里——HTML 是骨架，CSS 是皮肤，JS 是神经。不知道这层关系，你写代码就永远是「试出来的」。

为什么先学色彩和字体，而不是先学软件？因为软件是工具，配色和排版才是能力。Figma 的操作两天就熟了，但「为什么这个页面看起来高级」可能要练两年。新手最容易犯的错，是把大量时间花在记快捷键上，审美却停在原地。

这一段的练习方式很朴素：每天找 3 个你认为好看的网站，截图，然后问自己三个问题——它的主色是什么、标题和正文的字号差多少、元素之间的间距是不是有节奏。看一百个网站并且分析，比做十个练习稿有用。

四、阶段二：工具实操（把想法变成规范的设计稿）

到这里再动软件，顺序也有讲究。

Figma 是主线。它现在几乎是网页和产品设计的行业标准：免费版够用、浏览器里就能跑、多人协作不用来回传文件。重点是三件事——画板与图层组织、组件与变体（Component / Variant）、自动布局（Auto Layout）。自动布局尤其关键，它决定了你的设计稿能不能自适应内容变化，而不是每次改文字就要手动挪位置。

Photoshop 是辅助，不是主线。它在网页设计里主要负责位图处理：修图、抠图、合成、做背景氛围。千万别用它画整站界面，效率低且尺寸管理混乱。

Illustrator 负责矢量：Logo、图标、插画、需要无限放大的图形。图标系统的统一性是这一段最重要的产出——同一套图标里的线条粗细、圆角、视觉重心必须一致，否则界面会显得廉价。

这一段结束时的检验标准：给你一个内容需求，你能在 2 小时内产出一份带完整组件库、符合 12 列栅格、标注齐全的桌面+移动双端设计稿。

五、阶段三：前端实现（让稿子变成真的）

这是最容易劝退、但也最有成就感的一段。

不要一上来学框架（Vue / React），那是后面的故事。先把地基打牢：

• HTML 语义化：用对标签，不只是为了规范，它直接影响无障碍、SEO 和可维护性。
• CSS 盒模型与文档流：90% 的布局问题，根源是没搞懂这条规则。
• Flexbox 与 Grid：现代布局就这两把刀。Flexbox 管一维（一行或一列），Grid 管二维（同时管行列），搞清楚分工，布局问题基本消失。
• 响应式与媒体查询：网页设计和平面设计的根本区别就在这里——你的画布尺寸是变的。
• Chrome DevTools：你的第二个大脑。调布局、看网络、测性能全靠它。

写完第一个「像素级还原自己设计稿」的页面时，你会明显感觉到两个身份合体了。

六、阶段四、五：体系化与高深专题

阶段四解决的是「一个人能干活」到「一整个项目能撑住」的跨越：设计系统、组件库、无障碍标准、微交互分寸、后台高密度界面、协作评审。

阶段五偏专题，属于「做出差异化的东西」：WebGL 3D 网页、滚动叙事、创意编码、AI 辅助设计、现代 CSS 新特性、工程化与 Core Web Vitals 精调。这些不是必需项，但它们决定你的作品集能不能让人多停留三秒。

七、软件清单：先装这 5 个就够

软件	干什么	平台	价格	免费替代
Figma	界面设计、组件库、原型	浏览器 / Win / Mac	个人免费	Penpot（开源）
VS Code	写代码的唯一主力	Win / Mac / Linux	免费	WebStorm（学生免费）
Chrome DevTools	调试布局、性能、网络	浏览器内置	免费	Firefox DevTools
Photoshop	位图处理、合成、修图	Win / Mac	订阅制	Photopea（网页版）、GIMP
Illustrator	矢量图、Logo、图标	Win / Mac	订阅制	Inkscape、Affinity Designer

进阶再按需加：After Effects + LottieFiles（动效）、Blender + Three.js（3D）、Eagle（素材管理）、Squoosh / TinyPNG（图片压缩）、蓝湖或 Zeplin（交付协作）、Git + GitHub（版本管理）。

一个省钱建议：先用免费替代跑通全程，等真的卡在功能限制上再付费。学生身份别忘了申请教育优惠，Adobe、JetBrains、Figma 都有。

八、怎么学：每天 30 分钟的节奏

• 每天 10 分钟「看与拆」：找 2 个网站，拆配色、拆排版、拆间距。
• 每天 20 分钟「做」：按当天主题做一个最小练习，不要贪大。
• 每周一次「合」：把这一周学的拼进你自己的网站/作品集里。
• 每月一次「复盘」：回看一个月前的稿子，能挑出毛病就说明进步了。

🛠 本篇要用到的软件

• Figma（浏览器 / Win / Mac，个人版免费）：本篇路线图里担任主线设计工具，看别人的网站时也可以用它描一遍结构。免费替代：Penpot。
• VS Code（Win / Mac / Linux，免费）：从阶段三开始的主力编辑器，装好 Live Server 和 Prettier 两个插件。
• Google Chrome（全平台，免费）：自带 DevTools，后面调试全靠它。建议再装个标签页管理插件，你的参考网站会越来越多。
• XMind 或任意思维导图工具（免费版够用）：用来画学习路线和网站信息架构。

下一篇预告

下一篇讲《网页是怎么到你眼前的：从 HTML 到浏览器渲染》——把「输入网址→按下回车→看到页面」中间发生的事拆开讲一遍。理解了这条链路，后面所有的布局、性能、调试问题都会变得有迹可循。

这个栏目每天更新一篇，按上面的路线图从最基础一路推到高深专题。如果跟着练，建议从今天开始把你的手头项目当成练习场，不要另开一个「练习文件」——真项目才会逼你解决真问题。