MATRIX 的界面应让人愿意每天回来阅读和操作。液态玻璃是全站材质语言，内容层级和真实操作仍然是主体。首页采用紧凑工作台，标题说明当前功能，阅读区直接展示变化、证据和操作。
本文记录 2026-09-27 本地实现。以下为当前中文界面的实际截图，内容与资料截止时间是截图时的快照，不代表实时信息或线上部署状态。
1. 最终配色：暖白、银灰、石墨灰
本轮最初使用了蓝灰背景和蓝紫光晕。实际反馈认为深蓝背景的 AI 模板感过强，因此最终移除这些大面积色彩。浅色使用暖白与银灰，深色使用石墨灰与烟色玻璃；蓝色只承担少量交互强调，建议等级保留低饱和语义色。
| Token | 浅色 | 深色 | 用途 |
|---|---|---|---|
--bg | #eeedea | #191a19 | 全局背景 |
--text | #252522 | #f0f0eb | 正文与标题 |
--text-muted | #53534e | #cacbc4 | 次级文字 |
--glass | rgba(255,255,255,.70) | rgba(40,41,38,.78) | 主要面板 |
--glass-heavy | rgba(250,249,246,.88) | rgba(34,35,32,.92) | 导航等高密度区域 |
--glass-inset | rgba(235,234,229,.62) | rgba(58,59,54,.66) | 嵌入控件、说明区域 |
--accent | #2453aa | #a6c8ff | 链接、焦点与选中态 |
背景只保留轻微中性明暗变化。面板边缘高光、细描边、半透明与柔和投影共同体现玻璃，而不是依靠有色光团。必读理由也采用中性底色，避免重复出现大块蓝色横条。
2. 三层材质，覆盖所有页面
| 层级 | 组件 | 规则 |
|---|---|---|
| 浮动界面层 | 顶部导航、工具区 | 较厚玻璃保证滚动内容下的可读性；选中态明确 |
| 内容面板层 | 更新流、项目、趋势、来源、雷达、文章与归档 | 统一圆角、高光边缘和轻投影；每个独立表面使用一次模糊 |
| 嵌入层 | 筛选、按钮、标签、折叠历史、说明 | 使用较轻内嵌底色，嵌套内容不重复堆叠模糊 |
“全站玻璃化”不等于每段正文都套一张卡片。更新流是一个整体面板，事件之间用细分隔线。详情页的主阅读区与来源侧栏分层，事实和引用保持相邻。所有新组件复用统一 token，避免各页形成不同的玻璃透明度和色偏。
3. 产品感来自工作密度与可执行操作
- 标题直接。 使用“今日简报”“项目档案”“我的关注”等功能名称，不让宣传口号占据首屏。
- 布局紧凑。 桌面首页是更新流加研究侧栏；详情页是正文加窄来源栏。手机回到清晰的单列阅读顺序。
- 正文优先。 当前功能标题约 28px，手机约 24px；正文通常 13–14px，行距为中文阅读留足空间。现版工作台标题使用系统无衬线字体。
- 筛选可见，历史按需。 时间范围和关键操作直接可用，事件与日报日历收进统一折叠控件，避免首屏被日历占满。
- 归档是预览。 长标题换行并限制预览行数，Markdown 链接显示为可读文字；完整来源留在阅读页，避免在整行链接内部嵌套链接。
- 操作有反馈。 关注、收藏、已读分别有状态，按钮按下即时反馈；页面不使用持续装饰动画吸引注意力。
4. 交互与可访问性是同一套规范
折叠必须复用 site/src/lib/detailsFold.ts：attachFoldAnim 接入 details，animateFold 用于其他折叠容器。展开 260ms，曲线为 cubic-bezier(0.2, 0.6, 0.2, 1)；收起 230ms，曲线为 cubic-bezier(0.4, 0, 0.2, 1)。展开前把内联高度固定为零，避免内容闪现。程序化筛选开合即时生效，不模拟用户点击动画。
prefers-reduced-motion 下立即切换状态；减少透明度、高对比度偏好与不支持 backdrop-filter 的浏览器使用实色降级。正文对比度以 WCAG AA 为目标。状态同时使用文字与颜色，键盘能完成导航、筛选、展开和关注。
手机导航保留全部五个入口，全局搜索入口、语言和主题切换置于品牌行。事件页的页内搜索框放在五个 tab 下方，切换页面时保持 tab 的垂直位置稳定。不要把必要信息藏在悬停态里。外链在新标签打开时提供可访问提示，长 URL 不撑破布局。
5. 实现位置与复用方式
| 源仓库路径 | 职责 |
|---|---|
site/src/styles/glass.css | 最终材质、配色、组件覆盖、响应式和偏好降级 |
site/src/layouts/Base.astro | 公共导航、主题与全站样式入口 |
site/src/components/pages/Today.astro | 首页工作台与研究侧栏 |
site/src/components/pages/EventsIndex.astro | 事件筛选与按需日历 |
site/src/components/pages/DailyIndex.astro | 日报预览、日历与月份分组 |
site/src/lib/detailsFold.ts | 全站统一折叠动效 |
site/tests/browser/reading.spec.ts | 阅读路径、双主题、手机导航与可访问性验证 |
新增界面先确定其层级与操作，再选对应材质；不要先画大卡片再寻找填充内容。修改 token 后要同时检查浅色和深色的正文、标签、按钮与禁用状态。
6. 验证范围与边界
本轮本地验证包括 646 个页面构建、16 项浏览器测试，覆盖 360 / 768 / 1440px、双主题、双语导航与主要阅读路径。中性配色调整后另跑双主题自动可访问性检查，并实际查看首页截图。减少透明度设置下也检查了无模糊和实色背景。
这些检查支持当前实现，不等于对所有设备和辅助技术的完整认证。后续组件仍要检查长标题、长 URL、空状态、密集证据、键盘焦点，以及 GitHub Pages 子路径下的链接。
配色和布局应服务产品与情报架构中的阅读目标。这份文档记录可复用的设计原则；Derek Hub 自身的主题不会因同步文档而被替换。