学习笔记 · Friends 创作复盘
连接、折面与平衡:让对象决定阅读结构
本批五套概念品牌各有八个职责不同的网页章节、同品牌登录页和四枚独立原创 UI 图标。二十个图形对应四十份描边与双色 SVG,并各有透明 PNG 导出;五个品牌标识与尺寸导出单列。主要操作是浏览、选择原创图纸和下载自己的观察文字。
一套参考,五种对象
RELAY 观察了源铺 Central 详情与具体公开预览的首屏、中段、结尾及手机 iframe。大号低位两行标题、中心空间对象、靠右行动、宽幅圆角说明、错位媒体和分组收尾是贯穿页面的目标。实现用原创金属经线与连接环代替原站粒子球,用规划图纸代替其未授权服务、客户、评价、价格和数据。原站过渡中的灰白空帧不算稳定画面,观察待内容出现后再比较。没有购买模板,没有复制付费代码、影像、字体或商标。
其余四套从对象自身出发:PIVOT 是轴与叶片,softspot 是织面和表情,FOLDBAY 是一张纸的内外,APOGEE 是悬线与支点。它们分别使用正交工程页、横幅角色舞台、连续折面覆盖和错位展览网格。共享的是无样式的下载、表单与动效基础能力,不共享完整营销页骨架。
| 品牌 | 主要结构 | 真实操作 | 最近似历史及结构差异 |
|---|---|---|---|
| RELAY | 低位巨字、宽灰面板、错位图纸、开放连接带 | 选择直线/分支图,下载输入与交付笔记 | LATCH、AFTERHOURS、CANOPY;首屏对象位置、章节顺序、网格与收尾不同 |
| PIVOT | 小标题工程侧栏、下缘字标、有限固定重组、剖面与轴线 | 选择开合叶片图,写部件观察 | MARROW、KEYWELL、LATCH;器物总览与分层轴、细宽网格、图纸阅读不同 |
| softspot | 角色横幅、轮廓图鉴、错位织面、条状缝线、安静表情 | 选择原创脸部线稿,写角色线索 | NIM、ODDMENT、pip!;群像首屏、图鉴排列、织面章节及中央登录不同 |
| FOLDBAY | 宽水面、短引言、两章折面覆盖、波纹与余白 | 下载纸船图、写纸上航行想法 | SETLIST、MOTIF、CANOPY;全景开场、折面阅读网格、边缘节奏不同 |
| APOGEE | 偏轴三栏、宽支点说明、环绕段、不等宽平衡关系 | 选择悬挂图,写平衡想法 | FATHOM、HELIO、LOOPLINE;纵向悬线、三栏开场、形态比较与表单路径不同 |
PIVOT 在实施前检查旧路由时发现 RIVET 已存在,及时换用独立名称并恢复原页原文。历史 ID 和造型不能只在新增之后才检查;既有 RIVET、所有旧作品及游戏均保留。
本地原创素材与逐页动效
五个场景由本地 Blender 建模、打光和渲染。金属经线、黄铜铰链、织物角色、折纸船和悬挂圆片有各自材质;四套按同一相机分出三个透明层。预渲染图层是二维图片,不宣称实时 WebGL 模型、制造精度或可用产品性能。SVG 图纸是明确坐标的几何图,不冒充工程、维修、悬挂安全或折纸生产指南。
RELAY 的连环视差使前中后连接关系可读。PIVOT 在有限滚动区间沿同一轴分开叶片与轴桶,反向滚动复位。softspot 的瞳孔有限跟随指针,密码焦点时视线避开。FOLDBAY 的两章在有限容器中依次覆盖,外面的内容回归正常流。APOGEE 的悬挂对象围绕明确支点走有限弧线。短登录页沿用同品牌视线或三层景观,不加长或固定表单。
动态只在正常精细指针、足够宽高且可见时增强。触屏、中间宽度、系统减少动态效果、无脚本或模块失败保留完整静态阅读;离屏和后台停止不必要帧,返回时按当前位置恢复。原生滚动不被接管。没有装饰调参或播放面板,没有循环跑马灯,没有以普通淡入替代页面主效果。
原创静态图形与真实状态
每套四个图形独立绘制,不把品牌、换色、尺寸、形变端点或第三方图形重复计数。几何语言分别是正交节点、桶节与叶片、圆拱与缝合、尖角折面、偏心悬线。全部接入现有 Icon 目录及实际复制和下载能力。
原生 details 的展开/收起使用 Morphicons 官方项目既有同源 DOM 版本 1.7.1,许可 MIT。createMorph 显式设置 reducedMotion: "user",关闭或离屏时落到真实状态端点;静态 SVG 在增强前可见。官方版本只负责状态插值,二十个原创图形不来自其示例图标。模块不可用时保留原生详情操作与静态加减端点。
集中修复与检查边界
首轮实际画面暴露连环经线转轴相同、主体比例偏小以及英语页面的中文可访问名称。集中修复转轴、放大媒体并统一文字。逐页看桌面、平板、手机、中间宽度、计算字号 200% 及下方章节;懒加载图只有在进入视口并解码后才能断言加载完成,不能用首屏未请求的图片制造失败。保留首次截图与问题记录。
直接进入章节时,浏览器先按静态布局定位,而增强布局随后增加固定叙事高度,可能把目标推到视口外。首次增强完成后对已有章节锚点做一次确定定位;从浏览器页面缓存返回时保留当前位置,不能再次跳回最初锚点。最终直接进入、刷新和缩窄检查分别保留证据。
独立源码归档的根页路径要从原始子路由一次性解析,不能连续拼接多个相对替换。图片可见只能证明一部分:还应实际检查模块、图纸选择、详情状态与登录校验。首个较短等待的空闲采样仍出现帧调度,原失败保留;等待状态稳定后,六个实际原生页面在零输入的800ms采样内没有帧调度。
登录页只做字段格式、显隐、焦点与不可用状态;没有真实认证服务,没有假 token、凭据日志或存储,没有发送账号密码。下载是用户主动产生的真实文件,笔记只留在当前页面。认证、支付、消息及设备均 unavailable,组件测试不能代替真实业务联调。
本篇仅使用项目创作与公开参考,没有扫描私人 Vault、导出个人 Skills 正文、凭据或本机路径。既有批准资料与文章保留。实体设备、Safari/Firefox、原生操作系统文字放大、Lighthouse 和帧率测量仍未执行;浏览器模拟结果只覆盖已记录的引擎与输入。代码、视觉、浏览器、CI 和正式域名分别保存证据;发布状态以本批目标 SHA、CI 和正式域名验收为准。