PROTOTYPE · ARTICLE PAGE

详情页设计对比

同一篇「构建认知系统 · 27 张认知方法图谱」文章，4 种排版方案对比。向下滚动逐个查看。

0 · 当前状态（Notion demo 已部署版）

章节序号 + 标题挤一行 · 5 列图墙堆叠 · 无 TOC 高亮 · 无章节封面

BASELINE
当前 Notion 详情页
问题：阅读密度高，缺少节奏感
CHAPTER · 01 / 思维底座 · COGNITIVE SYSTEM

构建认知系统。

尽早建立系统性的知识体系和思维，保证思维上的连续性和逻辑性。27 张认知方法图 · 6 个专题。

开始阅读 返回知识系统
01 认知方法建模世界 02 思维活动 03 抽象层次 04 事物认知 05 动静分析与知识压缩 06 思维工具与多视角框架
01

认知方法建模世界

符号、概念与模型把复杂世界压缩成可以理解、交流和操作的结构。

认知方法总览
认知与世界
从表象到本质
认知压缩艺术
符号背后的世界
02

思维活动

思维方法和工具属于「术」，理解思维活动的核心模式才接近「道」。

思维活动模型
思维活动全景
思维活动展开
思维活动知识图
问题清单：① 章节序号和标题挤在一行没章节封面 ② 27 张图5列堆在一起无视觉呼吸 ③ 无滚动高亮当前位置 ④ 章节间无过渡节奏

A · 方案：长文阅读模式

章节封面卡片（6 色循环）+ 2 列宽图 + sticky 高亮导航 + 间隔符号

PLAN A
长文阅读模式
改动：图2列 + 章节封面 + sticky 章节高亮
CHAPTER · 01 / 思维底座

构建认知系统。

尽早建立系统性的知识体系和思维，保证思维上的连续性和逻辑性。27 张认知方法图 · 6 个专题。

开始阅读 返回知识系统
01 建模世界 02 思维活动 03 抽象层次 04 事物认知 05 动静分析 06 思维工具
CHAPTER · 01

认知方法建模世界

符号、概念与模型把复杂世界压缩成可以理解、交流和操作的结构。

认知方法总览 · 点击放大
认知与世界 · 点击放大
从表象到本质 · 点击放大
认知压缩艺术 · 点击放大
← 左右滑动查看更多 · 点击图片放大 →
· · ·
CHAPTER · 02

思维活动

思维方法和工具属于「术」，理解思维活动的核心模式才接近「道」。

思维活动模型 · 点击放大
思维活动全景 · 点击放大
思维活动展开 · 点击放大
思维活动知识图 · 点击放大
← 左右滑动查看更多 · 点击图片放大 →
· · ·
CHAPTER · 03

抽象层次

系统思考是不断 zoom out 与 zoom in 的过程：既看全局，也返回局部验证。

系统思考缩放 · 点击放大
C4 Model 层级 · 点击放大
← 左右滑动查看更多 · 点击图片放大 →
推荐场景：内容为主、章节明确的学习站。Notion 风格延续，最容易从现状过渡。

B · 方案：杂志三栏

左侧 sticky TOC + 中央 720px 阅读列 + 右侧 sticky 「下一篇」卡

PLAN B
杂志三栏模式
改动：3 列布局 + 左侧章节 TOC + 右侧 next-card
CHAPTER · 01 / 思维底座 · COGNITIVE SYSTEM

构建认知系统。

尽早建立系统性的知识体系和思维，保证思维上的连续性和逻辑性。27 张认知方法图 · 6 个专题。

CHAPTER · 01

认知方法建模世界

符号、概念与模型把复杂世界压缩成可以理解、交流和操作的结构。

认知方法总览
认知与世界
从表象到本质
认知压缩艺术
CHAPTER · 02

思维活动

思维方法和工具属于「术」，理解思维活动的核心模式才接近「道」。

核心洞察：思维活动不是单一动作，而是一组从输入、加工到输出的连续过程。
思维活动模型
思维活动全景
"结构化思维的本质是「动态过程结构化 + 静态组成结构化」。"
CHAPTER · 03

抽象层次

系统思考是不断 zoom out 与 zoom in 的过程：既看全局，也返回局部验证。

系统思考缩放
C4 Model 层级
推荐场景：高密度长文 + 多个章节 + 用户可能反复阅读。Stripe Docs / GitBook 范式。最专业。

C · 方案：沉浸深色阅读

深色背景 + Playfair Display 衬线大标题 + 全屏封面图 + 沉浸式衬线正文

PLAN C
沉浸深色模式
改动：深色底 + 衬线字体 + 大封面图 + 680px 沉浸阅读
CHAPTER · 01 · 思维底座

构建认知系统

尽早建立系统性的知识体系和思维，保证思维上的连续性和逻辑性。27 张认知方法图 · 6 个专题。

10 MIN READ · 27 IMAGES · 6 CHAPTERS
HERO · COVER IMAGE
CHAPTER · 01

认知方法建模世界

符号、概念与模型把复杂世界压缩成可以理解、交流和操作的结构。

认知系统的起点不是思维工具的清单，而是一套连续结构：先选择抽象层次，再从静态组成与动态过程认识事物，最后用多种思维模型交叉验证，并接受客观反馈。

这种方法论不是为了「更聪明」，而是为了在面对新问题时能稳定地选择合适的思维模式。

图 01 · 认知方法、心智与世界之间的关系
CHAPTER · 02

思维活动

思维方法和工具属于「术」，理解思维活动的核心模式才接近「道」。

从输入、加工到输出，思维活动是一个连续的过程，而不只是单次的灵感闪现。

"结构化思维的本质是「动态过程结构化 + 静态组成结构化」。"
图 06 · 思维活动的组成
CHAPTER · 03

抽象层次

系统思考是不断 zoom out 与 zoom in 的过程。

既看全局，也返回局部验证。从上下文到细节，建立完整的抽象模型。

推荐场景：夜间阅读 / 沉浸式学习 / 杂志感长文。Apple Medium 范式。最有氛围感，但与现有 6 章节学习站调性差异最大。