学习笔记 · Friends 创作复盘

从一针到一页:五套内容驱动的画面

HTMLCSSJavaScriptSVG

这批由五个独立设计约定开始:百马的设备与创作世界、WILDING 的观察手记、SLICE 的厨房食谱、FABLET 的故事页、SILT 的器物观察。每套是一个八章以上的 Web 页面、一个同品牌登录页、四枚独立原创 UI 图形;品牌标识、颜色与导出尺寸分别计数。

先看真实参考,再决定画面

从 Recent 进入三个原站,实际查看首屏、中段、尾部与滚动结果。Shopify Design 用巨字提出立场,随后让错落媒体提供证据,尾部聚焦单一行动。百马吸收的是文字、媒体与留白的主次,设备和内容来自自己的事实源。

Bécane 当次可见首页是横向人物收藏索引,随后转为窄幅宣言;它并非我们预想的大图开场。SLICE 从物件间距得到食材清单与动作章节的节奏,SILT 把观察主体和说明的密度分开。Gregor Collienne 保持固定姓名,让多尺度照片穿过同一视觉坐标。WILDING 把远景收进有限观察窗,FABLET 在稳定的夜林中让视线参与写作引导。没有复制原站照片、文案、付费代码、商标、客户或数据;部分参考视频不可播放,不能把画面观察写成全部动效验收。

三种简洁构图草案与选中整页、首屏、登录、手机、三帧动效分镜先于产品代码。去色后比较首屏轮廓、网格和章节组织,再比较字体、材质与动作;技术通过不能代替这个判断。

五个思想,五种阅读方式

作品核心思想与结构实际内容操作
100HORSE连续象牙布面、炭黑字、朱红针迹;四款设备章使用不同尺度与构图,接软件、支持及生态浏览经核对的官方产品、图案、软件与服务入口
WILDING全幅想象山谷、窄文字、有限观察窗、开放田野记录记录看见与听见的细节,下载文字
SLICE巨字刊头、明亮桌面、食材行与切/调味/上桌三个覆盖章节选择薄荷或罗勒,下载对应食谱与厨房笔记
FABLET夜林全景、居中衬线、角色索引和窄阅读列读原创短篇,写自己的开头与转折并下载
SILT宽字标、陶器静物、层层泥条与口沿/壁/底足观察填写并下载自己的器物卡

同批结构与历史近似作品分别比较。百马与 TACK、SELVAGE、MARROW 的区别来自完整设备叙事、连续材料、跨尺度转场、产品章节尺度和官方出口;WILDING 与 CANOPY、FATHOM、COURT 的区别是全幅地景、有限观察窗、非路线内容与开放记录;SLICE 与 FOLDBAY、STILL、SETLIST 的区别是刊头、食材行、操作章节与配方选择;FABLET 与 ODDMENT、NIM、softspot 的区别是完整夜林、窄阅读、原创新叙事与写作路径;SILT 与 LODE、VITRA、HELIO 的区别是完整静物、泥条生成、口沿索引、材质观察和器物卡。缩略图与近期实际页面首、中、尾分别保存,未编造相似度百分比。

百马:真实设备先于转场

事实源是 100HORSE 与 Institch。EOC06 对家庭创作者,MIRROR 对初创绣坊,VISION 对帽饰服装业务,VISION-2 对考虑双头设备的团队。设备章链接到对应官方页,不复制价格、产量、效率或服务承诺。Institch 只介绍已见的图案、制版师与软件入口,不表演未经验证的编辑、同步、文件发送或设备控制。

素材文件名不能证明身份:一个看似通用的图片是软件截图,另一个是机身铸件,两者都被排除。最终展示完整官方设备图,保留原机头、屏幕和支架;格式转换与缩放不改变产品结构。

首个转场小样失败在粗线和悬浮绣框。修正后针在布面平面处遮挡,只有经过的路径出现固定针迹,当前针位置和最大已完成进度分别计算。原路反向可以移动针和镜头,已经留下的线不拆除。绣框、针迹与官方 EOC06 共用坐标,拉远后保持对应位置。第二次画面审查发现折布背景重复拼接,改为连续的细棉织纹;针迹改为实际品牌字形的细线轮廓,避免普通波浪线冒充内容生成。

这是设计叙事与二维分层增强,不是机械工程模拟,也没有修改或部署两个公司官网。

动效与降级

每个 Web 与登录分别定义 motion_spec。有限针迹揭示、观察窗重排、章节覆盖、猫头鹰视线、泥条成形由内容决定;普通淡入不充数。登录保留短页输入任务,边缘微缩场景或有限视线不遮挡表单。窄屏取消固定章节,粗指针与系统减少动态效果保留静态内容。离屏不更新对象,后台停止调度,恢复读取当前位置;无输入时不设持续帧循环。

原生 details 的真实展开/收起使用既有 Morphicons DOM 1.7.1,同源固定版本、MIT 许可,显式 reducedMotion: "user"。二十个新增图形独立绘制,第三方状态插值不计入原创;无脚本和模块失败后仍有静态符号及原生操作。

文字放大后的修复

200%计算字号的实际截图暴露了WILDING标题落到深色山体、窄屏Welcome拆词与显隐按钮不足的问题。窄屏图文改为自然文档流,表单标题重新定标、按钮随字段长高;百马手机标题收紧响应式字号,保证加倍后单词完整。SLICE与SILT的装饰刊头用本套SVG字标,实际标题与正文仍是可选择的HTML。WILDING标注从景中三处汇成右侧有序列,内容重组与观察窗相互解释。

验证与服务边界

代码、实际视觉、浏览器状态、构建、CI 和正式域名分别留证。检查覆盖桌面、平板、手机、中间宽度、计算字号加倍、真实本地下载、密码显隐与清空、空值和格式错误、不可用反馈、触屏/键盘、减少动态效果、无脚本及资源失败。实体设备、Safari/Firefox、系统原生字号设置、真实业务联调与帧率测量未执行时明确记为 not-run,不给出性能分数。

登录没有真实认证接口,不发送或持久化输入、不生成 token、不伪造成功或服务判定的凭据错误。认证、支付、消息及设备均 unavailable。笔记仅在当前文档中,下载由用户发起。公开图片分别为本次生成场景与用户指定的官方品牌资产,系统字体文件不复制,许可和事实限制各自记录。

本篇来自项目创作与公开参考,没有重新扫描私人 Vault、导出个人 Skills 正文、凭据或本机绝对路径。内部设计稿、review、状态夹具及归档不进入公开构建。只有目标 SHA 的 CI 成功且真实域名内容、资源、安全头和核心操作验收通过,才记录 published。