学习笔记 · Friends 创作复盘
五种动效,五种阅读方式
本轮将字体、港湾、小事清单、纸模型与桌面路线分别做成一个完整的静态产品世界。每套包含八个职责不同的主体板块、配对登录页和四个独立原创图标。二十个图形各自输出线性与双色 SVG、透明 PNG;品牌标记和尺寸导出另计。
从结构区分作品
KERN 用巨大字标建立识别,再让三张字体画幅随滚动依次叠放。后半段从字距和基线进入构件、方法、项目简报与下载。与已有 MONOFORM 的桌面部件相比,它把文字作为对象,主要操作是填写并下载项目简报。配对登录页把表单与立体活字分置两侧,指针只产生轻微空间偏移。
BREAKWATER 以原创微缩港湾铺满首屏。水陆交界、设施长行、三条观察路线、停驻留白和比较表形成长短不同的阅读节奏。筛选直接改变路线条目,港湾 SVG 和观察纸可以下载。它与 ATLAS 的地图数据界面、STRATUM 的器物摄影有明显不同:所有港湾形状均为原创示意插画,页面明确说明不能用于导航。登录页沿用同一港湾,但缩成靠近表单的景窗。
pebble 把一块有眼睛的橘色石头放在中轴上。三项任务清单、大小任务对照、当下与稍后、完成后的留白、整理方法和文件保存构成主体。眼神跟随指针,内容输入始终在正常页面流中。与 MARGIN 的长文编辑不同,清单只允许三条,支持完成、删除和真实文本下载,刷新后清空。登录页把角色放在表单上方,密码聚焦时眼神收起。
HINGE 使用蓝色工程纸与黄色连接点。有限的固定区域让三个折面随着阅读分开,滚回时重新合拢;之后进入山折与谷折、线型比较、制作步骤与纸模型下载。它与 KINETIC 的工业场景不同,核心内容是可打印的纸张练习,页面不声称具备制造公差或承载能力。登录页将折面拟人化,保持独立于正文的表单阅读区。
ROAM 将窄索引、圆形棋盘与衬线标题排成三轨。棋子沿地图外围随着有限滚动改变位置,后续从目标、地点进入两条路线、规则、双人讲故事与下载。内环地图有三个编号站点,外环地图有五个,文件内容与选择文案一致。它与 FIELDWORK 的自然标本检索不同,主任务是带走一份可以实际使用的桌面路线。登录页使用两张叙事卡片,输入表单保留正常顺序。
动效由阅读和状态触发
五种处理分别是章节卡片叠放、微缩场景视差、眼神跟随、固定区重组与角色环绕。它们不依赖自动无限循环。指针和滚动按需请求一帧,离屏移除变换,页面进入后台取消待执行帧,回来后根据当前位置恢复。触屏不要求悬停;窄屏固定区与叠卡回到正常流。系统减少动效设置将装饰变换归零,但不影响内容、导航、选择和下载。
每套网站的原生折叠说明由真实展开状态驱动加减号变形。实现使用固定版本、自托管的 Morphicons DOM 模块,保留 MIT 许可并显式设置用户减少动效策略。库加载失败时,原生 details 仍然可读可用,符号采用静态回退;应用不引入 React、远程 CDN 或动画设置面板。
文件内容和服务边界也是设计的一部分
一次修正来自 ROAM:两条路线不能只用同一张图换虚线。最终文件分别标出三个与五个站点,并明确编号顺序,让下载真正兑现页面说明。另一处是 HINGE 的重复插画:同页复用 SVG 图案时必须为定义分配独立 ID,避免引用意外指向另一幅图。
登录页没有接通认证服务。脚本加载前禁用字段,加载后只做本地格式校验;合格输入返回真实的服务不可用反馈并清空密码,不生成 token、不跳转成功、不写入浏览器存储,也不发送凭据。页面隐藏或离开时清空输入。任务与简报文件由用户主动下载,内容仅在当前页面内处理。
维护和验证边界
页面继续使用原生 HTML、CSS 与 JavaScript,沿用既有 CSP、安全响应头和静态发布流程。主内容在 HTML 中可见;字体或动效资源缺失时仍能阅读。图标库继续提供真实搜索、复制与下载。只有明确列入构建白名单的页面、图片、脚本和许可文件进入公开产物,创作脚本、截图、状态夹具和审阅记录留在源码与内部归档。
验收覆盖桌面、平板、手机的布局和实际操作,并分别检查本地校验、真实下载、键盘、触屏、减少动效、离屏与后台恢复、无脚本和资源失败。浏览器验证只代表实际检查过的环境;认证、支付、预约等未连接的服务没有作为成功业务验收。发布状态由目标提交的工作流结果与正式域名检查共同确认,不能仅凭本地构建判断。
参考与原创边界
结构参考来自 Yuanpu 的 Mono 与 Fleet 实际预览:前者的大字与留白、后者的全幅画面与底部信息层次,用于研究信息关系。没有复制它们的模板源码、照片、字体或品牌资源。五套品牌标记、场景、下载图与二十个图标均在本项目中独立绘制。