网页设计的三大版图：视觉设计、交互设计、前端实现

前两篇我搞清楚了网页是怎么被渲染出来的，但心里一直有个更基础的疙瘩没解开："网页设计"这四个字到底包含哪些活？ 我一开始以为它就是"把页面画好看"，直到自己动手做一个页面才发现，好看只是三分之一，剩下的三分之二分别是"用起来顺不顺"和"能不能真的跑起来"。这篇就是我把这三块地界划清楚的笔记：每一块管什么、交付什么、各自的坑在哪、以及在哪儿交接最容易出事。搞清楚这个分工，最大的好处是你卡住的时候知道自己该换哪副脑子。

先画一张地图：三个角色，三种问题

我先用思维导图把这层关系摊平。中心节点写"网页设计"，往下拉三条主分支：视觉设计（Visual Design）、交互设计（Interaction Design，也叫 IXD）、前端实现（Front-end Implementation）。每条分支再挂三个子节点——解决什么问题、产出什么、验收看什么。

这一步在 XMind 里做，十分钟就够：

1. 新建空白图，中心主题打「网页设计」；
2. 按 Tab 建子主题，连打三个，Enter 回车继续建同级；
3. 选中子主题按 Tab 再建下一层，把"问题 / 产出 / 验收"填进去；
4. 最后用「联系线」把三个子主题之间的交接关系连起来（比如视觉 → 前端写"设计规范与切图"）。

画完我得到一个很朴素的对照表，比任何教材的定义都好记：

版图	回答的问题	主要产出	验收看什么
视觉设计	看着对不对、像不像这个品牌	高保真视觉稿、色彩与字体规范、图标与插画	层级是否清楚、对比是否够、间距是否成体系
交互设计	用起来顺不顺、下一步该点哪	流程图、线框图、原型、状态清单	任务能不能走通、出错有没有提示、能不能撤销
前端实现	能不能真的跑起来、跑得快不快	可运行的 HTML/CSS/JS、组件、响应式适配	多端是否一致、是否可访问、性能指标是否达标

这张表也解释了一个常见困惑：为什么"设计稿很漂亮，上线后就是不对劲"。因为漂亮只是第一列过关，第二列和第三列没人负责。

视觉设计：解决"看着对不对"

视觉设计管的是感知层：颜色、字体、留白、层级、图形语言。它的核心任务不是"好看"，而是让信息的轻重缓急在第一眼就能被读出来。

我在 Figma 里练这一块时，落到具体参数上是这样的：

画板宽度：1440px（桌面）/ 390px（手机）
栅格：12 列，列宽 72px，沟槽 24px，左右边距 80px（1440 宽下）
正文：16px / 行高 1.6（中文建议 1.7-1.8）
小标题：20-24px，行高 1.4
大标题：32-48px，字重 Bold，字间距 -0.5% 到 -1%
层级手段：字号差 ≥ 1.25 倍，或字重差 ≥ 200，或颜色差 ≥ 2 个明度阶
间距：8 的倍数（8 / 16 / 24 / 32 / 48 / 64）

这些数字不是圣旨，但成体系比精确重要。新手最典型的毛病是"每个间距都手调"——这里 13px、那里 18px，看着差不多，整体就是散的。在 Figma 里用 Auto Layout 的间距输入框，加上 8 的倍数，一致性会自动长出来。

视觉这块的两个硬性红线我记下来了：

• 对比度：正文与背景的对比度至少 4.5:1，大字（≥ 24px 常规或 ≥ 18.66px 粗体）可以放宽到 3:1。浅灰字压在白底上是我见过最高频的翻车点，"设计师的显示器"看着没问题，别人的笔记本上就是一片糊。在 Figma 里选中文字和背景，用插件「Contrast」或「Stark」直接量，不用自己算。
• 不要用颜色单独承载信息：报错只靠红色文字、状态只靠绿点，色弱用户直接失去信息。正确做法是颜色 + 图标 + 文字三选二。

视觉稿的交付物不只是那几张画板，还包括能不能被复用：颜色样式（Color Styles）、文字样式（Text Styles）、组件（Component）。这一步偷懒，后面全组人都会替你还债。

交互设计：解决"用起来顺不顺"

交互设计管的是行为层：用户从哪进来、走哪条路、每点一下发生什么、出错怎么办。它最容易被忽略，因为它的产出看起来最不像"设计"——一堆灰线框和箭头，外行看了会问"这就完了？"

我现在做任何一个稍微复杂的页面，都会先强制自己列一张状态清单。这张清单救过我很多次：

状态	要回答的问题	新手最容易漏的
默认 Default	空着的时候长什么样	只有正常态，没有初始态
悬停 Hover	鼠标移上去有没有反馈	桌面端完全不做
按下 Active	点下去有没有"被按到"的感觉	点了没反应，用户以为没点上
聚焦 Focus	键盘 Tab 能不能走到、看得见吗	直接 outline: none 抹掉
禁用 Disabled	为什么不能点、怎么才能解锁	灰掉但不解释
加载 Loading	等待时用户看什么	白屏干等 / 按钮能被连点两次
空状态 Empty	没数据时说什么、引导做什么	一片空白
错误 Error	错在哪、怎么改、会不会丢数据	只弹一句"操作失败"

八个状态，一个按钮就有八张图。听起来夸张，但这正是"看起来能用"和"用起来放心"的差距。Figma 里做这件事不用画八遍：把按钮做成组件（Component），用变体（Variant）把八个状态收进一个组件集，属性名就叫 state=default/hover/active/...，切换时在右侧属性面板下拉选，一秒钟看全。

交互设计的另外两件常被跳过的事：

• 流程要画到"出错"为止，不是画到"成功"为止。注册流程我能画得很顺，但"验证码收不到""手机号已注册"这两条岔路，往往才是用户真正卡住的地方。
• 给用户退路。删除能不能撤销、表单填错能不能返回上一步、弹窗能不能按 Esc 关掉。这三条不需要任何技术含量，但体验差距巨大。

前端实现：解决"能不能真的跑起来"

前端实现管的是工程层：语义结构、布局、响应式、性能、无障碍。它的输入是设计稿，输出是浏览器里真能点的东西。这一块我踩过的坑最具体，因为浏览器不像 Figma——Figma 里拖多宽就多宽，浏览器里你得告诉它"在什么条件下多宽"。

三个最常打架的地方：

第一，文字的"呼吸感"在代码里会缩水。 设计稿里正文 16px、行高 1.6，写进 CSS 是对的；但中文段落的行高建议拉到 1.7-1.8，因为汉字是方块字、没有西文的升降部留白。我在 Halo 博客的正文样式里就吃过这个亏，最后改成：

.post-content p {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.01em;
  margin-bottom: 1.2em;
}

第二，间距在响应式下要重新分配。 桌面端左右各 80px 边距搬到 390px 手机上，只剩 230px 内容宽度，惨不忍睹。惯例是把边距按断点降级：

.container { padding-inline: 80px; }        /* ≥1200px */
@media (max-width: 1024px) { .container { padding-inline: 40px; } }
@media (max-width: 640px)  { .container { padding-inline: 20px; } }

第三，图片和字体会拖慢首屏。 视觉稿里一张 3000px 宽的大图直接扔上线，手机上要下好几 MB。图片按显示尺寸的 2 倍导出（Retina 够用），存 WebP；字体只加载用到的字重，中文字体尤其要小心——一个完整的中文字库动辄 5-10MB，不做子集化等于慢性自杀。

前端还有一条视觉和交互都不管的红线：语义与可访问性。<div onclick> 键盘走不到、读屏读不出，而 <button> 天生带焦点和回车支持。这不是洁癖，是成本最低的正确做法。

三个版图在哪儿交接，就在哪儿出事

我把踩过的翻车点按交接位置归了类，这张表比任何流程图都实用：

交接点	典型事故	预防办法
视觉 → 交互	稿子漂亮但流程走不通，按钮点下去不知道去哪	先画线框定流程，再上视觉；不要一上来就上色
交互 → 视觉	八个状态只画了一个，剩下七个靠前端"猜"	组件做成变体集，状态在稿子里就能切
视觉 → 前端	间距 13px、15px 到处飞，前端只能逐个量	全稿走 8 的倍数，间距用 Auto Layout 而不是手拖
交互 → 前端	加载、空、错误三种状态没设计，前端自己发挥	状态清单直接当验收单，缺一个不算完成
前端 → 视觉	字体渲染、行高和设计稿差一截，被要求"再调调"	提前约定可用字重和字号，中文行高按 1.7-1.8 起算

还有一条经验：一个人可以兼任三个角色，但不能同时用三副脑子。我自己做页面时最有效的办法是分三轮走——第一轮只画线框和流程（交互脑），第二轮只调颜色字体间距（视觉脑），第三轮只写代码（工程脑）。混着做，一定会在"这个按钮到底要不要加阴影"上纠结半小时，而流程其实还缺一个错误态。

顺带一句：判断自己现在站在哪块地上，有个很简单的测试——你在纠结"好不好看"，是视觉；纠结"顺不顺"，是交互；纠结"能不能跑"，是前端。 纠结错了对象，努力方向就全歪了。

🛠 本篇要用到的软件

• Figma：本篇的主力。用来画高保真视觉稿、搭 12 列栅格、把按钮做成组件与变体集（Variant）来收纳八个交互状态、导出切图，并用 Contrast / Stark 插件量对比度。支持 macOS、Windows，也有浏览器版（Chrome/Edge/Safari），iPad 有独立 App。免费版（Starter）个人学习完全够用，团队协作的文件数量和版本历史有额度限制，专业版按人月订阅。免费替代：Penpot（开源、可自建、浏览器里用，最接近 Figma 的一款）、即时设计（国内产品，个人免费额度较宽）。
• XMind：用来画本篇开头那张"三大版图"思维导图，梳理每个角色的问题 / 产出 / 验收，以及角色之间的交接线。支持 macOS、Windows、iOS、Android，另有网页版。基础功能免费，导出 PDF/Word、部分高级模板需要订阅。免费替代：draw.io（完全免费、开源，流程图和导图都能画）、幕布（大纲式笔记，一键转思维导图，基础功能免费）、Obsidian 的 Canvas（本地、免费）。
• Chrome DevTools：用来验证"前端实现"这一列到底过没过——量实际间距、切设备模拟器看响应式断点、用 Lighthouse 面板看性能与可访问性评分。内置于 Google Chrome，macOS / Windows / Linux 全支持，完全免费。免费替代：Firefox DevTools、Safari Web Inspector（macOS 自带）。

下一篇预告

下一篇：先把工具箱装满：网页设计师常用软件全景图