波仔
🕸️ 第二章 Web特有的架构
📄 一句话概括

一个网站不是一堆页面，是一组分工明确的人把手艺传下去的结果——教材把 Web 设计师和 UX 设计放在同一条里，就是要说清这个先后顺序。

📝 本节和前面几节的关系

2-1 讲了为什么要做网站（准与快的分工），这一条开始讲一个网站是怎么被做出来的。它是本章里最不技术的一条，但也是最容易被跳过、跳过之后代价最大的一条。

一、从一页纸到一个站

很多人的第一印象是：网站就是一堆页面。这个印象不算错，但一旦要动手就会立刻卡住——第 2 页要放什么，凭什么由你决定？

教材把 Web 设计师和 UX 设计并列在同一条，答案就在这个并列里：网站是由角色做出来的，每个角色回答一个不同的问题。问题之间是有顺序的，顺序错了就要返工。

二、两个角色，两种问法

UX 设计问的是【用户来这儿要办成什么事】：他从哪儿进来、要经过几步、哪一步最容易放弃。这一层的产出往往不是图，是流程和结构。

Web 设计师问的是【这件事摆在屏幕上长什么样】：什么最显眼、什么退到后面、字体和间距怎么排。这一层的产出是界面稿和组件库。

顺序不能反。先想清楚【用户怎么走通一件事】，再决定【页面长什么样】——反过来做，最后总会在项目后期推倒重来。

三、动手 Demo：把网站做出来的六类人

rows = [("UX 研究", 56), ("视觉设计", 64), ("前端实现", 152),
        ("后端实现", 96), ("内容与文案", 48), ("测试与上线", 64)]
total = sum(h for _, h in rows)
for name, h in rows:
    print("%-10s %4d 小时  %5.1f%%" % (name, h, h * 100.0 / total))

实跑输出：

--------------------------------------------------------------------
D2  Web 网站的组成：谁把网站做出来
--------------------------------------------------------------------
  一个中等规模的官网，八周做完，总投入 480 小时。钱和时间是这么分的：
  ----------------------------------------------------------------------------------------
  角色            干什么                              工时    占比
  ----------------------------------------------------------------------------------------
  UX 研究         访谈用户、画流程、定信息结构        56      11.7%
  视觉设计        定风格、出界面稿、建组件库          64      13.3%
  前端实现        把稿子变成页面、接后端接口          152     31.7%
  后端实现        接口、数据库、权限                  96      20.0%
  内容与文案      写标题、写正文、配图                48      10.0%
  测试与上线      兼容性、性能、上线与监控            64      13.3%
  ----------------------------------------------------------------------------------------
  合计                                                480     100.0%
  ----------------------------------------------------------------------------------------

  【设计】这一类（UX 研究 + 视觉设计）共 120 小时，占 25%。
  教材把 Web 设计师和 UX 设计放在同一条里，就是想说明：
  设计不只是【好不好看】，前面还有一大半是【用户怎么走通一件事】。

  为什么这件事值这么多钱？有个常被引用的数字：
    用户看到页面的【0.05 秒】内就已经形成了第一印象。
    50 毫秒——比眨一次眼（100~400 毫秒）还短。
  所以视觉上的功夫不是锦上添花，它是被最先读到的那一部分。

  但顺序不能反：先想清楚【用户来干什么】，再决定【页面长什么样】。
  顺序反过来的代价，是返工——而返工发生在项目后期，
  同样一小时的成本，比前期贵得多。

  ⚠️ 2026 现状：这一行还有个新变化——
    AI 能快速出几种界面稿之后，纯做视觉的人被压缩了；
    值钱的是能想系统、能定规则、能把稿子直接变成组件的人（设计工程师）。
    换句话说：【画得好看】变便宜了，【知道该画什么】变贵了。

读这个输出：注意【前端实现】那一行最重（三成），但设计类两项加起来有 25%——四分之一的力气花在动手写字之前。再把这份表往下想一层：如果 UX 研究那 56 小时被砍掉，省下来的时间通常不会消失，只会以返工的形式出现在后面几行上。

四、为什么这件事值这么多钱

有个被反复引用的数字：用户看到页面的 0.05 秒内就已经形成第一印象。50 毫秒比眨一次眼还短，所以视觉上的功夫不是锦上添花，它是被最先读到的那一部分。

但这也正是最容易走偏的地方——第一印象短，不代表它是全部。0.05 秒决定【要不要看下去】，后面那几分钟才决定【要不要再来】。两件事，两个角色。

五、⚠️ 2026 现状

这一行这两年变化很明显，因为 AI 能快速出好几版界面稿了：

纯做视觉的那一段被压得最狠，因为出稿这件事本身变便宜了。值钱的部分往两头走：一头是系统思维（组件怎么拆、规则怎么定），另一头是能从稿子一路做到上线的人（常被叫【设计工程师】）。

换句话说：画得好看变便宜了，知道该画什么变贵了。

30 秒实验

  1. 随便打开一个你天天用的网站，试着用一句话说出它是为哪一件事存在的。
  2. 再找出你在这个网站上最常做的那件事，从头走一遍，数一数中间有几步。
  3. 最后问自己：如果只能砍掉其中一步，砍哪一步最不心疼？——能立刻回答出来，说明你已经做过一次 UX 判断了。

常见误区

  1. 错误：设计就是把页面弄得好看。——纠正：好看只占设计里的一小半。真正决定成败的是前面那段看不见的工作：用户来做什么、要从哪几步走过去。这一段做得好，界面普通也能用；这一段没做，界面再漂亮也没人用。
  2. 错误：小项目不需要 UX。——纠正：小项目更需要，因为返工成本占的比例更高。大项目有缓冲余量，小项目一返工就是全盘延期。UX 的产出不一定是一份报告，也可能只是开工前花半小时把三步流程写在纸上。
  3. 错误：设计稿交出去，设计的工作就结束了。——纠正：交稿只是上半场。真到实现阶段，字体加载、间距、组件复用这些问题会一个个冒出来——所以 2026 年更吃香的是能一路跟到组件里的那类设计角色。
  4. 错误：AI 会出稿了，设计这行要没了。——纠正：被替代的是出稿这个动作，不是判断。工具越快，做错的东西上线也越快——所以稀缺的能力从【画得出来】变成了【知道该画什么、以及为什么】。
自测三问（点开对答案） 1. 为什么教材把 Web 设计师和 UX 设计放进同一条？ —— 因为**它们回答的是同一个问题的前半段和后半段**：用户要办成什么事、这件事长什么样。放在一条里，顺序就不会被弄反。**反过来的代价不是做得难看，是做完了才发现方向不对。** 2. 0.05 秒这个数字，容易被误读成什么？ —— 容易被读成【界面最重要，其他都好说】。它其实只说明一件事：**第一印象比想象的来得快**。但 0.05 秒只决定要不要看下去；**用什么留住人，靠的是后面那几分钟里的每一步是否顺畅**。 3. 如果预算被砍掉三分之一，你会先从这份工时表的哪一行砍？为什么？ —— 多数情况下**应该先砍外观上的精雕细琢，而不是砍 UX 研究**。原因很简单：外观可以后续迭代，方向错了要推倒重来。**判断依据不是哪一行便宜，而是哪一行的错误更难回头。**

相关笔记