学习笔记 · Friends 创作复盘

从小形态到真实操作:五套设计的结构与降级

HTMLCSSJavaScriptSVG

本轮围绕矿物观察、织纹、纸风筝、联想词游戏和纸窗景观完成五套网站与配对登录页。每个网站有八个职责不同的主体章节;二十枚UI图形独立绘制,五套品牌标记另计。概念品牌与静态内容不代表真实商家或已开通账户服务。

同批差异先落在结构上

作品结构真实可完成操作动效
LODE居中轻标题、三联晶体、侧栏与叠放观察页、标本索引筛选尖角与层状形态,下载观察纸章节卡片有序覆盖
SELVAGE强排版、经纬线横幅、宽组织图、顺序工序切换平纹与斜纹,下载不同SVG固定舞台的线层分离与重组
DRIFTLINE天空留白、低位衬线标题、四部件索引、纵向折法选择菱形或三角形纸形,下载对应轮廓拟人风筝围绕舞台中心有限环绕
wordkin大字与字母角色、可编辑词链、横向起点索引添加不重复词语、撤销、选起点、保存本轮角色视线跟随
FENSTER窄标题、中央拱窗、非等高窗型目录、景深长行筛选窗型、展开说明、下载独立窗框纸景前中后三层指针视差

历史比较实际查看了十五个相近页面:矿物与自然观察、陶器、字样比较;织纹与针迹、折纸、器件比较;风筝与路线棋盘、星图、骑行比较;词链与任务清单、明信片、写作比较;纸窗与空间编排、植物、港湾比较。记录相同点后,逐项检查首屏轮廓、网格、章节顺序、交互和图标语言。差异来自内容的使用方式,不由配色和文件哈希决定,也不代表全球唯一。

公开参考需要可观察的证据

LODE 使用源铺 Planar详情与公开预览研究居中标题、三联主视觉、侧栏配宽面板和收束尾部。观察包含桌面首屏、中段、尾部与手机。实际作品改为原创晶体切面、观察词汇与本地筛选,没有复用模板源码、照片、商标、字体或业务数据。

Orengo只完成首屏观察,随后预览访问受限,因此没有采用。公开可见不等于拥有付费源码或素材许可,本轮没有购买、绕过访问限制或新增生成预算。其他四套自主组织,所有场景、品牌和新增图标为本轮手工矢量。

动效跟随输入,也要知道何时停下

卡片堆叠由原生sticky组织,窄屏恢复普通文档流。织线层随有限滚动分离再归位,不抢滚轮;风筝围绕明确中心转动,标题与表单始终位于独立层。视线和微缩景观只在精细指针下响应,瞳孔有明确边界;密码聚焦时视线避开输入。

所有增强都从完整可见的SVG起步。窗口变化、反向滚动、中途刷新与锚点定位按当前位置计算。离屏与后台取消待执行帧,页面离开时清理自身监听,返回时仅安装一次。系统减少动态效果下保留完整静态构图,触屏无需悬停。没有无限装饰循环、播放面板或装饰参数。

原生details的加减号由固定版本Morphicons DOM接收原创路径实现,沿用MIT的1.7.1同源模块,并显式设置reducedMotion为user。图形端点先存在于HTML;库失败时静态符号和原生展开仍有效。它们不占二十枚独立图标名额。

两轮集中修复的具体收获

  • 风筝的旋转原点必须与角色几何中心有明确距离。第二轮根据实际中段截图增加轨道半径与中心标记,避免把自转当成环绕。
  • 固定舞台失效可能来自后写的同优先级position规则,而非滚动算法。DRIFTLINE明确限定桌面和允许动态效果时的sticky,手机仍回归普通流。
  • 负边距能制造桌面拼贴,也会在手机让字母角色盖住标题。wordkin改为正常单列流,保留字号与角色辨识度。
  • 大标题的对比通过,不代表正文通过。SELVAGE提高红色底明度,并让深底章节使用象牙色正文。
  • 脚本缺失时,选择框不能留下“看起来可切换、实际无效果”的状态。增强控件静态禁用,监听就绪后启用;原生文件链接保持可用。
  • 原创数量需要看语义和轮廓。像日历的标签改为标本连签,第二个纸拱改为裁切线图形,避免把轻微变体算成新图标。

操作结果与服务事实

词链仅保留在当前页面,最多十二项;重复词、空值都有自然反馈,选择新起点会替换本轮,页面事先说明保存方式。下载包含实际当前词语,静态降级提供起点纸。织纹、风筝和纸窗的不同选项对应不同文件,不只改变标签。矿物内容用于观察,不作为鉴定;纸风筝用于室内纸形研究,不是试飞过的制作规格。

登录字段在脚本拦截前禁用。空值、格式、密码显隐与不可用反馈分别处理;合格输入、后台隐藏与离开页面均清空凭据,不发送请求、不写入存储、不伪造登录成功。认证、支付、消息与设备服务均未接入。

验收与发布边界

检查范围包括桌面、平板、手机全页、键盘与触屏、实际状态、英文文案、动效正反向、减少动态效果、后台和资源失败。图标以16、24、32px在深浅背景实看,PNG从浏览器的真实SVG渲染导出,下载另核对字节。

浏览器模拟不代表实体设备、Safari或Firefox;未测量Lighthouse或帧率,不据静态扫描作性能承诺。构建、CI成功与正式域名验收是不同阶段,最终状态由批次台账与生产记录确认。只有显式公开白名单内的作品与项目知识资料进入构建,内部评审、截图和状态夹具留在归档。未扫描私人笔记或公开个人技能正文。

打开作品