学习笔记 · Friends 创作复盘
让对象决定版面：键盘、生物、海报、庭院与轨道
五套概念品牌各自有八个职责不同的主体章节、配对登录页和四枚独立原创UI图标。本轮没有创建真实商家、账户系统、支付或消息服务。图标的两种导出风格与品牌尺寸导出不重复计算为独立图形。
五种结构从五个对象出发
| 品牌 | 页面结构 | 真实操作 | 主动效 |
|---|---|---|---|
| KEYWELL | 宽键盘横幅、独立部件舞台、布局对照和开放规格行 | 选择紧凑或分体键盘布局，下载不同文字指南 | 有限固定区内键帽与底板分离、归位 |
| ODDMENT | 右上大标题、左下生物、档案长行与检索结果 | 筛选想象生物、填写名称并下载角色卡 | 瞳孔随指针有限移动 |
| CROMA | 窄标题配竖版画幅、三张作品叠放、负空间解析 | 选择三种原创海报并下载对应SVG | 章节作品按阅读顺序覆盖 |
| COURT | 小标题与大轴测景观、边缘剖面、开放走道与平面 | 切换方形或长形庭院，画面与下载同步 | 前墙、地面与后墙分层视差 |
| LOOPLINE | 不对称椭圆线路、站台、路线长卷与票式下载 | 比较环线与支线，下载不同站序 | 列车绕车站沿椭圆轨道运动 |
每套页面的登录、表单反馈和手机布局保持品牌的字体、色彩、几何语言与间距。共享脚本只承担认证边界、状态变形和按需动效，不以一份营销页模板复制五个主题。
参考的可访问性也是证据边界
本轮读取源铺Aeline详情及Lifelogx详情。Aeline公开预览的浏览器画面进入安全验证，未完成首屏、中段、尾部和手机的真实设计观察，因此未将其记作已验收的复刻来源。没有购买、复制模板源码或素材，也没有绕过访问限制。五套采用自主构图与本轮原创矢量，字体使用系统栈。
已固定版本的Morphicons用于原生details的加减号状态变形。继续使用1.7.1同源DOM模块与MIT许可，显式设置reducedMotion为user。图标状态由真实展开属性决定；动画中途反向、后台、离屏和模块失败均要保持最终状态可理解。加减端点不占二十枚原创UI图标名额。
首轮审查发现了什么
- 分体键盘不能只把中央一列换色。最终用真实间隔将两个六列键区分开，让图形和文字指南一致。
- 庭院切换后只更改下载链接会留下误导画面。选项现在同时改变平面轮廓及可访问描述。
- 椭圆轨道不能用绕中心的圆形旋转替代。列车的位置由椭圆坐标计算，方向单独旋转，静态几何和动效分别置于嵌套层。
- 两个品牌的首字母都是C，不应交付同一字母标记。五套标志改成独立的键区、生物、反形圆、庭院角和轨道图形。
- 红底票据的浅色正文对比不足。票据采用深色品牌表面，保持小字清晰；过紧的标题字距也统一放松。
两项字体token声明后没有用于标题，第二轮将它们接入。键盘首轮字符串替换错误地修改同一图块两次，最终按图块类名定位并检查48/52格与可见间隔；仅凭脚本退出成功不足以证明图像正确。
动效与文件应该有明确终点
没有无限跑马灯、装饰滑杆、播放按钮或需要点击启动的动画。指针与滚动只在输入变化时请求一帧；离屏与后台停止无用更新，返回后从当前状态恢复。窄屏取消固定与叠放，触屏显示完整静态场景。系统减少动态效果和资源失败时仍能阅读、展开说明与下载文件。
静态下载链接始终对应真实文件。增强脚本就绪后，选择框才启用；ODDMENT的角色卡只使用当前输入，不保存浏览器状态。主作品下载是用户主动的本地文件动作，没有邮件、上传或外部业务调用。
登录字段在脚本拦截提交前禁用。空值、邮箱格式、密码长度与密码显隐只在本地处理；格式合格后提示登录不可用并清空输入，不生成token、不伪造成功或服务端凭据错误。隐藏与离开页面时也清空凭据。
验证和公开范围
批次记录分别保留代码、构建、截图、交互、下载、动效和降级证据。桌面、平板和手机浏览器模拟不代表实体设备验收；未运行的浏览器、性能测量和真实服务联调不写作通过。上线只有在目标提交CI与正式域名核验均通过后才成立。
知识增量仅来自本项目与上述公开参考。没有重新扫描私人笔记或复制个人技能正文。内部评审、源脚本和状态夹具不进入公开构建，旧作品和路由保持可访问。