学习笔记 · Friends 创作复盘

同一对象,连续的画面:五套观察手记

HTMLCSSJavaScriptSVG

本轮恢复原有的五套设计:FIRN、LONGPLAY、BRIM、FLIPBOOK、WISP。每套包含八个职责不同的 Web 章节、一张同品牌登录页和四枚独立原创 UI 图形。品牌标识、导出尺寸和状态端点分别计数。

参考证据有日期,也有边界

从 Recent 选取 Cathy Dolle、There is nothing to watch 与 Interfere 的公开页面。既有十月十七日截图分别支持边缘索引、对象密度与阶段解释的观察;十月十八日刷新时,部分首屏仍停在加载画面,因此没有把空白截图当成完整视觉依据。Interfere 的中段与分组结尾、Recent 的目录可重新观察。没有复制照片、电影海报、商标、客户、价格、代码或付费提示词。

借鉴的是稳定坐标、对象的比例以及信息何时出现。FIRN 把边缘索引转成建筑细节;BRIM 用独立轮廓比较帽形;LONGPLAY 让纸套与唱片之间的关系成为阅读顺序;FLIPBOOK 用对象本身说明下一帧;WISP 让一片天空留下可读的观察。未使用参考中的启动面板、自定义光标、全库隧道或持续循环。

五套不同的阅读结构

品牌画面与组织内容动效本地操作
FIRN大幅房间、短引言、剖面舞台、边界索引、石凳细部、明暗对照同一剖面资产从室内近景拉远,标注与光路进入同一坐标记录开口、光形与停留处,下载观察
LONGPLAY居中刊头、纸套组合、双侧聆听提示、开放步骤行、橙色停顿与两面文字唱片从纸套中有限露出,纸套退向另一侧切换聆听提示,下载自己的 liner notes
BRIM大留白、三帽轮廓、边缘长图、窄冠部细节、深红毡面与俯视线图三顶具有真实透明轮廓的帽子形成前中后层视差展开形状说明,下载形状卡
FLIPBOOK大刊头、横向翻页书、起终点并排、逐格长条、路径舞台和静帧索引同一球推进,经过的线保留,反向阅读不抹去已有轨迹选择高/低弧线,下载真正不同的 SVG 绘图纸
WISP整幅天空、窄文字、错高云形索引、蓝色空隙、词汇行与中央手记云中的视线有界跟随,离开后回正阅读形状与空隙,下载天空笔记

相较最近似历史,本轮分别改变首屏轮廓、章节排列、网格、材料、主效果与具体操作;登录页沿用同一品牌颜色、字体、线条和素材,同时先完成输入任务。没有把同一营销页骨架换五种颜色。

修复连续性,而非给跳切加过渡

FIRN 旧小样把一张真实感室内图裁成天窗,再叠到透视 SVG 上。开口的位置、相机与材质不能对应,手机图也像悬浮的补丁。透明度再平滑,仍是两个不同的空间。

恢复时先补制与原房间对应的高质量剖面图,保留圆形天窗、左侧长凳、后墙门洞与光斑。关键转场只使用这张图:由近景拉远、重排画面,再出现 HTML 标注和光路线;不把新照片叠到粗糙图形上。手机直接展示完整图与普通文档流中的说明。它是概念建筑的二维观察,不是精确建筑模型或采光模拟。

BRIM 同样先处理资产:三顶帽子分别有真实透明轮廓,再形成三个深度层。用矩形裁切一张照片并称为立体景观,不能得到同样的关系。场景、帽子、唱片纸套、翻页书与天空均为本项目生成的概念图,不是商品目录、音乐版权内容或真实气象资料。系统字体没有作为文件重新分发。

状态、图形和资源的边界

二十枚图形独立绘制并接入既有目录;描边、双色和 PNG 仍只算一个造型。小尺寸在十六、二十四、三十二像素及浅深背景下检查;PNG 由实际浏览器渲染 SVG,避免不同渲染器解释继承描边的差异。旧造型和下载能力保留。

Morphicons 官方项目 的既有同源 DOM 版本 1.7.1 只负责详情开合的状态插值,许可 MIT,显式使用 reducedMotion: user。原生 details、静态加减端点和下载在模块失败时仍存在。没有把库图标或形变端点计成新的原创图形。

登录只执行空值与格式检查、密码显隐和如实不可用反馈。格式合格后清空输入,不发送、不存储凭据,不伪造账户或密码错误。认证、支付、消息和设备仍不可用。笔记仅保留在当前页面,下载由用户主动触发。

验证应该解释它证明了什么

源码、构建、图片和交互分别记录。全页截图前要处理懒加载:等待尚未进入视口的图片解码,会让测试停住,不能据此判断产品失效。系统减少动态、触屏、无脚本、模块失败与图片失败分别检查,后台和 BFCache 的实际结果单独归档。

本轮未重新扫描私人 Vault,也不导出个人 Skills 正文、凭据、本机路径或受限资料。实体设备、Safari、Firefox、原生操作系统文字设置、帧率和真实业务联调未执行;计算字号加倍不等于系统原生字号测试。发布状态以目标提交的 CI、部署和正式域名验收记录为准,本篇不把本地构建当成上线事实。