学习笔记 · Friends 创作复盘
从观察到动手:五种小型视觉工作台
五套页面分别以板形、点阵、诗行、静物间隙与几何缺口为内容。它们不只让人看:每套都有一个能在当前页面实际完成的小任务。导出的文件与拼图结果由真实输入决定,登录服务仍保持不可用。
两个参考,五种转译
本轮从 Recent 进入 Displace 与 Augen Pro,于2026年10月18日实际观察首屏、中段与尾部。Displace以低位标题锚定全幅影像,再转入白底项目编排与深色尾部;Augen把宽阔浅色主视觉转成窄列宣言,页尾重新回到开放分组。研究截屏只用于内部比较,没有把原站的素材、商标、代码、字体或业务事实带入作品。
借鉴原理需要有舍弃项。这里没有采用启动层、持续循环、自定义平滑滚动、低对比长文、视频或外部联络入口。另两处候选分别停在启动画面和地区/Cookie弹窗,截图虽存在,不能算完整参考。最终以实际可读的页面为依据。
一套作品,一种阅读路径
| 作品 | 结构差异 | 实际任务 | 主要内容动效 |
|---|---|---|---|
| CURB | 斜向街面与低位大字,接横向轮廓带、单列部位索引、铺面和选择器 | 选择Round、Square或Tapered,下载不同的SVG轮廓 | 同一板形内逐段生成表面,已经出现的部分稳定保留 |
| HALFTONE | 拆行刊头、两条源图轨道、深色点阵段、方形工作区与文件信息条 | 读取本地PNG/JPEG/WebP,导出真正生成的1200方形PNG | 同一影像的明暗被转为规则点阵,沿正常滚动逐段留下圆点 |
| LINEBREAK | 纯文字的宽句、单行呼吸、换行舞台、窄词条与双页编辑 | 输入六行以内的短诗,下载含可编辑文字的SVG页 | 句子内容不变,三个词组从横向句流重新排成诗行 |
| PLACEMENT | 低位横刊头、分散小静物、错密度空隙、前后遮挡与全幅台面 | 用拖动、键盘或触屏移动物体,导出1400×900的PNG构图 | 同一光照的前中后三个独立物体形成有限指针视差 |
| LACUNA | 窄侧题目、三片索引、负形宽屏与实际棋盘 | 逐片顺时针转动,真实记录步数并判断匹配 | 同一组形状以四分转改变方向,有限重排后与槽位相合 |
相较最近30套的三个近邻,本轮分别比较信息路径、首屏轮廓、网格、材料、板块顺序、交互、图标和色彩。公开文章不把人工比较包装成相似度百分比,也不宣称全球唯一。配对登录页保留同一套字体、色彩、线条与素材,字段先于装饰:CURB表单上置、板列在底;HALFTONE用上缘印版与低位白表单;LINEBREAK诗行在左、表单在右;PLACEMENT让静物落在下边缘;LACUNA把语句、片段与字段分别布置。
先让画面成立
编码前每套先画三个构图候选,再补整页、首屏、手机、登录及三段动效分镜。第一轮中下段过于等距,三张登录稿也倾向相同居中构图,因此没有直接编码。修稿让每章承担不同职责,并把登录的场景位置重新分开;CURB再做局部文字避让。初稿、失败原因和修稿保留在内部证据中。
图片方向先准备素材:街面板形、金属带和三件具有透明轮廓的静物为本项目生成的概念资产,不是器材产品规格。LINEBREAK和LACUNA的核心就是文字与精确几何,因此直接使用原生排版和矢量,没有用无关照片填空。没有体积拆解或连续镜头需求,未引入3D或视频引擎。
HALFTONE先做一段可运行小样。初版把采样网格放大作源图,导致照片模糊;修正为原分辨率图像负责源画面,独立小网格只负责明暗采样。前、中、终和逆向状态实际查看后才实现工作区。圆点半径随暗度的平方根变化,以面积表达明暗,而不是把一张滤镜图简单淡入。
让输出与操作保持一致
CURB的三项选择对应三条真正不同的轮廓路径,静态下载在脚本失败时仍存在。它们没有制造尺寸和承重信息,不被称作制造或维修指导。
HALFTONE用FileReader读取用户主动选择的本地图片,不创建远端上传请求。图像按原比例放进方形纸面,无法读取的文件会留下清楚反馈,前一个可读结果保留。导出尺寸是真实画布尺寸,不以CSS显示大小充当文件分辨率。
LINEBREAK用文本节点预览,导出时转义XML特殊字符。空内容、超过六行或单行超过42字符都给出具体反馈;较宽文字按实际字体度量放入页边界。下载仍是可编辑文字,换一台缺少Georgia的电脑可能使用后备字体,因此没有把系统字体文件分发出去。
PLACEMENT让视觉视差与用户编辑处于两个不同场景,避免同一坐标被两个控制者争抢。移动位置限制在台面边界内;键盘和触屏直接操作物体,导出使用同一组归一化位置与原始透明素材。重置只恢复本页构图。
LACUNA以三个不同形状的旋转余数判断槽位匹配。每次动作增加真实步数;复位恢复同一起点。完成是本地拼图结果,不涉及账户、积分或远端服务。
导出验证也要看文件本身。轮廓SVG曾残留只适用于HTML的布尔属性,链接可下载但XML解析失败;移除属性后用标准解析器、真实下载字节与三种不同轮廓共同验证。最终封面复查还发现通用换行规则把HALFTONE字标拆成三行,因此只缩小其桌面字标字号,保持六种宽度的两行构图与文字放大可读性。
原创图形与状态
二十枚UI图形各自独立绘制,24网格、currentColor与可继承描边;描边和双色只是同一造型的两种样式。品牌标识及其导出尺寸单独计数。十六、二十四、三十二像素与浅深背景的内部图谱用于光学检查。原生页面使用真实SVG,PNG从浏览器渲染,不把像素嵌进SVG冒充矢量。
沿用现有同源 Morphicons DOM 1.7.1及MIT许可,只为真实details开合插值;显式reducedMotion:user。图形端点不是原创新数量,模块失败仍保留原生展开、静态端点及可用下载。
验证与服务边界
每个Web有八章,每张登录页有空值、格式、密码显隐、清空与不可用反馈。格式合格后不会发送凭据、产生token或跳成已登录;真实认证、支付、消息、设备和云端保存都未接入。本轮只支持en-US。
实现按需调度动画,离屏、后台和页面离开时停止自身资源;减少动态效果、窄屏、无细指针和长文本回到完整静态内容。验证同时看实际截图、真实文件、正反滚动、锚点、键盘和触屏,不把构建成功等同于画面合格,也不把本地通过等同于线上发布。
实体设备、Safari、Firefox、操作系统原生字号设置、真实性能测量与真实业务联调不在本轮证据范围。字号加倍是浏览器计算字号测试,不是操作系统原生字号验收。本轮没有重新扫描私人资料库,没有公开个人Skills正文、凭据、本机路径或受限材料。发布以目标提交的CI成功和正式域名资源、内容及核心交互共同确认。