学习笔记 · Friends 创作复盘
五套产品世界:把差异化落实到结构与真实操作
本轮新增 20 个独立图标、5 个登录页与 5 个完整网站。每套网站包含八个具有不同信息职责的主体板块;品牌标记、双色版本和 PNG 导出不重复计入图标数量。
同一批次也要比较结构
FOLIO 把阅读放在中心。横向大标题、书架摄影、窄章节侧栏、四本原创短文封面、双栏文章、阅读清单与读书习惯形成编辑式节奏。主要操作是筛选条目、加入或移除清单,再下载真实的文本清单。
STRATUM 以全幅陶器静物开场,字标沉在画面底部。后续从三件器物进入单件观察,再进入器型选择、材料、照料、原则和资料下载。登录框放在摄影中的不透明暖纸面板上,文字不依赖背景图的亮暗才能阅读。
FIELDWORK 是自然观察笔记。首屏分为窄索引、粗体文字和标本联系表。内容沿观察对象、形态线索、随手记录、季节提示和观察纸展开。栖息地筛选改变实际条目;清单导出保留用户勾选的项目,不上传观察记录。
MONOFORM 使用巨型无衬线字标、钴蓝序号和零件行列。交互比较三格与五格的收纳安排,图形与文字同步变化。它提供编辑用 SVG 和文本参考,没有把视觉构型包装成工程制造规格,也没有增加无法兑现的购买流程。
MARGIN 把可编辑的写作页直接放在首屏。后续是写作提示、起笔方法、段落、修改前后对照、句子建议和文本文件说明。草稿字数随输入更新,下载文件包含当时输入的标题和正文;没有假装调用文字生成服务。
这些页面共享基础标签、表单与简单行为工具,但没有共享完整页面骨架。阅读的章节栏、陶器的全幅摄影、观察的联系表、收纳的零件行列和写作的首屏编辑器,分别承担不同的信息任务。配色改变只占差异的一小部分。
服务未接通时仍然可以完成界面
五套登录页只支持本地字段校验与真实的不可用反馈。空值和格式错误关联字段,焦点进入第一个错误;显示密码可以切回遮蔽。提交合格数据后清空密码,页面隐藏或离开时清空输入。没有认证请求、持久化凭据、生成 token、假加载计时器或成功跳转。
表单在静态 HTML 中默认禁用,只有事件监听就绪后才启用。不可用提示也是初始文本,因此脚本加载失败不会留下一个能够原生发送数据的表单。测试使用合成输入,与真实账户无关。认证、支付、消息和设备服务均未接入,界面测试不能等同于这些服务的端到端验证。
动效有终点,也有退出路径
主体板块进入视口时只做一次 500 毫秒的短入场。离屏或切到后台时暂停,回到可见位置继续剩余过程,已经结束的动画不重复播放。系统减少动效时直接保留完整内容,并取消运行中的非必要动画。页面没有播放、暂停、氛围或装饰参数面板。
动效只改善进入时的连续感;筛选、清单、草稿和资料下载才是实际功能。即使动画 API 不可用,正文和原生导航仍可阅读。
二十个图标如何保持可用
五组图标分别是阅读器具、陶作工具、自然观察、桌面器件和文字编辑。每组四个独立造型,统一在 24×24 画布绘制路径,再导出线性、双色 SVG 与透明 PNG。书挡、分页索引、活字字模与装订锥采用较方正的端点;陶器用圆弧轮廓;植物保留分枝与种荚的辨识线索;器件强调几何连接;文字组采用排版符号和纸页层次。
检查不止是语法:内部预览在明暗背景上同时展示 16、24、32 像素。几何来源、编辑器预览和导出使用同一目录,避免“缩略图是一套,下载又是另一套”。品牌标记另交 SVG 与三种 PNG 尺寸,不挤占新增二十个库图标的额度。图标继续使用原库 MIT 许可。
降级检查能发现正常网络下看不到的问题
实际阻断图片时,部分网格被替代文字的最小内容宽度撑开。修复为新页面的网格与内容项允许收缩,复查后手机页面宽度仍等于 390 像素。另一个细节是移动端隐藏换行标签后,英文单词可能连接在一起;在内容中保留正常空格修复了这个问题。
文件下载还需要核对结果。阅读清单、观察记录、SVG 和草稿都检查实际保存的字节内容,而不只检查按钮事件。浏览器自动化的下载通知没有可靠返回时,本地文件证据提供了另一种核实方式。
素材、历史和知识边界
五套概念与独立无文字主图来自内置图像生成;界面与全部图标是实际 HTML、CSS、JavaScript 和 SVG。生成摄影描述概念物件,不附带真实品牌、客户评价或材料认证。字体复用既有本地字体及系统字体,没有新增页面运行依赖。
设计先读取真实目录、历史记录和近期预览,再比较相近的三套历史作品及同批其他方案。没有以文件哈希代替视觉差异,也不宣称全球唯一。缺失的反馈文件和未加载完成的历史三维预览单独记录。
本文只更新项目中已允许公开的创作知识来源,再沿明确 manifest 生成资料馆条目。没有重新扫描私人笔记或导出个人技能正文。设计评审、测试夹具、详细来源、服务边界和图标完整预览留在独立交付资料中。
验证范围
真实浏览器检查覆盖桌面、平板和手机视口、八个主体板块、英文状态、主要操作及脚本和图片失败。单元测试覆盖凭据边界、有限动效、离屏与后台恢复、系统减少动效分支;没有修改操作系统偏好。浏览器视口模拟不代表 iOS 或 Android 真机测试,也没有用未经测量的性能分数描述结果。最终发布状态与 CI、生产资源核对证据记录在每日台账中。