3.4 KiB
3.4 KiB
文档站参考研究 · 2026-10-27
实际使用浏览器访问并截图；Linear 使用顶部 Toggle theme 切换浅色，Tailwind 在页脚选择 Light theme，Supabase 在右上菜单选择 Light，React 页继承同域浅色设置。截图为 1280×720，未复制品牌文案或资源。
| 页面 | 截图 | 观察与落地 |
|---|---|---|
| Linear Projects | linear-projects-light.png | 64px 顶栏、280px 左目录、约670px 正文、右侧细线目录；纯白与浅灰边界、32px 标题和14–16px正文、节制强调。落地固定顶栏、安静三栏、青绿当前项。 |
| Tailwind Editor setup | tailwind-editor-light-top.png、tailwind-editor-light.png | 56px顶栏、约288px左栏、约560px正文；等宽分类标签、竖线当前项、段落间宽留白、右侧章节列表；页脚显式主题选择。落地目录分组、章节锚点、精确等宽代码与语言标签。 |
| Supabase Docs | supabase-home-light.png | 50px横向全站导航和搜索；首页标题与命令入口左右布局，下面分区标题+多列入口，边框浅而有序。落地首页快速启动、三个档案分区、明确描述和阅读入口。 |
| Supabase React | supabase-react-light.png、supabase-react-code-light.png | 左侧约316px、中间约605px、右侧目录；面包屑和大标题引导；步骤标题、带语言与复制操作的浅色代码块、低对比提示框。落地面包屑、带复制反馈的代码、独立草案提示、上下篇。 |
统一设计决定
- 默认浅色，系统本地字体，无 CDN。正文16px/1.9，中文阅读栏最大720px，导航13px，标题32–40px。青绿只用于品牌、链接、当前状态。
- 首页以「理解、构建、记录」为主线，突出入门，再按开始使用/架构设计/图形档案组织现有内容；不制造未存在的产品页。
- 全站顶部品牌返回首页，档案入口和仓库链接；本地全文检索支持 Cmd/Ctrl K、Escape、方向键，不向外部服务发送查询。
- 宽屏三栏、平板隐藏右目录、小屏使用可展开文档菜单与页内目录；代码和表格各自滚动，正文不溢出。
- 保持 Pages Router、pnpm、uv 与现有 CI/CD、镜像缓存、回退和18135部署入口。截图仅为研究证据，不进入站点资源。
响应式交互是对以上设计规律的本地实现决定；参考站的手机布局未单独测量。Tabularium 的手机截图和实测记录见 ../verification。