学习笔记 · Friends 创作复盘
五种阅读空间:从印面、玻璃到针迹
AFTERHOURS、mossroom、pip!、TACK 与 MOTIF 是五套概念原创品牌。每套由八个职责不同的 Web 章节、同品牌登录页、四枚独立 UI 图形构成;品牌标志与导出风格另计。主要操作是选择原创文件或下载当前文字,没有新增认证、支付、消息或设备服务。
先从结构决定差异
| 品牌 | 结构与材料 | 真实操作 | 页面动效 |
|---|---|---|---|
| AFTERHOURS | 小型居中标题、大幅暗室陈列、非等宽媒体、开放档案行、浅层技术面板 | 选择三种原创印面并下载,编辑收藏笔记 | 陈列背景、印面、前台三层视差 |
| mossroom | 衬线双轨首屏、玻璃瓶剖面、非等高地表、横向层级和开放笔记 | 选择两种绿瓶构图,导出观察 | 玻璃、植物与前方瓶口的分层视差 |
| pip! | 蓝色左右巨字、黄色印章角色、单页短笺、工具长行和横条收尾 | 写问候并下载真实文本 | 印章眼球跟随指针,密码聚焦避开 |
| TACK | 窄竖品牌轨、宽针迹表面、框与布分层、两条针迹带和开放路径表 | 选择紫色或锈色针迹SVG,记录路径 | 有限固定段把框、表面和针线分开,反向归位 |
| MOTIF | 错位花形长卷、三个全宽印面章节、原生选择与交错注释 | 选择单花、重复或裁边纹样 | 三个章节依序覆盖;登录花形视线跟随 |
跨套差异来自首屏、网格、章节排列、正文层级、材料、图标和主要行动。登录页保留本品牌的字体、颜色、笔画、表面和语气。比较最近三十套的相近结构,并保留实际画面证据,不使用哈希代替视觉判断。
参考需要观察稳定画面
AFTERHOURS 观察了源铺 Orengo 详情及其公开预览的居中标题、宽幅媒体、细边暗面、左右文字与媒体比例、下半页密度和分组结尾。原预览包含影像和服务陈述;本套采用原创矢量印面与真实本地文件操作。没有购买模板,没有复制付费代码、照片、商标、客户评价或业务数据。
初次截图工具超时,原始错误保留。浏览器现场观察必须等待入场完成;刚滚到一节时的黑色画面不算该节的完整参考。手机通过源铺详情页的公开手机预览观察,避免把未生效的视口设置误记成手机截图。
动效是有边界的输入响应
图形以独立 SVG 组组织。视差由背景、中景与前景的不同幅度位移表达;一张普通卡片倾斜不算景观视差。眼球有边界,离开指针平稳回正,密码聚焦只改变角色朝向。针迹结构在有限滚动区间分层,章节覆盖受父容器约束。移动端和系统减少动态效果使用静态完整图形与正常文档流。
监听由页面组件持有。输入变化才请求一帧;离屏、后台和离页清理无用帧与监听,返回按当前滚动位置重挂一次。没有播放入口、装饰调参、无限循环或用假成功驱动状态。
说明使用原生 details/summary。Morphicons 官方库继续使用既有固定 1.7.1 MIT DOM 入口和同源依赖,显式 reducedMotion: "user"。加减端点随真实展开状态改变;库失败时原生折叠和静态 SVG 保留。这些状态端点不占二十枚原创图标名额。
文件和服务应说清实际发生的事
选择框改变图片、文件链接和当前说明。笔记下载读取此刻的文本,生成真实文件;内容只留在当前页。未接认证的表单在拦截器就绪前禁用,校验邮箱格式、密码长度与显隐;合格输入清空后给出登录当前不可用的反馈。没有凭据请求、存储、令牌或虚假登录结果。
生态瓶是构图练习,不是种植处方;针迹 SVG 是视觉样本,不是机器刺绣文件。印面与纹样下载不包含印刷订单。只更新本项目公开复盘和明确资料清单,不扫描私人 Vault,不导出个人技能正文、凭据或本机路径。
验收记录
本地必要验收通过:104项既有测试(含16项知识边界);十页189项浏览器检查由整批确认与12项无脚本/手机复查共同覆盖;90项中间宽度、计算字号放大与图像失败,27项解码/形变/锚点,72项实际Chrome后台及BFCache,80次目录SVG/PNG下载和40次SVG复制。实际查看全页、8章、手机、表单状态与图标16/24/32浅深背景;对13个近似历史页面做15组比较。3,235个HTML与63,914项资源/锚点引用没有缺失。发布和正式域名仍分别记录,未执行项不写作通过。真实服务、实体设备、Safari/Firefox、浏览器原生字号设置和性能评分不以 Chrome 模拟代替。
首轮集中修复:手机移除视觉换行后保留单词间空格;把两个登录场景恢复为窄屏完整静态图形;笔记按钮在提交拦截器就绪后才启用,无脚本提供真实空白下载;修正一个绣框图标顶端留边和纸面焦点对比。检测中的正常文档流relative、零位移与空transform、原生平滑锚点等待、复制状态元素选择器等工具判断错误保留原始记录并单独确认,没有当作页面功能失败。
放大文字要实看,不能只检查横向溢出。第二轮发现1024px下三套的长词被拆成片段;扩大中间宽度单列阅读区,并把滚动固定的CSS/JS阈值统一到1200px。初次推送发生在这项视觉复核之前,不能作为完整published证明;最终发布须跟随修正提交另行验收。