学习笔记 · Friends 创作复盘
参考要落实到构图:五套页面的重做与验证边界
五套概念品牌各有八个职责不同的主体章节、一个同品牌登录页和四枚独立原创 UI 图标。四十个平面风格导出对应二十个图形;五个品牌标识及其尺寸导出单独计算。作品提供真实的本地文件操作,认证服务暂未接入。
先拒绝一份不够好的初版
初版虽然用了五种主题和动效,仍反复出现扁平拼图式插画、横线分段和相近的标题节奏。更换主题颜色并不能改变这种同质化。技术检查可证明资源或按钮可用,无法证明参考复刻或视觉品质合格。
参考观察必须覆盖稳定首屏、中段、末段和手机。开场动画、空白滚动帧与访问验证页要分别记录,不能把它们当作完整设计。这个批次中,普通无头浏览器访问 Aeye 出现验证页;现有可访问浏览器实际读到了公开页面,补全了稳定截图。没有操作验证控件或绕过限制。
两套参考,一套语言贯穿到底
Aeye 的公开预览采用上方黑色网格、下方大标题与侧边行动区,随后以开放的宽容器、细线和技术排版连接章节。源铺详情用于记录来源。LATCH 采用这一整体关系:约四百像素的暗色上段、七十六像素级标题、右侧简短操作区、双列工具查询、开放条目和反色收尾。工具箱、机械眼和图标均重新绘制,不使用原站商标、客户、数据、代码或素材。
Agentflow 的公开预览把居中标题和大型有纵深的对象放在一个完整首屏里,后续用宽留白与独立内容区调整密度。源铺详情记录模板身份。CANOPY 借鉴这个构图和节奏,以原创地图纸、织物包、铅笔和便笺代替原站终端截图。渐变只用于表现纸面、织物、金属和光照,接触阴影跟随同一个方向,避免五个主题都使用一张普通卡片倾斜。
公开预览不等于获得付费源码或素材许可。本轮只观察排版和构图,没有购买模板或复制许可不明素材,也没有新增外部运行时依赖。
其余三套从材料重建结构
| 品牌 | 首屏与章节差异 | 真实操作 | 主要动效 |
|---|---|---|---|
| BLOC | 橙色印刷页、大字与倾斜七片构图;黑色形状索引、浅纸固定舞台、错位负形和选择区 | 选择方形或菱形构图,图像及 SVG 下载同步 | 有限滚动区内拆开七片,再回到完整方形 |
| CANOPY | 整块圆角首屏、纸与包的纵深;深绿口袋区、浅底勾选清单、靠右剖面和开放备忘 | 按当前勾选下载个人物件清单 | 地图、包和随身物件的三层视差 |
| LATCH | 黑网格上段与白底大标题;双列查询、抽屉剖面、开放重置行和反色收尾 | 分类与名称搜索组合过滤,下载绘画或纸模清单 | 工具箱瞳孔有限跟随,登录密码聚焦时避开 |
| SETLIST | 深色剧场、巨幅斜体标题、带折线的节目纸;三段章节覆盖,浅纸编辑区 | 填写开场、中场和终场备注,下载真实运行顺序 | 章节按阅读顺序覆盖;登录页为纸张分层视差 |
| HELIO | 薄大字、象牙圆盘、铜色折件;深棕环绕舞台、影子对照、靠右折纸说明 | 选择圆盘或半盘,下载对应 SVG | 太阳绕明确中心走有限圆弧,中心折件保持静止 |
页面各自使用同一套字体角色、色彩、图标笔画、材料和控件间距。BLOC 使用项目已有的 Anton 字体及其 OFL 许可;其余使用合适的系统字体栈,没有复制系统字体文件。HELIO 的纸形用于绘图观察,未校准为计时工具;CANOPY 是个人物件备忘,未冒充专业户外安全清单。
真实界面状态比状态按钮更重要
工具目录最初有一个“无选中”选项,只承担强制空态的作用,审查后删除。最终空结果由真实工具名称查询产生。勾选、筛选、选择和编辑只影响当前页面;下载读取当前状态,没有外部消息、上传或持久化操作。
登录在提交拦截器就绪前保持字段禁用。空值、邮箱格式、密码长度、显隐、Escape 清空和自然不可用提示在本地处理。合格输入不会被发送,不生成 token,不伪造登录成功;后台隐藏或离开页面也清空字段。
静态资源与动效都要有可检查的终点
浏览器内联 HTML 可容忍裸 data 属性,独立 SVG 文件却要求有效 XML。审查发现部分封面和纸形无法解码后,全部独立 SVG 改用显式属性值,并同时检查 XML 与浏览器图像解码。仅仅 HTTP 200 不能证明图像可用。
七片方形也需要实际拼合正确。最终两枚大三角、一枚中三角、两枚小三角、一枚方形和一枚平行四边形无重叠覆盖完整方形;登录页为不同层设置不同深度,避免所有物件同速移动而假称视差。
指定动效默认随自然输入就绪,没有播放入口或参数面板。滚动仅在有限舞台内重组和环绕,反向从当前位置复原;窄屏、系统减少动态效果、无精细指针或资源失败保持完整静态画面和自然文档流。后台停止更新,页面返回重新安装自身监听,空闲期间没有持续帧循环。
Morphicons 官方仓库的既有 1.7.1 MIT DOM 模块继续同源使用,显式指定 reducedMotion 为 user。加减号由真实 details 展开状态决定,快速反向、离屏和后台会落到当前端点;无脚本或模块失败时静态端点仍然正确。这组状态符号不占二十枚原创 UI 图标名额。
验证与公开边界
每套在内部统一评审中分别记录代码检查、三视口全页截图、实际操作、原创图标小尺寸、历史结构比较和降级。浏览器触屏模拟不代表实体设备;Safari、Firefox、真实认证联调和性能评分未执行时记为 not-run。
本篇只使用本项目实现和上述公开参考,没有扫描私人知识库、导出个人技能正文或凭据。内部评审、测试与状态夹具不进入公开构建。只有目标提交 CI 成功且正式域名内容、安全头和核心操作核验通过,才记录 published。
当前交付边界
本批仍未通过全部视觉门槛,尚未提交或发布。正式域名仍为已发布作品,本批预览以内部归档记录为准。不能把候选构建里的入口或实际本地下载当作线上交付。
10 月 11 日恢复检查:从实际 DOM 修正设计
上轮保留了视觉失败,未提交或发布。恢复先针对真实 CSS 级联和 DOM 修复:五套手机登录在品牌作用域内改为完整单列,避免通用规则被品牌声明覆盖;LATCH 把工具查询移回结果区,删除重复的外层双列网格;CANOPY 定位真正的 pockets 元素,改为高对比的深底开放内容;SETLIST 为浅纸编辑区定义独立占位前景;BLOC 的普通文本和登录按钮使用各自可读的颜色角色。
参考构图也要贯穿中段。CANOPY 把第一段从少量并列文字改为说明与收纳纸的宽幅对照,保留地图纸、包和便笺的品牌语言。LATCH 的工作空间图与说明采用相同宽容器的左右关系,保持工具列表扫描路径。这些是原创内容适配,不声称复制付费模板代码、素材或所有原站流程。
同一来源的首屏和中段需要分别看实际画面。进入动画尚未结束时的空白截图不能作为参考质量证据;先观察页面稳定内容,再比较标题、物件比例、留白与相邻章节。当前服务边界仍是本地交互:认证未接入,格式校验不代表登录成功。公开状态必须由本轮目标提交的 CI 和正式域名验收另外确认。
恢复共执行三轮集中修复,另外为中间宽度扩大了单列阅读范围,避免放大文字后标题和表单挤在窄栏。实际计算字号放大至 200% 的检查不等于操作系统原生缩放或实体设备测试。十页的图像资源失败、静态动效降级、真实后台与 BFCache 返回也分别保留了证据。
最后仍有两类问题:参考适配的后半页没有保持原参考的多层布局节奏,CANOPY 的 Remember 标签在放大文字时发生不良断行。这些限制保留为 needs_fix,不以技术检查通过覆盖视觉失败。下一次恢复应对照稳定的中段和收尾画面,明确哪些是主题必需的适配,哪些仍欠缺布局与物件细节。
10 月 12 日:后半页也要有完整对象
恢复继续围绕两个具体问题,而不是更换主题或追加动效。CANOPY 用不等高的口袋区、宽幅包内平面图、回程笔记与三项提示建立连续的内容层级;空白口袋也是收纳结构的一部分。LATCH 将三个标签矩形改为纸张、工作面、零件和卡扣组成的原创抽屉平面图,并补上可读的重置步骤、真实清单文件对应的纸样区和分组收尾。图形是明确坐标下的原创几何示意,不代表设备规格或安全操作说明。
Remember 的问题来自标签被塞进过窄的网格轨道。恢复后标签与问题上下排列,保持完整词形,在中间宽度主动合并为单列。章节间距规则原先用否定 ID 选择器,优先级意外高于品牌章节,导致新面板的内边距失效。改为否定对应首屏类名后,局部章节规则能正常生效。不能只看新规则写在哪里,必须读取实际计算结果和截图。
本轮仍分别记录浏览器模拟、实际原生生命周期与服务边界;没有扫描私人来源,没有修改 CSP、凭据或外部服务权限。只有完成最终视觉与技术确认、目标提交的 CI 和正式域名验收后,才能更新发布状态。
纸样选择须同时更新下载目标、可见内容与状态提示;通用选择逻辑以初始下载地址为资产基准,使独立归档的根页面与原有子目录拥有一致的文件解析。