界面图鉴
区块Section
区块到底是什么？为什么 AI 总说「再加一个 section」？
页面的段落：一个通栏讲一件事，一个接一个摞出整个页面。
01 · 拆开看看
这一块由什么组成
它是页面的段落：一个通栏讲一件事，一个接一个往下摞，摞出整个页面。看懂它，你就看懂了任何落地页的骨架。组成：
眉标或编号Eyebrow
小字标出这段的主题，比如「02 · 功能」。
标题Heading
这一段要说的那件事。
内容区Body
文字、卡片、图片的组合。
段间留白Spacing
区块之间的大留白——比分割线高级的分隔方式。
02 · 常见变体
同一个零件，几种摆法
标题加内容居中排布，信息单一时用。
标题在左、内容在右，本站正在用。
图文左右交替，长页面不单调。
03 · 火眼金睛
这个页面里，哪一块是一个 Section？
提示：答案不止一个是对的——但有一块最典型。
点一块试试，看看它叫什么
不是它。导航栏是常驻框架，不算页面的「段落」。
严格说它也是一个 section——只是重要到有了自己的名字。这里找一个更「无名」的。
就是它！一个通栏、讲一件事（功能），上下用留白隔开——最典型的 section。
不是它。页脚是框架的收尾，有自己的名字和职责。
04 · 用与不用
什么时候该上它
- 落地页的每个主题段落
- 长页面的内容分组
- 需要锚点跳转的板块
- 零散的一两句话——并进相邻区块
- 后台工具界面——那里是面板不是段落
- 为了凑长度硬加的时候
05 · 想一想
一道题，检查眼力
你想在首页加一块「用户评价」。跟 AI 怎么说最清楚？
对。位置（在哪个 section 下面）和形式（几列什么内容）都点到了——AI 几乎不会跑偏。
AI 得猜放哪、长什么样。猜错了你还得返工，不如一次说清。
这句话的可能解释有一万种。模糊的需求只能换来碰运气的结果。
06 · 说给 AI 听
让 AI 改它时，这样说
用它做定位词：「哪个 section 的什么位置」——AI 改页面几乎不会跑偏。
在 hero 下面加一个「功能」section，三列卡片
这个 section 改成左文右图
给每个 section 加锚点，导航栏可以跳转
section 之间的留白统一成 96px
最容易踩的坑
Section 越多页面越长，但用户的耐心不会跟着变长。每加一段先问：删了它，页面会缺什么吗？