Goodnotes / V357
产品演变回顾
固定品牌名的位置，让图标、版本号和产品后缀接力变化，最后回归纯粹的主品牌。
构图与编排 可播放 · 可替换内容
整体编排规则示例
查看 HTML 源码
<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>产品演变回顾 · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#e5f3f5}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="sequence"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>画面元素应用图标固定名称版本数字产品后缀浅蓝光晕
MOTION LANGUAGE
动作与构图
局部动作 · 构图规则
01
变化集中在版本槽位
变化集中在版本槽位规则示例
查看 HTML 源码
<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>产品演变回顾 · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#e5f3f5}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="clip" data-start="0" data-end="8.7"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>名称与图标按同一基线排列，版本数字连续替换，更新字标后再出现产品档位。每次长度变化以中心整体平衡，避免主名称左右跳动。
02
浅背景上保持字形连续
浅蓝微光衬托黑色圆润无衬线字，更新段可短暂使用青蓝渐层。图标尺寸统一，版本与后缀比主名称轻，最终品牌留足空白。
03
适合产品升级与系列回顾
替换历史版本、图标和档位名称，保持可辨的主名称。最后一版的停留长于早期快切，让演变有明确终点。
SEQUENCE
段落与节奏
点击段落，定位到上方编排示意。
画面参考 · 离散静帧
KEEP THE RELATIONSHIPS
制作其他主题
- 替换历史版本、图标和档位名称，保持可辨的主名称。最后一版的停留长于早期快切，让演变有明确终点。
制作约束
应用图标 / 固定名称 / 版本数字 / 产品后缀 / 浅蓝光晕
- 固定品牌名的位置，让图标、版本号和产品后缀接力变化，最后回归纯粹的主品牌。
- 名称与图标按同一基线排列，版本数字连续替换，更新字标后再出现产品档位。每次长度变化以中心整体平衡，避免主名称左右跳动。
- 浅蓝微光衬托黑色圆润无衬线字，更新段可短暂使用青蓝渐层。图标尺寸统一，版本与后缀比主名称轻，最终品牌留足空白。