---
sensitivity: public
---
# 让对象决定版面：键盘、生物、海报、庭院与轨道

五套概念品牌各自有八个职责不同的主体章节、配对登录页和四枚独立原创UI图标。本轮没有创建真实商家、账户系统、支付或消息服务。图标的两种导出风格与品牌尺寸导出不重复计算为独立图形。

## 五种结构从五个对象出发

|品牌|页面结构|真实操作|主动效|
|---|---|---|---|
|KEYWELL|宽键盘横幅、独立部件舞台、布局对照和开放规格行|选择紧凑或分体键盘布局，下载不同文字指南|有限固定区内键帽与底板分离、归位|
|ODDMENT|右上大标题、左下生物、档案长行与检索结果|筛选想象生物、填写名称并下载角色卡|瞳孔随指针有限移动|
|CROMA|窄标题配竖版画幅、三张作品叠放、负空间解析|选择三种原创海报并下载对应SVG|章节作品按阅读顺序覆盖|
|COURT|小标题与大轴测景观、边缘剖面、开放走道与平面|切换方形或长形庭院，画面与下载同步|前墙、地面与后墙分层视差|
|LOOPLINE|不对称椭圆线路、站台、路线长卷与票式下载|比较环线与支线，下载不同站序|列车绕车站沿椭圆轨道运动|

每套页面的登录、表单反馈和手机布局保持品牌的字体、色彩、几何语言与间距。共享脚本只承担认证边界、状态变形和按需动效，不以一份营销页模板复制五个主题。

## 参考的可访问性也是证据边界

本轮读取[源铺Aeline详情](https://yuanpu.cc/templates/aeline-website-template)及[Lifelogx详情](https://yuanpu.cc/templates/lifelogx-website-template)。Aeline公开预览的浏览器画面进入安全验证，未完成首屏、中段、尾部和手机的真实设计观察，因此未将其记作已验收的复刻来源。没有购买、复制模板源码或素材，也没有绕过访问限制。五套采用自主构图与本轮原创矢量，字体使用系统栈。

[已固定版本的Morphicons](https://github.com/guillermolg00/morphicons)用于原生details的加减号状态变形。继续使用1.7.1同源DOM模块与MIT许可，显式设置reducedMotion为user。图标状态由真实展开属性决定；动画中途反向、后台、离屏和模块失败均要保持最终状态可理解。加减端点不占二十枚原创UI图标名额。

## 首轮审查发现了什么

- 分体键盘不能只把中央一列换色。最终用真实间隔将两个六列键区分开，让图形和文字指南一致。
- 庭院切换后只更改下载链接会留下误导画面。选项现在同时改变平面轮廓及可访问描述。
- 椭圆轨道不能用绕中心的圆形旋转替代。列车的位置由椭圆坐标计算，方向单独旋转，静态几何和动效分别置于嵌套层。
- 两个品牌的首字母都是C，不应交付同一字母标记。五套标志改成独立的键区、生物、反形圆、庭院角和轨道图形。
- 红底票据的浅色正文对比不足。票据采用深色品牌表面，保持小字清晰；过紧的标题字距也统一放松。

两项字体token声明后没有用于标题，第二轮将它们接入。键盘首轮字符串替换错误地修改同一图块两次，最终按图块类名定位并检查48/52格与可见间隔；仅凭脚本退出成功不足以证明图像正确。

## 动效与文件应该有明确终点

没有无限跑马灯、装饰滑杆、播放按钮或需要点击启动的动画。指针与滚动只在输入变化时请求一帧；离屏与后台停止无用更新，返回后从当前状态恢复。窄屏取消固定与叠放，触屏显示完整静态场景。系统减少动态效果和资源失败时仍能阅读、展开说明与下载文件。

静态下载链接始终对应真实文件。增强脚本就绪后，选择框才启用；ODDMENT的角色卡只使用当前输入，不保存浏览器状态。主作品下载是用户主动的本地文件动作，没有邮件、上传或外部业务调用。

登录字段在脚本拦截提交前禁用。空值、邮箱格式、密码长度与密码显隐只在本地处理；格式合格后提示登录不可用并清空输入，不生成token、不伪造成功或服务端凭据错误。隐藏与离开页面时也清空凭据。

## 验证和公开范围

批次记录分别保留代码、构建、截图、交互、下载、动效和降级证据。桌面、平板和手机浏览器模拟不代表实体设备验收；未运行的浏览器、性能测量和真实服务联调不写作通过。上线只有在目标提交CI与正式域名核验均通过后才成立。

知识增量仅来自本项目与上述公开参考。没有重新扫描私人笔记或复制个人技能正文。内部评审、源脚本和状态夹具不进入公开构建，旧作品和路由保持可访问。

## 打开作品
- [KEYWELL网站](https://shuihuaibin.com/web-cases/keywell/) / [登录页](https://shuihuaibin.com/login-cases/keywell/)
- [ODDMENT网站](https://shuihuaibin.com/web-cases/oddment/) / [登录页](https://shuihuaibin.com/login-cases/oddment/)
- [CROMA网站](https://shuihuaibin.com/web-cases/croma/) / [登录页](https://shuihuaibin.com/login-cases/croma/)
- [COURT网站](https://shuihuaibin.com/web-cases/court/) / [登录页](https://shuihuaibin.com/login-cases/court/)
- [LOOPLINE网站](https://shuihuaibin.com/web-cases/loopline/) / [登录页](https://shuihuaibin.com/login-cases/loopline/)