---
sensitivity: public
---
# 五套产品世界：把差异化落实到结构与真实操作

本轮新增 20 个独立图标、5 个登录页与 5 个完整网站。每套网站包含八个具有不同信息职责的主体板块；品牌标记、双色版本和 PNG 导出不重复计入图标数量。

## 同一批次也要比较结构

[FOLIO](https://shuihuaibin.com/web-cases/folio/) 把阅读放在中心。横向大标题、书架摄影、窄章节侧栏、四本原创短文封面、双栏文章、阅读清单与读书习惯形成编辑式节奏。主要操作是筛选条目、加入或移除清单，再下载真实的文本清单。

[STRATUM](https://shuihuaibin.com/web-cases/stratum/) 以全幅陶器静物开场，字标沉在画面底部。后续从三件器物进入单件观察，再进入器型选择、材料、照料、原则和资料下载。登录框放在摄影中的不透明暖纸面板上，文字不依赖背景图的亮暗才能阅读。

[FIELDWORK](https://shuihuaibin.com/web-cases/fieldwork/) 是自然观察笔记。首屏分为窄索引、粗体文字和标本联系表。内容沿观察对象、形态线索、随手记录、季节提示和观察纸展开。栖息地筛选改变实际条目；清单导出保留用户勾选的项目，不上传观察记录。

[MONOFORM](https://shuihuaibin.com/web-cases/monoform/) 使用巨型无衬线字标、钴蓝序号和零件行列。交互比较三格与五格的收纳安排，图形与文字同步变化。它提供编辑用 SVG 和文本参考，没有把视觉构型包装成工程制造规格，也没有增加无法兑现的购买流程。

[MARGIN](https://shuihuaibin.com/web-cases/margin/) 把可编辑的写作页直接放在首屏。后续是写作提示、起笔方法、段落、修改前后对照、句子建议和文本文件说明。草稿字数随输入更新，下载文件包含当时输入的标题和正文；没有假装调用文字生成服务。

这些页面共享基础标签、表单与简单行为工具，但没有共享完整页面骨架。阅读的章节栏、陶器的全幅摄影、观察的联系表、收纳的零件行列和写作的首屏编辑器，分别承担不同的信息任务。配色改变只占差异的一小部分。

## 服务未接通时仍然可以完成界面

五套登录页只支持本地字段校验与真实的不可用反馈。空值和格式错误关联字段，焦点进入第一个错误；显示密码可以切回遮蔽。提交合格数据后清空密码，页面隐藏或离开时清空输入。没有认证请求、持久化凭据、生成 token、假加载计时器或成功跳转。

表单在静态 HTML 中默认禁用，只有事件监听就绪后才启用。不可用提示也是初始文本，因此脚本加载失败不会留下一个能够原生发送数据的表单。测试使用合成输入，与真实账户无关。认证、支付、消息和设备服务均未接入，界面测试不能等同于这些服务的端到端验证。

## 动效有终点，也有退出路径

主体板块进入视口时只做一次 500 毫秒的短入场。离屏或切到后台时暂停，回到可见位置继续剩余过程，已经结束的动画不重复播放。系统减少动效时直接保留完整内容，并取消运行中的非必要动画。页面没有播放、暂停、氛围或装饰参数面板。

动效只改善进入时的连续感；筛选、清单、草稿和资料下载才是实际功能。即使动画 API 不可用，正文和原生导航仍可阅读。

## 二十个图标如何保持可用

五组图标分别是阅读器具、陶作工具、自然观察、桌面器件和文字编辑。每组四个独立造型，统一在 24×24 画布绘制路径，再导出线性、双色 SVG 与透明 PNG。书挡、分页索引、活字字模与装订锥采用较方正的端点；陶器用圆弧轮廓；植物保留分枝与种荚的辨识线索；器件强调几何连接；文字组采用排版符号和纸页层次。

检查不止是语法：内部预览在明暗背景上同时展示 16、24、32 像素。几何来源、编辑器预览和导出使用同一目录，避免“缩略图是一套，下载又是另一套”。品牌标记另交 SVG 与三种 PNG 尺寸，不挤占新增二十个库图标的额度。图标继续使用原库 MIT 许可。

## 降级检查能发现正常网络下看不到的问题

实际阻断图片时，部分网格被替代文字的最小内容宽度撑开。修复为新页面的网格与内容项允许收缩，复查后手机页面宽度仍等于 390 像素。另一个细节是移动端隐藏换行标签后，英文单词可能连接在一起；在内容中保留正常空格修复了这个问题。

文件下载还需要核对结果。阅读清单、观察记录、SVG 和草稿都检查实际保存的字节内容，而不只检查按钮事件。浏览器自动化的下载通知没有可靠返回时，本地文件证据提供了另一种核实方式。

## 素材、历史和知识边界

五套概念与独立无文字主图来自内置图像生成；界面与全部图标是实际 HTML、CSS、JavaScript 和 SVG。生成摄影描述概念物件，不附带真实品牌、客户评价或材料认证。字体复用既有本地字体及系统字体，没有新增页面运行依赖。

设计先读取真实目录、历史记录和近期预览，再比较相近的三套历史作品及同批其他方案。没有以文件哈希代替视觉差异，也不宣称全球唯一。缺失的反馈文件和未加载完成的历史三维预览单独记录。

本文只更新项目中已允许公开的创作知识来源，再沿明确 manifest 生成资料馆条目。没有重新扫描私人笔记或导出个人技能正文。设计评审、测试夹具、详细来源、服务边界和图标完整预览留在独立交付资料中。

## 验证范围

真实浏览器检查覆盖桌面、平板和手机视口、八个主体板块、英文状态、主要操作及脚本和图片失败。单元测试覆盖凭据边界、有限动效、离屏与后台恢复、系统减少动效分支；没有修改操作系统偏好。浏览器视口模拟不代表 iOS 或 Android 真机测试，也没有用未经测量的性能分数描述结果。最终发布状态与 CI、生产资源核对证据记录在每日台账中。