先把工具箱装满：网页设计师常用软件全景图
先把工具箱装满：网页设计师常用软件全景图
上一篇我把网页设计拆成视觉、交互、前端三块地界，然后就卡在一个特别现实的问题上：知道该干什么了，可到底装哪个软件？ 打开搜索框一查，Figma、Sketch、Adobe XD、Photoshop、Illustrator、VS Code、Cursor、WebStorm……名字多到让人怀疑这行是不是靠装机入门。这篇就是我把这些工具按住分类、只留必需项之后的结论：真正撑起日常工作的只有三个软件，其余的都有明确的"什么时候才需要"。先装对，再谈学，能省掉大量在软件之间来回横跳的时间。
别按软件分类，按"活"分类
新手最容易犯的错是"先把热门软件全装上"。我试过，结果是每个都只会点开新建，每个都学不深。正确的顺序是反过来：先列出你每天要干的活，再给每类活配一个主力。
| 你要干的活 | 主力工具 | 什么时候才需要换/加 |
|---|---|---|
| 画界面、搭组件、定规范 | Figma | 团队要私有化部署 → Penpot |
| 修图、合成、处理位图素材 | Photoshop | 只是裁图压图 → Squoosh / TinyPNG 就够 |
| 画 Logo、图标、插画（矢量） | Illustrator | 预算有限 → Inkscape；要买断 → Affinity Designer |
| 写 HTML / CSS / JS | VS Code | 想要 AI 补全 → Cursor |
| 查布局、查性能、查接口 | Chrome DevTools | 无（浏览器自带，必装） |
| 交付标注、切图 | Figma 自带 + 蓝湖/Zeplin | 小项目直接 Figma 分享链接即可 |
看这张表会发现一件事："设计"和"实现"两头各有一个绝对主力（Figma、VS Code），中间夹一个"素材处理"的 Photoshop。 这三个装完，一个完整的网页从想法到上线就不缺工具了。剩下的软件不是不重要，是还不该在你现在的阶段出现——提前装，多半只会变成桌面上的图标。
最小可用工具箱：三个软件，一小时装完
第一步，Figma。 直接用浏览器打开 figma.com 注册，或者下载桌面端（macOS / Windows 都有，桌面端启动更快、能读本地字体）。装完先做三件事：
- 新建一个 Design file，按
F拉一个 Frame（画板），右侧预设直接选Desktop 1440 × 1024； - 打开插件面板（
Shift + I是快捷搜索），装两个：Contrast（量文字对比度）、Unsplash（直接拖免费图进画板）； - 如果网页版里看不到「苹方」「思源黑体」这类本地字体，装一下 Figma Font Helper（macOS 新版叫 Figma Agent），它负责让浏览器版读到系统字体。
第二步，Photoshop。 新建文档时这几个参数别填错，否则后面全乱：
宽度：1440 px（桌面稿基准）
高度：按内容，先给 3000 px 慢慢往下拉
分辨率：72 像素/英寸（屏幕稿不需要 300）
颜色模式：RGB 颜色、8 位/通道
色彩配置文件：sRGB IEC61966-2.1
色彩配置文件这一项是重点。 默认如果是 CMYK 或者 Adobe RGB，你导出的图在别人浏览器里一定偏色。网页只认 sRGB，从新建那一刻就锁死它。
第三步，VS Code。 官网免费下载，macOS / Windows / Linux 全平台，装完先配四样：简体中文语言包（命令面板 Cmd/Ctrl + Shift + P → 输入 display language）、Live Server（本地起服务，默认 5500 端口）、Prettier（保存自动格式化）、Image preview（在代码里直接看图片缩略图）。然后打开设置加一行：
{ "editor.formatOnSave": true, "editor.fontSize": 14, "editor.tabSize": 2 }
写前端用 2 空格缩进是社区惯例，一开始就定好，别等文件写长了再改。
每个软件只学 20%：够用的功能清单
这三个软件的功能都多到离谱，但网页设计真正用到的部分很窄。我给自己划了"够用线"，学会这些就能干活：
Figma 只学五个概念——Frame（画板，一切容器）、Auto Layout（Shift + A，自动排布与间距）、Component（组件，Cmd/Ctrl + Option + K）、Style（颜色/文字样式）、Export（导出，Cmd/Ctrl + Shift + E）。再加两个高频动作：按住 Option/Alt 拖拽是复制，Cmd/Ctrl + D 是再复制一次。这七个东西能覆盖我 90% 的画稿时间。
Photoshop 只学五件事——裁剪与缩放（C）、色阶/曲线（Cmd/Ctrl + L、Cmd/Ctrl + M）、污点修复画笔（J）、图层蒙版（图层面板底部第三个按钮）、导出（文件 > 导出 > 导出为，勾选"转换为 sRGB"，缩放选 2x 做 Retina）。网页里 PS 的核心角色是素材加工厂，不是排版工具——别在 PS 里画界面，那是在用扳手拧螺丝。
VS Code 只学五个操作——命令面板（Cmd/Ctrl + Shift + P，万能入口）、多光标（Option/Alt + 点击，或 Cmd/Ctrl + D 选同词）、全局搜索（Cmd/Ctrl + Shift + F，支持正则）、内置终端（Ctrl + `）、快速打开文件（Cmd/Ctrl + P）。这五个练熟，写代码的速度感会明显不一样。
别装太多：插件的边际效益会变负
这条是我踩出来的。VS Code 插件装到二十几个的时候，启动要等三秒，右键菜单长得找不到东西，而且每次更新都可能互相打架。我现在的原则是：同时启用的插件不超过 8 个，其余用完就禁用（右键插件 → Disable，不是卸载，随时能开回来）。
Figma 插件同理。Contrast、Unsplash、Content Reel（批量填假数据）这三个够用，剩下的按项目临时搜——Figma 插件是"用完即走"的东西，装一屏只会让你每次找插件多花十秒。
Photoshop 的动作（Action）和画笔包更是个无底洞。真正值得存的只有两类：批量导出和批量改尺寸，其他都属于"装的时候很爽，用的时候想不起来"。
五个高频坑，以及怎么排查
| 症状 | 多半是 | 怎么查 |
|---|---|---|
| Figma 里字体变方框 / 提示缺失 | 设计稿用了本机没装的字体 | 换思源黑体/Inter 这类通用字体；或让协作者导出字体包 |
| 导出图在浏览器里偏色、发灰 | 文档色彩模式是 CMYK 或 Adobe RGB | 新建时就锁 sRGB；导出时勾"转换为 sRGB" |
| 一张 banner 导出来 3MB | 按 300ppi 或原图尺寸直出 | 按显示宽度 2 倍导出，存 WebP（PS 里"存储为 Web 所用格式(旧版)"可选 WebP） |
| VS Code 里中文注释乱码 | 文件编码不是 UTF-8 | 右下角状态栏点编码 → Save with Encoding → UTF-8 |
| 保存后浏览器没变化 | 直接双击打开了 file:// 页面 |
用 Live Server 起 http://localhost:5500，或用 DevTools 勾 Disable cache |
还有一条隐蔽的：Figma 在 Retina 屏上导出的 1x 图，放进网页会糊。因为 1x 是按 CSS 像素算的，物理屏幕上要 2 倍像素才清晰。规则很简单——导出尺寸 = 显示尺寸 × 2，然后在 CSS 里把宽高写回显示尺寸。
我的一条完整链路
现在我做一篇文章配图或一个落地页，流程固定是这样：
① Figma 里定 Frame（1440 或 390）→ 画结构 → Auto Layout 排间距（8 的倍数）
② 需要照片就去 Unsplash 插件拖，需要合成就在 Photoshop 里修 → 导出 2x WebP
③ VS Code 里写 HTML/CSS → Live Server 预览 → DevTools 切设备模拟器验断点
④ 交付：Figma 直接给分享链接（权限设 can view），要切图就用 Export 面板批量导
这条链路里没有一步需要第四个软件。这也是我想说的核心：工具箱的意义不是"什么都有"，而是"每一步都知道该打开哪个"。软件是手，脑子里的判断才是本事——下一篇开始，我就正式进入"审美与规范"这块，从最基础的色彩讲起。
🛠 本篇要用到的软件
- Figma：本篇主力。用来画界面稿、搭 Auto Layout、做组件与样式、导出 2x 切图，并承载
Contrast、Unsplash这类插件。支持 macOS、Windows，也有浏览器版（Chrome/Edge/Safari），iPad 有独立 App。免费版（Starter）个人学习够用，但对团队协作文件数量有额度限制，付费版按编辑者席位按月/按年订阅，具体价格以官网为准。免费替代：Penpot（开源，可自建，浏览器直接用，交互逻辑最接近 Figma）、即时设计（国内产品，个人免费额度较宽）。 - Photoshop：用来做素材加工——修图、合成、调色、裁切、批量导出 WebP/PNG。支持 macOS、Windows（iPad 版功能不全，不建议做网页素材）。Adobe 订阅制，单应用计划和摄影计划价格不同，且随地区与促销浮动，以 Adobe 官网为准。免费替代：Photopea（网页版，界面和快捷键高度接近 PS，能开 PSD，免费但有广告）、GIMP（开源免费，学习曲线陡）、Affinity Photo（非免费，但是买断制，无订阅）。
- VS Code：用来写 HTML/CSS/JS、跑本地预览、管 Git。Windows、macOS、Linux 全平台，完全免费（微软开源，MIT 许可）。免费替代：VSCodium（去掉微软遥测的社区编译版）、Sublime Text（可长期免费试用）、Cursor（AI 补全更强，但付费）。
- Chrome DevTools（补充，浏览器自带）：用来量实际间距、切设备模拟器验证响应式、看网络请求和性能。内置于 Google Chrome，macOS / Windows / Linux 全支持，完全免费。免费替代：Firefox DevTools、Safari Web Inspector。
- Squoosh / TinyPNG（补充，网页工具）：只做图片压缩时用它们，比开 PS 快得多，都不需要安装、免费。
下一篇预告
下一篇：色彩基础：色相、明度、饱和度与配色方案