# Sill 首页：原设计理解与定位更新方案

日期：2026-10-17。研究基线：`cb3cbc9`，分支：`feat/positioning-2.0`。

状态：两轮网站实现已全部撤回。本文件只记录原设计研究和下一版设计方案，尚未实现新页面，也未提交或发布。

## 1. 原设计的主线

原首页把浏览器视口变成了一处持续运行的 Sill 场景。顶部置物岛、底部行走的泡泡、沿路出现的内容，以及森林、海底和星空，共同解释产品：东西可以先放在这里，人可以继续做手上的事。

最有辨识度的是空间关系和动作因果。内容从底部路径飞到屏幕顶部，落下后留在岛上；泡泡继续前进，正文保持稳定。用户通过看到“从哪里来、放到哪里、放下后发生什么”理解产品。标题“随手放下，从容继续”恰好描述了这个过程。

因此，更新产品定位时，要扩展这座岛能做的事情，同时延续网页里的这套关系。只改文案会让画面仍然只解释暂存；另设演示面板则会使顶部岛与底部路径失去叙事职责。这是前两轮实现分别出现的问题。

### 设计演进必须结合当前页面判断

| 依据 | 当时的选择 | 对本次设计的意义 |
| --- | --- | --- |
| [早期视觉调整记录](homepage-redesign-20260922.md) | 雾白、海玻璃青绿、左右分栏、独立预览；移除参考站式笔记本外壳 | 品牌配色与克制的表达可以延续，但这份记录的早期布局不是当前首页的完整依据 |
| `66dad4f` | 提交说明明确写出 endless ledge：分层风景移动，路上内容跳进 notch | 行走、沿路内容和顶部接收是一个整体 |
| `d402b94`、`896be0d`、`973d587` | 场景扩展到整页；调整顶部岛形态、玻璃材质、移动端层级与资源加载 | 网页使用同一个视口坐标系；顶部岛始终是动作目的地 |
| `b66e422` | 曾将 Hero 居中，验证岛展开不推动正文 | 需要保留的是布局稳定性，不能直接把历史居中状态当成今天的布局 |
| `2b77c82`、`f76a17d` 至当前基线 | 当前首屏为左侧主文案、右侧简短事实；内容区有深浅变化，场景继续贯穿全页 | 右侧承担信息补充，中央和下方留给风景与动作；不能看到空处就加演示面板 |

当前布局以 [index.html](../index.html) 和 [home-run.css](../home-run.css) 后段覆盖规则为准。`home.css`、`home-preview.css` 保留了更早阶段的样式，不能仅凭这些类名推断现用设计。

## 2. 当前画面的职责分配

| 层次 | 当前画面与行为 | 设计职责 |
| --- | --- | --- |
| 全屏风景 | 固定背景、前景、粒子，以不同速度移动；三种风景交替 | 提供一个连续、有深度的世界，让网页拥有 Sill 的性格 |
| 顶部岛 | 起初贴顶收拢；接收内容后变成靠近顶部的深色玻璃浮层 | 解释“屏幕顶部可用”，承接动作结果 |
| 底部路径 | 泡泡相对视口大致固定，地面与拾取物移动；遇到内容后飞入岛 | 建立前进感，连接陪伴角色与产品动作 |
| 左侧文案 | 大标题、两句解释、下载操作 | 让用户快速知道用途；稳定可读，不参与每次动画切换 |
| 右侧事实 | macOS、无需账号、本机优先三项 | 补充使用门槛与信任信息，视觉权重低于主文案 |
| 下方正文 | 雾白功能区、深色场景段落、泡泡介绍、浅色定价和 FAQ | 让长页在阅读与观景之间变化，逐步增加信息密度 |
| 场景按钮与暂停 | 按钮切换整页风景；暂停控制行走演示 | 用户直接影响眼前的环境，动作与结果在同一画面 |

当前桌面首屏示意：

```text
┌ 导航 ───────────── 顶部置物岛 ───────────── 语言 / 下载 ┐
│                                                       │
│ ┌ 主文案与下载 ┐          风景          ┌ 产品事实 ┐   │
│ │ 随手放下，   │                        │ macOS    │   │
│ │ 从容继续。   │                        │ 无需账号 │   │
│ └──────────────┘                        └──────────┘   │
│                  内容向顶部岛飞入                      │
│ 泡泡 →          文件 / 图片 / 文字 / 链接        暂停  │
└────────────────── 连续的底部路径 ──────────────────────┘
```

### 视觉语言

复用当前字体、材质和尺度，下一版不另建一套网站品牌。原生 UI 技能用于理解岛内的内容层级与动作语义，网页的排版和画面节奏仍以网站自身为准。

| 颜色 | 当前用途 |
| --- | --- |
| `#10241e` | 场景未加载时的深绿底色 |
| `rgba(7, 25, 20, .68)` | 首屏文案的深色玻璃支撑层 |
| `#f4faf6` | 深色表面的主文字 |
| `#b9f1ee` | 下载按钮、选中状态等海玻璃青绿强调 |
| `#f8faf9` | 功能、定价、FAQ 的雾白阅读底色 |
| `#203a39` | 浅色表面文字 |

字体沿用系统字体栈，中文使用 PingFang SC 等回退。桌面首屏标题为 48–64px 的现有范围、左对齐；正文和事实栏的文字密度保持原比例。顶部岛内继续使用深色玻璃、白色内容、紧凑间距；整页的故事感来自原场景和泡泡。

## 3. 浏览器中的实际观察

在恢复后的本地站点观察了自然运行、四种内容抵达、三种场景轮换、手动换景、正文滚动，以及移动端和 Reduce Motion 初始状态。没有通过修改 DOM 强造内容抵达状态。

- 桌面 `1440 × 1000`：主文案宽 560px、事实栏宽 264px；岛从 `206 × 40` 展开到 `328 × 116`。观察前后 Hero 和文案矩形完全相同。
- 这次自然运行中，约 7.3s / 11.2s / 15.0s / 19.0s 分别收到文件、图片、文字、链接；同时风景经过森林、海底、星空，再回到森林。该时序是一次本地观察，不是应照搬的新动画指标。
- 路面速度为 132 CSS px/s；远景与前景使用不同移动比例；拾取物飞行约 760ms，岛展开约 460ms，背景交替约 900ms。不同动作各自有职责，并非所有元素同时轮播。
- 移动端 `390 × 844`：首屏改为单列，事实栏变成横向三项，顶部岛宽 260px；正文与底部路径仍有各自空间。
- Reduce Motion 初始页面直接展示已接收内容的岛与静止场景，静态画面也保留产品关系。
- 本次观察未出现 JavaScript 异常；所观察桌面与移动页面没有横向溢出。

证据保存在 `/private/tmp/sill-web-original-design-study/`：`01-desktop-start.png`、`03-land-file.png` 至 `06-land-link.png`、`desktop-features.png`、`desktop-ocean.png`、`desktop-space.png`、`mobile-en-expanded.png`、`mobile-zh-reduced.png`、`observations.json`。临时证据用于本次研究，不是已归档的发布验证材料。

原实现也存在应单独处理的细节：当前导航高度已为 48px，而展开岛仍从桌面 40px、移动端 42px 开始，顶部有 8px / 6px 的区域重叠；与早期回归文档所记的导航尺寸不同。本次按要求完整回退，不夹带修复；下次原型需要用当前导航尺寸重新确定岛的位置。

## 4. 新定位如何进入原设计

新定位需要表达：顶部既能暂存内容，也能常驻小组件，并打开常用工具。首页优先让人看到日常用途，完整分类由功能指南解释。

主文案候选：

> 随手可用，<br>
> 从容继续。
>
> 文件先放好，时间抬眼看，常用工具随时打开。<br>
> 把常用的东西留在 Mac 顶部，继续手上的事。

英文候选：

> Keep it close.<br>
> Keep your flow.
>
> Keep your files, useful widgets, and everyday tools at the top of your Mac.<br>
> Ready when you need them.

以上是与画面一起验证的候选文案，尚未替换页面。保留原来的两行节奏、下载主操作和独立事实栏。

### 同一座岛中的三种行为

| 产品能力 | 应让用户看到的事情 | 与原动画的关系 |
| --- | --- | --- |
| 内容架 | 路上的文件、图片、文字、链接飞入顶部，落下后仍可见 | 延续现有 `pickup → fly → land` 因果关系 |
| 组件 | 内容入岛后，岛内同时可见一个常驻时钟；收到新内容时，时钟仍在原位置 | 扩展“留下来”的含义，表现持续可用；不能只在轮播中闪过一个时钟图标 |
| 工具 | 用户在同一座岛上打开翻译示例，看到输入、执行、结果，再回到原来的内容和组件 | 用有明确触发和结果的短操作解释工具；不能让泡泡拾取文本后自动翻译，暗示产品没有的联动 |

建议首个原型只放一个时钟、一项内容、一个翻译入口。先验证这三者能否在原有顶部尺度中清楚共存，再考虑番茄钟、天气等其他示例。组件数量的增加不应直接导致岛在首屏无限扩张。

### 首屏行为草案

1. 延续收拢的顶部轮廓、行走的泡泡和第一件沿路内容。
2. 第一件内容抵达时，同一个顶部岛展开，呈现内容与常驻时钟，并给出安静的工具入口。这个状态保留下来，后续收到内容不会重置时钟或轮换整块布局。
3. 工具演示由明确点击触发。主体内容在同一个顶部容器内切换；返回后恢复先前的内容与组件。示例必须注明其示意性质，仅使用本地样例；用户输入不得被忽略后返回伪造结果。
4. 首屏文案、事实栏和下载操作不跟随演示反复变化。滚动正文不触发岛内随机换页；背景选择仍只负责风景。
5. 暂停、后台、Reduce Motion 统一约束场景与示例动画。减少动态效果时，静态显示内容和时钟，手动打开工具仍然可用。

这是状态关系草案，不是定时切换的“内容架 / 组件 / 工具”三幕轮播。常驻组件应当留在岛上，工具应由操作打开。

### 必须在原型中回答的空间问题

原桌面岛只有 `328 × 116`，移动端为 `260 × 104`，不适合硬塞完整翻译编辑器。第一版只验证紧凑的示例输入与结果；完整工具外观在指南中用实际界面解释。需要核对真实 App 的摘要与工具页面，避免画出不存在的组件形态。

展开示例不得挡住导航、下载按钮或标题。若现有顶部空间无法兼顾可读性，就减少同屏示例内容，或将详细工具体验放在下方对应功能区；不能靠缩小文字或新增第二座首屏岛解决。具体尺寸、示例入口与展开高度属于下一轮原型的待验证项，本方案不宣称已经解决。

## 5. 正文与独立指南

首页继续沿用现有顺序：首屏 → 功能说明 → 风景 → 泡泡 → Free / Pro → FAQ → 下载。功能区沿用一大两小的层级，用具体动作分别解释暂存、常驻组件和工具；本机优先在事实栏和相关说明中保留。首页不展开全部模块的设置、权限与服务说明。

**需要独立的功能指南。** 当前 App 注册了 11 个内置模块，已经超出首屏和 FAQ 能清楚解释的范围。指南的职责是回答“有哪些、怎么用、哪些免费”，并为支持页提供稳定的链接。

建议入口用“功能指南 / Guide”，从首页功能区及页脚进入，避免导航同时出现含义近似的“功能”和“组件与工具”。沿用现有静态双语页面机制，阅读页采用网站已有的浅色正文表面，不复制首页的整屏演示。

建议目录：

1. 开始使用：认识顶部岛，以及添加和管理组件的入口。
2. 内容架：支持的四类内容、存取、整理、恢复。
3. 常驻组件：时钟、快速笔记、番茄钟、天气、照片、桌宠。
4. 工具：剪贴板、翻译、本机应用、文件查看器。
5. Free / Pro 对照；按功能说明联网、权限、数据去向与恢复办法。

每个条目采用“用途 → 一个实际操作 → 档位与必要限制 → 相关设置”的固定顺序。首页负责让人看懂价值，指南负责让人找到答案。文件路径与实现术语留在开发文档中。

### 产品事实来源

本次重新读取了 `../sill-app/Sources/SillApp/` 中的以下代码，作为后续内容依据：

- `PluginPlatform/FeatureModules/BuiltInFeatureModuleCatalog.swift`：11 个注册模块。
- `ProductTier.swift`：内容架为核心模块；时钟、快速笔记为 Free 组件，其余注册模块要求 Pro。
- `AppModel.swift`：搜索、编辑、固定、标签、批量、最近删除恢复等能力不再要求 Pro；剪贴板抓取等仍有 Pro 门槛。
- `PluginPlatform/FeatureModules/ClockFeatureModule.swift`：时钟支持多实例和紧凑尺寸；默认未启用，因此网站组合应表述为示例配置。
- `PluginPlatform/FeatureModules/Translate/TranslateNativePresentationProvider.swift`：摘要状态与 `.workspace` 编辑器分别呈现，翻译存在空、加载、失败和结果状态。

该 App 工作区正在开发。后续实施需按发布版本复核功能与 Free / Pro 边界，并同步首页、指南、支持、隐私、条款和生成的双语 / SEO 文件。此次未重新查询商店版本，不将开发分支能力表述为已经上线的功能。

## 6. 下一轮实施与 review 顺序

1. 基于恢复后的首页做最小原型：只验证顶部同一座岛如何接收内容、保留时钟、打开工具。保持其他页面和既有文案，便于直接比较设计变化。
2. 先看完整动作，再看静态结果：四类内容抵达、工具打开与返回、手动换景、滚动阅读；保留开始、中间、结束帧。
3. 桌面与移动端同时验证：岛、导航、正文与底部路径的位置关系成立；长英文、键盘、暂停及 Reduce Motion 均可理解和使用。
4. 原型的空间和行为成立后，再实施定位文案、功能指南与相关页面的事实更新；按原静态生成流程同步中英文和 SEO。
5. 最后做代码与视觉 review，检查场景资源加载、旧请求取消、状态保存、可访问性和产品真实性。

### 方案自查

| 检查问题 | 当前方案结论 |
| --- | --- |
| 是否以当前原站为依据，而非只读早期设计文档？ | 是；已对照提交演进、当前 CSS 与运行画面 |
| 去掉文案后，动作是否仍能解释产品？ | 内容暂存有原实现证据；组件常驻与工具操作已明确设计目标，待原型验证 |
| 首屏是否仍由同一场景和同一顶部岛组织？ | 是；保留路径、泡泡、顶部目的地与首屏信息区的职责 |
| 是否把新定位简化成另一套自动轮播？ | 否；组件保留状态，工具由用户打开 |
| 是否用图标代替能力，或暗示不存在的自动操作？ | 已排除自动安装组件、拾取后自动翻译；工具使用明确示例输入与动作 |
| 移动端能否容纳新的状态？ | 尚待最小原型验证，尤其是工具内容高度；不能以本次原站截图代替新方案验收 |
| 是否必须有独立文档？ | 是；完整模块说明归于指南，首页维持原阅读节奏 |

## 7. 回退记录

已恢复本轮修改的 21 个受版本控制文件，并将新增的功能页、`home-story.*`、旧方案与两轮回归材料移出工作区。备份位于 `/private/tmp/sill-web-rejected-rollback-1oc83u58/`，含原改动补丁与逐文件副本。

回退后 `git diff cb3cbc9` 为空。另有 `scene-packs/` 和 `scripts/build-scene-packs.mjs` 共 8 个非本轮文件，回退前后 SHA-256 一致，未被清理。

恢复后的 `prerender-i18n --check`、`build-seo --check`、`check-home-assets`、`git diff --check` 通过；首屏图片预算检查为最坏 606 KiB。这些检查只证明恢复版本的技术状态，不代表新方案已经通过设计或实现验收。