Skip to content

工作台里的四个区域

这一课延续第零章的界面认知,把工作台四个区域讲得更具体。

第零章解决“别害怕”,这一课解决“怎么用”。学员要知道:不同任务要看不同区域,视线焦点一旦正确,操作压力会小很多。

  • 让学员能指出文件区、编辑区、对话区、终端区。
  • 让学员知道四个区域分别回答什么问题。
  • 让学员能根据任务选择当前要看的区域。
  • 让学员完成一张“四区任务对照卡”。
  • 建议时长:18 到 25 分钟。
  • 用真实项目界面演示。
  • 设计几个“我要找什么”的小问题,让学员跟着判断该看哪里。
  • 每个区域都配一个动作。

你可以这样开场:

“上一节我们知道工作台里有几个区域。这一节,我们要学会在做事时切换视线。你不需要同时看所有地方,你只需要知道当前任务对应哪一块。”

四个区域分别回答四类问题。

文件区回答:项目里有什么?

比如你要找 README,要找图片,要看项目里有没有 index.html,就看文件区。

编辑区回答:当前文件写了什么?

你点开 index.html,中间显示具体内容,这里就是编辑区。改标题、改文案、看代码位置,都在这里。

对话区回答:我和 AI 怎么协作?

你让 AI 复述项目、提计划、解释报错、总结结果,都在这里。

终端区回答:电脑刚才执行得怎么样?

运行命令、启动服务、查看报错、停止服务,都和终端区有关。

接着给一个判断练习:

  • “README 在哪里?”看文件区。
  • “这一行标题在哪里改?”看编辑区。
  • “AI 准备怎么改?”看对话区。
  • “运行成功了吗?”看终端区。

最后收束:

“工作台是一张分区明确的桌子。你知道该看哪一块,就已经掌握了一半。”

  1. 打开 demo-site 项目。
  2. 在文件区找到 README.md。
  3. 在编辑区打开 index.html,定位页面标题。
  4. 在对话区输入:“请说明这个项目的文件结构。”
  5. 在终端区运行一个查看目录的命令。
  6. 做四个小问题,让学员回答该看哪个区域。

请学员完成“四区任务对照卡”:

  • 找文件时看:
  • 改内容时看:
  • 问 AI 计划时看:
  • 看运行结果时看:

再补充 3 个自己的真实任务,并写出应该看哪个区域。

  • 学员界面布局不同:用功能识别区域。
  • 文件区和编辑区混淆:文件区是目录,编辑区是具体内容。
  • 对话区太热闹:让学员只看最近一次 AI 计划。
  • 终端区看不懂:先只关注有没有报错、服务有没有启动。

保存一张“四区任务对照卡”,并用自己的工具界面截图标注四个区域。

  • 第 1 页:标题“当前任务决定你看哪里”
  • 第 2 页:文件区回答项目里有什么
  • 第 3 页:编辑区回答当前文件写了什么
  • 第 4 页:对话区回答 AI 准备怎么协作
  • 第 5 页:终端区回答电脑执行得怎么样
  • 第 6 页:四区任务对照卡