# 从小形态到真实操作：五套设计的结构与降级

本轮围绕矿物观察、织纹、纸风筝、联想词游戏和纸窗景观完成五套网站与配对登录页。每个网站有八个职责不同的主体章节；二十枚UI图形独立绘制，五套品牌标记另计。概念品牌与静态内容不代表真实商家或已开通账户服务。

## 同批差异先落在结构上

|作品|结构|真实可完成操作|动效|
|---|---|---|---|
|LODE|居中轻标题、三联晶体、侧栏与叠放观察页、标本索引|筛选尖角与层状形态，下载观察纸|章节卡片有序覆盖|
|SELVAGE|强排版、经纬线横幅、宽组织图、顺序工序|切换平纹与斜纹，下载不同SVG|固定舞台的线层分离与重组|
|DRIFTLINE|天空留白、低位衬线标题、四部件索引、纵向折法|选择菱形或三角形纸形，下载对应轮廓|拟人风筝围绕舞台中心有限环绕|
|wordkin|大字与字母角色、可编辑词链、横向起点索引|添加不重复词语、撤销、选起点、保存本轮|角色视线跟随|
|FENSTER|窄标题、中央拱窗、非等高窗型目录、景深长行|筛选窗型、展开说明、下载独立窗框|纸景前中后三层指针视差|

历史比较实际查看了十五个相近页面：矿物与自然观察、陶器、字样比较；织纹与针迹、折纸、器件比较；风筝与路线棋盘、星图、骑行比较；词链与任务清单、明信片、写作比较；纸窗与空间编排、植物、港湾比较。记录相同点后，逐项检查首屏轮廓、网格、章节顺序、交互和图标语言。差异来自内容的使用方式，不由配色和文件哈希决定，也不代表全球唯一。

## 公开参考需要可观察的证据

LODE 使用[源铺 Planar详情](https://yuanpu.cc/templates/planar-website-template)与[公开预览](https://preview.yuanpu.cc/planar-website-template/)研究居中标题、三联主视觉、侧栏配宽面板和收束尾部。观察包含桌面首屏、中段、尾部与手机。实际作品改为原创晶体切面、观察词汇与本地筛选，没有复用模板源码、照片、商标、字体或业务数据。

Orengo只完成首屏观察，随后预览访问受限，因此没有采用。公开可见不等于拥有付费源码或素材许可，本轮没有购买、绕过访问限制或新增生成预算。其他四套自主组织，所有场景、品牌和新增图标为本轮手工矢量。

## 动效跟随输入，也要知道何时停下

卡片堆叠由原生sticky组织，窄屏恢复普通文档流。织线层随有限滚动分离再归位，不抢滚轮；风筝围绕明确中心转动，标题与表单始终位于独立层。视线和微缩景观只在精细指针下响应，瞳孔有明确边界；密码聚焦时视线避开输入。

所有增强都从完整可见的SVG起步。窗口变化、反向滚动、中途刷新与锚点定位按当前位置计算。离屏与后台取消待执行帧，页面离开时清理自身监听，返回时仅安装一次。系统减少动态效果下保留完整静态构图，触屏无需悬停。没有无限装饰循环、播放面板或装饰参数。

原生details的加减号由[固定版本Morphicons DOM](https://github.com/guillermolg00/morphicons)接收原创路径实现，沿用MIT的1.7.1同源模块，并显式设置reducedMotion为user。图形端点先存在于HTML；库失败时静态符号和原生展开仍有效。它们不占二十枚独立图标名额。

## 两轮集中修复的具体收获

- 风筝的旋转原点必须与角色几何中心有明确距离。第二轮根据实际中段截图增加轨道半径与中心标记，避免把自转当成环绕。
- 固定舞台失效可能来自后写的同优先级position规则，而非滚动算法。DRIFTLINE明确限定桌面和允许动态效果时的sticky，手机仍回归普通流。
- 负边距能制造桌面拼贴，也会在手机让字母角色盖住标题。wordkin改为正常单列流，保留字号与角色辨识度。
- 大标题的对比通过，不代表正文通过。SELVAGE提高红色底明度，并让深底章节使用象牙色正文。
- 脚本缺失时，选择框不能留下“看起来可切换、实际无效果”的状态。增强控件静态禁用，监听就绪后启用；原生文件链接保持可用。
- 原创数量需要看语义和轮廓。像日历的标签改为标本连签，第二个纸拱改为裁切线图形，避免把轻微变体算成新图标。

## 操作结果与服务事实

词链仅保留在当前页面，最多十二项；重复词、空值都有自然反馈，选择新起点会替换本轮，页面事先说明保存方式。下载包含实际当前词语，静态降级提供起点纸。织纹、风筝和纸窗的不同选项对应不同文件，不只改变标签。矿物内容用于观察，不作为鉴定；纸风筝用于室内纸形研究，不是试飞过的制作规格。

登录字段在脚本拦截前禁用。空值、格式、密码显隐与不可用反馈分别处理；合格输入、后台隐藏与离开页面均清空凭据，不发送请求、不写入存储、不伪造登录成功。认证、支付、消息与设备服务均未接入。

## 验收与发布边界

检查范围包括桌面、平板、手机全页、键盘与触屏、实际状态、英文文案、动效正反向、减少动态效果、后台和资源失败。图标以16、24、32px在深浅背景实看，PNG从浏览器的真实SVG渲染导出，下载另核对字节。

浏览器模拟不代表实体设备、Safari或Firefox；未测量Lighthouse或帧率，不据静态扫描作性能承诺。构建、CI成功与正式域名验收是不同阶段，最终状态由批次台账与生产记录确认。只有显式公开白名单内的作品与项目知识资料进入构建，内部评审、截图和状态夹具留在归档。未扫描私人笔记或公开个人技能正文。

## 打开作品
- [LODE 网站](https://shuihuaibin.com/web-cases/lode/) / [登录页](https://shuihuaibin.com/login-cases/lode/)
- [SELVAGE 网站](https://shuihuaibin.com/web-cases/selvage/) / [登录页](https://shuihuaibin.com/login-cases/selvage/)
- [DRIFTLINE 网站](https://shuihuaibin.com/web-cases/driftline/) / [登录页](https://shuihuaibin.com/login-cases/driftline/)
- [wordkin 网站](https://shuihuaibin.com/web-cases/wordkin/) / [登录页](https://shuihuaibin.com/login-cases/wordkin/)
- [FENSTER 网站](https://shuihuaibin.com/web-cases/fenster/) / [登录页](https://shuihuaibin.com/login-cases/fenster/)