information-hierarchy
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseInformation Hierarchy
信息层级
The reader should get the answer in the first thing they see, and find depth
only when they reach for it. Everything else here follows from that: each beat
of the piece takes the form that carries it best, what matters most comes
first, and the medium stays as simple as the content allows.
读者应在第一眼就能获取答案,仅在需要时才深入了解细节。本文的所有内容都遵循这一原则:每个内容板块采用最适合的呈现形式,最重要的内容放在最前面,媒介形式尽可能贴合内容的复杂度。
Lead with the answer/conclusion
以答案/结论开篇
Readers scan. Open with the finding itself, and the piece works in thirty
seconds. The same logic repeats at every scale: a section's first sentence is
its answer, a slide's title is its takeaway ("Cache misses double p99" rather
than "Performance"), a UI label carries its whole meaning alone.
Behind the answer sits depth (reasoning, evidence, edge cases), and behind
that, sources. Keep depth that most readers will skip, and move it: a later
section, a linked page, a footnote. Sources belong at the end.
读者会快速浏览内容。开篇直接给出结论,这样读者在30秒内就能理解核心内容。这个逻辑适用于所有尺度:每一节的第一句话就是该节的答案,每张幻灯片的标题就是其核心要点(比如“缓存未命中使p99延迟翻倍”而非“性能”),每个UI标签本身就能完整传达其含义。
答案之后是详细内容(推理过程、证据、边缘情况),再往后是来源。将大多数读者会跳过的详细内容移至后续章节、链接页面或脚注中。来源放在文末。
Pick the form that fits the idea
选择贴合想法的呈现形式
Prose is the default; break from it when another form genuinely carries the
idea better. An example grounds an abstract claim faster than more
explanation. A table holds enumerable facts that prose would bury. A chart
shows a trend that a sentence can only assert. A mockup shows a layout the
reader would otherwise have to imagine.
Diagram-first for pipelines and relationships. When the content is a
pipeline, a dependency graph, a state machine, or any structure where the
relationship between parts is the hard idea, put the diagram early — a
one-sentence takeaway, then the diagram, then detailed prose. The diagram
leads, the prose still explains; prose alone buries the shape. Keep
diagrams to a handful of nodes and validate them (see ).
/md-validationAsk what the beat is trying to do, then give it the form that does that: an
explanation gets a paragraph, a comparison gets a table. Each form teaches
best inside its own job: a diagram standing in for an explanation teaches
less than the paragraph would.
散文是默认形式;当其他形式能更好地传达想法时,就打破常规。一个例子比更多解释能更快地支撑抽象论点。表格可以呈现散文难以清晰展示的可枚举事实。图表能展示句子只能断言的趋势。原型能让读者直观看到布局,无需自行想象。
流程与关系类内容优先使用图表。当内容是流程、依赖图、状态机,或是任何以“各部分间的关系”为核心难点的结构时,尽早展示图表——先给出一句话核心要点,再放图表,最后是详细的散文说明。图表先行,散文补充解释;仅用散文会掩盖内容的结构。图表节点数量控制在少量,并进行验证(参见)。
/md-validation思考每个内容板块的目的,然后选择最适合的呈现形式:解释性内容用段落,对比性内容用表格。每种形式都有其擅长的场景:用图表替代解释性文字,效果不如直接用段落。
Match hierarchy to the medium
让层级与媒介匹配
For any medium, ask one question: can it hide content until the reader asks
for it? Chat, email, and plain documents show everything at once, so
hierarchy there means density and order: every early sentence pays for
itself, and depth lives behind a link. Media that can hide (HTML, apps,
anything with expand or navigate) may fold depth into collapsed sections,
popovers, or child pages. Reserve each interaction for depth a reader will
actually reach for.
Structure helps the scanner in every medium: headers that carry the argument
on their own, asides for context off the main thread, a table of contents
when the piece is long enough to need a map. These organize the surface;
putting the answer first remains the job of the writing itself.
Choose the simplest medium that presents every beat well: a tight reply
beats an HTML site whenever both would teach the same thing. When HTML is
earned, build it phone-first and default to light mode
( has the mechanics).
/structured-artifact对于任何媒介,只需问一个问题:它能否将内容隐藏起来,直到读者主动查看?聊天、邮件和纯文本文档会一次性展示所有内容,因此这里的层级意味着内容密度和顺序:每一句前置的内容都要有价值,详细内容放在链接之后。支持隐藏内容的媒介(HTML、应用程序、任何带有展开或导航功能的载体)可以将详细内容折叠到收起的章节、弹出框或子页面中。仅为读者确实需要深入了解的内容设置交互。
在所有媒介中,结构化布局都有助于读者快速浏览:标题本身就能传达核心论点,旁注用于补充主线之外的上下文,当内容足够长时添加目录作为导航。这些元素优化了内容的表层结构;而将答案放在最前面仍是写作本身的核心任务。
选择能完美呈现所有内容板块的最简单媒介:只要两者能达到相同的传达效果,简洁的回复优于HTML网站。当确实需要使用HTML时,优先适配移动端,并默认使用浅色模式(提供实现机制)。
/structured-artifactSources
来源
- How Users Read on the Web (NN/g): scanning, why the lede must come first.
- Progressive Disclosure (NN/g): defer secondary content to secondary screens.
- How Users Read on the Web (NN/g):关于快速浏览,为何必须开篇点明核心。
- Progressive Disclosure (NN/g):将次要内容延迟到次级页面展示。